@zanichelli/albe-web-components 6.2.0-a1 → 6.2.1

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { C as CardVariant } from './index-9d028352.js';
 
 const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"text\"]),::slotted([slot=\"actions\"]){margin:0}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;font-weight:var(--font-sb);-webkit-line-clamp:2}::slotted([slot=\"text\"]){-webkit-line-clamp:3}.actions{display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 1.5)}:host([clickable]){cursor:pointer}:host([clickable]:focus:focus-visible){outline:none}:host(:not([variant])[clickable]:focus:focus-visible){padding:calc(var(--space-unit) * 0.5);box-shadow:var(--shadow-focus-primary)}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([showshadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:calc(var(--space-unit) * 2) var(--space-unit)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([showshadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][showshadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][showshadow]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][showshadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 
@@ -6,11 +7,10 @@ const ZCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.cardClicked = createEvent(this, "cardClicked", 7);
-    this.variant = undefined;
-    this.coverIcon = undefined;
+    /** Enable click interactions on the card. Default: false */
     this.clickable = false;
+    /** Enable shadow. Default: false. */
     this.showshadow = false;
-    this.hasCoverImage = undefined;
   }
   onClick(ev) {
     // Do nothing for clicks on actions.
@@ -44,13 +44,13 @@ const ZCard = class {
     return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
   }
   render() {
-    if (this.variant === "text" /* CardVariant.TEXT */) {
+    if (this.variant === CardVariant.TEXT) {
       return h(Host, null, this.renderContentDiv());
     }
-    if (this.variant === "overlay" /* CardVariant.OVERLAY */ || this.hasCoverImage) {
+    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
       return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
         h("slot", { name: "cover" }),
-        this.variant !== "overlay" /* CardVariant.OVERLAY */ && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
       ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
     return h(Host, null, this.renderColorCoverCard());

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { V as CarouselArrowsPosition, W as CarouselProgressMode, c as ButtonSize, B as ButtonVariant } from './index-9d028352.js';
 
 const stylesCss = "z-carousel{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}z-carousel[single],z-carousel[single=\"true\"]{display:flex;flex-direction:column;align-items:center;justify-content:center}z-carousel[single=\"true\"] .z-carousel-container,z-carousel[single] .z-carousel-container{width:fit-content;max-width:100%}z-carousel .loading-items-container{display:none}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-wrapper{position:relative}.z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}z-carousel[single=\"true\"] .z-carousel-items-container>*:not(:last-child),z-carousel[single] .z-carousel-items-container>*:not(:last-child){margin-right:0}.z-carousel-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:50%;transform:translateY(50%)}z-button[data-direction=\"next\"]{right:0}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}.z-carousel-footer .number-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2)}.z-carousel-footer .numbers-progress>*{margin-right:calc(var(--space-unit) / 2)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}.z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}.z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
 
@@ -6,16 +7,14 @@ const ZCarousel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.indexChange = createEvent(this, "indexChange", 7);
-    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
-    this.scrollingTo = null;
-    this.isLoading = undefined;
-    this.label = undefined;
+    /** Shows only one content at a time */
     this.single = false;
-    this.arrowsPosition = undefined;
-    this.progressMode = undefined;
+    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
     this.ghostLoadingHeight = 100;
+    /** Current item index for single mode. */
     this.current = 0;
-    this.items = undefined;
+    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
+    this.scrollingTo = null;
   }
   onIndexChange() {
     this.scrollingTo = this.current;
@@ -96,9 +95,9 @@ const ZCarousel = class {
    * @returns {boolean}
    */
   canShowFooter() {
-    return (this.arrowsPosition === "bottom" /* CarouselArrowsPosition.BOTTOM */ ||
-      this.progressMode === "dots" /* CarouselProgressMode.DOTS */ ||
-      this.progressMode === "numbers" /* CarouselProgressMode.NUMBERS */);
+    return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
+      this.progressMode === CarouselProgressMode.DOTS ||
+      this.progressMode === CarouselProgressMode.NUMBERS);
   }
   /**
    * Set current item to passed index.
@@ -115,7 +114,7 @@ const ZCarousel = class {
     if (this.isLoading) {
       return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
     }
-    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === "over" /* CarouselArrowsPosition.OVER */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this) })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === "over" /* CarouselArrowsPosition.OVER */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === "bottom" /* CarouselArrowsPosition.BOTTOM */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, variant: "tertiary" /* ButtonVariant.TERTIARY */, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), this.progressMode === "dots" /* CarouselProgressMode.DOTS */ && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.current === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.current === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === "numbers" /* CarouselProgressMode.NUMBERS */ && this.single && this.items && (h("div", { class: "numbers-progress" }, h("span", { class: "interactive-3 current" }, this.current + 1), h("span", { class: "interactive-3" }, "di"), h("span", { class: "interactive-3" }, this.items.length))), this.arrowsPosition === "bottom" /* CarouselArrowsPosition.BOTTOM */ && (h("z-button", { size: "small" /* ButtonSize.SMALL */, variant: "tertiary" /* ButtonVariant.TERTIARY */, icon: "arrow-right-filled", onClick: this.onNext.bind(this) }))))));
+    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this) })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.current === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.current === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress" }, h("span", { class: "interactive-3 current" }, this.current + 1), h("span", { class: "interactive-3" }, "di"), h("span", { class: "interactive-3" }, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-right-filled", onClick: this.onNext.bind(this) }))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

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

