@zanichelli/albe-web-components 2.33.4 → 2.34.0

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

@@ -0,0 +1,54 @@
+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); }
+};
+ZCard.style = stylesCss;
+
+export { ZCard as z_card };

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

@@ -0,0 +1,20 @@
+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));
+  }
+};
+ZChip.style = stylesCss;
+
+export { ZChip as z_chip };

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

@@ -0,0 +1,166 @@
+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(\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"]
+  }; }
+};
+ZCombobox.style = stylesCss;
+
+export { ZCombobox as z_combobox };

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-fa9e549c.js';
+import { P as PopoverPosition } from './index-09b57d95.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) {
+    registerInstance(this, hostRef);
+    this.clickContextualMenu = 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 = 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 (h(Host, null, h("z-popover", { "background-color": "color-background", "box-shadow": "shadow-2", position: this.popoverPosition, padding: "0" }, h("z-icon", { "aria-label": "apri-menu-contestuale", slot: "trigger", name: "contextual-menu", fill: this.color, style: { cursor: "pointer" } }), h("div", { class: "popover-content-container", slot: "popover" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_a = this.jsonElements) === null || _a === void 0 ? void 0 : _a.map((element, 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, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled
+        ? "disabled-element-container"
+        : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
+  }
+};
+ZContextualMenu.style = stylesCss;
+
+export { ZContextualMenu as z_contextual_menu };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
-import { b as ButtonVariantEnum } from './index-4952bfe3.js';
+import { a as ButtonVariantEnum } from './index-09b57d95.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)}}";
 

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

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from './index-fa9e549c.js';
+import { t as DividerSize, f as DividerOrientation } from './index-09b57d95.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-footer-link_3.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h } from './index-fa9e549c.js';
+
+const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>a{display:inline-block;color:var(--color-white);padding:calc(var(--space-unit) / 2 * 3) 0;border-bottom:1px solid var(--gray50);text-decoration:none;font-size:14px;width:100%}@media only screen and (min-width: 768px){:host a{font-size:12px;border-bottom:none;text-decoration:underline;padding:0;width:initial}}";
+
+const ZFooterLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("a", { href: this.href, target: "_blank" }, h("slot", null)));
+  }
+};
+ZFooterLink.style = stylesCss$2;
+
+const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>nav{background-color:var(--gray900);display:flex;flex-direction:column;justify-items:flex-start;overflow:hidden;margin:calc(var(--space-unit) / 2) 0;padding:0}:host>nav>.header{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:flex-start;height:calc(var(--space-unit) * 4);border-bottom:1px solid var(--gray50);line-height:1}:host>nav>.header>h2{color:var(--color-white);font-size:16px;margin:var(--space-unit) 0}:host>nav>.header{fill:var(--color-white)}:host>nav>.header>button{position:absolute;top:var(--space-unit);right:0;margin:0;padding:0;background:transparent;border:0;appearance:none;cursor:pointer}:host>nav>.header>z-icon{display:block}:host>nav>.content{background-color:var(--gray800);display:none;height:0;transition:0.3s ease;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}:host>nav>.content.show{display:block;height:auto;transition:0.3s ease}@media only screen and (min-width: 768px){:host>nav{display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:1fr;grid-column-gap:var(--grid-tablet-margin);padding:calc(var(--space-unit) * 2) 0;border-bottom:1px solid var(--color-white);margin:0;background-color:var(--gray800)}:host>nav>.header>button.toggleButton{display:none}:host>nav>.header{border-bottom:none;padding:0;margin:0}:host>nav>.header>h2{border:none}:host>nav>.content,:host>nav>.content.show{grid-column:span 3;width:100%;padding:0;margin:0;display:grid;grid-template-columns:repeat(3, 1fr);grid-column-gap:var(--grid-tablet-margin);grid-row-gap:var(--space-unit);height:auto;align-items:stretch;align-content:stretch;margin:0}}@media only screen and (min-width: 1152px){:host>nav{display:grid;grid-template-columns:1fr;grid-template-rows:40px 4fr;padding:0;border-bottom:none}:host>nav>.header{position:relative;display:inline-flex;height:24px}:host>nav>.header>h2{width:auto;font-size:16px;line-height:1;font-weight:600;color:var(--gray50);padding:0 0 var(--space-unit);margin:0}:host>nav>.header::after{content:\"\";display:block;position:absolute;top:100%;left:0;width:120px;border-bottom:1px solid var(--gray50)}:host>nav>.content,:host>nav>.content.show{grid-column:auto;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:flex-start}}";
+
+const ZFooterSection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isOpen = false;
+  }
+  renderToggleButton() {
+    return (h("button", { class: "toggleButton", onClick: () => (this.isOpen = !this.isOpen) }, h("z-icon", { name: this.isOpen ? "chevron-up" : "chevron-down", width: 16, height: 16 })));
+  }
+  render() {
+    return (h("nav", null, h("div", { class: "header" }, h("h2", null, this.name), this.renderToggleButton()), h("div", { class: `content ${this.isOpen ? "show" : ""}` }, h("slot", null))));
+  }
+};
+ZFooterSection.style = stylesCss$1;
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>a>img{width:calc(var(--space-unit) * 3)}@media only screen and (min-width: 1152px){:host>a>img{width:16px}}";
+
+const ZFooterSocial = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("a", { href: this.href, target: "_blank" }, h("img", { src: this.icon, alt: this.description })));
+  }
+};
+ZFooterSocial.style = stylesCss;
+
+export { ZFooterLink as z_footer_link, ZFooterSection as z_footer_section, ZFooterSocial as z_footer_social };

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

@@ -0,0 +1,98 @@
+import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
+import { a as ButtonVariantEnum, b as ButtonSizeEnum } from './index-09b57d95.js';
+
+const stylesCss = ":host{width:100%}footer{width:auto;height:auto;box-sizing:border-box;font-family:var(--font-family-sans);font-size:13px;padding:var(--space-unit) 0;background-color:var(--gray900);color:var(--gray50)}footer *{box-sizing:border-box}footer>section>div{display:grid}#top{padding:0 calc(var(--space-unit) * 2)}#bottom{width:auto;height:auto;margin:0;padding:0 calc(var(--space-unit) * 2);white-space:pre-line;font-size:12px}#bottom>div{display:grid;grid-template-columns:1fr}#bottom>div>div.item{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 1;height:auto;width:auto;padding:calc(var(--space-unit) * 2) 0}#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;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(auto-fill, 24px);column-gap:12px;padding:0;margin-bottom:0px}#bottom>div>div.bottom-links{display:none}#bottom>div>div.item>p{margin:var(--space-unit) 0;padding: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;grid-template-columns:1fr;grid-row-gap:var(--space-unit);align-items:center}#extension z-divider{margin-top:var(--space-unit)}#extension z-button{margin-left:var(--space-unit)}div.limited-width{margin:auto;max-width:var(--mw)}@media only screen and (min-width: 768px){footer{padding:0}#top{background-color:var(--gray800);padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3)}#top z-footer-section:last-child{display:none}#bottom{background-color:var(--gray900);padding:0 calc(var(--space-unit) * 3)}#bottom>div{grid-template-columns:repeat(4, 1fr);grid-column-gap:var(--grid-tablet-margin)}#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:block;grid-column:span 2;order:3}#bottom>div>div.bottom-links{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(auto-fill, 24px);grid-column-gap:var(--grid-tablet-margin);font-size:12px}#extension{margin:auto;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;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-template-columns:repeat(6, 1fr);grid-column-gap:var(--grid-desktop-margin)}#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}#bottom>div>div.bottom-links{grid-template-columns:repeat(3, 1fr);grid-column-gap:var(--grid-desktop-margin);margin:0}}@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}}";
+
+const ZFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.creditsLinkClick = createEvent(this, "creditsLinkClick", 7);
+    this.reportAProblemButtonClick = createEvent(this, "reportAProblemButtonClick", 7);
+    this.creditsLinkId = "creditsLinkId";
+    this.emitReportAProblemButtonClick = this.emitReportAProblemButtonClick.bind(this);
+  }
+  componentWillLoad() {
+    if (this.data) {
+      console.warn("z-footer: `data` prop is deprecated and will be removed in a future version. Use slots instead.");
+      this.jsonData = JSON.parse(this.data);
+    }
+  }
+  zLinkClickListener(e) {
+    if (e.detail.linkId === this.creditsLinkId) {
+      this.emitCreditsLinkClick();
+    }
+  }
+  emitCreditsLinkClick() {
+    this.creditsLinkClick.emit();
+  }
+  emitReportAProblemButtonClick() {
+    this.reportAProblemButtonClick.emit();
+  }
+  renderZLogo() {
+    return (h("z-logo", { link: "https://www.zanichelli.it", width: 144, height: 38, imageAlt: "Home Zanichelli", targetBlank: true }));
+  }
+  renderAddress() {
+    return (h("p", null, "Zanichelli editore S.p.A. via Irnerio 34, 40126 Bologna", h("br", null), "Fax 051 - 249.782 / 293.224 | Tel. 051 - 293.111 / 245.024", h("br", null), "Partita IVA 03978000374"));
+  }
+  renderSocial() {
+    return (h("div", { class: "social" }, h("slot", { name: "social" }), this.renderFooterSocialJsonData()));
+  }
+  renderCopyright() {
+    return (h("p", null, "Copyright \u2013 2018-", new Date().getFullYear(), " Zanichelli", h("span", null, "All rights reserved")));
+  }
+  renderCertification() {
+    return (h("p", null, "Zanichelli editore S.p.A. opera con sistema qualit\u00E0 certificato CertiCarGraf n. 477", h("br", null), "secondo la norma UNI EN ISO 9001:2015"));
+  }
+  renderBottomLinks() {
+    return (h("div", { class: "item bottom-links" }, h("slot", { name: "links" }), this.renderFooterBottomJsonData()));
+  }
+  renderFooterBottom() {
+    return (h("section", { id: "bottom" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { class: "item logo" }, this.renderZLogo(), this.renderCopyright(), this.renderCertification()), h("div", { class: "item" }, this.renderAddress(), this.renderSocial()), this.renderBottomLinks())));
+  }
+  renderFooterTop() {
+    return (h("section", { id: "top" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("slot", null), this.renderFooterTopJsonData())));
+  }
+  renderFooterProductInfo() {
+    var _a;
+    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", { variant: ButtonVariantEnum["dark-bg"], size: ButtonSizeEnum.small, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA")), h("z-divider", { color: "gray500" }))));
+    }
+  }
+  // INFO: backward compatibility
+  renderFooterTopJsonData() {
+    if (!this.jsonData || !this.jsonData.zanichelliLinks)
+      return null;
+    const zanichelliLinks = this.jsonData.zanichelliLinks;
+    if (this.jsonData.bottomLinks) {
+      const bottomLinks = this.jsonData.bottomLinks;
+      zanichelliLinks.push({
+        title: "Altre informazioni",
+        items: bottomLinks,
+      });
+    }
+    return zanichelliLinks.map((item) => (h("z-footer-section", { name: item.title }, item.items.map((item) => (h("z-footer-link", { href: item.link }, item.label))))));
+  }
+  // INFO: backward compatibility
+  renderFooterBottomJsonData() {
+    if (!this.jsonData || !this.jsonData.bottomLinks)
+      return null;
+    const bottomLinks = this.jsonData.bottomLinks;
+    return bottomLinks.map((item) => (h("z-footer-link", { href: item.link }, item.label)));
+  }
+  // INFO: backward compatibility
+  renderFooterSocialJsonData() {
+    if (!this.jsonData || !this.jsonData.social)
+      return null;
+    const social = this.jsonData.social;
+    return social.map((item) => (h("z-footer-social", { href: item.link, icon: item.icon, description: item.description })));
+  }
+  render() {
+    return (h("footer", null, this.renderFooterProductInfo(), this.renderFooterTop(), this.renderFooterBottom()));
+  }
+};
+ZFooter.style = stylesCss;
+
+export { ZFooter as z_footer };

package/dist/esm/z-ghost-loading.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-fa9e549c.js';
+
+const stylesCss = ":host{display:inline-block;width:100%;height:100%;background:var(--bg-neutral-100);overflow:hidden;border-radius:4px;transform:translate3d(0, 0, 0)}:host::after{content:' ';display:block;width:100%;height:100%;box-shadow:#e8ebee20 0px 0px 1px;background-image:linear-gradient(\n        90deg,\n        var(--bg-neutral-100) 0%,\n        var(--bg-neutral-150) 95%,\n        var(--bg-neutral-100) 100%\n    );animation:progress 1.6s ease-in-out infinite}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
+
+const ZGhostLoading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+ZGhostLoading.style = stylesCss;
+
+export { ZGhostLoading as z_ghost_loading };

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

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-fa9e549c.js';
+import { i as icons } from './icons-9a191d79.js';
+
+const stylesCss = ":host>div{display:flex;flex-flow:row wrap;justify-content:flex-start;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px}:host>div>div{width:300px;margin:5px}:host>div>div>label{margin:0 10px}";
+
+const ZIconPackage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const iconsNames = Object.keys(icons);
+    return (h("div", null, iconsNames.map((icon) => {
+      return (h("div", null, h("z-icon", { name: icon }), h("label", null, icon)));
+    })));
+  }
+};
+ZIconPackage.style = stylesCss;
+
+export { ZIconPackage as z_icon_package };

package/dist/esm/z-info-box.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
+
+const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{background:var(--accent-lighter);padding:calc(var(--space-unit) * 2);border-radius:var(--border-radius);display:flex;width:inherit}:host>div>slot{color:var(--text-grey-800);font-size:14px}:host>div>z-icon{fill:var(--myz-blue);cursor:pointer;margin-left:calc(var(--space-unit) * 2)}";
+
+const ZInfoBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.infoBoxClose = createEvent(this, "infoBoxClose", 7);
+    /** render close icon flag */
+    this.isclosable = true;
+  }
+  emitInfoBoxClose() {
+    this.infoBoxClose.emit({ boxid: this.boxid });
+  }
+  render() {
+    return (h("div", { id: this.boxid }, h("slot", { name: "content" }), this.isclosable && h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() })));
+  }
+};
+ZInfoBox.style = stylesCss;
+
+export { ZInfoBox as z_info_box };

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

