@zanichelli/albe-web-components 6.0.3 → 6.1.0-a1

package/dist/esm/{utils-fbe04cd6.js → utils-ff91a03a.js}

@@ -1,5 +1,4 @@
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
-import { H as ZDatePickerPosition, F as ZDatePickerMode, G as ZDatePickerModeValue } from './index-9d028352.js';
 
 var HOOKS = [
     "onChange",
@@ -2631,18 +2630,18 @@ function validateDate(dateStr, hasTime = false) {
 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 flatpickrHeight = mode === "date-time" /* ZDatePickerMode.DATE_TIME */
+    ? 523 /* ZDatePickerModeValue.DATE_TIME */
+    : mode === "months" /* ZDatePickerMode.MONTHS */
+      ? 288 /* ZDatePickerModeValue.MONTHS */
+      : 401 /* 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 "top" /* ZDatePickerPosition.TOP */;
   }
-  return ZDatePickerPosition.BOTTOM;
+  return "bottom" /* ZDatePickerPosition.BOTTOM */;
 }
 function setAriaOptions(element, mode) {
   const calendar = element.getElementsByClassName("flatpickr-calendar");
@@ -2662,13 +2661,13 @@ function setAriaOptions(element, mode) {
     prevMonthArrow.setAttribute("role", "button");
     nextMonthArrow.setAttribute("role", "button");
     element.getElementsByClassName("cur-year")[0].setAttribute("aria-label", "Anno");
-    if (mode === ZDatePickerMode.DATE) {
+    if (mode === "date" /* ZDatePickerMode.DATE */) {
       setDateAriaOptions(element, prevMonthArrow, nextMonthArrow);
     }
-    if (mode === ZDatePickerMode.DATE_TIME) {
+    if (mode === "date-time" /* ZDatePickerMode.DATE_TIME */) {
       setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);
     }
-    if (mode === ZDatePickerMode.MONTHS) {
+    if (mode === "months" /* ZDatePickerMode.MONTHS */) {
       setMonthsAriaOptions(element, prevMonthArrow, nextMonthArrow);
     }
   });

package/dist/esm/web-components-library.js

@@ -1,7 +1,7 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-a2ca4b97.js';
 
 /*
- Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.19.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/dist/esm/z-alert.entry.js

@@ -5,6 +5,7 @@ const stylesCss = ":host{display:block;box-sizing:border-box;color:var(--color-s
 const ZAlert = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.type = undefined;
   }
   render() {
     return (h("div", { class: this.type }, h("slot", null)));

package/dist/esm/z-app-header.entry.js

@@ -7,41 +7,19 @@ const ZAppHeader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sticking = createEvent(this, "sticking", 7);
-    /**
-     * Stuck mode for the header.
-     * You can programmatically set it using an IntersectionObserver.
-     * **Optional**
-     */
-    this.stuck = false;
-    /**
-     * Should place an overlay over the hero image.
-     * Useful for legibility purpose.
-     * **Optional**
-     */
-    this.overlay = false;
-    /**
-     * Control menu bar position in the header.
-     * - auto: the menu bar is positioned near the title
-     * - stack: the menu bar is positioned below the title
-     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
-     *
-     * **Optional**
-     */
-    this.flow = "auto";
-    /**
-     * The opening state of the drawer.
-     */
-    this.drawerOpen = false;
-    /**
-     * The stucked state of the bar.
-     */
-    this.stucked = false;
     this.observer = SUPPORT_INTERSECTION_OBSERVER &&
       new IntersectionObserver(([entry]) => {
         this.stucked = !entry.isIntersecting;
       }, {
         threshold: 0.5,
       });
+    this.stuck = false;
+    this.hero = undefined;
+    this.overlay = false;
+    this.flow = "auto";
+    this.drawerOpen = false;
+    this.stucked = false;
+    this.menuLength = undefined;
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
     this.collectMenuElements.bind(this);

package/dist/esm/z-app-switcher_9.entry.js

@@ -1,9 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { T as ThemeVariant, i as DividerOrientation, D as DividerSize, m as LabelPosition, I as InputType, J as ZRangePickerMode, H as ZDatePickerPosition, d as InputStatus } from './index-9d028352.js';
 import { m as mobileBreakpoint } from './breakpoints-c386984e.js';
 import { I as ICONS } from './icons-56ca282c.js';
-import { r as randomId, b as boolean } from './utils-39ca028c.js';
-import { f as flatpickr, s as setAriaOptions, v as validateDate, i as it, a as setFlatpickrPosition } from './utils-fbe04cd6.js';
+import { r as randomId, b as boolean } from './utils-420e8552.js';
+import { f as flatpickr, s as setAriaOptions, v as validateDate, i as it, a as setFlatpickrPosition } from './utils-ff91a03a.js';
 import './_commonjsHelpers-9943807e.js';
 
 const stylesCss$8 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}button{display:flex;align-content:center;justify-content:center;padding:0;border:none;background-color:transparent}button>z-icon{color:var(--bg-white);fill:currentcolor}button>z-icon.light{color:var(--bg-grey-900);fill:currentcolor}";
@@ -12,8 +11,7 @@ const ZAppSwitcher = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.appButtonClick = createEvent(this, "appButtonClick", 7);
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
+    this.theme = "dark" /* ThemeVariant.DARK */;
     this.isopen = false;
     this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
   }
