@zanichelli/albe-web-components 12.4.0 → 12.4.1

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

@@ -5,291 +5,293 @@ import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
 import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans";
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
-  constructor() {
-    /** z-input aria label */
-    this.ariaLabel = "";
-    /** [Optional] datepicker mode: date, datetime, only months */
-    this.mode = ZDatePickerMode.DATE;
-    this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
-    this.inputError = false;
-  }
-  emitDateSelect(date) {
-    this.dateSelect.emit(date);
-  }
-  handleKeyDown(ev) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (ev.key === "Escape") {
-      (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close();
-    }
-    if (ev.key === "Enter" || ev.key === " ") {
-      !this.hasChildren && ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.open());
-      const isCrossIconEntered = document.activeElement.classList.contains("reset-icon");
-      if (isCrossIconEntered) {
+    constructor() {
+        this.datePickerId = undefined;
+        this.ariaLabel = "";
+        this.label = undefined;
+        this.mode = ZDatePickerMode.DATE;
+        this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
         this.inputError = false;
-        (_c = this.picker) === null || _c === void 0 ? void 0 : _c.setDate([]);
-        this.dateSelect.emit(null);
-      }
-      const flatpickrDayPressed = document.activeElement.classList.contains("flatpickr-day");
-      if (flatpickrDayPressed) {
-        //Sistemare il toggle
-      }
-      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 (arrowPressed) {
-          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}`);
-          });
-          //Force check of the current day
-          months &&
-            Array.from(months).forEach((element, index) => {
-              var _a;
-              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");
-                }
-                else {
-                  element.setAttribute("class", "flatpickr-monthSelect-month");
+    }
+    emitDateSelect(date) {
+        this.dateSelect.emit(date);
+    }
+    handleKeyDown(ev) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (ev.key === "Escape") {
+            (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close();
+        }
+        if (ev.key === "Enter" || ev.key === " ") {
+            !this.hasChildren && ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.open());
+            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);
+            }
+            const flatpickrDayPressed = document.activeElement.classList.contains("flatpickr-day");
+            if (flatpickrDayPressed) {
+                //Sistemare il toggle
+            }
+            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 (arrowPressed) {
+                    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}`);
+                    });
+                    //Force check of the current day
+                    months &&
+                        Array.from(months).forEach((element, index) => {
+                            var _a;
+                            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");
+                                }
+                                else {
+                                    element.setAttribute("class", "flatpickr-monthSelect-month");
+                                }
+                            }
+                        });
                 }
-              }
-            });
+            }
+            else {
+                isPrevArrowEntered && ((_f = this.picker) === null || _f === void 0 ? void 0 : _f.changeMonth(-1));
+                isNextArrowEntered && ((_g = this.picker) === null || _g === void 0 ? void 0 : _g.changeMonth(1));
+            }
         }
-      }
-      else {
-        isPrevArrowEntered && ((_f = this.picker) === null || _f === void 0 ? void 0 : _f.changeMonth(-1));
-        isNextArrowEntered && ((_g = this.picker) === null || _g === void 0 ? void 0 : _g.changeMonth(1));
-      }
     }