@@ -0,0 +1,67 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fa9e549c.js';
+
+const stylesCss = ":host{--font-size-link:inherit;--font-weight-link:inherit}:host{font-family:var(--dashboard-font);font-weight:var(--font-weight-link);font-size:var(--font-size-link);line-height:inherit;outline:none}a{cursor:pointer;color:var(--color-link-primary);fill:var(--color-link-primary);display:inline-flex;align-items:center;text-decoration:none;padding:calc(var(--space-unit) * 0.5) 0;border-top:var(--border-size-medium) solid transparent;border-bottom:var(--border-size-medium) solid transparent}a:hover,a:focus,a:active{text-decoration:underline}a.active{color:var(--color-active-link);fill:var(--color-active-link)}a:hover,a:focus{color:var(--color-hover-link);fill:var(--color-hover-link)}a:active{color:var(--color-pressed-link);fill:var(--color-pressed-link)}a:visited{color:var(--color-visited-link);fill:var(--color-visited-link)}a.disabled,a.inverse.disabled{cursor:default;pointer-events:none;color:var(--color-disabled03);fill:var(--color-disabled03)}a.underline,a.underline:active,a.underline:hover,a.underline:visited,a.underline.disabled,a.underline.black,a.underline.white{text-decoration:underline}a.disabled,a.disabled:active,a.disabled:visited,a.disabled:hover{text-decoration:none}a.inverse{color:var(--color-inverse-link);fill:var(--color-inverse-link)}a.inverse.active{color:var(--color-inverse-active-link);fill:var(--color-inverse-active-link)}a.inverse:hover,a.inverse:focus{color:var(--color-inverse-hover-link);fill:var(--color-inverse-hover-link)}a.inverse:active{color:var(--color-inverse-pressed-link);fill:var(--color-inverse-pressed-link)}a.inverse:visited{color:var(--color-inverse-visited-link);fill:var(--color-inverse-visited-link)}a.black{color:var(--gray800);fill:var(--gray800);text-decoration:none}a.black:hover,a.black.active{color:var(--color-black);fill:var(--color-black)}a.black:visited{color:var(--gray800);fill:var(--gray800)}a.black:hover,a.black:focus,a.black:active{text-decoration:underline}a.black:active{color:var(--gray700);fill:var(--gray700)}a.white,a.white:active,a.white:hover,a.white.active{color:var(--bg-white);fill:var(--bg-white);text-decoration:none}a.white:visited{color:var(--bg-white);fill:var(--bg-white)}a.white:hover,a.white:focus,a.white:active{text-decoration:underline}a.white.disabled,a.black.disabled{color:var(--gray500);fill:var(--gray500)}a>z-icon:first-child{margin-right:8px}a>z-icon:last-child{margin-left:8px}";
+
+const ZLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.zLinkClick = createEvent(this, "zLinkClick", 7);
+    /** link target (optional) */
+    this.target = "_self";
+    /** tabindex link attribute (optional) */
+    this.htmltabindex = 0;
+    /** disable link flag (optional) */
+    this.isdisabled = false;
+    /** active link flag (optional) */
+    this.isactive = false;
+    /** white variant flag (optional) */
+    this.iswhite = false;
+    /** link text variant (optional) */
+    this.textcolor = "primary";
+    /** big link version */
+    this.big = false;
+    /** link icon position (optional) */
+    this.iconposition = "left";
+    /** draw underline on text (optional) */
+    this.underline = false;
+    this.iconSize = 18;
+    this.emitZLinkClick = this.emitZLinkClick.bind(this);
+    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
+  }
+  componentWillRender() {
+    if (this.iswhite) {
+      console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
+    }
+    if (this.big) {
+      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
+    }
+  }
+  emitZLinkClick(e, linkId) {
+    this.emitZLinkInteraction(e, linkId);
+  }
+  emitZLinkInteraction(e, linkId) {
+    this.zLinkClick.emit({ e, linkId });
+  }
+  componentDidRender() {
+    if (this.icon) {
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
+      const currentSize = this.big ? 18 : Math.round(height * 1.125);
+      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
+        this.iconSize = currentSize;
+      }
+    }
+  }
+  render() {
+    const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
+    return (h(Host, { style: style }, h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled ? "disabled" : ""}
+            ${this.isactive ? "active" : ""}
+            ${this.textcolor}
+            ${this.iswhite ? "white" : ""}
+            ${this.underline ? "underline" : ""}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && h("slot", null), this.icon &&
+      h("z-icon", { style: { "--z-icon-width": this.iconSize.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }), this.iconposition === "left" && h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZLink.style = stylesCss;
+
+export { ZLink as z_link };