@@ -5,8 +5,6 @@ const stylesCss = ":host>div{display:inline-block;min-height:28px;padding:0 calc
 const ZChipDeprecated = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.regulartext = undefined;
-    this.boldtext = undefined;
   }
   renderLegacyChip() {
     return (h("div", null, h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext));

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
-import { g as getDevice, h as handleKeyboardSubmit } from './utils-420e8552.js';
+import { y as ZChipType, q as Device } from './index-9d028352.js';
+import { g as getDevice, h as handleKeyboardSubmit } from './utils-9e81727a.js';
 import './breakpoints-c386984e.js';
 
 const stylesCss = ".sc-z-chip-h>button.sc-z-chip{display:inline-flex;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--bg-white);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb)}.sc-z-chip-h>button.sc-z-chip:not(:disabled)>z-icon.sc-z-chip:last-child:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled)>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>button.sc-z-chip>z-icon.icon-sx.sc-z-chip{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>button.sc-z-chip>z-icon.sc-z-chip:last-child{margin-left:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}.sc-z-chip-h>button.sc-z-chip:disabled,.sc-z-chip-h>button.sc-z-chip:disabled>z-icon.sc-z-chip{color:var(--color-disabled03);fill:var(--color-disabled03)}.sc-z-chip-h>button.sc-z-chip:disabled>z-icon.sc-z-chip{cursor:auto}.sc-z-chip-h>button.sc-z-chip:disabled{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>button.sc-z-chip:focus:focus-visible,.sc-z-chip-h>div.sc-z-chip:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled):active:hover>z-icon.sc-z-chip:last-child{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>div.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--bg-grey-200);background-color:var(--bg-white);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px;line-height:28px}.sc-z-chip-h>div.sc-z-chip>z-icon.sc-z-chip{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>button.default.sc-z-chip,.sc-z-chip-h>div.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media only screen and (min-width: 1152px){.sc-z-chip-h>button.sc-z-chip{font-size:12px}.sc-z-chip-h>div.sc-z-chip{font-size:12px}.sc-z-chip-h>button.default.sc-z-chip,.sc-z-chip-h>div.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}}";
@@ -8,16 +9,16 @@ const ZChip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
-    this.icon = undefined;
-    this.type = "default" /* ZChipType.DEFAULT */;
-    this.interactiveIcon = undefined;
+    /** z-chip size type, can be default, medium or small */
+    this.type = ZChipType.DEFAULT;
+    /** set z-chip as disabled  */
     this.disabled = false;
   }
   emitinteractiveIconClick() {
     this.interactiveIconClick.emit();
   }
   getIconSize() {
-    return getDevice() !== "desktop" /* Device.DESKTOP */ ? 22 : 14;
+    return getDevice() !== Device.DESKTOP ? 22 : 14;
   }
   render() {
     if (this.interactiveIcon) {

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { h as handleKeyboardSubmit } from './utils-420e8552.js';
+import { I as InputType, K as KeyboardKeyCode } from './index-9d028352.js';
+import { h as handleKeyboardSubmit } from './utils-9e81727a.js';
 import './breakpoints-c386984e.js';
 
 const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--bg-grey-700);margin:0;background-color:var(--bg-white);border-radius:var(--border-radius-small);cursor:pointer}:host>div>.header:focus:focus-visible{border:var(--border-size-small) solid var(--blue500);box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>z-body{padding:var(--space-unit) 0;margin:0;color:var(--text-grey-800)}:host>div>.header>z-body>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--text-grey-800);transform:rotate(360deg);transition:all 200ms linear}:host>div.open>.header{border:var(--border-size-small) solid var(--blue500);border-radius:var(border-radius-small) var(border-radius-small) 0 0}:host>div.open>.header>z-icon{fill:var(--text-grey-800);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--bg-white);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--myz-blue) var(--gray200);scrollbar-width:thin}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--myz-blue);border-radius:var(--border-radius)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--myz-blue)}:host>div.open>div.open-combo-data>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--myz-blue) var(--bg-grey-200);scrollbar-width:thin}:host>div.open>div.open-combo-data>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div.search>div>a{display:inline-block;height:44px;color:var(--myz-blue);cursor:pointer;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);text-align:left}";