-  }
-  componentWillLoad() {
-    const customToggle = this.element.querySelector("[slot=toggle]");
-    this.hasChildren = !!customToggle;
-    this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
-  }
-  componentDidLoad() {
-    this.setupPickers();
-  }
-  setupPickers() {
-    const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;
-    this.picker = flatpickr(`.${classToAppend}`, {
-      appendTo: this.element.children[0],
-      enableTime: this.mode === ZDatePickerMode.DATE_TIME,
-      locale: Italian,
-      allowInput: true,
-      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);
-      },
-      onOpen: () => {
-        setAriaOptions(this.element, this.mode);
-        this.flatpickrPosition = setFlatpickrPosition(this.element, this.mode);
-      },
-      onKeyDown: () => {
-        setAriaOptions(this.element, this.mode);
-      },
-      wrap: true,
-      plugins: this.mode === ZDatePickerMode.MONTHS && [
-        monthSelectPlugin({
-          dateFormat: "m-Y",
-          altFormat: "m-Y",
-        }),
-      ],
-    });
-    this.element.querySelectorAll(".flatpickr-weekday").forEach((element) => {
-      element.innerHTML = element.innerHTML.trim().charAt(0);
-    });
-  }
-  formatDate(date) {
-    if (this.mode === ZDatePickerMode.DATE) {
-      return `${flatpickr.formatDate(date, "d-m-Y")}`;
+    componentWillLoad() {
+        const customToggle = this.element.querySelector("[slot=toggle]");
+        this.hasChildren = !!customToggle;
+        this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
     }
-    else if (this.mode === ZDatePickerMode.MONTHS) {
-      return `${flatpickr.formatDate(date, "m-Y")}`;
+    componentDidLoad() {
+        this.setupPickers();
     }
-    return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
-  }
-  onStopTyping(value) {
-    let text = value.detail.value;
-    if (this.mode === ZDatePickerMode.MONTHS) {
-      text = "01-".concat(value.detail.value);
+    setupPickers() {
+        const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;
+        this.picker = flatpickr(`.${classToAppend}`, {
+            appendTo: this.element.children[0],
+            enableTime: this.mode === ZDatePickerMode.DATE_TIME,
+            locale: Italian,
+            allowInput: true,
+            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);
+            },
+            onOpen: () => {
+                setAriaOptions(this.element, this.mode);
+                this.flatpickrPosition = setFlatpickrPosition(this.element, this.mode);
+            },
+            onKeyDown: () => {
+                setAriaOptions(this.element, this.mode);
+            },
+            wrap: true,
+            plugins: this.mode === ZDatePickerMode.MONTHS && [
+                monthSelectPlugin({
+                    dateFormat: "m-Y",
+                    altFormat: "m-Y",
+                }),
+            ],
+        });
+        this.element.querySelectorAll(".flatpickr-weekday").forEach((element) => {
+            element.innerHTML = element.innerHTML.trim().charAt(0);
+        });
     }
-    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([]);
-      this.dateSelect.emit(null);
+    formatDate(date) {
+        if (this.mode === ZDatePickerMode.DATE) {
+            return `${flatpickr.formatDate(date, "d-m-Y")}`;
+        }
+        else if (this.mode === ZDatePickerMode.MONTHS) {
+            return `${flatpickr.formatDate(date, "m-Y")}`;
+        }
+        return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
     }
-    else if (!isValidDate) {
-      this.inputError = true;
-      this.dateSelect.emit(null);
+    onStopTyping(value) {
+        let text = value.detail.value;
+        if (this.mode === ZDatePickerMode.MONTHS) {
+            text = "01-".concat(value.detail.value);
+        }
+        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([]);
+            this.dateSelect.emit(null);
+        }
+        else if (!isValidDate) {
+            this.inputError = true;
+            this.dateSelect.emit(null);
+        }
+        else if (isValidDate) {
+            this.inputError = false;
+            this.picker.setDate([value.detail.value]);
+            this.dateSelect.emit(this.formatDate(new Date(englishParsedData)));
+        }
     }
-    else if (isValidDate) {
-      this.inputError = false;
-      this.picker.setDate([value.detail.value]);
-      this.dateSelect.emit(this.formatDate(new Date(englishParsedData)));
+    renderSlottedContent() {
+        return (h("div", { class: `${this.datePickerId}-hidden` }, h("input", { class: "hidden-input", "data-input": true }), h("slot", { name: "toggle" })));
     }
-  }
-  renderSlottedContent() {
-    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: 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: {
-        "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() {
-    return {
-      "$": ["../styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "datePickerId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "unique id"
-        },
-        "attribute": "date-picker-id",
-        "reflect": false
-      },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "z-input aria label"
-        },
-        "attribute": "aria-label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "z-input label"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ZDatePickerMode",
-          "resolved": "ZDatePickerMode.DATE | ZDatePickerMode.DATE_TIME | ZDatePickerMode.MONTHS",
-          "references": {
-            "ZDatePickerMode": {
-              "location": "import",
-              "path": "../../../beans"
+    renderZInput() {
+        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", { key: 'af246b77b4ca4c20b37de99ef7751d7f0a06ebd4', 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() {
+        return {
+            "$": ["../styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "datePickerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "unique id"
+                },
+                "attribute": "date-picker-id",
+                "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "z-input aria label"
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "z-input label"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ZDatePickerMode",
+                    "resolved": "ZDatePickerMode.DATE | ZDatePickerMode.DATE_TIME | ZDatePickerMode.MONTHS",
+                    "references": {
+                        "ZDatePickerMode": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::ZDatePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] datepicker mode: date, datetime, only months"
+                },
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "ZDatePickerMode.DATE"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "[Optional] datepicker mode: date, datetime, only months"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "ZDatePickerMode.DATE"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "flatpickrPosition": {},
-      "inputError": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dateSelect",
-        "name": "dateSelect",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "emitted when date changes, returns selected date"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "mode",
-        "methodName": "setupPickers"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "body",
-        "capture": true,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "flatpickrPosition": {},
+            "inputError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateSelect",
+                "name": "dateSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emitted when date changes, returns selected date"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "mode",
+                "methodName": "setupPickers"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "body",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/date-picker/z-date-picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, Element, h, EventEmitter, Event, Listen, State, Watch} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\nimport monthSelectPlugin from \"flatpickr/dist/plugins/monthSelect\";\nimport {InputType, ZDatePickerMode, ZDatePickerPosition} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-date-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZDatePicker {\n  @Element() element: HTMLZDatePickerElement;\n\n  /** unique id */\n  @Prop()\n  datePickerId: string;\n\n  /** z-input aria label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** z-input label */\n  @Prop()\n  label?: string;\n\n  /** [Optional] datepicker mode: date, datetime, only months */\n  @Prop()\n  mode: ZDatePickerMode = ZDatePickerMode.DATE;\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  inputError = false;\n\n  private picker;\n\n  private hasChildren: boolean;\n\n  /** emitted when date changes, returns selected date */\n  @Event()\n  dateSelect: EventEmitter;\n\n  private emitDateSelect(date): void {\n    this.dateSelect.emit(date);\n  }\n\n  @Listen(\"keydown\", {target: \"body\", capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Escape\") {\n      this.picker?.close();\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      !this.hasChildren && this.picker?.open();\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        this.inputError = false;\n        this.picker?.setDate([]);\n        this.dateSelect.emit(null);\n      }\n\n      const flatpickrDayPressed = document.activeElement.classList.contains(\"flatpickr-day\");\n      if (flatpickrDayPressed) {\n        //Sistemare il toggle\n      }\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      arrowPressed && ev.key === \" \" && ev.preventDefault();\n\n      if (this.mode === ZDatePickerMode.MONTHS) {\n        isPrevArrowEntered && this.picker?.changeYear(this.picker.currentYear - 1);\n\n        isNextArrowEntered && this.picker?.changeYear(this.picker.currentYear + 1);\n\n        if (arrowPressed) {\n          const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[0];\n          const months = calendar?.querySelectorAll(\".flatpickr-monthSelect-month\");\n          months?.forEach((element) => {\n            element.setAttribute(\"aria-label\", `${element.innerHTML} ${this.picker?.currentYear}`);\n          });\n\n          //Force check of the current day\n          months &&\n            Array.from(months).forEach((element, index) => {\n              const curMonth = new Date().getMonth();\n              const curYear = new Date().getFullYear();\n\n              if (index === curMonth) {\n                if (this.picker?.currentYear === curYear) {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month today\");\n                } else {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month\");\n                }\n              }\n            });\n        }\n      } else {\n        isPrevArrowEntered && this.picker?.changeMonth(-1);\n        isNextArrowEntered && this.picker?.changeMonth(1);\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    const customToggle = this.element.querySelector(\"[slot=toggle]\");\n    this.hasChildren = !!customToggle;\n    this.hasChildren && customToggle.setAttribute(\"data-toggle\", \"data-toggle\");\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;\n\n    this.picker = flatpickr(`.${classToAppend}`, {\n      appendTo: this.element.children[0] as HTMLElement,\n      enableTime: this.mode === ZDatePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      dateFormat: this.mode === ZDatePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: this.mode === ZDatePickerMode.MONTHS ? \"F Y\" : \"d F Y\",\n      minuteIncrement: 1,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      time_24hr: true,\n      onChange: (_selectedDates, dateStr) => {\n        this.emitDateSelect(dateStr);\n      },\n      onOpen: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element as HTMLElement, this.mode);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n      },\n      wrap: true,\n      plugins: this.mode === ZDatePickerMode.MONTHS && [\n        monthSelectPlugin({\n          dateFormat: \"m-Y\",\n          altFormat: \"m-Y\",\n        }),\n      ],\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZDatePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    } else if (this.mode === ZDatePickerMode.MONTHS) {\n      return `${flatpickr.formatDate(date, \"m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private onStopTyping(value): void {\n    let text = value.detail.value;\n\n    if (this.mode === ZDatePickerMode.MONTHS) {\n      text = \"01-\".concat(value.detail.value);\n    }\n\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZDatePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.DATE_TIME);\n\n    if (text === \"\") {\n      this.inputError = false;\n      this.picker.setDate([]);\n      this.dateSelect.emit(null);\n    } else if (!isValidDate) {\n      this.inputError = true;\n      this.dateSelect.emit(null);\n    } else if (isValidDate) {\n      this.inputError = false;\n      this.picker.setDate([value.detail.value]);\n      this.dateSelect.emit(this.formatDate(new Date(englishParsedData)));\n    }\n  }\n\n  private renderSlottedContent(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-hidden`}>\n        <input\n          class=\"hidden-input\"\n          data-input\n        ></input>\n        <slot name=\"toggle\"></slot>\n      </div>\n    );\n  }\n\n  private renderZInput(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-container`}>\n        <z-input\n          data-input=\"data-input\"\n          ariaLabel={this.ariaLabel}\n          label={this.label}\n          class={this.datePickerId}\n          type={InputType.TEXT}\n          icon=\"event\"\n          message={false}\n          tabindex=\"0\"\n          value=\"\"\n          onStopTyping={(value) => {\n            this.onStopTyping(value);\n          }}\n          onStartTyping={() => {\n            this.inputError = false;\n          }}\n        ></z-input>\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"flatpickr-toggle-container\": true,\n          [this.flatpickrPosition]: true,\n          [this.mode]: true,\n        }}\n      >\n        {this.hasChildren ? this.renderSlottedContent() : this.renderZInput()}\n      </div>\n    );\n  }\n}\n"]}