@zanichelli/albe-web-components 12.1.2 → 12.1.4-rc

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

@@ -1,76 +0,0 @@
-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}$/;
-  if (dateStr.match(regex) === null) {
-    return false;
-  }
-  return true;
-}
-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.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;
-  }
-  return ZDatePickerPosition.BOTTOM;
-}
-export function setAriaOptions(element, mode) {
-  const calendar = element.getElementsByClassName("flatpickr-calendar");
-  Array.from(calendar).forEach((element) => {
-    element.setAttribute("tabindex", "0");
-    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")) {
-        date.setAttribute("tabindex", "-1");
-      }
-    });
-    prevMonthArrow.setAttribute("tabindex", "0");
-    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) {
-      setDateAriaOptions(element, prevMonthArrow, nextMonthArrow);
-    }
-    if (mode === ZDatePickerMode.DATE_TIME) {
-      setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);
-    }
-    if (mode === ZDatePickerMode.MONTHS) {
-      setMonthsAriaOptions(element, prevMonthArrow, nextMonthArrow);
-    }
-  });
-}
-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");
-  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");
-  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");
-}
-function setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
-  Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-months")).forEach((element) => element.setAttribute("tabindex", "-1"));
-  Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-month")).forEach((element) => element.setAttribute("role", "button"));
-  prevMonthArrow.setAttribute("aria-label", "Anno precedente");
-  nextMonthArrow.setAttribute("aria-label", "Anno successivo");
-}

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

@@ -1,295 +0,0 @@
-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 { 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) {
-        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));
-      }
-    }
-  }
-  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")}`;
-    }
-    else if (this.mode === ZDatePickerMode.MONTHS) {
-      return `${flatpickr.formatDate(date, "m-Y")}`;
-    }
-    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);
-    }
-    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)));
-    }
-  }
-  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"
-            }
-          }
-        },
-        "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
-      }];
-  }
-}