@zanichelli/delta_share 2.0.7 → 2.0.8

package/dist/wc/cjs/z-button-sort.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-458dc8f4.js');
+const index = require('./index-9ca7d5e5.js');
+const breakpoints = require('./breakpoints-a55736d0.js');
 
-const stylesCss = "button{height:36px;border:var(--border-size-medium) solid var(--myz-blue);border-radius:var(--border-radius);color:var(--myz-blue);fill:var(--myz-blue);background-color:var(--bg-white);outline:none;padding:0 var(--space-unit);cursor:pointer}button::-moz-focus-inner{border:0}button:hover{border-color:var(--myz-blue-dark);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button:active{border-color:var(--myz-blue-light);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button.selected{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}button>label{cursor:pointer;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;margin-right:calc(var(--space-unit) * 2)}button>span{font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:14px;margin-right:calc(var(--space-unit) * .5)}button>z-icon{padding-top:calc(var(--space-unit) * .5)}";
+const stylesCss = ":host,button{max-width:100%}button{height:36px;border:var(--border-size-medium) solid var(--myz-blue);border-radius:var(--border-radius);color:var(--myz-blue);fill:var(--myz-blue);background-color:var(--bg-white);outline:none;padding:0 var(--space-unit);cursor:pointer}button::-moz-focus-inner{border:0}button:hover{border-color:var(--myz-blue-dark);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button:active{border-color:var(--myz-blue-light);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button.selected{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}button>label{cursor:pointer;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;display:flex;align-items:center}button>label>span.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;padding:0}button>label>span.counter{margin-left:calc(var(--space-unit) / 2);margin-right:calc(var(--space-unit) * 2)}button>label>span.sort{margin-right:var(--half-x1);white-space:nowrap}button>span{font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:14px;margin-right:calc(var(--space-unit) * 0.5)}button>z-icon{padding-top:calc(var(--space-unit) * 0.5)}@media only screen and (min-width: 768px){:host,button{max-width:325px}}@media only screen and (min-width: 1025px){:host,button{max-width:490px}}";
 
 const ZButtonSort = class {
   constructor(hostRef) {
@@ -18,6 +19,7 @@ const ZButtonSort = class {
     this.isselected = false;
     /** sortable flag (optional) */
     this.sortasc = true;
+    this.allowTooltip = false;
   }
   emitButtonSortClick() {
     if (!this.isselected) {
@@ -31,8 +33,20 @@ const ZButtonSort = class {
       sortAsc: this.sortasc,
     });
   }
+  componentDidLoad() {
+    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint)
+      this.allowTooltip = true;
+  }
+  setButtonTitle() {
+    return this.allowTooltip
+      ? `${this.sortasc ? this.label : this.desclabel}`
+      : "";
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
   render() {
-    return (index.h("button", { id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, index.h("label", null, !this.sortasc && this.desclabel ? this.desclabel : this.label, this.counter && ` (${this.counter})`), index.h("span", null, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { name: "caret-up-down", width: 16, height: 16 })));
+    return (index.h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, index.h("label", null, index.h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), index.h("span", { class: "counter" }, this.counter && ` (${this.counter})`), index.h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
   }
 };
 ZButtonSort.style = stylesCss;

package/dist/wc/cjs/z-candybar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-458dc8f4.js');
+const index = require('./index-9ca7d5e5.js');
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-content:center}:host>div{position:fixed;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;top:30vh;max-width:297px;height:fit-content;min-height:232px;z-index:1000;margin:auto;overflow:auto;overflow:-moz-scrollbars-none;-ms-overflow-style:none;background:var(--myz-blue-lighter);border-radius:calc(var(--space-unit) * .5);box-shadow:0px -2px 4px 0px rgba(66, 69, 72, 0.4)}@media only screen and (min-width: 768px){:host>div{position:initial;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:stretch;position:fixed;top:auto;bottom:0;margin:0 auto;left:0;right:0;height:auto;min-height:138px;max-width:100%;border-radius:0px}}@media only screen and (min-width: 1152px){:host>div{min-height:122px}}";
 

package/dist/wc/cjs/z-card.cjs.entry.js

@@ -2,40 +2,68 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-458dc8f4.js');
-const index$1 = require('./index-b9bd2767.js');
+const index = require('./index-9ca7d5e5.js');
+const index$1 = require('./index-9c6fd1db.js');
 
-const stylesCss = "div{background-color:var(--bg-white);display:flex;flex-direction:column;overflow:hidden;width:auto;box-sizing:border-box;width:256px;height:522px;border:var(--border-size-medium) solid var(--bg-grey-200);border-radius:var(--border-radius)}div.real,div.trial{border-color:var(--accent)}div.faded{border:none}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:0px 0px 2px 2px var(--accent-dark);outline:none}";
+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;flex-direction:column;justify-content:flex-end;height:100%;padding:var(--space-unit)}::slotted([slot='metadata']),::slotted([slot='title']),::slotted([slot='text']){display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}::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']){background-color:var(--z-card--text-background);border:var(--z-card--text-border);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, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 
-const ZCardComponent = class {
+const ZCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** pressed status */
-    this.ispressed = false;
-    /** highlighted status */
-    this.ishighlighted = false;
+    this.cardClicked = index.createEvent(this, "cardClicked", 7);
+    /** Enable click interactions on the card. Default: false */
+    this.clickable = false;
+    /** Enable shadow. Default: false. */
+    this.showshadow = false;
   }
-  retrieveClass() {
-    let elemClasses = "";
-    if (this.cardtype === index$1.LicenseTypeEnum.real)
-      elemClasses += "real";
-    else if (this.cardtype === index$1.LicenseTypeEnum.trial)
-      elemClasses += "trial";
-    if (this.faded) {
-      elemClasses += " faded";
+  onClick(ev) {
+    // Do nothing for clicks on actions.
+    if (ev.target.getAttribute('slot') === 'action') {
+      return;
     }
-    else if (this.ispressed) {
-      elemClasses += " pressed";
+    if (!this.clickable) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
     }
-    else if (this.ishighlighted) {
-      elemClasses += " highlighted";
-    }
-    return elemClasses;
+    this.cardClicked.emit();
+  }
+  componentWillLoad() {
+    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
+  }
+  /**
+   * Template for a card without image cover.
+   * A colored background replaces the image and some data is moved over it.
+   */
+  renderColorCoverCard() {
+    return [
+      index.h("div", { class: "cover-container" }, index.h("div", { class: "color-cover" }, index.h("div", { class: "cover-content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" })))),
+      index.h("div", { class: "content" }, index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" })))
+    ];
+  }
+  /**
+  * Template for the content div.
+  */
+  renderContentDiv() {
+    return (index.h("div", { class: "content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }))));
   }
   render() {
-    return (index.h("div", { class: this.retrieveClass(), tabindex: "0" }, index.h("slot", null)));
+    if (this.variant === index$1.CardVariants.text) {
+      return this.renderContentDiv();
+    }
+    if (this.variant === index$1.CardVariants.overlay || this.hasCoverImage) {
+      return [
+        index.h("div", { class: "cover-container" }, this.hasCoverImage && [
+          index.h("slot", { name: "cover" }),
+          (this.variant !== index$1.CardVariants.overlay) && this.coverIcon && index.h("z-icon", { name: this.coverIcon })
+        ], !this.hasCoverImage && index.h("div", { class: "color-cover" })),
+        this.renderContentDiv()
+      ];
+    }
+    return this.renderColorCoverCard();
   }
+  get host() { return index.getElement(this); }
 };
-ZCardComponent.style = stylesCss;
+ZCard.style = stylesCss;
 
-exports.z_card = ZCardComponent;
+exports.z_card = ZCard;

package/dist/wc/cjs/z-carousel.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9ca7d5e5.js');
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}.z-carousel-items-container{display:flex;overflow-x:scroll;padding-inline-start:0;margin:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}";
+
+const ZCarousel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** sets 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;
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, index.h("z-ghost-loading", null), index.h("div", { style: { display: "none" } }, index.h("slot", null))));
+    }
+    return (index.h("ul", { class: "z-carousel-items-container" }, index.h("slot", null)));
+  }
+};
+ZCarousel.style = stylesCss;
+
+exports.z_carousel = ZCarousel;