@@ -32,9 +30,13 @@ const stylesCss$7 = ":host{position:sticky;z-index:99;top:0;display:block;height
 const ZAppTopbar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
     this.topbarLinks = [];
+    this.theme = "dark" /* ThemeVariant.DARK */;
+    this.contentMaxWidth = undefined;
+    this.topbarContent = undefined;
+    this.logoLink = undefined;
+    this.showAppSwitcher = undefined;
+    this.isMobile = undefined;
   }
   handleResize() {
     this.isMobile = window.innerWidth <= mobileBreakpoint;
@@ -48,13 +50,13 @@ const ZAppTopbar = class {
     }
   }
   renderTopbarLinks() {
-    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
+    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === "light" /* ThemeVariant.LIGHT */ ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
   }
   render() {
     return (h(Host, { class: {
         [this.theme]: true,
         "limited-width": !!this.contentMaxWidth,
-      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.VERTICAL, color: this.theme === ThemeVariant.LIGHT ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
+      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: "vertical" /* DividerOrientation.VERTICAL */, color: this.theme === "light" /* ThemeVariant.LIGHT */ ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
   }
 };
 ZAppTopbar.style = stylesCss$7;
@@ -64,12 +66,9 @@ const stylesCss$6 = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-h
 const ZDivider = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** [optional] Divider size */
-    this.size = DividerSize.SMALL;
-    /** [optional] Divider color */
+    this.size = "small" /* DividerSize.SMALL */;
     this.color = "gray200";
-    /** [optional] Divider orintation */
-    this.orientation = DividerOrientation.HORIZONTAL;
+    this.orientation = "horizontal" /* DividerOrientation.HORIZONTAL */;
   }
   render() {
     return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
@@ -82,6 +81,11 @@ const stylesCss$5 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-lef
 const ZIcon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.name = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.iconid = undefined;
+    this.fill = undefined;
   }
   selectPathOrPolygon(iconValue) {
     if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
@@ -104,33 +108,37 @@ const ZInput = class {
     this.startTyping = createEvent(this, "startTyping", 7);
     this.stopTyping = createEvent(this, "stopTyping", 7);
     this.inputCheck = createEvent(this, "inputCheck", 7);
-    /** the id of the input element */
+    this.typingtimeout = 300;
     this.htmlid = `id-${randomId()}`;
-    /** the input aria-label */
+    this.type = undefined;
+    this.name = undefined;
+    this.label = undefined;
     this.ariaLabel = "";
-    /** the input is disabled */
+    this.value = undefined;
     this.disabled = false;
-    /** the input is readonly */
     this.readonly = false;
-    /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
     this.required = false;
-    /** checked: available for checkbox, radio */
     this.checked = false;
-    /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
+    this.placeholder = undefined;
+    this.htmltitle = undefined;
+    this.status = undefined;
     this.message = true;
-    /** the input label position: available for checkbox, radio */
-    this.labelPosition = LabelPosition.RIGHT;
-    /** render clear icon when typing (optional): available for text */
+    this.labelPosition = "right" /* LabelPosition.RIGHT */;
+    this.autocomplete = undefined;
     this.hasclearicon = true;
+    this.icon = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = undefined;
+    this.pattern = undefined;
     this.isTyping = false;
     this.passwordHidden = true;
-    this.typingtimeout = 300;
   }
   inputCheckListener(e) {
     const data = e.detail;
     switch (this.type) {
-      case InputType.RADIO:
-        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
+      case "radio" /* InputType.RADIO */:
+        if (data.type === "radio" /* InputType.RADIO */ && data.name === this.name && data.id !== this.htmlid) {
           this.checked = false;
         }
         break;
@@ -139,8 +147,8 @@ const ZInput = class {
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case InputType.CHECKBOX:
-      case InputType.RADIO:
+      case "checkbox" /* InputType.CHECKBOX */:
+      case "radio" /* InputType.RADIO */:
         return this.checked;
       default:
         console.warn("`isChecked` method is only available for type `checkbox` and `radio`");
@@ -152,7 +160,7 @@ const ZInput = class {
       this.emitStartTyping();
     }
     let validity;
-    if (this.type === InputType.TEXTAREA) {
+    if (this.type === "textarea" /* InputType.TEXTAREA */) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -210,7 +218,7 @@ const ZInput = class {
     };
   }
   getNumberAttributes(type) {
-    if (type != InputType.NUMBER) {
+    if (type != "number" /* InputType.NUMBER */) {
       return;
     }
     return {
@@ -220,27 +228,27 @@ const ZInput = class {
     };
   }
   getPatternAttribute(type) {
-    if (type != InputType.PASSWORD &&
-      type != InputType.TEXT &&
-      type != InputType.TEL &&
-      type != InputType.SEARCH &&
-      type != InputType.URL &&
-      type != InputType.EMAIL) {
+    if (type != "password" /* InputType.PASSWORD */ &&
+      type != "text" /* InputType.TEXT */ &&
+      type != "tel" /* InputType.TEL */ &&
+      type != "search" /* InputType.SEARCH */ &&
+      type != "url" /* InputType.URL */ &&
+      type != "email" /* InputType.EMAIL */) {
       return;
     }
     return {
       pattern: this.pattern,
     };
   }
-  renderInputText(type = InputType.TEXT) {
+  renderInputText(type = "text" /* InputType.TEXT */) {
     const attr = Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type));
-    if (this.icon || type === InputType.PASSWORD) {
+    if (this.icon || type === "password" /* InputType.PASSWORD */) {
       Object.assign(attr.class, { "has-icon": true });
     }
-    if (this.hasclearicon && type != InputType.NUMBER) {
+    if (this.hasclearicon && type != "number" /* InputType.NUMBER */) {
       Object.assign(attr.class, { "has-clear-icon": true });
     }
-    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
+    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === "password" /* InputType.PASSWORD */ && !this.passwordHidden ? "text" /* InputType.TEXT */ : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label) {
@@ -252,7 +260,7 @@ const ZInput = class {
     return (h("span", { class: "icons-wrapper" }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === InputType.PASSWORD) {
+    if (this.type === "password" /* InputType.PASSWORD */) {
       return this.renderShowHidePassword();
     }
     if (!this.icon) {
@@ -261,7 +269,7 @@ const ZInput = class {
     return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon })));
   }
   renderResetIcon() {
-    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
+    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == "number" /* InputType.NUMBER */) {
       return;
     }
     return (h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply" })));
@@ -290,8 +298,8 @@ const ZInput = class {
   renderCheckbox() {
     return (h("div", { class: "checkbox-wrapper" }, h("input", { id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }), h("label", { htmlFor: this.htmlid, class: {
         "checkbox-label": true,
-        "after": this.labelPosition === LabelPosition.RIGHT,
-        "before": this.labelPosition === LabelPosition.LEFT,
+        "after": this.labelPosition === "right" /* LabelPosition.RIGHT */,
+        "before": this.labelPosition === "left" /* LabelPosition.LEFT */,
       } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
@@ -299,18 +307,18 @@ const ZInput = class {
   renderRadio() {
     return (h("div", { class: "radio-wrapper" }, h("input", { id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }), h("label", { htmlFor: this.htmlid, class: {
         "radio-label": true,
-        "after": this.labelPosition === LabelPosition.RIGHT,
-        "before": this.labelPosition === LabelPosition.LEFT,
+        "after": this.labelPosition === "right" /* LabelPosition.RIGHT */,
+        "before": this.labelPosition === "left" /* LabelPosition.LEFT */,
       } }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END radio */
   render() {
     switch (this.type) {
-      case InputType.TEXTAREA:
+      case "textarea" /* InputType.TEXTAREA */:
         return this.renderTextarea();
-      case InputType.CHECKBOX:
+      case "checkbox" /* InputType.CHECKBOX */:
         return this.renderCheckbox();
-      case InputType.RADIO:
+      case "radio" /* InputType.RADIO */:
         return this.renderRadio();
       default:
         return this.renderInputText(this.type);
@@ -330,6 +338,8 @@ const ZInputMessage = class {
       error: "multiply-circled",
       warning: "exclamation-circle",
     };
+    this.message = undefined;
+    this.status = undefined;
   }
   render() {
     return (h(Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 }, this.statusIcons[this.status] && this.message && h("z-icon", { name: this.statusIcons[this.status] }), h("span", { innerHTML: this.message })));
@@ -343,23 +353,17 @@ const ZLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.zLinkClick = createEvent(this, "zLinkClick", 7);
-    /** link target (optional) */
+    this.htmlid = undefined;
+    this.href = undefined;
     this.target = "_self";
-    /** tabindex link attribute (optional) */
     this.htmltabindex = 0;
-    /** disable link flag (optional) */
     this.isdisabled = false;
-    /** active link flag (optional) */
     this.isactive = false;
-    /** white variant flag (optional) */
     this.iswhite = false;
-    /** link text variant (optional) */
     this.textcolor = "primary";
-    /** big link version */
+    this.icon = undefined;
     this.big = false;
-    /** link icon position (optional) */
     this.iconposition = "left";
-    /** draw underline on text (optional) */
     this.underline = false;
     this.iconSize = 18;
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
@@ -409,6 +413,12 @@ const stylesCss$1 = ":host{display:inline-block;width:255px;height:64px;vertical
 const ZLogo = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.width = undefined;
+    this.height = undefined;
+    this.imageAlt = undefined;
+    this.link = undefined;
+    this.targetBlank = undefined;
+    this.mobileLogo = undefined;
   }
   render() {
     const style = {};
@@ -429,9 +439,13 @@ const ZRangePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dateSelect = createEvent(this, "dateSelect", 7);
-    /** [Optional] datepicker mode: date or datetime */
-    this.mode = ZRangePickerMode.DATE;
-    this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
+    this.rangePickerId = undefined;
+    this.firstAriaLabel = undefined;
+    this.firstLabel = undefined;
+    this.secondAriaLabel = undefined;
+    this.secondLabel = undefined;
+    this.mode = "date" /* ZRangePickerMode.DATE */;
+    this.flatpickrPosition = "bottom" /* ZDatePickerPosition.BOTTOM */;
     this.activeInput = "start-input";
     this.firstInputError = false;
     this.lastInputError = false;
@@ -478,11 +492,11 @@ const ZRangePicker = class {
   }
   setupPickers() {
     const config = {
-      enableTime: this.mode === ZRangePickerMode.DATE_TIME,
+      enableTime: this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */,
       locale: it.Italian,
       allowInput: true,
       wrap: true,
-      dateFormat: this.mode === ZRangePickerMode.DATE_TIME ? "d-m-Y - H:i" : "d-m-Y",
+      dateFormat: this.mode === "date-time" /* 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
@@ -571,7 +585,7 @@ const ZRangePicker = class {
     setAriaOptions(this.element, this.mode);
   }
   formatDate(date) {
-    if (this.mode === ZRangePickerMode.DATE) {
+    if (this.mode === "date" /* ZRangePickerMode.DATE */) {
       return `${flatpickr.formatDate(date, "d-m-Y")}`;
     }
     return `${flatpickr.formatDate(date, "d-m-Y - H:i")}`;
@@ -667,9 +681,9 @@ const ZRangePicker = class {
   onStopTyping(value) {
     const text = value.detail.value.replace("/", "-");
     const englishData = text.split("-");
-    const time = this.mode === ZRangePickerMode.DATE_TIME ? `T${englishData[3]}:00` : "";
+    const time = this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */ ? `T${englishData[3]}:00` : "";
     const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(" ").join("");
-    const isValidDate = validateDate(text, this.mode === ZRangePickerMode.DATE_TIME);
+    const isValidDate = validateDate(text, this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */);
     const date = Date.parse(englishParsedData).toString();
     if (this.activeInput === "start-input") {
       if (text === "") {
@@ -731,7 +745,7 @@ const ZRangePicker = class {
   }
   render() {
     const zInputProps = {
-      type: InputType.TEXT,
+      type: "text" /* InputType.TEXT */,
       icon: "event",
       tabindex: "0",
       message: false,
@@ -743,9 +757,9 @@ const ZRangePicker = class {
         [this.mode]: true,
         [this.activeInput]: true,
         [this.flatpickrPosition]: true,
-      } }, h("div", { class: `${this.rangePickerId}-1-wrapper` }, h("div", { class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
+      } }, h("div", { class: `${this.rangePickerId}-1-wrapper` }, h("div", { class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && "error" /* InputStatus.ERROR */, onStartTyping: () => {
         this.firstInputError = false;
-      } })))), h("div", { class: `${this.rangePickerId}-2-wrapper` }, h("div", { class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
+      } })))), h("div", { class: `${this.rangePickerId}-2-wrapper` }, h("div", { class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && "error" /* InputStatus.ERROR */, onStartTyping: () => {
         this.lastInputError = false;
       } }))))));
   }

package/dist/esm/z-aria-alert.entry.js

@@ -1,11 +1,9 @@
 import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
-import { v as ZAriaAlertMode } from './index-9d028352.js';
 
 const ZAriaAlert = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** Aria live mode */
-    this.mode = ZAriaAlertMode.POLITE;
+    this.mode = "polite" /* ZAriaAlertMode.POLITE */;
   }
   render() {
     return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));

package/dist/esm/z-avatar.entry.js

@@ -1,5 +1,4 @@
 import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
-import { A as AvatarSize } from './index-9d028352.js';
 
 const stylesCss = ":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--bg-grey-700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
 
@@ -7,24 +6,23 @@ const ZAvatar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     var _a, _b;
-    /** [optional] Avatar size */
-    this.size = AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
+    this.size = "medium" /* AvatarSize.MEDIUM */;
+    this.text = undefined;
     this.textColor = "text-white";
-    /** [optional] Avatar background color */
     this.backgroundColor = "bg-grey-700";
+    this.image = undefined;
     if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
   }
   getTextSize() {
-    if (this.size === AvatarSize.SMALL) {
+    if (this.size === "small" /* AvatarSize.SMALL */) {
       return "5";
     }
-    else if (this.size === AvatarSize.MEDIUM) {
+    else if (this.size === "medium" /* AvatarSize.MEDIUM */) {
       return "4";
     }
-    else if (this.size === AvatarSize.LARGE) {
+    else if (this.size === "large" /* AvatarSize.LARGE */) {
       return "2";
     }
   }

package/dist/esm/z-body_2.entry.js

@@ -3,8 +3,9 @@ import { r as registerInstance, h, g as getElement, H as Host } from './index-a2
 const ZBody = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** Font weight variant */
+    this.level = undefined;
     this.variant = "regular";
+    this.component = undefined;
   }
   render() {
     return (h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, h("slot", null)));
@@ -16,8 +17,9 @@ const stylesCss = ":host>*{margin:0;font-family:var(--dashboard-font)}:host(.reg
 const ZTypography = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** Font weight variant */
+    this.level = undefined;
     this.variant = "regular";
+    this.component = undefined;
   }
   render() {
     const el = document.createElement(this.component || "span");

package/dist/esm/z-button-deprecated.entry.js

@@ -1,24 +1,18 @@
 import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
-import { b as ButtonType, B as ButtonVariant, c as ButtonSize } from './index-9d028352.js';
 
 const stylesCss = ":host{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:var(--space-unit);--rgb-white:240, 240, 240}button:disabled,::slotted(button:disabled){pointer-events:none}button,::slotted(button),::slotted(a){display:inline-flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;justify-content:center;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;vertical-align:middle;white-space:nowrap}button.big,:host([size=\"big\"]) ::slotted(button),:host([size=\"big\"]) ::slotted(a){min-width:44px;height:44px}button.small,:host([size=\"small\"]) ::slotted(button),:host([size=\"small\"]) ::slotted(a){min-width:36px;height:36px}button.issmall,:host([issmall]) ::slotted(button),:host([issmall]) ::slotted(a){min-width:36px;height:36px}button.x-small,:host([size=\"x-small\"]) ::slotted(button),:host([size=\"x-small\"]) ::slotted(a){min-width:32px;height:32px}button:not(.square),:host(:not([square])) ::slotted(button),:host(:not([square])) ::slotted(a){min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}button.square,:host([square]){--z-icon-right-margin:0}button.primary,:host([variant=\"primary\"]) ::slotted(button),:host([variant=\"primary\"]) ::slotted(a){border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){button.primary:hover,:host([variant=\"primary\"]) ::slotted(button:hover),:host([variant=\"primary\"]) ::slotted(a:hover){border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}button:focus:focus-visible,::slotted(button:focus:focus-visible),::slotted(a:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}button.primary:active,:host([variant=\"primary\"]) ::slotted(button:active),:host([variant=\"primary\"]) ::slotted(a:active){border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}button.primary:disabled,:host([variant=\"primary\"]) ::slotted(button:disabled){border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}button.secondary,:host([variant=\"secondary\"]) ::slotted(button),:host([variant=\"secondary\"]) ::slotted(a){border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){button.secondary:hover,:host([variant=\"secondary\"]) ::slotted(button:hover),:host([variant=\"secondary\"]) ::slotted(a:hover){border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}button.secondary:active,:host([variant=\"secondary\"]) ::slotted(button:active),:host([variant=\"secondary\"]) ::slotted(a:active){border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}button.secondary:disabled,:host([variant=\"secondary\"]) ::slotted(button:disabled){border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}button.tertiary,:host([variant=\"tertiary\"]) ::slotted(button),:host([variant=\"tertiary\"]) ::slotted(a){border-color:transparent;background-color:transparent;color:var(--color-primary01)}button.tertiary.has-content{padding:0 var(--space-unit)}@media (hover: hover){button.tertiary:hover,:host([variant=\"tertiary\"]) ::slotted(button:hover),:host([variant=\"tertiary\"]) ::slotted(a:hover){border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}button.tertiary:focus:focus-visible,:host([variant=\"tertiary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"tertiary\"]) ::slotted(a:focus:focus-visible){border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}button.tertiary:active,:host([variant=\"tertiary\"]) ::slotted(button:active),:host([variant=\"tertiary\"]) ::slotted(a:active){border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}button.tertiary:disabled,:host([variant=\"tertiary\"]) ::slotted(button:disabled){border-color:transparent;background-color:transparent;color:var(--color-disabled02)}button.dark-bg,:host([variant=\"dark-bg\"]) ::slotted(button),:host([variant=\"dark-bg\"]) ::slotted(a){border-color:transparent;background-color:rgb(var(--rgb-white) 0.2);color:var(--color-text04)}button.dark-bg.has-content{padding:0 var(--space-unit)}@media (hover: hover){button.dark-bg:hover,:host([variant=\"dark-bg\"]) ::slotted(button:hover),:host([variant=\"dark-bg\"]) ::slotted(a:hover){background-color:rgb(var(--rgb-white) 0.1)}}button.dark-bg:active,:host([variant=\"dark-bg\"]) ::slotted(button:active),:host([variant=\"dark-bg\"]) ::slotted(a:active){background-color:rgb(var(--rgb-white) 0.3)}button.dark-bg:disabled,:host([variant=\"dark-bg\"]) ::slotted(button:disabled){background-color:rgb(var(--rgb-white) 0.05);color:var(--color-disabled03)}";
 
 const ZButtonDeprecated = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** HTML button disabled attribute. */
+    this.htmlid = undefined;
+    this.name = undefined;
     this.disabled = false;
-    /** HTML button type attribute. */
-    this.type = ButtonType.BUTTON;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
-    this.variant = ButtonVariant.PRIMARY;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ButtonSize.BIG;
-    /** Reduce button size (deprecated).
-     * @deprecated Use `size` prop.
-     */
+    this.type = "button" /* ButtonType.BUTTON */;
+    this.variant = "primary" /* ButtonVariant.PRIMARY */;
+    this.icon = undefined;
+    this.size = "big" /* ButtonSize.BIG */;
     this.issmall = false;
-    /** Spy to render square button. */
     this.square = false;
   }
   render() {

package/dist/esm/z-button-filter.entry.js

@@ -6,11 +6,10 @@ const ZButtonFilter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.removefilter = createEvent(this, "removefilter", 7);
-    /** disable action on button */
+    this.filtername = undefined;
     this.isfixed = false;
-    /** add icon to button */
     this.hasicon = true;
-    /** reduce button size (optional) */
+    this.filterid = undefined;
     this.issmall = false;
     this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
   }

package/dist/esm/z-button-sort.entry.js

@@ -7,13 +7,13 @@ const ZButtonSort = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
-    /** sort label content (ascending) (optional) */
+    this.buttonid = undefined;
+    this.label = undefined;
+    this.desclabel = undefined;
+    this.counter = undefined;
     this.sortlabelasc = "A-Z";
-    /** sort label content (descending) (optional) */
     this.sortlabeldesc = "Z-A";
-    /** selected flag (optional) */
     this.isselected = false;
-    /** sortable flag (optional) */
     this.sortasc = true;
     this.allowTooltip = false;
   }