@@ -8,26 +9,27 @@ const ZCombobox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.comboboxChange = createEvent(this, "comboboxChange", 7);
-    this.itemsList = [];
-    this.inputType = "text" /* InputType.TEXT */;
-    this.inputid = undefined;
-    this.items = undefined;
-    this.label = undefined;
+    /** show search input flag (optional) */
     this.hassearch = false;
-    this.searchlabel = undefined;
-    this.searchplaceholder = undefined;
-    this.searchtitle = undefined;
+    /** no result text message */
     this.noresultslabel = "Nessun risultato";
+    /** toggle combo list opening flag */
     this.isopen = false;
+    /** fixed style flag */
     this.isfixed = false;
+    /** close combobox list text */
     this.closesearchtext = "Chiudi";
+    /** show "check all" checkbox (optional) */
     this.hascheckall = false;
+    /** check all label (optional) */
     this.checkalltext = "Seleziona tutti";
+    /** uncheck all label (optional) */
     this.uncheckalltext = "Deseleziona tutti";
+    /** max number of checkable items (0 = unlimited) */
     this.maxcheckableitems = 0;
-    this.searchValue = undefined;
-    this.selectedCounter = undefined;
-    this.renderItemsList = [];
+    this.renderItemsList = []; // used for render only
+    this.itemsList = [];
+    this.inputType = InputType.TEXT;
     this.toggleComboBox = this.toggleComboBox.bind(this);
     this.closeFilterItems = this.closeFilterItems.bind(this);
   }
@@ -104,7 +106,7 @@ const ZCombobox = class {
   }
   renderHeader() {
     return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === 32 /* KeyboardKeyCode.SPACE */) {
+        if (ev.keyCode === KeyboardKeyCode.SPACE) {
           ev.preventDefault();
         }
       }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("z-body", { level: 3, component: "p" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", width: 18, height: 18 })));
@@ -129,7 +131,7 @@ const ZCombobox = class {
       return this.renderNoSearchResults();
     }
     return (h("ul", null, items.map((item, i) => {
-      return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, h("z-input", { type: "checkbox" /* InputType.CHECKBOX */, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
+      return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
     })));
   }
   renderNoSearchResults() {
@@ -154,7 +156,7 @@ const ZCombobox = class {
       return;
     }
     const allChecked = this.selectedCounter === this.itemsList.length;
-    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: "checkbox" /* InputType.CHECKBOX */, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length })));
+    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length })));
   }
   render() {
     return (h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed }, id: this.inputid }, this.renderHeader(), this.renderContent()));

package/dist/esm/z-contextual-menu.entry.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2ca4b97.js';
+import { P as PopoverPositions } from './index-9d028352.js';
 
 const stylesCss = ":host{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg)}button{width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}z-popover{overflow:hidden}.popover-content-container{position:relative;min-width:112px;max-width:280px;background-color:var(--color-surface02);box-shadow:var(--shadow-2);white-space:nowrap}.element-container:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.element-text{overflow:hidden;font-size:14px;text-overflow:ellipsis}.element-container,.disabled-element-container{display:flex;min-height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);fill:var(--color-disabled03);gap:var(--space-unit)}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
 