package/dist/wc/cjs/z-chip-deprecated.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9ca7d5e5.js');
+
+const stylesCss = ":host>div{display:inline-block;min-height:28px;line-height:28px;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:12px}.boldtext{font-weight:bold}";
+
+const ZChipDeprecated = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  renderLegacyChip() {
+    return index.h("div", null, index.h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext);
+  }
+  render() {
+    return this.boldtext != null || this.regulartext != null ?
+      this.renderLegacyChip() :
+      index.h("div", null, index.h("slot", null));
+  }
+};
+ZChipDeprecated.style = stylesCss;
+
+exports.z_chip_deprecated = ZChipDeprecated;

package/dist/wc/cjs/z-chip.cjs.entry.js

@@ -2,22 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-458dc8f4.js');
+const index = require('./index-9ca7d5e5.js');
+const index$1 = require('./index-9c6fd1db.js');
+const utils = require('./utils-8a10bba9.js');
+require('./breakpoints-a55736d0.js');
 
-const stylesCss = ":host>div{display:inline-block;min-height:28px;line-height:28px;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:12px}.boldtext{font-weight:bold}";
+const stylesCss = ".sc-z-chip-h>button.sc-z-chip{display:inline-flex;align-items:center;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--gray400);border-radius:14px;color:var(--color-primary01);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:hover:not(:disabled),.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled)>z-icon.sc-z-chip:last-child{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.sc-z-chip:last-child{cursor:pointer}.sc-z-chip-h>button.sc-z-chip>z-icon.iconSx.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);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:not(:disabled):active{background-color:var(--gray50);text-decoration:underline}.sc-z-chip-h>button.sc-z-chip:not(:disabled):active:hover,.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;align-items:center;min-height:28px;line-height:28px;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px}.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;line-height:44px;border-radius:22px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:40px;line-height:40px;border-radius:22px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:36px;line-height:36px;border-radius:22px}@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;line-height:32px;border-radius:16px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:28px;line-height:28px;border-radius:16px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:24px;line-height:24px;border-radius:16px}}";
 
 const ZChip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.interactiveIconClick = index.createEvent(this, "interactiveIconClick", 7);
