@yoobic/yobi 8.5.0-4 → 8.5.0-40

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -1,6 +1,6 @@
 import { FormFieldType } from '@shared/interfaces';
 import { closeModal, dateAdd, dateFormat, dateSub, endOf, getHours, getMinutes, getModalAnimation, getRoundedMinutes, getSession, is24Hour, isAndroid, isDateAfter, isIOS, isNativeMobile, isWeb, pipes, setDateHours, setDateMinutes, showModal, startOf, translate } from '@shared/utils';
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { isArray } from 'lodash-es';
 import { getAppContext, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 import { convertValueForInputType, getTimeDisplayValue, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
@@ -34,9 +34,6 @@ export class YooFormDateTimeComponent {
     calendar.classList.add('calendar-picker', this.type);
     calendar.style.backgroundColor = this.host.classList.contains('condition-block') ? 'stable-light' : null;
     calendar.style.minHeight = isWeb(this.host) ? undefined : 'unset';
-    if (this.selectedMinHours) {
-      this.value = dateAdd(new Date(), 'hour', this.selectedMinHours);
-    }
     calendar.isRange = this.isRange;
     calendar.size = this.size;
     calendar.isDatePicker = true;
@@ -67,6 +64,9 @@ export class YooFormDateTimeComponent {
     this.timePicker = time;
     return time;
   }
+  async onValueChanged() {
+    await validate(this, this.value);
+  }
   handleClickOutside(event) {
     if (this.dialog && !event.composedPath().includes(this.dialog)) {
       closeModal(null, this.dialog);
@@ -96,13 +96,14 @@ export class YooFormDateTimeComponent {
     }
   }
   componentDidLoad() {
+    var _a;
     if (this.autofocus && this.inputField) {
       this.inputField.click();
     }
     // If the component has external validators and has a value on load
     // it must validate after the component has loaded to retrieve the
     // external value from the external validator component
-    if (this.value && this.externalValidators && this.externalValidators.length > 0) {
+    if (this.value && ((_a = this.externalValidators) === null || _a === void 0 ? void 0 : _a.length)) {
       validate(this, this.value);
     }
   }
@@ -152,15 +153,18 @@ export class YooFormDateTimeComponent {
   }
   async onInputClick(ev) {
     ev.stopPropagation();
-    const defaultValue = new Date();
-    const prevMinutes = defaultValue.getMinutes();
-    const minutes = getRoundedMinutes(defaultValue, this.timeStep);
-    defaultValue.setMinutes(+minutes, 0, 0);
-    const newMinutes = defaultValue.getMinutes();
-    if (newMinutes === 0 && prevMinutes !== newMinutes) {
-      defaultValue.setHours(defaultValue.getHours() + 1);
+    if (!this.value) {
+      const value = new Date();
+      const oldMinutes = value.getMinutes();
+      const newMinutes = getRoundedMinutes(value, this.timeStep);
+      value.setMinutes(+newMinutes, 0, 0);
+      if (newMinutes === 0 && oldMinutes !== newMinutes) {
+        value.setHours(value.getHours() + 1);
+      }
+      this.selectedMinHours > 0 && value.setHours(value.getHours() + this.selectedMinHours);
+      this.value = this.isRange ? [value] : value;
+      setValueAndValidateInput(this.value, this);
     }
-    this.value = this.value || (this.isRange ? [defaultValue] : defaultValue);
     await this.onToggle(ev);
   }
   onClearClicked(event) {
@@ -296,7 +300,7 @@ export class YooFormDateTimeComponent {
       }
     }
   }
-  onTriggerOCR() {
+  async onTriggerOCR() {
     if (!this.isShowingOcr) {
       this.isShowingOcr = true;
       let dialog = document.createElement('yoo-form-barcode-dialog');
@@ -304,19 +308,16 @@ export class YooFormDateTimeComponent {
       dialog.mainMode = 'ocr';
       const scannedSuccessListener = (ev) => {
         this.isShowingOcr = false;
-        if (ev && ev.detail) {
+        if (ev === null || ev === void 0 ? void 0 : ev.detail) {
           setValueAndValidateInput(ev.detail, this);
           this.value = ev.detail;
         }
         closeModal(null, dialog);
       };
       dialog.addEventListener('scannedSuccess', scannedSuccessListener);
-      showModal(dialog).then(() => {
-        if (dialog) {
-          dialog.removeEventListener('scannedSuccess', scannedSuccessListener);
-          dialog = null;
-        }
-      });
+      await showModal(dialog);
+      dialog.removeEventListener('scannedSuccess', scannedSuccessListener);
+      dialog = null;
     }
   }
   renderInputField() {
@@ -324,18 +325,7 @@ export class YooFormDateTimeComponent {
     return (h("input", { name: "datetime", class: this.isNativeMobileDatePicker ? 'native' : '', readonly: true, ref: (el) => (this.inputField = el), placeholder: !this.placeholdertolabel ? translate(this.placeholder) : '', value: displayValue, required: this.required, onInput: () => this.onInputChanged(), onFocus: () => onInputFocused(this, '.outer-container'), onClick: (ev) => this.onInputClick(ev), tabindex: this.inputTabIndex }));
   }
   renderNativeInput() {
-    return (h("div", { ref: (el) => (this.outerContainer = el), class: "outer-container" },
-      this.iconPrefix && (h("div", { class: "icon-prefix", onClick: (ev) => this.onInputClick(ev) },
-        h("yoo-icon", { name: this.iconPrefix, size: this.getIconSize() }))),
-      h("div", { class: "input-container flex" }, this.renderInputField()),
-      this.validity === false && (h("div", { class: "icon-suffix invalid" },
-        h("yoo-icon", { name: "rejected", size: this.getIconSize(), color: "danger" }))),
-      !this.isEmpty && this.clearable && (h("div", { class: "icon-suffix clear", onClick: (ev) => this.onClearClicked(ev) },
-        h("yoo-icon", { name: "cross", size: this.getIconSize() }))),
-      this.allowOcr && getSession().hasScandit && (h("div", { class: "icon-suffix ocr", onClick: () => this.onTriggerOCR() },
-        h("yoo-icon", { name: "camera", size: this.getIconSize() }))),
-      !isNativeMobile() && (h("div", { class: "icon-suffix toggle", onClick: (event) => this.onToggle(event) },
-        h("yoo-icon", { name: this.customDatePickerArrow, size: this.getIconSize() })))));
+    return (h("div", { ref: (el) => (this.outerContainer = el), class: "outer-container" }, this.iconPrefix && (h("div", { class: "icon-prefix", onClick: (ev) => this.onInputClick(ev) }, h("yoo-icon", { name: this.iconPrefix, size: this.getIconSize() }))), h("div", { class: "input-container flex" }, this.renderInputField()), this.validity === false && (h("div", { class: "icon-suffix invalid" }, h("yoo-icon", { name: "rejected", size: this.getIconSize(), color: "danger" }))), !this.isEmpty && this.clearable && (h("div", { class: "icon-suffix clear", onClick: (ev) => this.onClearClicked(ev) }, h("yoo-icon", { name: "cross", size: this.getIconSize() }))), this.allowOcr && getSession().hasScandit && (h("div", { class: "icon-suffix ocr", onClick: () => this.onTriggerOCR() }, h("yoo-icon", { name: "camera", size: this.getIconSize() }))), !isNativeMobile() && (h("div", { class: "icon-suffix toggle", onClick: (event) => this.onToggle(event) }, h("yoo-icon", { name: this.customDatePickerArrow, size: this.getIconSize() })))));
   }
   renderReadonly() {
     return h("div", { class: "readonly" }, this.getReadOnlyValue());
@@ -345,553 +335,573 @@ export class YooFormDateTimeComponent {
   }
   static get is() { return "yoo-form-date-time"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-date-time.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-date-time.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'date'"
-    },
-    "validators": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "(Validator<string> | IValidatorEntry)[]",
-        "resolved": "(IValidatorEntry | Validator<string>)[]",
-        "references": {
-          "Validator": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IValidatorEntry": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-date-time.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-date-time.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'date'"
+      },
+      "validators": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "(Validator<string> | IValidatorEntry)[]",
+          "resolved": "(IValidatorEntry | Validator<string>)[]",
+          "references": {
+            "Validator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IValidatorEntry": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "externalValidators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IExternalValidator[]",
-        "resolved": "IExternalValidator[]",
-        "references": {
-          "IExternalValidator": {
-            "location": "import",
-            "path": "@shared/interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "externalValidators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IExternalValidator[]",
+          "resolved": "IExternalValidator[]",
+          "references": {
+            "IExternalValidator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "placeholdertolabel": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholdertolabel",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "minDate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "placeholdertolabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholdertolabel",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "minDate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "maxDate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "maxDate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "selectedMinHours": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-min-hours",
-      "reflect": false
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "step",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "isSchedule": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-schedule",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isRange": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-range",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "allowOcr": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-ocr",
-      "reflect": false
-    },
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "format",
-      "reflect": false
-    },
-    "extraClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "extra-class",
-      "reflect": false
-    },
-    "autofocus": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "autofocus",
-      "reflect": false
-    },
-    "inputTabIndex": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "input-tab-index",
-      "reflect": false
-    },
-    "useISOString": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "use-i-s-o-string",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "validity": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "validity",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TBaseSize",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "TBaseSize": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "selectedMinHours": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-min-hours",
+        "reflect": false
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "isSchedule": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-schedule",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isRange": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-range",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "allowOcr": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-ocr",
+        "reflect": false
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format",
+        "reflect": false
+      },
+      "extraClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "extra-class",
+        "reflect": false
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "autofocus",
+        "reflect": false
+      },
+      "inputTabIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-tab-index",
+        "reflect": false
+      },
+      "useISOString": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-i-s-o-string",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "validity": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "validity",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TBaseSize",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "TBaseSize": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "isNativeMobileDatePicker": {},
-    "isNativeMobileDatePickerOpen": {},
-    "customDatePickerArrow": {}
-  }; }
-  static get events() { return [{
-      "method": "validityChanged",
-      "name": "validityChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputChanged",
-      "name": "inputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "iconClicked",
-      "name": "iconClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
       }
-    }]; }
-  static get methods() { return {
-    "getElement": {
-      "complexType": {
-        "signature": "() => Promise<this>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "isNativeMobileDatePicker": {},
+      "isNativeMobileDatePickerOpen": {},
+      "customDatePickerArrow": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "validityChanged",
+        "name": "validityChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<this>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "inputBlurred",
+        "name": "inputBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputFocused",
+        "name": "inputFocused",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "iconClicked",
+        "name": "iconClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getElement": {
+        "complexType": {
+          "signature": "() => Promise<this>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<this>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClickOutside",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValueChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClickOutside",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }