Fix date-fns import

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-input",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "",
   "main": "tp-date-input.js",
   "scripts": {
@@ -13,8 +13,8 @@
   "author": "trading_peter",
   "license": "Apache-2.0",
   "dependencies": {
-    "date-fns": "^2.28.0",
-    "date-fns-tz": "^1.3.3",
-    "lit": "^2.2.0"
+    "date-fns": "^2.0.0",
+    "date-fns-tz": "^2.0.0",
+    "lit": "^3.0.0"
   }
 }

tp-date-input.js

@@ -10,7 +10,7 @@ import { EventHelpers } from '@tp/helpers/event-helpers.js';
 import { FormElement } from '@tp/helpers/form-element.js';
 import { LitElement, html, css } from 'lit';
 import { format, parse, parseISO, isAfter, isValid, endOfDay } from 'date-fns/esm';
-import { zonedTimeToUtc } from 'date-fns-tz/esm';
+import { zonedTimeToUtc } from 'date-fns-tz';
 import { closest } from '@tp/helpers';
 
 class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
@@ -181,7 +181,7 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
     super.firstUpdated();
     this.listen(this, 'input', '_autoMoveCursor');
 
-    const datepicker = this.querySelector('tp-datepicker');
+    const datepicker = this.querySelector('tp-date-picker');
     if (datepicker) {
       datepicker.addEventListener('value-changed', e => {
         this.value = e.detail;
@@ -378,8 +378,9 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
   _setClass(idx) {
     switch (this._inputAssign[idx]) {
       case 'dd':
+        return 'day';
       case 'MM':
-        return '';
+        return 'month';
       case 'y':
         return 'year';
     }
@@ -411,6 +412,10 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
       }
     }
 
+    if (this._inputAssign.length !== 3) {
+      console.error(this.tagname + ': Not all date parts where found. Make sure to have MM, dd, and y in your format string.');
+    }
+
     if (this.value) {
       this._onValueChanged();
     }
@@ -439,7 +444,7 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
 
     this.invalid = false;
 
-    if (this.value === null || this.value === undefined || this.value === 'Invalid date') {
+    if (this.value === null || this.value === undefined || this.value === 'Invalid date' || this.value === '') {
       this.date = null;
       this.value = null;
       this._input0 = '';