@zanichelli/albe-web-components 4.1.0 → 4.2.0

package/dist/collection/components/{z-date-picker → date-picker}/styles.css

@@ -134,7 +134,7 @@
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 
-  --toggle-height: 0;
+  --z-range-picker--toggle-height: 0;
 }
 
 z-date-picker {
@@ -145,10 +145,19 @@ z-date-picker > div > * {
   cursor: pointer !important;
 }
 
+z-range-picker {
+  position: relative;
+}
+
 .flatpickr-toggle-container {
   width: fit-content;
 }
 
+.range-picker-container > div {
+  cursor: pointer !important;
+  position: relative;
+}
+
 .hidden-input {
   visibility: hidden !important;
   position: absolute;
@@ -169,23 +178,25 @@ z-date-picker > div > * {
   position: absolute !important;
 
   border-radius: 2px;
-  box-shadow: 0px 2px 4px 0px rgba(66, 69, 72, 0.4);
+  box-shadow: var(--shadow-2);
 
   padding-top: calc(var(--space-unit) * 2);
 
   left: 0 !important;
-  top: var(--toggle-height) !important;
+  top: var(--z-range-picker--toggle-height) !important;
 }
 
 .months.top > .flatpickr-calendar {
   top: -288px !important;
 }
 
-.date.top > .flatpickr-calendar {
+.date.top > .flatpickr-calendar,
+.date.top > div > .flatpickr-calendar {
   top: -401px !important;
 }
 
-.date-time.top > .flatpickr-calendar {
+.date-time.top > .flatpickr-calendar,
+.date-time.top > div > .flatpickr-calendar {
   top: -523px !important;
 }
 
@@ -289,10 +300,10 @@ z-date-picker > div > * {
 
 /* Months dropdown selectors */
 .flatpickr-monthDropdown-months {
-  background: white !important;
+  background: var(--color-surface01) !important;
   font-size: var(--font-size-3) !important;
   font-weight: var(--font-rg) !important;
-  color: var(--text-grey-800) !important;
+  color: var(--color-text02) !important;
   outline: 1px solid black !important;
 
   width: 108px !important;
@@ -308,8 +319,8 @@ z-date-picker > div > * {
 /* Year toggle selectors */
 .flatpickr-current-month > .numInputWrapper {
   display: flex;
-  background: white !important;
-  color: var(--text-grey-800);
+  background: var(--color-surface01) !important;
+  color: var(--color-text02);
   outline: 1px solid black !important;
 
   height: calc(var(--space-unit) * 5.5) !important;
@@ -332,7 +343,7 @@ z-date-picker > div > * {
 /* Weekdays selectors */
 .flatpickr-weekdays {
   height: calc(var(--space-unit) * 6);
-  border-bottom: 1px solid var(--gray200);
+  border-bottom: 1px solid var(--color-surface03);
 }
 
 .flatpickr-weekday {
@@ -368,7 +379,7 @@ z-date-picker > div > * {
   padding: 0 !important;
 
   line-height: calc(var(--space-unit) * 5) !important;
-  border: 2px solid white !important;
+  border: 2px solid var(--color-surface01) !important;
 }
 
 .flatpickr-day:hover,
@@ -376,14 +387,14 @@ z-date-picker > div > * {
 .flatpickr-day.selected:hover,
 .flatpickr-monthSelect-month:hover,
 .flatpickr-monthSelect-month:focus {
-  background-color: var(--myz-blue-dark) !important;
-  border-color: var(--myz-blue-dark) !important;
-  color: var(--color-white) !important;
+  background-color: var(--color-hover-primary) !important;
+  border-color: var(--color-hover-primary) !important;
+  color: var(--color-text04) !important;
 }
 
 .flatpickr-day.today,
 .flatpickr-monthSelect-month.today {
-  border: 2px solid var(--myz-blue-dark) !important;
+  border: 2px solid var(--color-hover-primary) !important;
 }
 
 .flatpickr-day.selected,
@@ -414,7 +425,7 @@ z-date-picker > div > * {
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   text-transform: uppercase;
-  color: var(--text-grey-800) !important;
+  color: var(--color-text02) !important;
 
   width: 100%;
   padding-left: var(--space-unit);
@@ -427,7 +438,7 @@ z-date-picker > div > * {
 .flatpickr-time.time24hr > .numInputWrapper > input:hover,
 .flatpickr-time.time24hr > .numInputWrapper > input:focus,
 .flatpickr-time.time24hr > .numInputWrapper:hover {
-  background-color: white !important;
+  background-color: var(--color-surface01) !important;
 }
 
 .flatpickr-time.time24hr > div {
@@ -523,3 +534,44 @@ z-date-picker > div > * {
   left: 5.5px !important;
   margin-top: 4px !important;
 }
+
+/* range-date-picker selectors */
+
+.flatpickr-day.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-monthSelect-month.inRange {
+  background-color: var(--color-primary03) !important;
+  border-color: var(--color-primary03) !important;
+}
+
+.flatpickr-day.inRange:hover,
+.flatpickr-day.today.inRange:hover,
+.flatpickr-day.prevMonthDay.inRange:hover,
+.flatpickr-monthSelect-month.inRange:hover {
+  background-color: var(--color-hover-primary) !important;
+  border-color: var(--color-hover-primary) !important;
+}
+
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: var(--color-primary01) !important;
+  border-color: var(--color-primary01) !important;
+}
+
+.flatpickr-day.prevMonthDay.selected.startRange,
+.flatpickr-day.prevMonthDay.selected.endRange {
+  background-color: var(--color-primary01) !important;
+  border-color: var(--color-primary01) !important;
+}
+
+.flatpickr-range.second-input {
+  cursor: pointer;
+}
+
+.range-picker-container {
+  display: flex;
+  gap: 16px;
+}

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

@@ -0,0 +1,76 @@
+import { ZDatePickerMode, ZDatePickerModeValues, ZDatePickerPosition, } from "../../beans";
+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 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;
+  }
+}
+export function setAriaOptions(element, mode) {
+  let 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"]');
+    tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
+    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.dateTime) {
+      setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);
+    }
+    if (mode === ZDatePickerMode.months) {
+      setMonthsAriaOptions(calendar, 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/{z-date-picker → date-picker/z-date-picker}/index.js

@@ -3,7 +3,8 @@ import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
 import classNames from "classnames";
-import { ZDatePickerMode, ZDatePickerModeValues, ZDatePickerPosition, } from "../../beans";
+import { ZDatePickerMode, ZDatePickerPosition } from "../../../beans";
+import { setAriaOptions, setFlatpickrPosition } from "../utils";
 export class ZDatePicker {
   constructor() {
     /** [Optional] datepicker mode: date, datetime, only months */
@@ -57,7 +58,7 @@ export class ZDatePicker {
     this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
   }
   componentDidLoad() {
-    this.flatpickrInstance = flatpickr(`.${this.datepickerid}`, {
+    this.flatpickrInstance = flatpickr(`.${this.datePickerId}`, {
       appendTo: this.element.children[0],
       enableTime: this.mode === ZDatePickerMode.dateTime,
       locale: Italian,
@@ -70,11 +71,11 @@ export class ZDatePicker {
         this.emitDateSelect(dateStr);
       },
       onOpen: () => {
-        this.setAriaOptions();
-        this.setFlatpickrPosition();
+        setAriaOptions(this.element, this.mode);
+        this.flatpickrPosition = setFlatpickrPosition(this.element, this.mode);
       },
       onKeyDown: () => {
-        this.setAriaOptions();
+        setAriaOptions(this.element, this.mode);
       },
       wrap: this.hasChildren,
       plugins: this.mode === ZDatePickerMode.months && [
@@ -88,98 +89,26 @@ export class ZDatePicker {
       element.innerHTML = element.innerHTML.trim().charAt(0);
     });
   }
-  setAriaOptions() {
-    let calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
-    let prevMonthArrow = calendar.getElementsByClassName("flatpickr-prev-month")[0];
-    let nextMonthArrow = calendar.getElementsByClassName("flatpickr-next-month")[0];
-    let tabindexElements = calendar.querySelectorAll('[tabindex = "-1"]');
-    tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
-    prevMonthArrow.setAttribute("tabindex", "0");
-    nextMonthArrow.setAttribute("tabindex", "0");
-    prevMonthArrow.setAttribute("role", "button");
-    nextMonthArrow.setAttribute("role", "button");
-    calendar
-      .getElementsByClassName("cur-year")[0]
-      .setAttribute("aria-label", "Anno");
-    if (this.mode === ZDatePickerMode.months) {
-      this.setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
-    }
-    if (this.mode === ZDatePickerMode.date) {
-      this.setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
-    }
-    if (this.mode === ZDatePickerMode.dateTime) {
-      this.setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
-    }
-  }
-  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");
-  }
-  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");
-  }
-  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");
-  }
-  setFlatpickrPosition() {
-    const toggleHeight = this.element.children[0].clientHeight;
-    this.element.style.setProperty("--toggle-height", `${toggleHeight}px`);
-    const flatpickrHeight = this.mode === ZDatePickerMode.dateTime
-      ? ZDatePickerModeValues.DATETIME
-      : this.mode === ZDatePickerMode.months
-        ? ZDatePickerModeValues.MONTHS
-        : ZDatePickerModeValues.DATE;
-    const bottom = this.element.getBoundingClientRect().bottom;
-    const overflowBottom = bottom + flatpickrHeight > window.innerHeight;
-    const overflowTop = bottom - flatpickrHeight - toggleHeight < 0;
-    if (!overflowTop && overflowBottom) {
-      this.flatpickrPosition = ZDatePickerPosition.top;
-    }
-    else {
-      this.flatpickrPosition = ZDatePickerPosition.bottom;
-    }
-  }
   renderSlottedContent() {
     return (h("div", null,
       h("input", { class: "hidden-input", "data-input": true }),
       h("slot", { name: "toggle" })));
   }
   renderZInput() {
-    return (h("z-input", { ariaLabel: this.ariaLabel, label: this.label, class: classNames(this.datepickerid), type: "text", icon: "event", message: false, tabindex: "0" }));
+    return (h("z-input", { ariaLabel: this.ariaLabel, label: this.label, class: classNames(this.datePickerId), type: "text", icon: "event", message: false, tabindex: "0" }));
   }
   render() {
-    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode) }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
+    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datePickerId, this.flatpickrPosition, this.mode) }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
   }
   static get is() { return "z-date-picker"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["../styles.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["../styles.css"]
   }; }
   static get properties() { return {
-    "datepickerid": {
+    "datePickerId": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -193,7 +122,7 @@ export class ZDatePicker {
         "tags": [],
         "text": "unique id"
       },
-      "attribute": "datepickerid",
+      "attribute": "date-picker-id",
       "reflect": false
     },
     "ariaLabel": {
@@ -239,7 +168,7 @@ export class ZDatePicker {
         "references": {
           "ZDatePickerMode": {
             "location": "import",
-            "path": "../../beans"
+            "path": "../../../beans"
           }
         }
       },