@zanichelli/albe-web-components 2.33.5-rc1 → 2.34.1

package/dist/{web-components-library → esm}/z-button-sort.entry.js

@@ -1,50 +1,50 @@
-import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
-import { t as tabletBreakpoint } from './breakpoints-14432d05.js';
+import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
+import { t as tabletBreakpoint } from './breakpoints-c386984e.js';
 
 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) {
-    registerInstance(this, hostRef);
-    this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
-    /** sort label content (ascending) (optional) */
-    this.sortlabelasc = "A-Z";
-    /** sort label content (descending) (optional) */
-    this.sortlabeldesc = "Z-A";
-    /** selected flag (optional) */
-    this.isselected = false;
-    /** sortable flag (optional) */
-    this.sortasc = true;
-    this.allowTooltip = false;
-  }
-  emitButtonSortClick() {
-    if (!this.isselected) {
-      this.isselected = true;
-    }
-    else {
-      this.sortasc = !this.sortasc;
-    }
-    this.buttonSortClick.emit({
-      buttonid: this.buttonid,
-      sortAsc: this.sortasc,
-    });
-  }
-  componentDidLoad() {
-    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint)
-      this.allowTooltip = true;
-  }
-  setButtonTitle() {
-    return this.allowTooltip
-      ? `${this.sortasc ? this.label : this.desclabel}`
-      : "";
-  }
-  elementHasEllipsis() {
-    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-  }
-  render() {
-    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("label", null, h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { class: "counter" }, this.counter && ` (${this.counter})`), h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
-  }
-};
+const ZButtonSort = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
+    /** sort label content (ascending) (optional) */
+    this.sortlabelasc = "A-Z";
+    /** sort label content (descending) (optional) */
+    this.sortlabeldesc = "Z-A";
+    /** selected flag (optional) */
+    this.isselected = false;
+    /** sortable flag (optional) */
+    this.sortasc = true;
+    this.allowTooltip = false;
+  }
+  emitButtonSortClick() {
+    if (!this.isselected) {
+      this.isselected = true;
+    }
+    else {
+      this.sortasc = !this.sortasc;
+    }
+    this.buttonSortClick.emit({
+      buttonid: this.buttonid,
+      sortAsc: this.sortasc,
+    });
+  }
+  componentDidLoad() {
+    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint)
+      this.allowTooltip = true;
+  }
+  setButtonTitle() {
+    return this.allowTooltip
+      ? `${this.sortasc ? this.label : this.desclabel}`
+      : "";
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
+  render() {
+    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("label", null, h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { class: "counter" }, this.counter && ` (${this.counter})`), h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
+  }
+};
 ZButtonSort.style = stylesCss;
 
 export { ZButtonSort as z_button_sort };

package/{www/build → dist/esm}/z-candybar.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, h } from './index-44936066.js';
+import { r as registerInstance, h } from './index-fa9e549c.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}}";
 
-const ZCandybar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h("div", null, h("slot", { name: "content" })));
-  }
-};
+const ZCandybar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", null, h("slot", { name: "content" })));
+  }
+};
 ZCandybar.style = stylesCss;
 
 export { ZCandybar as z_candybar };

package/{www/build → dist/esm}/z-card.entry.js

@@ -1,54 +1,54 @@
-import { r as registerInstance, f as createEvent, h, g as getElement } from './index-44936066.js';
-import { C as CardVariants } from './index-08d9a3bf.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fa9e549c.js';
+import { C as CardVariants } from './index-09b57d95.js';
 
 const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);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='border'])>.content,:host([variant='shadow'])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}: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']){box-shadow:var(--shadow-2)}:host([variant='shadow'][clickable]:hover){box-shadow:var(--shadow-4)}:host([variant='shadow'][clickable]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant='shadow'][clickable]: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 ZCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cardClicked = createEvent(this, "cardClicked", 7);
-    /** Enable click interactions on the card. Default: false */
-    this.clickable = false;
-  }
-  onClick(ev) {
-    // Do nothing for clicks on actions.
-    if (ev.target.getAttribute('slot') === 'action') {
-      return;
-    }
-    if (!this.clickable) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      return;
-    }
-    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 [
-      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
-    ];
-  }
-  render() {
-    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
-      return [
-        h("div", { class: "cover-container" }, this.hasCoverImage && [
-          h("slot", { name: "cover" }),
-          (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
-        ], !this.hasCoverImage && h("div", { class: "color-cover" })),
-        h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
-      ];
-    }
-    return this.renderColorCoverCard();
-  }
-  get host() { return getElement(this); }
-};
+const ZCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardClicked = createEvent(this, "cardClicked", 7);
+    /** Enable click interactions on the card. Default: false */
+    this.clickable = false;
+  }
+  onClick(ev) {
+    // Do nothing for clicks on actions.
+    if (ev.target.getAttribute('slot') === 'action') {
+      return;
+    }
+    if (!this.clickable) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    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 [
+      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
+    ];
+  }
+  render() {
+    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
+      return [
+        h("div", { class: "cover-container" }, this.hasCoverImage && [
+          h("slot", { name: "cover" }),
+          (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
+        ], !this.hasCoverImage && h("div", { class: "color-cover" })),
+        h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
+      ];
+    }
+    return this.renderColorCoverCard();
+  }
+  get host() { return getElement(this); }
+};
 ZCard.style = stylesCss;
 
 export { ZCard as z_card };

package/{www/build → dist/esm}/z-chip.entry.js

@@ -1,20 +1,20 @@
-import { r as registerInstance, h } from './index-44936066.js';
+import { r as registerInstance, h } from './index-fa9e549c.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 ZChip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  renderLegacyChip() {
-    return h("div", null, h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext);
-  }
-  render() {
-    return this.boldtext != null || this.regulartext != null ?
-      this.renderLegacyChip() :
-      h("div", null, h("slot", null));
-  }
-};
+const ZChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  renderLegacyChip() {
+    return h("div", null, h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext);
+  }
+  render() {
+    return this.boldtext != null || this.regulartext != null ?
+      this.renderLegacyChip() :
+      h("div", null, h("slot", null));
+  }
+};
 ZChip.style = stylesCss;
 
 export { ZChip as z_chip };

package/dist/{web-components-library → esm}/z-combobox.entry.js

@@ -1,166 +1,166 @@
-import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
-import { I as InputTypeEnum, k as keybordKeyCodeEnum } from './index-08d9a3bf.js';
-import { h as handleKeyboardSubmit } from './utils-2e0fffb8.js';
-import './breakpoints-14432d05.js';
+import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
+import { I as InputTypeEnum, k as keybordKeyCodeEnum } from './index-09b57d95.js';
+import { h as handleKeyboardSubmit } from './utils-f0067254.js';
+import './breakpoints-c386984e.js';
 
-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(\r\n    90deg,\r\n    var(--bg-white) 2px,\r\n    var(--bg-grey-200) 4px,\r\n    var(--bg-white) 8px\r\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) {
-    registerInstance(this, hostRef);
-    this.comboboxChange = createEvent(this, "comboboxChange", 7);
-    /** show search input flag (optional) */
-    this.hassearch = false;
-    /** 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.renderItemsList = []; // used for render only
-    this.itemsList = [];
-    this.inputType = InputTypeEnum.text;
-    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;
-    if (this.searchValue) {
-      this.filterItems(this.searchValue);
-    }
-    else {
-      this.resetRenderItemsList();
-    }
-  }
-  inputCheckListener(e) {
-    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
-    if (id === "check-all" &&
-      (!this.maxcheckableitems ||
-        this.maxcheckableitems >= this.itemsList.length)) {
-      return this.checkAll(e.detail.checked);
-    }
-    this.itemsList = this.itemsList.map((item) => {
-      if (item.id === id)
-        item.checked = e.detail.checked;
-      return item;
-    });
-    this.resetRenderItemsList();
-    this.emitComboboxChange();
-  }
-  emitComboboxChange() {
-    this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
-  }
-  componentWillLoad() {
-    this.watchItems();
-  }
-  componentWillRender() {
-    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
-    if (this.searchValue) {
-      this.filterItems(this.searchValue);
-    }
-  }
-  resetRenderItemsList() {
-    const renderItemsList = [];
-    this.itemsList.forEach((item) => {
-      renderItemsList.push(Object.assign({}, item));
-    });
-    this.renderItemsList = renderItemsList;
-  }
-  filterItems(value) {
-    if (!value)
-      return this.closeFilterItems();
-    this.searchValue = value;
-    this.resetRenderItemsList();
-    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) +
-        item.name.substring(start, end).bold() +
-        item.name.substring(end, item.name.length);
-      item.name = newName;
-      return start >= 0;
-    });
-  }
-  checkAll(checked = true) {
-    this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
-    this.resetRenderItemsList();
-    this.emitComboboxChange();
-  }
-  closeFilterItems() {
-    this.searchValue = "";
-    this.resetRenderItemsList();
-  }
-  toggleComboBox() {
-    this.isopen = !this.isopen;
-  }
-  renderHeader() {
-    return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === keybordKeyCodeEnum.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 })));
-  }
-  renderContent() {
-    if (!this.isopen)
-      return;
-    return (h("div", { class: "openComboData" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
-  }
-  renderItems() {
-    if (!this.isopen)
-      return;
-    return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
-  }
-  renderList(items) {
-    if (!items)
-      return;
-    if (!items.length && this.searchValue)
-      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: 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 (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
-  }
-  renderCloseButton() {
-    return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
-  }
-  renderSearchInput() {
-    if (!this.isopen)
-      return;
-    return (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) => {
-        if (e.detail.keycode === 27)
-          return this.closeFilterItems();
-        this.filterItems(e.detail.value);
-      } }));
-  }
-  renderCheckAll() {
-    if (this.searchValue)
-      return;
-    const allChecked = this.selectedCounter === this.itemsList.length;
-    return (h("div", { class: "checkAllWrapper" }, h("z-input", { type: InputTypeEnum.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: `${this.isopen ? "open" : ""} ${this.isfixed ? "fixed" : ""}`, id: this.inputid }, this.renderHeader(), this.renderContent()));
-  }
-  static get watchers() { return {
-    "items": ["watchItems"]
-  }; }
-};
+const ZCombobox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.comboboxChange = createEvent(this, "comboboxChange", 7);
+    /** show search input flag (optional) */
+    this.hassearch = false;
+    /** 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.renderItemsList = []; // used for render only
+    this.itemsList = [];
+    this.inputType = InputTypeEnum.text;
+    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;
+    if (this.searchValue) {
+      this.filterItems(this.searchValue);
+    }
+    else {
+      this.resetRenderItemsList();
+    }
+  }
+  inputCheckListener(e) {
+    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
+    if (id === "check-all" &&
+      (!this.maxcheckableitems ||
+        this.maxcheckableitems >= this.itemsList.length)) {
+      return this.checkAll(e.detail.checked);
+    }
+    this.itemsList = this.itemsList.map((item) => {
+      if (item.id === id)
+        item.checked = e.detail.checked;
+      return item;
+    });
+    this.resetRenderItemsList();
+    this.emitComboboxChange();
+  }
+  emitComboboxChange() {
+    this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
+  }
+  componentWillLoad() {
+    this.watchItems();
+  }
+  componentWillRender() {
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+    if (this.searchValue) {
+      this.filterItems(this.searchValue);
+    }
+  }
+  resetRenderItemsList() {
+    const renderItemsList = [];
+    this.itemsList.forEach((item) => {
+      renderItemsList.push(Object.assign({}, item));
+    });
+    this.renderItemsList = renderItemsList;
+  }
+  filterItems(value) {
+    if (!value)
+      return this.closeFilterItems();
+    this.searchValue = value;
+    this.resetRenderItemsList();
+    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) +
+        item.name.substring(start, end).bold() +
+        item.name.substring(end, item.name.length);
+      item.name = newName;
+      return start >= 0;
+    });
+  }
+  checkAll(checked = true) {
+    this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
+    this.resetRenderItemsList();
+    this.emitComboboxChange();
+  }
+  closeFilterItems() {
+    this.searchValue = "";
+    this.resetRenderItemsList();
+  }
+  toggleComboBox() {
+    this.isopen = !this.isopen;
+  }
+  renderHeader() {
+    return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
+        if (ev.keyCode === keybordKeyCodeEnum.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 })));
+  }
+  renderContent() {
+    if (!this.isopen)
+      return;
+    return (h("div", { class: "openComboData" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
+  }
+  renderItems() {
+    if (!this.isopen)
+      return;
+    return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+  }
+  renderList(items) {
+    if (!items)
+      return;
+    if (!items.length && this.searchValue)
+      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: 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 (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
+  }
+  renderCloseButton() {
+    return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
+  }
+  renderSearchInput() {
+    if (!this.isopen)
+      return;
+    return (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) => {
+        if (e.detail.keycode === 27)
+          return this.closeFilterItems();
+        this.filterItems(e.detail.value);
+      } }));
+  }
+  renderCheckAll() {
+    if (this.searchValue)
+      return;
+    const allChecked = this.selectedCounter === this.itemsList.length;
+    return (h("div", { class: "checkAllWrapper" }, h("z-input", { type: InputTypeEnum.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: `${this.isopen ? "open" : ""} ${this.isfixed ? "fixed" : ""}`, id: this.inputid }, this.renderHeader(), this.renderContent()));
+  }
+  static get watchers() { return {
+    "items": ["watchItems"]
+  }; }
+};
 ZCombobox.style = stylesCss;
 
 export { ZCombobox as z_combobox };