@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/components/date-picker/utils.js

@@ -1,8 +1,6 @@
-import { ZDatePickerMode, ZDatePickerModeValues, ZDatePickerPosition, } from "../../beans";
+import { ZDatePickerMode, ZDatePickerModeValue, ZDatePickerPosition } from "../../beans";
 export function validateDate(dateStr, hasTime = false) {
-  const regex = hasTime
-    ? /^\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4} - \d{2}:\d{2}$/
-    : /^\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4}$/;
+  const regex = hasTime ? /^\d{1,2}[/-]\d{1,2}[/-]\d{2,4} - \d{2}:\d{2}$/ : /^\d{1,2}[/-]\d{1,2}[/-]\d{2,4}$/;
   if (dateStr.match(regex) === null) {
     return false;
   }
@@ -11,28 +9,26 @@ export function validateDate(dateStr, hasTime = false) {
 export function setFlatpickrPosition(element, mode) {
   const toggleHeight = element.children[0].clientHeight;
   element.style.setProperty("--z-range-picker--toggle-height", `${toggleHeight}px`);
-  const flatpickrHeight = mode === ZDatePickerMode.dateTime
-    ? ZDatePickerModeValues.DATETIME
-    : mode === ZDatePickerMode.months
-      ? ZDatePickerModeValues.MONTHS
-      : ZDatePickerModeValues.DATE;
+  const flatpickrHeight = mode === ZDatePickerMode.DATE_TIME
+    ? ZDatePickerModeValue.DATE_TIME
+    : mode === ZDatePickerMode.MONTHS
+      ? ZDatePickerModeValue.MONTHS
+      : ZDatePickerModeValue.DATE;
   const bottom = element.getBoundingClientRect().bottom;
   const overflowBottom = bottom + flatpickrHeight > window.innerHeight;
   const overflowTop = bottom - flatpickrHeight - toggleHeight < 0;
   if (!overflowTop && overflowBottom) {
-    return ZDatePickerPosition.top;
-  }
-  else {
-    return ZDatePickerPosition.bottom;
+    return ZDatePickerPosition.TOP;
   }
+  return ZDatePickerPosition.BOTTOM;
 }
 export function setAriaOptions(element, mode) {
-  let calendar = element.getElementsByClassName("flatpickr-calendar");
+  const calendar = element.getElementsByClassName("flatpickr-calendar");
   Array.from(calendar).forEach((element) => {
     element.setAttribute("tabindex", "0");
-    let prevMonthArrow = element.getElementsByClassName("flatpickr-prev-month")[0];
-    let nextMonthArrow = element.getElementsByClassName("flatpickr-next-month")[0];
-    let tabindexElements = element.querySelectorAll('[tabindex = "-1"]');
+    const prevMonthArrow = element.getElementsByClassName("flatpickr-prev-month")[0];
+    const nextMonthArrow = element.getElementsByClassName("flatpickr-next-month")[0];
+    const tabindexElements = element.querySelectorAll('[tabindex = "-1"]');
     tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
     Array.from(element.getElementsByClassName("flatpickr-day")).forEach((date) => {
       if (date.classList.contains("flatpickr-disabled")) {
@@ -43,16 +39,14 @@ export function setAriaOptions(element, mode) {
     nextMonthArrow.setAttribute("tabindex", "0");
     prevMonthArrow.setAttribute("role", "button");
     nextMonthArrow.setAttribute("role", "button");
-    element
-      .getElementsByClassName("cur-year")[0]
-      .setAttribute("aria-label", "Anno");
-    if (mode === ZDatePickerMode.date) {
+    element.getElementsByClassName("cur-year")[0].setAttribute("aria-label", "Anno");
+    if (mode === ZDatePickerMode.DATE) {
       setDateAriaOptions(element, prevMonthArrow, nextMonthArrow);
     }
-    if (mode === ZDatePickerMode.dateTime) {
+    if (mode === ZDatePickerMode.DATE_TIME) {
       setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);
     }
-    if (mode === ZDatePickerMode.months) {
+    if (mode === ZDatePickerMode.MONTHS) {
       setMonthsAriaOptions(element, prevMonthArrow, nextMonthArrow);
     }
   });
@@ -60,27 +54,19 @@ export function setAriaOptions(element, mode) {
 function setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
   Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
   Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
-  calendar
-    .getElementsByClassName("flatpickr-monthDropdown-months")[0]
-    .setAttribute("aria-label", "Mese");
+  calendar.getElementsByClassName("flatpickr-monthDropdown-months")[0].setAttribute("aria-label", "Mese");
   prevMonthArrow.setAttribute("aria-label", "Mese precedente");
   nextMonthArrow.setAttribute("aria-label", "Mese successivo");
 }
 function setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
   Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
   Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
-  calendar
-    .getElementsByClassName("flatpickr-monthDropdown-months")[0]
-    .setAttribute("aria-label", "Mese");
+  calendar.getElementsByClassName("flatpickr-monthDropdown-months")[0].setAttribute("aria-label", "Mese");
   prevMonthArrow.setAttribute("aria-label", "Mese precedente");
   nextMonthArrow.setAttribute("aria-label", "Mese successivo");
   Array.from(calendar.getElementsByClassName("time24hr")).forEach((element) => element.setAttribute("tabindex", "-1"));
-  calendar
-    .getElementsByClassName("flatpickr-hour")[0]
-    .setAttribute("aria-label", "Ora");
-  calendar
-    .getElementsByClassName("flatpickr-minute")[0]
-    .setAttribute("aria-label", "Minuti");
+  calendar.getElementsByClassName("flatpickr-hour")[0].setAttribute("aria-label", "Ora");
+  calendar.getElementsByClassName("flatpickr-minute")[0].setAttribute("aria-label", "Minuti");
 }
 function setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
   Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-months")).forEach((element) => element.setAttribute("tabindex", "-1"));

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -1,20 +1,16 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
-import classNames from "classnames";
-import { InputTypeEnum, ZDatePickerMode, ZDatePickerPosition, } from "../../../beans";
+import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans";
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
   constructor() {
     /** [Optional] datepicker mode: date, datetime, only months */
-    this.mode = ZDatePickerMode.date;
-    this.flatpickrPosition = ZDatePickerPosition.bottom;
+    this.mode = ZDatePickerMode.DATE;
+    this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
     this.inputError = false;
   }
-  watchMode() {
-    this.setupPickers();
-  }
   emitDateSelect(date) {
     this.dateSelect.emit(date);
   }
@@ -25,28 +21,26 @@ export class ZDatePicker {
     }
     if (ev.key === "Enter" || ev.key === " ") {
       !this.hasChildren && ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.open());
-      let isCrossIconEntered = document.activeElement.classList.contains("resetIcon");
+      const isCrossIconEntered = document.activeElement.classList.contains("reset-icon");
       if (isCrossIconEntered) {
         this.inputError = false;
         (_c = this.picker) === null || _c === void 0 ? void 0 : _c.setDate([]);
         this.dateSelect.emit(null);
       }
-      let flatpickrDayPressed = document.activeElement.classList.contains("flatpickr-day");
+      const flatpickrDayPressed = document.activeElement.classList.contains("flatpickr-day");
       if (flatpickrDayPressed) {
         //Sistemare il toggle
       }
-      let isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
-      let isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
-      let arrowPressed = isPrevArrowEntered || isNextArrowEntered;
+      const isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
+      const isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
+      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;
       arrowPressed && ev.key === " " && ev.preventDefault();
-      if (this.mode === ZDatePickerMode.months) {
-        isPrevArrowEntered &&
-          ((_d = this.picker) === null || _d === void 0 ? void 0 : _d.changeYear(this.picker.currentYear - 1));
-        isNextArrowEntered &&
-          ((_e = this.picker) === null || _e === void 0 ? void 0 : _e.changeYear(this.picker.currentYear + 1));
+      if (this.mode === ZDatePickerMode.MONTHS) {
+        isPrevArrowEntered && ((_d = this.picker) === null || _d === void 0 ? void 0 : _d.changeYear(this.picker.currentYear - 1));
+        isNextArrowEntered && ((_e = this.picker) === null || _e === void 0 ? void 0 : _e.changeYear(this.picker.currentYear + 1));
         if (arrowPressed) {
-          let calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
-          let months = calendar === null || calendar === void 0 ? void 0 : calendar.querySelectorAll(".flatpickr-monthSelect-month");
+          const calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
+          const months = calendar === null || calendar === void 0 ? void 0 : calendar.querySelectorAll(".flatpickr-monthSelect-month");
           months === null || months === void 0 ? void 0 : months.forEach((element) => {
             var _a;
             element.setAttribute("aria-label", `${element.innerHTML} ${(_a = this.picker) === null || _a === void 0 ? void 0 : _a.currentYear}`);
@@ -55,8 +49,8 @@ export class ZDatePicker {
           months &&
             Array.from(months).forEach((element, index) => {
               var _a;
-              let curMonth = new Date().getMonth();
-              let curYear = new Date().getFullYear();
+              const curMonth = new Date().getMonth();
+              const curYear = new Date().getFullYear();
               if (index === curMonth) {
                 if (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.currentYear) === curYear) {
                   element.setAttribute("class", "flatpickr-monthSelect-month today");
@@ -75,7 +69,7 @@ export class ZDatePicker {
     }
   }
   componentWillLoad() {
-    let customToggle = this.element.querySelector("[slot=toggle]");
+    const customToggle = this.element.querySelector("[slot=toggle]");
     this.hasChildren = !!customToggle;
     this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
   }
@@ -83,17 +77,16 @@ export class ZDatePicker {
     this.setupPickers();
   }
   setupPickers() {
-    const classToAppend = this.hasChildren
-      ? `${this.datePickerId}-hidden`
-      : `${this.datePickerId}-container`;
+    const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;
     this.picker = flatpickr(`.${classToAppend}`, {
       appendTo: this.element.children[0],
-      enableTime: this.mode === ZDatePickerMode.dateTime,
+      enableTime: this.mode === ZDatePickerMode.DATE_TIME,
       locale: Italian,
       allowInput: true,
-      dateFormat: this.mode === ZDatePickerMode.dateTime ? "d-m-Y - H:i" : "d-m-Y",
-      ariaDateFormat: this.mode === ZDatePickerMode.months ? "F Y" : "d F Y",
+      dateFormat: this.mode === ZDatePickerMode.DATE_TIME ? "d-m-Y - H:i" : "d-m-Y",
+      ariaDateFormat: this.mode === ZDatePickerMode.MONTHS ? "F Y" : "d F Y",
       minuteIncrement: 1,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       time_24hr: true,
       onChange: (_selectedDates, dateStr) => {
         this.emitDateSelect(dateStr);
@@ -106,7 +99,7 @@ export class ZDatePicker {
         setAriaOptions(this.element, this.mode);
       },
       wrap: true,
-      plugins: this.mode === ZDatePickerMode.months && [
+      plugins: this.mode === ZDatePickerMode.MONTHS && [
         monthSelectPlugin({
           dateFormat: "m-Y",
           altFormat: "m-Y",
@@ -118,27 +111,23 @@ export class ZDatePicker {
     });
   }
   formatDate(date) {
-    if (this.mode === ZDatePickerMode.date) {
+    if (this.mode === ZDatePickerMode.DATE) {
       return `${flatpickr.formatDate(date, "d-m-Y")}`;
     }
-    else if (this.mode === ZDatePickerMode.months) {
+    else if (this.mode === ZDatePickerMode.MONTHS) {
       return `${flatpickr.formatDate(date, "m-Y")}`;
     }
-    else {
-      return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
-    }
+    return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
   }
   onStopTyping(value) {
     let text = value.detail.value;
-    if (this.mode === ZDatePickerMode.months) {
+    if (this.mode === ZDatePickerMode.MONTHS) {
       text = "01-".concat(value.detail.value);
     }
-    let englishData = text.split("-");
-    let time = this.mode === ZDatePickerMode.dateTime ? `T${englishData[3]}:00` : "";
-    let englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`
-      .split(" ")
-      .join("");
-    let isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.dateTime);
+    const englishData = text.split("-");
+    const time = this.mode === ZDatePickerMode.DATE_TIME ? `T${englishData[3]}:00` : "";
+    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(" ").join("");
+    const isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.DATE_TIME);
     if (text === "") {
       this.inputError = false;
       this.picker.setDate([]);
@@ -158,14 +147,18 @@ export class ZDatePicker {
     return (h("div", { class: `${this.datePickerId}-hidden` }, h("input", { class: "hidden-input", "data-input": true }), h("slot", { name: "toggle" })));
   }
   renderZInput() {
-    return (h("div", { class: `${this.datePickerId}-container` }, h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: classNames(this.datePickerId), type: InputTypeEnum.text, icon: "event", message: false, tabindex: "0", value: "", onStopTyping: (value) => {
+    return (h("div", { class: `${this.datePickerId}-container` }, h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: this.datePickerId, type: InputType.TEXT, icon: "event", message: false, tabindex: "0", value: "", onStopTyping: (value) => {
         this.onStopTyping(value);
       }, onStartTyping: () => {
         this.inputError = false;
       } })));
   }
   render() {
-    return (h("div", { class: classNames("flatpickr-toggle-container", this.flatpickrPosition, this.mode) }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
+    return (h("div", { class: {
+        "flatpickr-toggle-container": true,
+        [this.flatpickrPosition]: true,
+        [this.mode]: true,
+      } }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
   }
   static get is() { return "z-date-picker"; }
   static get originalStyleUrls() {
@@ -236,7 +229,7 @@ export class ZDatePicker {
         "mutable": false,
         "complexType": {
           "original": "ZDatePickerMode",
-          "resolved": "ZDatePickerMode.date | ZDatePickerMode.dateTime | ZDatePickerMode.months",
+          "resolved": "ZDatePickerMode.DATE | ZDatePickerMode.DATE_TIME | ZDatePickerMode.MONTHS",
           "references": {
             "ZDatePickerMode": {
               "location": "import",
@@ -252,7 +245,7 @@ export class ZDatePicker {
         },
         "attribute": "mode",
         "reflect": false,
-        "defaultValue": "ZDatePickerMode.date"
+        "defaultValue": "ZDatePickerMode.DATE"
       }
     };
   }
@@ -284,7 +277,7 @@ export class ZDatePicker {
   static get watchers() {
     return [{
         "propName": "mode",
-        "methodName": "watchMode"
+        "methodName": "setupPickers"
       }];
   }
   static get listeners() {

package/dist/collection/components/date-picker/z-range-picker/index.js

@@ -1,39 +1,34 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
-import { ZRangePickerMode, ZDatePickerPosition, InputTypeEnum, InputStatusEnum, } from "../../../beans";
+import { ZRangePickerMode, ZDatePickerPosition, InputType, InputStatus } from "../../../beans";
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZRangePicker {
   constructor() {
     /** [Optional] datepicker mode: date or datetime */
-    this.mode = ZRangePickerMode.date;
-    this.flatpickrPosition = ZDatePickerPosition.bottom;
+    this.mode = ZRangePickerMode.DATE;
+    this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
     this.activeInput = "start-input";
     this.firstInputError = false;
     this.lastInputError = false;
   }
-  watchMode() {
-    this.setupPickers();
-  }
   handleClick() {
     this.getFocusedInput();
   }
   handleKeyDown(ev) {
     var _a, _b, _c, _d, _e, _f;
-    let currentPicker = this.activeInput === "start-input" ? this.firstPicker : this.lastPicker;
+    const currentPicker = this.activeInput === "start-input" ? this.firstPicker : this.lastPicker;
     this.getFocusedInput();
     if (ev.key === "Escape") {
-      document.activeElement.classList.contains(`${this.rangePickerId}-1`) &&
-        ((_a = this.firstPicker) === null || _a === void 0 ? void 0 : _a.close());
-      document.activeElement.classList.contains(`${this.rangePickerId}-2`) &&
-        ((_b = this.lastPicker) === null || _b === void 0 ? void 0 : _b.close());
+      document.activeElement.classList.contains(`${this.rangePickerId}-1`) && ((_a = this.firstPicker) === null || _a === void 0 ? void 0 : _a.close());
+      document.activeElement.classList.contains(`${this.rangePickerId}-2`) && ((_b = this.lastPicker) === null || _b === void 0 ? void 0 : _b.close());
     }
     if (ev.key === "Enter" || ev.key === " ") {
       if (document.activeElement.classList.contains(`${this.rangePickerId}-1`) ||
         document.activeElement.classList.contains(`${this.rangePickerId}-2`)) {
         currentPicker === null || currentPicker === void 0 ? void 0 : currentPicker.open();
       }
-      let isCrossIconEntered = document.activeElement.classList.contains("resetIcon");
+      const isCrossIconEntered = document.activeElement.classList.contains("reset-icon");
       if (isCrossIconEntered) {
         if (this.activeInput === "start-input") {
           this.firstInputError = false;
@@ -46,9 +41,9 @@ export class ZRangePicker {
           this.printDate(((_f = this.firstPicker) === null || _f === void 0 ? void 0 : _f.selectedDates[0]) || null, null);
         }
       }
-      let isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
-      let isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
-      let arrowPressed = isPrevArrowEntered || isNextArrowEntered;
+      const isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
+      const isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
+      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;
       arrowPressed && ev.key === " " && ev.preventDefault();
       isPrevArrowEntered && (currentPicker === null || currentPicker === void 0 ? void 0 : currentPicker.changeMonth(-1));
       isNextArrowEntered && (currentPicker === null || currentPicker === void 0 ? void 0 : currentPicker.changeMonth(1));
@@ -58,19 +53,20 @@ export class ZRangePicker {
     this.setupPickers();
   }
   setupPickers() {
-    let config = {
-      enableTime: this.mode === ZRangePickerMode.dateTime,
+    const config = {
+      enableTime: this.mode === ZRangePickerMode.DATE_TIME,
       locale: Italian,
       allowInput: true,
       wrap: true,
-      dateFormat: this.mode === ZRangePickerMode.dateTime ? "d-m-Y - H:i" : "d-m-Y",
+      dateFormat: this.mode === ZRangePickerMode.DATE_TIME ? "d-m-Y - H:i" : "d-m-Y",
       ariaDateFormat: "d F Y",
       minuteIncrement: 1,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       time_24hr: true,
-      onValueUpdate: (_selectedDates, _dateStr, _instance) => {
-        let firstInputActive = this.activeInput === "start-input";
-        let firstDate = this.firstPicker.selectedDates[0];
-        let lastDate = this.lastPicker.selectedDates[0];
+      onValueUpdate: () => {
+        const firstInputActive = this.activeInput === "start-input";
+        const firstDate = this.firstPicker.selectedDates[0];
+        const lastDate = this.lastPicker.selectedDates[0];
         if (+firstDate > +lastDate) {
           if (firstInputActive) {
             this.firstInputError = true;
@@ -116,9 +112,9 @@ export class ZRangePicker {
     });
   }
   onDateSelect() {
-    let firstInputActive = this.activeInput === "start-input";
-    let firstDate = this.firstPicker.selectedDates[0];
-    let lastDate = this.lastPicker.selectedDates[0];
+    const firstInputActive = this.activeInput === "start-input";
+    const firstDate = this.firstPicker.selectedDates[0];
+    const lastDate = this.lastPicker.selectedDates[0];
     if (+firstDate > +lastDate) {
       if (firstInputActive) {
         this.firstInputError = true;
@@ -136,11 +132,11 @@ export class ZRangePicker {
     }
   }
   disableDates(date, index) {
-    let calendar = this.element.getElementsByClassName("flatpickr-calendar")[index];
+    const calendar = this.element.getElementsByClassName("flatpickr-calendar")[index];
     Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => {
-      let calendarDate = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));
-      let breakpoint = this.getDateWithoutTime(date);
-      let inRange = index === 0 ? calendarDate > breakpoint : calendarDate < breakpoint;
+      const calendarDate = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));
+      const breakpoint = this.getDateWithoutTime(date);
+      const inRange = index === 0 ? calendarDate > breakpoint : calendarDate < breakpoint;
       if (inRange) {
         element.classList.toggle("flatpickr-disabled", true);
       }
@@ -151,31 +147,25 @@ export class ZRangePicker {
     setAriaOptions(this.element, this.mode);
   }
   formatDate(date) {
-    if (this.mode === ZRangePickerMode.date) {
+    if (this.mode === ZRangePickerMode.DATE) {
       return `${flatpickr.formatDate(date, "d-m-Y")}`;
     }
-    else {
-      return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
-    }
+    return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
   }
   printDate(firstDate, lastDate) {
-    let firstDateString = firstDate ? this.formatDate(firstDate) : null;
-    let lastDateString = lastDate ? this.formatDate(lastDate) : null;
+    const firstDateString = firstDate ? this.formatDate(firstDate) : null;
+    const lastDateString = lastDate ? this.formatDate(lastDate) : null;
     this.dateSelect.emit([firstDateString, lastDateString]);
   }
-  getTime() {
-    let hour = this.element.getElementsByClassName("flatpickr-hour")[0].value;
-    let minutes = this.element.getElementsByClassName("flatpickr-minute")[0].value;
-    return `${hour}:${minutes}`;
-  }
   getDateWithoutTime(date) {
-    let newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0);
+    const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0);
     return newDate;
   }
   /** Replace month word to month number */
   replaceMonths(date, time) {
     const month = date.split(" ")[1];
     const months = {
+      /* eslint-disable @typescript-eslint/naming-convention */
       Gennaio: "01",
       Febbraio: "02",
       Marzo: "03",
@@ -188,6 +178,7 @@ export class ZRangePicker {
       Ottobre: "10",
       Novembre: "11",
       Dicembre: "12",
+      /* eslint-enable @typescript-eslint/naming-convention */
     };
     const pieces = date.replace(month, months[month]).split(" ");
     return new Date(parseInt(pieces[2]), parseInt(pieces[1]) - 1, parseInt(pieces[0]), time ? parseInt(time.split(":")[0]) : 0, time ? parseInt(time.split(":")[1]) : 0);
@@ -209,11 +200,11 @@ export class ZRangePicker {
   setRangeStyle(index) {
     Array.from(this.element.getElementsByClassName("flatpickr-calendar")).forEach((element) => {
       Array.from(element.getElementsByClassName("flatpickr-day")).forEach((element) => {
-        let hasFirstDate = this.firstPicker.selectedDates.length === 1;
-        let hasLastDate = this.lastPicker.selectedDates.length === 1;
+        const hasFirstDate = this.firstPicker.selectedDates.length === 1;
+        const hasLastDate = this.lastPicker.selectedDates.length === 1;
         let firstDate;
         let lastDate;
-        let date = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));
+        const date = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));
         if (hasFirstDate) {
           firstDate = this.getDateWithoutTime(this.firstPicker.selectedDates[0]);
           if (+date === +firstDate) {
@@ -250,14 +241,12 @@ export class ZRangePicker {
     });
   }
   onStopTyping(value) {
-    let text = value.detail.value.replace("/", "-");
-    let englishData = text.split("-");
-    let time = this.mode === ZRangePickerMode.dateTime ? `T${englishData[3]}:00` : "";
-    let englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`
-      .split(" ")
-      .join("");
-    let isValidDate = validateDate(text, this.mode === ZRangePickerMode.dateTime);
-    let date = Date.parse(englishParsedData).toString();
+    const text = value.detail.value.replace("/", "-");
+    const englishData = text.split("-");
+    const time = this.mode === ZRangePickerMode.DATE_TIME ? `T${englishData[3]}:00` : "";
+    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(" ").join("");
+    const isValidDate = validateDate(text, this.mode === ZRangePickerMode.DATE_TIME);
+    const date = Date.parse(englishParsedData).toString();
     if (this.activeInput === "start-input") {
       if (text === "") {
         this.firstInputError = false;
@@ -287,46 +276,42 @@ export class ZRangePicker {
         }
       }
     }
-    else {
-      if (text === "") {
-        this.lastInputError = false;
-        this.lastPicker.setDate([]);
-        this.printDate(this.firstPicker.selectedDates[0] || null, null);
-      }
-      else if (!isValidDate) {
-        this.lastInputError = true;
-        this.printDate(this.firstPicker.selectedDates[0] || null, null);
-      }
-      else if (isValidDate) {
-        if (this.firstPicker.selectedDates.length === 1) {
-          if (+date >= +this.firstPicker.selectedDates[0]) {
-            this.lastInputError = false;
-            this.lastPicker.setDate([text]);
-            this.printDate(this.firstPicker.selectedDates[0], new Date(englishParsedData));
-          }
-          else {
-            this.lastInputError = true;
-            this.printDate(this.firstPicker.selectedDates[0], null);
-          }
-        }
-        else {
+    else if (text === "") {
+      this.lastInputError = false;
+      this.lastPicker.setDate([]);
+      this.printDate(this.firstPicker.selectedDates[0] || null, null);
+    }
+    else if (!isValidDate) {
+      this.lastInputError = true;
+      this.printDate(this.firstPicker.selectedDates[0] || null, null);
+    }
+    else if (isValidDate) {
+      if (this.firstPicker.selectedDates.length === 1) {
+        if (+date >= +this.firstPicker.selectedDates[0]) {
           this.lastInputError = false;
           this.lastPicker.setDate([text]);
-          this.printDate(null, new Date(englishParsedData));
+          this.printDate(this.firstPicker.selectedDates[0], new Date(englishParsedData));
+        }
+        else {
+          this.lastInputError = true;
+          this.printDate(this.firstPicker.selectedDates[0], null);
         }
       }
+      else {
+        this.lastInputError = false;
+        this.lastPicker.setDate([text]);
+        this.printDate(null, new Date(englishParsedData));
+      }
     }
     this.setRangeStyle(this.activeInput === "start-input" ? 0 : 1);
   }
   render() {
     const zInputProps = {
-      type: InputTypeEnum.text,
+      type: InputType.TEXT,
       icon: "event",
       tabindex: "0",
       message: false,
-      onStopTyping: (value) => {
-        this.onStopTyping(value);
-      },
+      onStopTyping: this.onStopTyping.bind(this),
       value: "",
     };
     return (h("div", { class: {
@@ -334,9 +319,9 @@ export class ZRangePicker {
         [this.mode]: true,
         [this.activeInput]: true,
         [this.flatpickrPosition]: true,
-      } }, h("div", { class: `${this.rangePickerId}-1-wrapper` }, h("div", { class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatusEnum.error, onStartTyping: () => {
+      } }, h("div", { class: `${this.rangePickerId}-1-wrapper` }, h("div", { class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
         this.firstInputError = false;
-      } })))), h("div", { class: `${this.rangePickerId}-2-wrapper` }, h("div", { class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatusEnum.error, onStartTyping: () => {
+      } })))), h("div", { class: `${this.rangePickerId}-2-wrapper` }, h("div", { class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
         this.lastInputError = false;
       } }))))));
   }
@@ -443,7 +428,7 @@ export class ZRangePicker {
         "mutable": false,
         "complexType": {
           "original": "ZRangePickerMode",
-          "resolved": "ZRangePickerMode.date | ZRangePickerMode.dateTime",
+          "resolved": "ZRangePickerMode.DATE | ZRangePickerMode.DATE_TIME",
           "references": {
             "ZRangePickerMode": {
               "location": "import",
@@ -459,7 +444,7 @@ export class ZRangePicker {
         },
         "attribute": "mode",
         "reflect": false,
-        "defaultValue": "ZRangePickerMode.date"
+        "defaultValue": "ZRangePickerMode.DATE"
       }
     };
   }
@@ -493,7 +478,7 @@ export class ZRangePicker {
   static get watchers() {
     return [{
         "propName": "mode",
-        "methodName": "watchMode"
+        "methodName": "setupPickers"
       }];
   }
   static get listeners() {

package/dist/collection/components/file-upload/z-dragdrop-area/index.js

@@ -12,7 +12,7 @@ export class ZDragdropArea {
         this.dragDropContainer.classList.add("dragover");
       }, onDragLeave: () => {
         this.dragDropContainer.classList.remove("dragover");
-      }, onDragEnd: () => { }, onDrop: (e) => {
+      }, onDrop: (e) => {
         e.preventDefault();
         if (e.dataTransfer.files.length) {
           this.dragDropContainer.classList.remove("dragover");