@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,4 +1,4 @@
-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";
@@ -6,11 +6,13 @@ import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans"
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
     constructor() {
-        this.datePickerId = undefined;
+        /** z-input aria label */
         this.ariaLabel = "";
-        this.label = undefined;
+        /** [Optional] datepicker mode: date, datetime, only months */
         this.mode = ZDatePickerMode.DATE;
+        /** [Optional] the datepicker input name */
         this.name = undefined;
+        /** [Optional] the datepicker input value */
         this.value = undefined;
         this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
         this.inputError = false;
@@ -24,7 +26,9 @@ export class ZDatePicker {
             (_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());
+            if (!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;
@@ -38,10 +42,16 @@ export class ZDatePicker {
             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 (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 (isPrevArrowEntered) {
+                    (_d = this.picker) === null || _d === void 0 ? void 0 : _d.changeYear(this.picker.currentYear - 1);
+                }
+                if (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");
@@ -50,32 +60,37 @@ export class ZDatePicker {
                         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");
-                                }
+                    Array.from(months !== null && months !== void 0 ? 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));
+                if (isPrevArrowEntered) {
+                    (_f = this.picker) === null || _f === void 0 ? void 0 : _f.changeMonth(-1);
+                }
+                if (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");
+        if (this.hasChildren) {
+            customToggle.setAttribute("data-toggle", "data-toggle");
+        }
     }
     componentDidLoad() {
         this.setupPickers();
@@ -90,7 +105,6 @@ export class ZDatePicker {
             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);
@@ -158,7 +172,7 @@ export class ZDatePicker {
             } })));
     }
     render() {
-        return (h("div", { key: '7af62de77a975adae6ec80c7ca307418fd9b0b9d', class: {
+        return (h("div", { key: '93fda1008d65ebd8a0c09639fe1dbdde501f8d32', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,
@@ -191,8 +205,10 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "unique id"
                 },
-                "attribute": "date-picker-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date-picker-id"
             },
             "ariaLabel": {
                 "type": "string",
@@ -208,8 +224,10 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "z-input aria label"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "label": {
@@ -226,8 +244,10 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "z-input label"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "mode": {
                 "type": "string",
@@ -239,7 +259,8 @@ export class ZDatePicker {
                         "ZDatePickerMode": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ZDatePickerMode"
+                            "id": "src/beans/index.tsx::ZDatePickerMode",
+                            "referenceLocation": "ZDatePickerMode"
                         }
                     }
                 },
@@ -249,8 +270,10 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "[Optional] datepicker mode: date, datetime, only months"
                 },
-                "attribute": "mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode",
                 "defaultValue": "ZDatePickerMode.DATE"
             },
             "name": {
@@ -267,8 +290,10 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "[Optional] the datepicker input name"
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "undefined"
             },
             "value": {
@@ -285,8 +310,10 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "[Optional] the datepicker input value"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "undefined"
             }
         };
@@ -332,4 +359,3 @@ export class ZDatePicker {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,19 +1,19 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
 import { InputStatus, InputType, ZDatePickerPosition, ZRangePickerMode } from "../../../beans";
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZRangePicker {
     constructor() {
-        this.rangePickerId = undefined;
-        this.firstAriaLabel = undefined;
-        this.firstLabel = undefined;
-        this.secondAriaLabel = undefined;
-        this.secondLabel = undefined;
+        /** [Optional] datepicker mode: date or datetime */
         this.mode = ZRangePickerMode.DATE;
+        /** readonly mode */
         this.firstPickerReadOnly = false;
+        /** readonly mode */
         this.lastPickerReadOnly = false;
+        /** readonly mode */
         this.firstPickerPlaceholder = "";
+        /** readonly mode */
         this.lastPickerPlaceholder = "";
         this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
         this.activeInput = "start-input";
@@ -28,8 +28,12 @@ export class ZRangePicker {
         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());
+            if (document.activeElement.classList.contains(`${this.rangePickerId}-1`)) {
+                (_a = this.firstPicker) === null || _a === void 0 ? void 0 : _a.close();
+            }
+            if (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`) ||
@@ -52,9 +56,15 @@ export class ZRangePicker {
             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));
+            if (arrowPressed && ev.key === " ") {
+                ev.preventDefault();
+            }
+            if (isPrevArrowEntered) {
+                currentPicker === null || currentPicker === void 0 ? void 0 : currentPicker.changeMonth(-1);
+            }
+            if (isNextArrowEntered) {
+                currentPicker === null || currentPicker === void 0 ? void 0 : currentPicker.changeMonth(1);
+            }
         }
     }
     componentDidLoad() {
@@ -77,7 +87,6 @@ export class ZRangePicker {
             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: () => {
                 const firstInputActive = this.activeInput === "start-input";
@@ -181,7 +190,6 @@ export class ZRangePicker {
     replaceMonths(date, time) {
         const month = date.split(" ")[1];
         const months = {
-            /* eslint-disable @typescript-eslint/naming-convention */
             Gennaio: "01",
             Febbraio: "02",
             Marzo: "03",
@@ -194,7 +202,6 @@ 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);
@@ -330,14 +337,14 @@ export class ZRangePicker {
             onStopTyping: this.onStopTyping.bind(this),
             value: "",
         };
-        return (h("div", { key: '5977c392f4b4cf1480107173bc29a0469e268071', class: {
+        return (h("div", { key: 'd2d94a3237b1659fd6ba789ed36717cb74eb7656', class: {
                 ["range-pickers-container"]: true,
                 [this.mode]: true,
                 [this.activeInput]: true,
                 [this.flatpickrPosition]: true,
-            } }, h("div", { key: '6afa791d72edb22003986b7a53c7ba90b63e6e8c', class: `${this.rangePickerId}-1-wrapper` }, h("div", { key: '405cec579f87a6acdb27651aae2a3c44c14e02d4', class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({ key: '13e962003a7f0bee44676a8da2917c943795ccd4' }, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
+            } }, h("div", { key: 'd6a31c6bf63475ae192d207b84910801d1dc9812', class: `${this.rangePickerId}-1-wrapper` }, h("div", { key: '4755c5035411d352b52c00f762148be686a3849a', class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({ key: 'fb5a934e6e7265a716e876fcd317d6682ff498fb' }, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "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", { key: 'a598bb5ae74ab9ba31be7bfe8ecec6d658f88d79', class: `${this.rangePickerId}-2-wrapper` }, h("div", { key: 'cc02897af810f866e1d14b89e2c35a0151fefa85', class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({ key: 'efa7fa690d78db9bc55df8d6f6358f74ed4ce46e' }, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
+            } })))), h("div", { key: '4e9889983e2422851e6d6ca2ea4f87ad1e23af21', class: `${this.rangePickerId}-2-wrapper` }, h("div", { key: 'ce5d885db43f3795863cafe600098eaf77d8836c', class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({ key: 'babf71bfafe8788c4b849692ad49fd0f6d015822' }, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "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;
             } }))))));
     }
@@ -368,8 +375,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "unique id"
                 },
-                "attribute": "range-picker-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-picker-id"
             },
             "firstAriaLabel": {
                 "type": "string",
@@ -385,8 +394,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "first z-input aria label"
                 },
-                "attribute": "first-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-aria-label"
             },
             "firstLabel": {
                 "type": "string",
@@ -402,8 +413,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "first z-input label"
                 },
-                "attribute": "first-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-label"
             },
             "secondAriaLabel": {
                 "type": "string",
@@ -419,8 +432,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "second z-input aria label"
                 },
-                "attribute": "second-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second-aria-label"
             },
             "secondLabel": {
                 "type": "string",
@@ -436,8 +451,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "second z-input label"
                 },
-                "attribute": "second-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second-label"
             },
             "mode": {
                 "type": "string",
@@ -449,7 +466,8 @@ export class ZRangePicker {
                         "ZRangePickerMode": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ZRangePickerMode"
+                            "id": "src/beans/index.tsx::ZRangePickerMode",
+                            "referenceLocation": "ZRangePickerMode"
                         }
                     }
                 },
@@ -459,8 +477,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "[Optional] datepicker mode: date or datetime"
                 },
-                "attribute": "mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode",
                 "defaultValue": "ZRangePickerMode.DATE"
             },
             "firstPickerReadOnly": {
@@ -477,8 +497,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "readonly mode"
                 },
-                "attribute": "first-picker-read-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "first-picker-read-only",
                 "defaultValue": "false"
             },
             "lastPickerReadOnly": {
@@ -495,8 +517,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "readonly mode"
                 },
-                "attribute": "last-picker-read-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "last-picker-read-only",
                 "defaultValue": "false"
             },
             "firstPickerPlaceholder": {
@@ -513,8 +537,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "readonly mode"
                 },
-                "attribute": "first-picker-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "first-picker-placeholder",
                 "defaultValue": "\"\""
             },
             "lastPickerPlaceholder": {
@@ -531,8 +557,10 @@ export class ZRangePicker {
                     "tags": [],
                     "text": "readonly mode"
                 },
-                "attribute": "last-picker-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "last-picker-placeholder",
                 "defaultValue": "\"\""
             }
         };
@@ -592,4 +620,3 @@ export class ZRangePicker {
             }];
     }
 }
-//# sourceMappingURL=index.js.map