@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

package/dist/collection/components/buttons/z-toggle-switch/index.js

@@ -2,146 +2,143 @@ import { h, Host } from "@stencil/core";
 import { randomId } from "../../../utils/utils";
 import { LabelPosition } from "../../../beans";
 export class ZToggleSwitch {
-    constructor() {
-        this.disabled = false;
-        this.labelPosition = LabelPosition.LEFT;
-        this.checked = false;
-        this.htmlid = `toggle-switch-id-${randomId()}`;
+  constructor() {
+    /** Disabled flag */
+    this.disabled = false;
+    /** Label position */
+    this.labelPosition = LabelPosition.LEFT;
+    /** Checked state */
+    this.checked = false;
+    /** HTML id attribute to set to the internal checkbox */
+    this.htmlid = `toggle-switch-id-${randomId()}`;
+  }
+  emitToggleClick() {
+    this.toggleClick.emit({
+      id: this.htmlid,
+      checked: this.checked,
+    });
+  }
+  handleClick(ev) {
+    if (this.disabled) {
+      return;
     }
-    emitToggleClick() {
-        this.toggleClick.emit({
-            id: this.htmlid,
-            checked: this.checked,
-        });
-    }
-    handleClick(ev) {
-        if (this.disabled) {
-            return;
+    this.checked = ev.target.checked;
+    this.emitToggleClick();
+  }
+  render() {
+    return (h(Host, null, h("input", { id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { htmlFor: this.htmlid, class: {
+        [this.labelPosition]: true,
+        disabled: this.disabled,
+      } }, h("span", null, h("slot", null)), h("span", { class: {
+        container: true,
+        disabled: this.disabled,
+        checked: this.checked,
+      } }, h("span", { class: "circle" }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" })))))));
+  }
+  static get is() { return "z-toggle-switch"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disabled flag"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LabelPosition",
+          "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Label position"
+        },
+        "attribute": "label-position",
+        "reflect": true,
+        "defaultValue": "LabelPosition.LEFT"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Checked state"
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "htmlid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "HTML id attribute to set to the internal checkbox"
+        },
+        "attribute": "htmlid",
+        "reflect": false,
+        "defaultValue": "`toggle-switch-id-${randomId()}`"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "toggleClick",
+        "name": "toggleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Toggle click event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
-        this.checked = ev.target.checked;
-        this.emitToggleClick();
-    }
-    render() {
-        return (h(Host, { key: '1fcac74eda8db17b3d535d2138ee9637ef7779b5' }, h("input", { key: '90d27860c20def96928eb87c9df301d9df1226c0', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'be5a0eec29f493ac91c2fafbba54afcfa8f50f50', htmlFor: this.htmlid, class: {
-                [this.labelPosition]: true,
-                disabled: this.disabled,
-            } }, h("span", { key: 'b336633b42383d0aef29ec775e3b18aca42bf096' }, h("slot", { key: '9f8d563f0bae08144106f32c1018cbd40b6b5bc6' })), h("span", { key: '176481146a6df0f575fc364fabd2dc2ea1b00b54', class: {
-                container: true,
-                disabled: this.disabled,
-                checked: this.checked,
-            } }, h("span", { key: '8a1227658fb1fdc68523a3947c7b8f55b63baa89', class: "circle" }, this.checked && (h("z-icon", { width: 12, height: 12, name: "checkmark" })))))));
-    }
-    static get is() { return "z-toggle-switch"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["styles.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["styles.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Disabled flag"
-                },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "labelPosition": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LabelPosition",
-                    "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
-                    "references": {
-                        "LabelPosition": {
-                            "location": "import",
-                            "path": "../../../beans",
-                            "id": "src/beans/index.tsx::LabelPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label position"
-                },
-                "attribute": "label-position",
-                "reflect": true,
-                "defaultValue": "LabelPosition.LEFT"
-            },
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Checked state"
-                },
-                "attribute": "checked",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "htmlid": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "HTML id attribute to set to the internal checkbox"
-                },
-                "attribute": "htmlid",
-                "reflect": false,
-                "defaultValue": "`toggle-switch-id-${randomId()}`"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "toggleClick",
-                "name": "toggleClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Toggle click event"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
+      }];
+  }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,77 +1,76 @@
 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;
+  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;
+  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);
-        }
+  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");
+  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");
+  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");
+  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");
 }
-//# sourceMappingURL=utils.js.map