+    /** z-chip size type, can be default, medium or small */
+    this.type = index$1.ZChipType.default;
+    /** set z-chip as disabled  */
+    this.disabled = false;
   }
-  renderLegacyChip() {
-    return index.h("div", null, index.h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext);
+  emitinteractiveIconClick() {
+    this.interactiveIconClick.emit();
+  }
+  getIconSize() {
+    return utils.getDevice() !== index$1.DeviceEnum.desktop ? 22 : 14;
   }
   render() {
-    return this.boldtext != null || this.regulartext != null ?
-      this.renderLegacyChip() :
-      index.h("div", null, index.h("slot", null));
+    if (this.interactiveIcon) {
+      return (index.h("button", { class: this.type, disabled: this.disabled, tabindex: "0" }, this.icon && (index.h("z-icon", { class: "iconSx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), index.h("slot", null), index.h("z-icon", { tabIndex: this.disabled ? -1 : 0, onClick: () => this.emitinteractiveIconClick(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.emitinteractiveIconClick.bind(this)), name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() })));
+    }
+    return (index.h("div", { class: `${this.type}`, tabindex: "0" }, this.icon && (index.h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), index.h("slot", null)));
   }
+  get el() { return index.getElement(this); }
 };
 ZChip.style = stylesCss;
 

package/dist/wc/cjs/z-combobox.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-458dc8f4.js');
-const index$1 = require('./index-b9bd2767.js');
-const utils = require('./utils-1f907efa.js');
+const index = require('./index-9ca7d5e5.js');
+const index$1 = require('./index-9c6fd1db.js');
+const utils = require('./utils-8a10bba9.js');
+require('./breakpoints-a55736d0.js');
 
-const stylesCss = ":host{display:block}:host>div.fixed{position:relative;height:48px}:host>div>.header{background-color:var(--bg-white);border-radius:var(--border-radius);border:var(--border-size-medium) solid var(--bg-grey-200);position:relative;z-index:10;min-height:48px;margin:0;padding:0 calc(var(--space-unit) * 2);display:flex;justify-content:space-between;align-items:center;cursor:pointer}:host>div.open>.header{border-radius:var(--border-radius) var(--border-radius) 0 0}:host>div>.header>h2{font-family:var(--dashboard-font);font-weight:var(--font-rg);color:var(--text-grey-800);font-size:16px;line-height:24px;margin:0;padding:var(--space-unit) 0}:host>div>.header>h2>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--myz-blue);transform:rotate(360deg);transition:all 200ms linear}:host>div.open>.header>z-icon{fill:var(--myz-blue);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.openComboData{background-color:var(--bg-white);border-radius:0 0 var(--border-radius) var(--border-radius);border:var(--border-size-medium) solid var(--bg-grey-200);border-top:0px;position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host>div.open>div.openComboData>div{padding:0;max-height:235px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--bg-grey-200)}:host>div.open>div.openComboData>z-input{margin-bottom:calc(var(--space-unit) * 2);width:100%}:host>div.open>div.openComboData>div>ul{margin:0;padding:0 3px;max-height:235px}::-webkit-scrollbar{background:linear-gradient(\n    90deg,\n    var(--bg-white) 2px,\n    var(--bg-grey-200) 4px,\n    var(--bg-white) 8px\n  );border-radius:var(--border-radius);width:10px}::-webkit-scrollbar-thumb{background-color:var(--myz-blue);border-radius:var(--border-radius);width:10px}:host>div.open>z-input{color:var(--myz-blue);margin:0 calc(var(--space-unit) * 2);width:238px;position:relative;z-index:1}:host>div.open>div.openComboData>div.search{box-shadow:1px 1px 4px 2px rgba(217, 222, 227, 0.5);margin-top:0;max-height:auto;overflow:hidden}:host>div.open>div.openComboData>div.search>ul{padding:var(--space-unit) calc(var(--space-unit) * 2);max-height:180px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--bg-grey-200)}:host>div.open>div.openComboData>div.search>div{display:flex;justify-content:center}:host>div.open>div.openComboData>div.search>div>a{display:inline-block;cursor:pointer;color:var(--myz-blue);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;height:44px;line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.openComboData>div.checkAllWrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * .5);text-align:left}";
+const stylesCss = ":host{display:block}:host>div.fixed{position:relative;height:42px}:host>div>.header{background-color:var(--bg-white);border-radius:var(--border-radius-small);border:var(--border-size-small) solid var(--bg-grey-700);position:relative;z-index:10;min-height:42px;margin:0;padding:0 calc(var(--space-unit) * 2);display:flex;justify-content:space-between;align-items:center;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{margin:0;padding:var(--space-unit) 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-radius:var(border-radius-small) var(border-radius-small) 0 0;border:var(--border-size-small) solid var(--blue500)}:host>div.open>.header>z-icon{fill:var(--text-grey-800);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.openComboData{background-color:var(--bg-white);border-radius:0;border:var(--border-size-small) solid var(--gray200);border-top:0px;position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host>div.open>div.openComboData>div{padding:0;max-height:235px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--gray200)}:host>div.open>div.openComboData>z-input{margin-bottom:calc(var(--space-unit) * 2);width:100%}:host>div.open>div.openComboData>div>ul{margin:0;padding:0 3px;max-height:235px}::-webkit-scrollbar{background:linear-gradient(\n    90deg,\n    var(--bg-white) 2px,\n    var(--bg-grey-200) 4px,\n    var(--bg-white) 8px\n  );border-radius:var(--border-radius);width:10px}::-webkit-scrollbar-thumb{background-color:var(--myz-blue);border-radius:var(--border-radius);width:10px}:host>div.open>z-input{color:var(--myz-blue);margin:0 calc(var(--space-unit) * 2);width:238px;position:relative;z-index:1}:host>div.open>div.openComboData>div.search{box-shadow:1px 1px 4px 2px rgba(217, 222, 227, 0.5);margin-top:0;max-height:auto;overflow:hidden}:host>div.open>div.openComboData>div.search>ul{padding:var(--space-unit) calc(var(--space-unit) * 2);max-height:180px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--bg-grey-200)}:host>div.open>div.openComboData>div.search>div{display:flex;justify-content:center}:host>div.open>div.openComboData>div.search>div>a{display:inline-block;cursor:pointer;color:var(--myz-blue);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;height:44px;line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.openComboData>div.checkAllWrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * .5);text-align:left}";
 
 const ZCombobox = class {
   constructor(hostRef) {
@@ -17,7 +18,7 @@ const ZCombobox = class {
     /** no result text message */
     this.noresultslabel = "Nessun risultato";
     /** toggle combo list opening flag */
-    this.isopen = true;
+    this.isopen = false;
     /** fixed style flag */
     this.isfixed = false;
     /** close combobox list text */
@@ -33,13 +34,13 @@ const ZCombobox = class {
     this.renderItemsList = []; // used for render only
     this.itemsList = [];
     this.inputType = index$1.InputTypeEnum.text;
-    this.closeComboBox = this.closeComboBox.bind(this);
+    this.toggleComboBox = this.toggleComboBox.bind(this);
     this.closeFilterItems = this.closeFilterItems.bind(this);
   }
   watchItems() {
     this.itemsList =
       typeof this.items === "string" ? JSON.parse(this.items) : this.items;
-    this.selectedCounter = this.itemsList.filter(item => item.checked).length;
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     if (this.searchValue) {
       this.filterItems(this.searchValue);
     }
@@ -69,7 +70,7 @@ const ZCombobox = class {
     this.watchItems();
   }
   componentWillRender() {
-    this.selectedCounter = this.itemsList.filter(item => item.checked).length;
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     if (this.searchValue) {
       this.filterItems(this.searchValue);
     }
@@ -86,7 +87,7 @@ const ZCombobox = class {
       return this.closeFilterItems();
     this.searchValue = value;
     this.resetRenderItemsList();
-    this.renderItemsList = this.renderItemsList.filter(item => {
+    this.renderItemsList = this.renderItemsList.filter((item) => {
       const start = item.name.toUpperCase().indexOf(value.toUpperCase());
       const end = start + value.length;
       const newName = item.name.substring(0, start) +
@@ -105,14 +106,14 @@ const ZCombobox = class {
     this.searchValue = "";
     this.resetRenderItemsList();
   }
-  closeComboBox() {
+  toggleComboBox() {
     this.isopen = !this.isopen;
   }
   renderHeader() {
-    return (index.h("div", { class: "header", onClick: () => this.closeComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === index$1.keybordKeyCodeEnum.SPACE)
+    return (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
+        if (ev.keyCode === index$1.KeyboardKeyCodeEnum.SPACE)
           ev.preventDefault();
-      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.closeComboBox), role: "button", tabindex: 0 }, index.h("h2", null, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", width: 18, height: 18 })));
+      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, index.h("z-body", { level: 3, component: "p" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", width: 18, height: 18 })));
   }
   renderContent() {
     if (!this.isopen)
@@ -130,13 +131,13 @@ const ZCombobox = class {
     if (!items.length && this.searchValue)
       return this.renderNoSearchResults();
     return (index.h("ul", null, items.map((item, i) => {
-      return (index.h("z-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i === items.length - 1 ? false : true }, index.h("z-input", { type: index$1.InputTypeEnum.checkbox, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked &&
+      return (index.h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, index.h("z-input", { type: index$1.InputTypeEnum.checkbox, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked &&
           this.maxcheckableitems &&
           this.maxcheckableitems === this.selectedCounter })));
     })));
   }
   renderNoSearchResults() {
-    return (index.h("ul", null, index.h("z-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
+    return (index.h("ul", null, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
   }
   renderCloseButton() {
     return (index.h("div", null, index.h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
@@ -144,7 +145,7 @@ const ZCombobox = class {
   renderSearchInput() {
     if (!this.isopen)
       return;
-    return (index.h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, hasmessage: false, onInputChange: (e) => {
+    return (index.h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, onInputChange: (e) => {
         if (e.detail.keycode === 27)
           return this.closeFilterItems();
         this.filterItems(e.detail.value);
@@ -158,7 +159,7 @@ const ZCombobox = class {
         this.maxcheckableitems < this.itemsList.length })));
   }
   render() {
-    return (index.h("div", { "data-action": `combo-${this.inputid}`, class: `${this.isopen && "open"} ${this.isfixed && "fixed"}`, id: this.inputid }, this.renderHeader(), this.renderContent()));
+    return (index.h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed }, id: this.inputid }, this.renderHeader(), this.renderContent()));
   }
   static get watchers() { return {
     "items": ["watchItems"]

package/dist/wc/cjs/z-contextual-menu.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9ca7d5e5.js');
+const index$1 = require('./index-9c6fd1db.js');
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:focus-within)>z-popover{box-shadow:var(--shadow-focus-primary)}.popover-content-container{min-width:112px;max-width:280px;white-space:nowrap;padding:calc(var(--space-unit) / 2) 0}.element-container:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.element-text{overflow:hidden;text-overflow:ellipsis;font-size:14px}.element-container,.disabled-element-container{display:flex;align-items:center;gap:var(--space-unit);fill:var(--color-disabled03);padding:calc(var(--space-unit) / 2) var(--space-unit);min-height:calc(var(--space-unit) * 4);box-sizing:border-box}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
+
+const ZContextualMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickContextualMenu = index.createEvent(this, "clickContextualMenu", 7);
+    /**
+     * [optional] Sets text color of ZContextualMenu's content
+     */
+    this.color = "color-primary01";
+    /**
+     * [optional] Sets the position of the popover
+     */
+    this.popoverPosition = index$1.PopoverPosition["after-down"];
+  }
+  componentWillRender() {
+    if (this.elements) {
+      this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
+    }
+  }
+  showIcon() {
+    return !this.jsonElements.some((element) => !element.icon);
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("z-popover", { "background-color": "color-background", "box-shadow": "shadow-2", position: this.popoverPosition, padding: "0" }, index.h("z-icon", { "aria-label": "apri-menu-contestuale", slot: "trigger", name: "contextual-menu", fill: this.color, style: { cursor: "pointer" } }), index.h("div", { class: "popover-content-container", slot: "popover" }, index.h("z-list", null, index.h("z-list-group", { "divider-type": "element" }, (_a = this.jsonElements) === null || _a === void 0 ? void 0 : _a.map((element, index$1) => (index.h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index$1, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, index.h("div", { class: element.disabled
+        ? "disabled-element-container"
+        : "element-container" }, this.showIcon() && (index.h("div", { class: "element-icon" }, index.h("z-icon", { name: element.icon, width: 16, height: 16 }))), index.h("div", { class: "element-text" }, index.h("span", null, element.text))))))))))));
+  }
+};
+ZContextualMenu.style = stylesCss;
+
+exports.z_contextual_menu = ZContextualMenu;

package/dist/wc/cjs/z-cookiebar.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-458dc8f4.js');
-const index$1 = require('./index-b9bd2767.js');
+const index = require('./index-9ca7d5e5.js');
+const index$1 = require('./index-9c6fd1db.js');
 
-const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:space-between;color:var(--text-grey-800);border-radius:calc(var(--space-unit) * .5);font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}.content>div>h2{margin:0;padding:0;color:var(--text-grey-800);border-radius:0px;font-size:18px;font-weight:var(--font-sb);letter-spacing:0px}.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{cursor:pointer;font-weight:var(--font-sb);color:var(--text-grey-800);text-decoration:underline;height:14px;display:inline-flex}.content>div>div>p>a:visited{color:var(--text-grey-800);cursor:pointer;z-index:1000}.content>z-button{margin:0;width:100%}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3)}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{margin:0;width:initial}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-left:calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 4)}}";
+const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:space-between;color:var(--text-grey-800);border-radius:calc(var(--space-unit) * 0.5);font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}.content>div>h2{margin:0;padding:0;color:var(--text-grey-800);border-radius:0px;font-size:18px;font-weight:var(--font-sb);letter-spacing:0px}.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{cursor:pointer;font-weight:var(--font-sb);color:var(--text-grey-800);text-decoration:underline;height:14px;display:inline-flex}.content>div>div>p>a:visited{color:var(--text-grey-800);cursor:pointer;z-index:1000}.content>z-button{margin:0;width:100%}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3)}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{margin:0;width:initial}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-left:calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 4)}}";
 
 const ZCookiebar = class {
   constructor(hostRef) {
@@ -34,7 +34,7 @@ const ZCookiebar = class {
     return (index.h("div", { class: "content", slot: "content" }, index.h("div", null, index.h("h2", null, "Su questo sito usiamo i cookie."), index.h("div", null, index.h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", index.h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), index.h("z-button", { variant: index$1.ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
-    return index.h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+    return (index.h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot()));
   }
 };
 ZCookiebar.style = stylesCss;