@@ -6,9 +7,14 @@ const ZContextualMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.clickContextualMenu = createEvent(this, "clickContextualMenu", 7);
-    this.elements = undefined;
+    /**
+     * [optional] Sets text color of ZContextualMenu's content
+     */
     this.color = "color-primary01";
-    this.popoverPosition = "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */;
+    /**
+     * [optional] Sets the position of the popover
+     */
+    this.popoverPosition = PopoverPositions.BOTTOM_RIGHT;
   }
   componentWillRender() {
     if (this.elements) {

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
+import { B as ButtonVariant } from './index-9d028352.js';
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-flow:column nowrap;align-content:space-between;align-items:stretch;justify-content:space-between;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);border-radius:calc(var(--space-unit) * 0.5);color:var(--text-grey-800);font-size:16px;letter-spacing:0;line-height:24px}.content>div>h2{padding:0;margin:0;border-radius:0;color:var(--text-grey-800);font-size:18px;font-weight:var(--font-sb);letter-spacing:0}.content>div>div{padding:calc(var(--space-unit) * 3) 0;font-size:14px;letter-spacing:0.16px;line-height:20px}.content>div>div>p{margin:0}.content>div>div>p>a{display:inline-flex;height:14px;color:var(--text-grey-800);cursor:pointer;font-weight:var(--font-sb);text-decoration:underline}.content>div>div>p>a:visited{z-index:1000;color:var(--text-grey-800);cursor:pointer}.content>z-button{width:100%;margin:0}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3);font-size:16px;letter-spacing:0;line-height:24px}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{width:initial;margin:0}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-right:calc(var(--space-unit) * 4);padding-left:calc(var(--space-unit) * 4)}}";
 
@@ -6,9 +7,6 @@ const ZCookiebar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.accept = createEvent(this, "accept", 7);
-    this.cookiepolicyurl = undefined;
-    this.hide = undefined;
-    this.callback = undefined;
   }
   emitAccept(ev) {
     this.accept.emit({ ev });
@@ -28,7 +26,7 @@ const ZCookiebar = class {
     }
   }
   renderContentSlot() {
-    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: "primary" /* ButtonVariant.PRIMARY */, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: ButtonVariant.PRIMARY, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
     return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());

package/dist/esm/z-cover-hero.entry.js

@@ -1,12 +1,20 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { R as CoverHeroVariant, U as CoverHeroContentPosition } from './index-9d028352.js';
 
 const stylesCss = ":host{--cover-hero-height:auto;--cover-hero-overlay:none;--cover-hero-text-color:var(--color-text-inverse);display:block}:host,*{box-sizing:border-box}:host .content-hero{position:relative;width:100%;height:var(--cover-hero-height);min-height:calc(var(--space-unit) * 30);align-items:baseline;background-color:var(--gray600)}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .content-hero .cover{position:absolute;z-index:0;width:100%;height:100%}::slotted([slot=\"cover\"]){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant=\"overlay\"]) .content-hero .cover::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]) .content-hero .content-container{position:relative;height:100%;padding:var(--grid-margin)}:host([variant=\"stacked\"]){--cover-hero-text-color:var(--color-text01)}:host([variant=\"stacked\"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}";
 
 const ZCoverHero = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.variant = "overlay" /* CoverHeroVariant.OVERLAY */;
-    this.contentPosition = "top" /* CoverHeroContentPosition.TOP */;
+    /**
+     * Cover hero variant.
+     * Can be one of "OVERLAY", "STACKED".
+     */
+    this.variant = CoverHeroVariant.OVERLAY;
+    /**
+     * Cover hero content position (only for STACKED variant).
+     */
+    this.contentPosition = CoverHeroContentPosition.TOP;
   }
   /**
    * Template for the content.
@@ -15,10 +23,10 @@ const ZCoverHero = class {
     return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
   }
   render() {
-    return (h(Host, null, this.variant === "stacked" /* CoverHeroVariant.STACKED */ &&
-      this.contentPosition === "top" /* CoverHeroContentPosition.TOP */ &&
-      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === "overlay" /* CoverHeroVariant.OVERLAY */ && this.renderContent()), this.variant === "stacked" /* CoverHeroVariant.STACKED */ &&
-      this.contentPosition === "bottom" /* CoverHeroContentPosition.BOTTOM */ &&
+    return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.TOP &&
+      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
       this.renderContent()));
   }
   get el() { return getElement(this); }

package/dist/esm/z-date-picker.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
-import { f as flatpickr, i as it, s as setAriaOptions, a as setFlatpickrPosition, v as validateDate } from './utils-ff91a03a.js';
+import { f as flatpickr, i as it, s as setAriaOptions, a as setFlatpickrPosition, v as validateDate } from './utils-fbe04cd6.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
+import { F as ZDatePickerMode, H as ZDatePickerPosition, I as InputType } from './index-9d028352.js';
 
 var monthSelect = createCommonjsModule(function (module, exports) {
 (function (global, factory) {
@@ -309,11 +310,11 @@ const ZDatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dateSelect = createEvent(this, "dateSelect", 7);
-    this.datePickerId = undefined;
+    /** z-input aria label */
     this.ariaLabel = "";
-    this.label = undefined;
-    this.mode = "date" /* ZDatePickerMode.DATE */;
-    this.flatpickrPosition = "bottom" /* ZDatePickerPosition.BOTTOM */;
+    /** [Optional] datepicker mode: date, datetime, only months */
+    this.mode = ZDatePickerMode.DATE;
+    this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
     this.inputError = false;
   }
   emitDateSelect(date) {
@@ -337,7 +338,7 @@ const ZDatePicker = class {
       const isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
       const arrowPressed = isPrevArrowEntered || isNextArrowEntered;
       arrowPressed && ev.key === " " && ev.preventDefault();
-      if (this.mode === "months" /* ZDatePickerMode.MONTHS */) {
+      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) {
@@ -382,11 +383,11 @@ const ZDatePicker = class {
     const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;
     this.picker = flatpickr(`.${classToAppend}`, {
       appendTo: this.element.children[0],
-      enableTime: this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */,
+      enableTime: this.mode === ZDatePickerMode.DATE_TIME,
       locale: it.Italian,
       allowInput: true,
-      dateFormat: this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */ ? "d-m-Y - H:i" : "d-m-Y",
-      ariaDateFormat: this.mode === "months" /* ZDatePickerMode.MONTHS */ ? "F Y" : "d F Y",
+      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,
@@ -401,7 +402,7 @@ const ZDatePicker = class {
         setAriaOptions(this.element, this.mode);
       },
       wrap: true,
-      plugins: this.mode === "months" /* ZDatePickerMode.MONTHS */ && [
+      plugins: this.mode === ZDatePickerMode.MONTHS && [
         monthSelect({
           dateFormat: "m-Y",
           altFormat: "m-Y",
@@ -413,23 +414,23 @@ const ZDatePicker = class {
     });
   }
   formatDate(date) {
-    if (this.mode === "date" /* ZDatePickerMode.DATE */) {
+    if (this.mode === ZDatePickerMode.DATE) {
       return `${flatpickr.formatDate(date, "d-m-Y")}`;
     }
-    else if (this.mode === "months" /* ZDatePickerMode.MONTHS */) {
+    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 === "months" /* ZDatePickerMode.MONTHS */) {
+    if (this.mode === ZDatePickerMode.MONTHS) {
       text = "01-".concat(value.detail.value);
     }
     const englishData = text.split("-");
-    const time = this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */ ? `T${englishData[3]}:00` : "";
+    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 === "date-time" /* ZDatePickerMode.DATE_TIME */);
+    const isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.DATE_TIME);
     if (text === "") {
       this.inputError = false;
       this.picker.setDate([]);
@@ -449,7 +450,7 @@ const ZDatePicker = class {
     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: "text" /* InputType.TEXT */, icon: "event", message: false, tabindex: "0", value: "", onStopTyping: (value) => {
+    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;

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

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
+import { D as DividerSize, i as DividerOrientation } from './index-9d028352.js';
+
+const stylesCss = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
+
+const ZDivider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** [optional] Divider size */
+    this.size = DividerSize.SMALL;
+    /** [optional] Divider color */
+    this.color = "gray200";
+    /** [optional] Divider orintation */
+    this.orientation = DividerOrientation.HORIZONTAL;
+  }
+  render() {
+    return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+  }
+};
+ZDivider.style = stylesCss;
+
+export { ZDivider as z_divider };

package/dist/esm/z-dragdrop-area_2.entry.js

@@ -33,9 +33,8 @@ ZDragdropArea.style = stylesCss;
 const ZHeading = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     return (h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, h("slot", null)));

package/dist/esm/z-file-upload.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { g as getDevice } from './utils-420e8552.js';
+import { x as ZFileUploadType, q as Device, D as DividerSize } from './index-9d028352.js';
+import { g as getDevice } from './utils-9e81727a.js';
 import './breakpoints-c386984e.js';
 
 const stylesCss = ":host{color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container z-body{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin-bottom:var(--space-unit)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>z-heading{display:inline-block;margin:calc(var(--space-unit) * 3) 0}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}}";
@@ -8,19 +9,15 @@ const ZFileUpload = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.fileInput = createEvent(this, "fileInput", 7);
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = ZFileUploadType.DEFAULT;
+    /** Files added by the user */
+    this.files = [];
     this.inputAttributes = {
       type: "file",
       id: "file-elem",
       multiple: true,
     };
-    this.type = "default" /* ZFileUploadType.DEFAULT */;
-    this.buttonVariant = undefined;
-    this.acceptedFormat = undefined;
-    this.fileMaxSize = undefined;
-    this.mainTitle = undefined;
-    this.description = undefined;
-    this.files = [];
-    this.invalidFiles = undefined;
   }
   /** Listen removeFile event sent from z-file component */
   removeFileListener(e) {
@@ -56,8 +53,8 @@ const ZFileUpload = class {
     return this.files;
   }
   getType() {
-    if (getDevice() !== "desktop" /* Device.DESKTOP */)
-      return "default" /* ZFileUploadType.DEFAULT */;
+    if (getDevice() !== Device.DESKTOP)
+      return ZFileUploadType.DEFAULT;
     return this.type;
   }
   handleAccessibility() {
@@ -66,7 +63,7 @@ const ZFileUpload = class {
       lastFile.focus();
     }
     else {
-      this.getType() === "default" /* ZFileUploadType.DEFAULT */
+      this.getType() === ZFileUploadType.DEFAULT
         ? this.button.querySelector("button").focus()
         : this.uploadLink.focus();
     }
@@ -122,7 +119,7 @@ const ZFileUpload = class {
     return h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null);
   }
   renderFileSection() {
-    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: "medium" /* DividerSize.MEDIUM */ })));
+    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
   }
   renderInput() {
     return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
@@ -174,7 +171,7 @@ const ZFileUpload = class {
     })))));
   }
   render() {
-    return (h(Host, null, h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == "default" /* ZFileUploadType.DEFAULT */ ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+    return (h(Host, null, h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
   }
   get el() { return getElement(this); }
 };

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { y as ZChipType, P as PopoverPositions } from './index-9d028352.js';
 import { t as tabletBreakpoint } from './breakpoints-c386984e.js';
 
 const stylesCss = ".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";
@@ -7,8 +8,6 @@ const ZFile = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.removeFile = createEvent(this, "removeFile", 7);
-    this.fileNumber = undefined;
-    this.fileName = undefined;
     this.allowPopover = false;
     this.popoverVisible = false;
   }
@@ -36,7 +35,7 @@ const ZFile = class {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: "auto" /* PopoverPositions.AUTO */, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: "default" /* ZChipType.DEFAULT */ }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPositions.AUTO, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/z-footer-link_3.entry.js

@@ -5,7 +5,6 @@ const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(-
 const ZFooterLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.href = undefined;
   }
   render() {
     return (h("a", { href: this.href, target: "_blank" }, h("slot", null)));
@@ -18,7 +17,6 @@ const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(-
 const ZFooterSection = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.name = undefined;
     this.isOpen = false;
   }
   renderToggleButton() {
@@ -35,9 +33,6 @@ const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--f
 const ZFooterSocial = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.href = undefined;
-    this.description = undefined;
   }
   render() {
     return (h("a", { href: this.href, target: "_blank" }, h("img", { src: this.icon, alt: this.description })));

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
+import { c as ButtonSize } from './index-9d028352.js';
 
 const stylesCss = ":host{width:100%}footer{width:auto;height:auto;box-sizing:border-box;padding:var(--space-unit) 0;background-color:var(--gray900);color:var(--gray50);font-family:var(--font-family-sans);font-size:13px}footer *{box-sizing:border-box}footer>section>div{display:grid}#top{padding:0 calc(var(--space-unit) * 2)}#bottom{width:auto;height:auto;padding:0 calc(var(--space-unit) * 2);margin:0;font-size:12px;white-space:pre-line}#bottom>div{display:grid;grid-template-columns:1fr}#bottom>div>div.item{display:flex;width:auto;height:auto;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) 0;grid-column:span 1}#bottom>div>div.item:nth-child(1){order:2}#bottom>div>div.item:nth-child(2){order:1;border-bottom:1px solid var(--gray50)}#bottom>div>div.item>div.social{display:grid;padding:0;margin-bottom:0;column-gap:12px;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(auto-fill, 24px)}#bottom>div>div.bottom-links{display:none}#bottom>div>div.item>p{padding:var(--space-unit) 0;margin:var(--space-unit) 0}#bottom>div>div.item>p:first-child{margin-top:0}#bottom>div>div.item>p:last-child{margin-bottom:0}#bottom>div>div.logo>p>span{display:block}#extension{padding:0 calc(var(--space-unit) * 2)}#extension>div{display:grid;align-items:center;grid-row-gap:var(--space-unit);grid-template-columns:1fr}#extension z-divider{margin-top:var(--space-unit)}#extension z-button{margin-left:var(--space-unit)}div.limited-width{--mw:none;max-width:var(--mw);margin:auto}z-button{--color-primary01:var(--gray600);--color-hover-primary:var(--gray700)}@media only screen and (min-width: 768px){footer{padding:0}#top{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);background-color:var(--gray800)}#top z-footer-section:last-child{display:none}#bottom{padding:0 calc(var(--space-unit) * 3);background-color:var(--gray900)}#bottom>div{grid-column-gap:var(--grid-tablet-margin);grid-template-columns:repeat(4, 1fr)}#bottom>div>div.item{margin:0}#bottom>div>div.item:nth-child(1){order:1}#bottom>div>div.item:nth-child(2){order:2;border-bottom:none}#bottom>div>div.item>p{padding-top:0}#bottom>div>div.logo>z-logo{width:auto;height:39px}#bottom>div>div.bottom-links{display:grid;order:3;font-size:12px;grid-column:span 2;grid-column-gap:var(--grid-tablet-margin);grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(auto-fill, 24px)}#extension{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;margin:auto;background-color:var(--gray800);color:white;grid-template-columns:1fr 1fr}#extension>div>div{text-align:end}#extension z-divider{grid-column:1 / span 2}}@media only screen and (min-width: 1152px){#top{width:100%}#top>div{grid-column-gap:var(--grid-desktop-margin);grid-template-columns:repeat(6, 1fr)}#bottom>div>div.item:nth-child(1)>p:nth-of-type(2){font-size:10px}#bottom>div>div.item>p{padding-bottom:0;margin-bottom:calc(var(--space-unit) * 2)}#bottom>div>div.item>div.social{margin-top:0}#bottom>div>div.bottom-links{padding:calc(var(--space-unit) * 2) 0 0 0;margin:0;grid-column-gap:var(--grid-desktop-margin);grid-template-columns:repeat(3, 1fr)}}@media only screen and (min-width: 1366px){#top{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}#bottom{padding:0 calc(var(--space-unit) * 4)}#extension{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4) 0}}";
 
@@ -8,12 +9,6 @@ const ZFooter = class {
     this.creditsLinkClick = createEvent(this, "creditsLinkClick", 7);
     this.reportAProblemButtonClick = createEvent(this, "reportAProblemButtonClick", 7);
     this.creditsLinkId = "creditsLinkId";
-    this.data = undefined;
-    this.productName = undefined;
-    this.productVersion = undefined;
-    this.productCreditsLink = undefined;
-    this.showReportAProblemButton = undefined;
-    this.contentMaxWidth = undefined;
     this.emitReportAProblemButtonClick = this.emitReportAProblemButtonClick.bind(this);
   }
   componentWillLoad() {
@@ -62,7 +57,7 @@ const ZFooter = class {
     if (this.productName || this.productVersion || this.productCreditsLink != null || this.showReportAProblemButton) {
       const versionString = `${this.productName ? " versione" : "Versione"} ${this.productVersion}`;
       const creditsObject = (h("z-body", { level: 5 }, (this.productName || this.productVersion) && " - ", h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits")));
-      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: "small" /* ButtonSize.SMALL */, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
+      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: ButtonSize.SMALL, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
     }
   }
   // INFO: backward compatibility