@zanichelli/albe-web-components 2.31.2 → 2.33.1

package/www/build/z-menu-dropdown.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, h } from './index-44936066.js';
+import { k as keybordKeyCodeEnum } from './index-8f67b3da.js';
+import { b as getElementTree, d as getClickedElement, h as handleKeyboardSubmit } from './utils-5e70920f.js';
+import './breakpoints-c386984e.js';
+
+const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:12px;height:32px;width:inherit;letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;background:var(--bg-grey-050);color:var(--text-grey-800);border-radius:var(--border-radius);border:var(--border-size-small) solid transparent;outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{color:var(--myz-blue);fill:var(--myz-blue);border:var(--border-size-small) solid var(--myz-blue);box-shadow:0px 0px 2px 2px var(--myz-blue-light)}:host>a:active{color:var(--myz-blue-light);fill:var(--myz-blue-light);border:var(--border-size-small) solid var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}div.container{display:flex;align-items:center;justify-content:space-between;height:32px;position:relative;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{padding:0 var(--basex1);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;width:30px}div.container>span.arrow{display:flex;justify-content:center;align-items:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{list-style:none;padding:0 calc(var(--space-unit) * 2);margin:0px}li{height:var(--basex3);display:flex;align-items:center;padding:calc(var(--space-unit) / 4) 0;width:max-content}.menu-opened{padding-bottom:calc(var(--space-unit) * 2);width:auto !important;min-width:147px;position:inherit}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";
+
+const ZMenuDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ismenuopen = false;
+    this.handleToggle = this.handleToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+  }
+  componentWillRender() {
+    this.linkarray =
+      typeof this.menucontent === "string"
+        ? JSON.parse(this.menucontent)
+        : this.menucontent;
+  }
+  renderMenuOpen() {
+    if (this.ismenuopen) {
+      return (h("ul", null, this.linkarray.map(bean => (h("li", null, h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
+    }
+  }
+  renderButtonMenu() {
+    return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
+  }
+  retriveMenuClass() {
+    if (this.ismenuopen)
+      return "menu-opened";
+  }
+  handleToggle() {
+    this.ismenuopen = !this.ismenuopen;
+  }
+  handleFocus(e) {
+    if (e instanceof KeyboardEvent && e.keyCode !== keybordKeyCodeEnum.TAB)
+      return;
+    const tree = getElementTree(getClickedElement());
+    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
+    if (!menuParent) {
+      document.removeEventListener("click", this.handleFocus);
+      document.removeEventListener("keyup", this.handleFocus);
+      this.ismenuopen = false;
+    }
+  }
+  render() {
+    return (h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
+        document.addEventListener("click", this.handleFocus);
+        document.addEventListener("keyup", this.handleFocus);
+      }, onKeyUp: (e) => handleKeyboardSubmit(e, this.handleToggle) }, h("div", { class: "container", onClick: () => this.handleToggle() }, h("span", { class: "user-wrapper" }, h("z-icon", { name: "user-avatar", width: 14, height: 14 }), h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
+  }
+};
+ZMenuDropdown.style = stylesCss;
+
+export { ZMenuDropdown as z_menu_dropdown };

package/www/build/z-menu-section.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-44936066.js';
+
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);text-align:left;background:transparent;border-radius:0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);cursor:pointer}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{outline:none;box-shadow:var(--shadow-focus-primary)}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.items{display:flex;flex-direction:column;width:100%;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot='item']){display:inline-flex;margin:0;padding:calc(var(--space-unit) * 0.5);font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot='item']:last-child){padding-bottom:0}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot='item']:hover){color:var(--color-secondary01)}";
+
+const ZMenuSection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.opened = createEvent(this, "opened", 7);
+    this.closed = createEvent(this, "closed", 7);
+  }
+  toggle() {
+    if (!this.hasContent) {
+      return;
+    }
+    this.open = !this.open;
+    this.open ? this.opened.emit() : this.closed.emit();
+  }
+  /** Close the list when a click is performed outside of this Element. */
+  handleClick(ev) {
+    if (!this.open || this.hostElement.contains(ev.target)) {
+      return;
+    }
+    this.open = false;
+    this.closed.emit();
+  }
+  /**
+   * Check if some content slot is set.
+   */
+  checkContent() {
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
+  }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  render() {
+    return h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? 'true' : 'false', onClick: this.toggle.bind(this) }, h("slot", null), this.hasContent && h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })), this.open && h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZMenuSection.style = stylesCss;
+
+export { ZMenuSection as z_menu_section };

package/www/build/z-menu.entry.js

@@ -0,0 +1,106 @@
+import { r as registerInstance, f as createEvent, h, g as getElement } from './index-44936066.js';
+
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{display:inline-flex;flex-direction:column;position:relative}::slotted(a){color:var(--color-text01);text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{margin:0;padding:0;color:inherit;background:transparent;border:0;border-radius:0;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;box-shadow:var(--shadow-focus-primary);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5)}.menu-label .menu-label-content{display:flex;align-items:center;padding:var(--space-unit) 0;border-bottom:var(--border-size-large) solid var(--color-surface05)}:host([active]) .menu-label-content,:host([open]) .menu-label-content,.menu-label:hover .menu-label-content,.menu-label:focus-within .menu-label-content{border-color:var(--color-secondary01)}.menu-label ::slotted(*){width:100%;margin:0;appearance:none;font-size:var(--font-size-5);line-height:1.2;outline:none}.menu-label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.content{background:var(--color-surface01)}.content[hidden]{display:none}:host([floating]) .content{width:375px;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host(:not([floating])) .content{width:100%}:host([floating]) .content{position:absolute;top:100%;left:0;box-shadow:var(--shadow-2);min-width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot='header']){width:calc(var(--space-unit) * 11.25);object-fit:contain;height:auto}.header ::slotted([slot='header']:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-weight:var(--font-sb);font-size:var(--font-size-3);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot='item']){display:inline-flex;width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot='item']:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot='item']:hover),.items>::slotted([slot='item']:active){border-color:var(--color-secondary01)}";
+
+const ZMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.opened = createEvent(this, "opened", 7);
+    this.closed = createEvent(this, "closed", 7);
+    /**
+     * Flag to set the display mode of the list.
+     * If true, the list will be absolutely positioned under the menu label,
+     * stacked beneath it otherwise.
+     * @default false
+     */
+    this.floating = false;
+    /**
+     * The opening state of the menu.
+     * @default false
+     */
+    this.open = false;
+    this.toggle = this.toggle.bind(this);
+    this.checkContent = this.checkContent.bind(this);
+    this.onItemsChange = this.onItemsChange.bind(this);
+  }
+  toggle() {
+    if (!this.hasContent) {
+      return;
+    }
+    this.open = !this.open;
+    this.open ? this.opened.emit() : this.closed.emit();
+  }
+  /** Close the floating list when a click is performed outside of this Element. */
+  handleClick(ev) {
+    if (!this.floating ||
+      !this.open ||
+      this.hostElement.contains(ev.target)) {
+      return;
+    }
+    this.reflow();
+    this.open = false;
+    this.closed.emit();
+  }
+  onOpenChanged() {
+    if (this.open) {
+      this.reflow(true);
+    }
+    else {
+      cancelAnimationFrame(this.raf);
+    }
+  }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  /**
+   * Correctly set position of the floating menu in order to prevent overflow.
+   * @param live Should run the method on every refresh frame.
+   */
+  reflow(live = false) {
+    if (this.content) {
+      const { style } = this.content;
+      const { left } = this.hostElement.getBoundingClientRect();
+      const widthPx = getComputedStyle(this.content).width;
+      const width = widthPx ? parseFloat(widthPx.replace('px', '')) : 375;
+      const safeScrollbarSpace = 30;
+      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
+    }
+    if (live) {
+      this.raf = requestAnimationFrame(this.reflow.bind(this, live));
+    }
+  }
+  /**
+   * Check if some content slot is set.
+   */
+  checkContent() {
+    this.hasHeader = !!this.hostElement.querySelectorAll('[slot="header"]').length;
+    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length || this.hasHeader;
+  }
+  /**
+   * Set `menuitem` role to all menu items.
+   */
+  onItemsChange() {
+    this.checkContent();
+    const items = this.hostElement.querySelectorAll('[slot="item"]');
+    items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute('role', 'menuitem'));
+  }
+  renderMenuLabel() {
+    if (this.hasContent) {
+      return h("button", { class: "menu-label", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })));
+    }
+    return h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null)));
+  }
+  render() {
+    return [
+      this.renderMenuLabel(),
+      h("div", { class: "content", ref: (el) => { this.content = el; }, hidden: !this.open }, this.hasHeader && h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent })), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))
+    ];
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["onOpenChanged"]
+  }; }
+};
+ZMenu.style = stylesCss;
+
+export { ZMenu as z_menu };

package/{dist/cjs/z-messages-pocket.cjs.entry.js → www/build/z-messages-pocket.entry.js}

@@ -1,17 +1,13 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f4b351d.js');
+import { r as registerInstance, h } from './index-44936066.js';
+import { c as PocketStatusEnum } from './index-8f67b3da.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{font-size:12px;font-weight:var(--font-sb);color:var(--color-primary01);fill:var(--color-primary01)}:host>z-pocket>z-pocket-header span.badge{background:var(--color-secondary02);color:var(--color-surface01);border-radius:50%;padding:0 calc(var(--space-unit)* 0.5);display:inline-block;margin-left:var(--space-unit)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;margin:0 var(--space-unit);padding:var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{background-image:linear-gradient(rgba(255, 0, 0, 0), white);position:absolute;top:0;left:0;right:0;bottom:0}:host>z-pocket.open>z-pocket-body>div.body{max-height:calc(100vh - 166px);overflow:auto;scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-width:thin;scrollbar-color:var(--color-primary01) var(--color-surface03)}:host ::-webkit-scrollbar{background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--radius-base);width:10px}:host ::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--radius-base);width:var(--space-unit)}}";
 
 const ZMessagesPocket = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     /** pocket status */
-    this.status = index$1.PocketStatusEnum.preview;
+    this.status = PocketStatusEnum.preview;
   }
   handlePocketToggle(e) {
     if (e.detail.id === this.pocketid) {
@@ -22,25 +18,25 @@ const ZMessagesPocket = class {
     let message;
     let icon;
     switch (this.status) {
-      case index$1.PocketStatusEnum.preview:
-      case index$1.PocketStatusEnum.closed:
-        message = (index.h("span", null, "Messaggi ", index.h("span", { class: "badge" }, this.messages)));
+      case PocketStatusEnum.preview:
+      case PocketStatusEnum.closed:
+        message = (h("span", null, "Messaggi ", h("span", { class: "badge" }, this.messages)));
         icon = "chevron-up";
         break;
-      case index$1.PocketStatusEnum.open:
-        message = index.h("span", null, "Riduci");
+      case PocketStatusEnum.open:
+        message = h("span", null, "Riduci");
         icon = "chevron-down";
         break;
     }
-    return (index.h("z-pocket-header", { pocketid: this.pocketid }, message, index.h("z-icon", { name: icon, width: 14, height: 14 })));
+    return (h("z-pocket-header", { pocketid: this.pocketid }, message, h("z-icon", { name: icon, width: 14, height: 14 })));
   }
   renderBody() {
-    return (index.h("z-pocket-body", { pocketid: this.pocketid }, index.h("div", { class: "body" }, index.h("slot", null)), index.h("div", { class: "gradient" })));
+    return (h("z-pocket-body", { pocketid: this.pocketid }, h("div", { class: "body" }, h("slot", null)), h("div", { class: "gradient" })));
   }
   render() {
-    return (index.h("z-pocket", { pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+    return (h("z-pocket", { pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
   }
 };
 ZMessagesPocket.style = stylesCss;
 
-exports.z_messages_pocket = ZMessagesPocket;
+export { ZMessagesPocket as z_messages_pocket };

package/www/build/z-modal-login.entry.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, f as createEvent, h, g as getElement } from './index-44936066.js';
+import { d as InputStatusEnum, B as ButtonVariantEnum } from './index-8f67b3da.js';
+
+const stylesCss = ".sc-z-modal-login-h{font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{color:var(--text-grey-800);padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}z-button.sc-z-modal-login,z-input.sc-z-modal-login,.sc-z-modal-login-s>z-button,.sc-z-modal-login-s>z-input{display:inline-block;width:100%}z-link.sc-z-modal-login,.sc-z-modal-login-s>z-link{font-size:12px}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}div.wrapper>form>div.username.sc-z-modal-login-s>z-input,div.wrapper>form>div.password.sc-z-modal-login-s>z-input,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.username.sc-z-modal-login z-input.sc-z-modal-login,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.password.sc-z-modal-login z-input.sc-z-modal-login{margin-bottom:var(--space-unit)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>z-link.forget.sc-z-modal-login{font-size:12px;align-self:flex-end}div.wrapper>form>div.login.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.login.sc-z-modal-login z-button.sc-z-modal-login{margin:calc(var(--space-unit) * 3) 0;align-self:flex-start}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>hr.sc-z-modal-login{width:100%;margin-bottom:calc(var(--space-unit) * 3);border:none;border-top:var(--border-size-medium) solid var(--bg-grey-200);margin-block-start:unset}div.wrapper>div.signup.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.signup.sc-z-modal-login z-button.sc-z-modal-login{display:inline-block;margin:calc(var(--space-unit) * 2) 0}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-top:calc(var(--space-unit) * 2)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login>svg.sc-z-modal-login{margin-right:var(--space-unit)}@media only screen and (min-width: 768px){z-button.sc-z-modal-login,.sc-z-modal-login-s>z-button{width:initial}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:396px;padding:calc(var(--space-unit) * 3)}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{grid-column-start:1;grid-column-end:3;padding-bottom:var(--space-unit)}.sc-z-modal-login-s>[slot=\"provider\"]{width:100%}slot-fb[name=\"provider\"].sc-z-modal-login{grid-column-start:1;grid-column-end:3;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}slot-fb[name=\"provider\"].sc-z-modal-login>*.sc-z-modal-login{width:100%}}@media only screen and (min-width: 1366px){.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:477px;padding:calc(var(--space-unit) * 4)}}";
+
+const zModalLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.loginSubmit = createEvent(this, "loginSubmit", 7);
+    this.statusUpdate = createEvent(this, "statusUpdate", 7);
+    this.signupClick = createEvent(this, "signupClick", 7);
+    this.zainoDigitaleClick = createEvent(this, "zainoDigitaleClick", 7);
+    /** Login modal title */
+    this.heading = "Entra in MyZanichelli";
+    this.externalProviderCheck = false;
+  }
+  componentDidLoad() {
+    this.externalProviderCheck = !!this.hostElement.querySelectorAll('[slot="provider"]').length;
+  }
+  emitLoginSubmit() {
+    const usernameInput = this.hostElement.querySelector("z-input#username");
+    const passwordInput = this.hostElement.querySelector("z-input#password");
+    // INFO: slotted inputs
+    if (!usernameInput || !passwordInput)
+      return;
+    let username = usernameInput.value;
+    let password = passwordInput.value;
+    if (!username || !password) {
+      this.status = InputStatusEnum.error;
+      return;
+    }
+    username = this.cleanUsername(username);
+    this.loginSubmit.emit({
+      username,
+      password,
+      originalUsername: usernameInput.value,
+    });
+  }
+  emitStatusUpdate(status) {
+    this.statusUpdate.emit(status);
+  }
+  emitSignupClick() {
+    this.signupClick.emit();
+  }
+  emitZainoDigitaleClick() {
+    this.zainoDigitaleClick.emit();
+  }
+  handleInputKeyUp(e) {
+    if (e.code !== "Enter")
+      return;
+    this.emitLoginSubmit();
+  }
+  handleInputChange() {
+    this.status = null;
+    this.emitStatusUpdate(this.status);
+  }
+  cleanUsername(username) {
+    username = username.trim().toLowerCase();
+    const mobileRegex = /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/g;
+    if (mobileRegex.test(username)) {
+      username = username.replace(/[- .)(]/g, "");
+      if (/^[\d ]*$/.test(username))
+        username = "+39" + username;
+    }
+    return username;
+  }
+  renderZainoDigitaleButton() {
+    return (h("z-button", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitZainoDigitaleClick(), class: "zainoDigitale" }, h("div", { class: "zd" }, h("svg", { width: "18px", height: "24px", viewBox: "0 0 18 24" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-313.000000, -329.000000)", fill: "#E2001A", "fill-rule": "nonzero" }, h("g", { transform: "translate(25.000000, 191.000000)" }, h("g", null, h("g", { transform: "translate(0.000000, 100.000000)" }, h("g", null, h("g", { transform: "translate(276.000000, 28.000000)" }, h("path", { d: "M29.8953704,30.5632326 C29.9143039,30.3327754 29.5356326,30.0447041 29.1380277,29.8142469 C29.2516291,28.7963947 29.4409647,26.9719425 29.2705626,26.3189807 C29.0433598,25.416357 28.3428178,24.8018047 28.380685,23.822362 C28.4185521,22.8429193 28.1913493,16.5437582 27.0364017,15.1802202 C26.1654576,14.162368 25.4649156,12.8372396 23.4390239,12.2418921 C23.4390239,12.0498445 23.4390239,11.8770016 23.4200903,11.7425683 C23.3822232,10.9167637 21.9622056,10.090959 21.6214014,10.0525495 C21.2805972,10.01414 20.371786,9.95652568 20.0309818,10.0525495 C19.6901775,10.1293685 19.0464362,11.128016 18.7434992,11.4352922 C18.5920306,11.5889302 18.5541635,11.9538207 18.5730971,12.3187111 C17.437083,12.6836015 16.1306669,13.4325871 15.4490584,14.9497631 C14.2941108,17.676839 13.4799674,18.9251483 13.6693031,24.1680477 C13.5935688,25.1090809 13.2906318,25.6084046 13.1012961,25.6852237 C12.9119604,25.7620427 12.798359,25.9156808 12.7604919,26.1077284 C12.7226247,26.2805712 12.5522226,28.37389 12.7415583,29.8718612 C12.3818205,30.1023183 12.0788834,30.3519802 12.097817,30.5632326 C12.1546177,31.0625563 11.8516806,31.7731324 12.097817,32.0612038 C12.230352,32.2148419 12.7226247,32.5413228 13.3284989,32.8293942 C13.6125024,33.4631512 14.199443,33.9240655 15.467992,33.9816797 C18.1565586,34.0584988 26.2601254,33.8664512 26.5630625,33.9048607 C26.847066,33.9432702 28.4374857,34.0008845 28.683622,32.8293942 C29.2894962,32.5413228 29.781769,32.2148419 29.9143039,32.0612038 C30.1415067,31.7731324 29.8385697,31.0625563 29.8953704,30.5632326 Z M12.0319858,31.2 C12.1173988,31.1230769 12.3736379,31.0461538 12.743761,31 C12.857645,31.3230769 12.914587,31.6615385 13,32 C12.4021089,31.8153846 11.8611598,31.5692308 12.0319858,31.2 Z M21.1618497,12.8394441 C21.1618497,12.8394441 20.6763006,12.8165075 20,13 L20,12.9770634 C20,12.5642053 20.3121387,11.3256309 20.3988439,11.1192018 C20.4855491,10.9127728 21.265896,11.0274556 21.8554913,11.0733287 C22.6358382,11.0503922 22.4624277,11.2568212 22.8092486,11.9907912 C22.9306358,12.2889666 22.982659,12.6559516 23,13 C22.4797688,12.8623806 21.8728324,12.8165075 21.1618497,12.8394441 Z M28.3324094,30 C28.6648189,30.0833333 28.9085858,30.2222222 28.9750677,30.3888889 C29.1301921,31.1666667 28.5318551,31.6388889 28,32 C28.0221606,31.5 28.0664819,31.1111111 28.0664819,31.1111111 L28.2437669,30.6111111 L28.3324094,30 Z M21.8571429,23 L21.8571429,23.8 L22.7142857,23.8 L22.7142857,24.6 L23.5714286,24.6 L23.5714286,25.4 L24.4285714,25.4 L24.4285714,26.2 L25.2857143,26.2 L25.2857143,27 L26.1428571,27 L26.1428571,27.8 L27,27.8 L27,28.6 L24.4285714,28.6 L24.4285714,29.4 L25.2857143,29.4 L25.2857143,31 L24.4285714,31 L24.4285714,30.2 L23.5714286,30.2 L23.5714286,29.4 L22.7142857,29.4 L22.7142857,30.2 L21.8571429,30.2 L21.8571429,31 L21,31 L21,23 L21.8571429,23 Z" }))))))))), h("span", null, "ZAINO DIGITALE"))));
+  }
+  render() {
+    return (h("z-modal", { modaltitle: this.heading }, h("div", { class: "wrapper", slot: "modalContent" }, h("form", { method: "post" }, h("div", { class: "username" }, h("slot", { name: "username" }, h("z-input", { id: "username", label: "email o numero di cellulare", placeholder: "Inserisci l'email o il cellulare", autocomplete: "username", name: "username", status: this.status, message: this.message, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => this.handleInputChange() }))), h("div", { class: "password" }, h("slot", { name: "password" }, h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: "password", name: "password", autocomplete: "current-password", status: this.status, message: this.pwdmessage, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => this.handleInputChange() }))), h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"), h("div", { class: "login" }, h("slot", { name: "login" }, h("z-button", { variant: ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))), h("hr", null), h("z-body", { class: "signup", level: 4, variant: "semibold" }, "Non hai ancora un account?"), h("div", { class: "signup" }, h("slot", { name: "signup" }, h("z-button", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))), !this.externalProviderCheck && (h("div", { class: "providers" }, h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"), h("slot", { name: "provider" }, this.renderZainoDigitaleButton(), h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
+  }
+  get hostElement() { return getElement(this); }
+};
+zModalLogin.style = stylesCss;
+
+export { zModalLogin as z_modal_login };

package/www/build/z-modal.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+
+const stylesCss = ":host{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-direction:row;justify-content:center;width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{display:flex;flex-direction:column;z-index:1010;width:100%;height:100vh;overflow:-moz-scrollbars-none;overflow:hidden}.modal-container>header{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;margin-left:auto}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;flex-direction:column;width:100%;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{margin:0;padding:0;font-weight:var(--font-rg);color:var(--color-text01)}.modal-container>header h1{font-size:var(--font-size-5);line-height:1.4;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-3);line-height:1.5;letter-spacing:0}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{flex:1 auto;background:var(--color-surface01);overflow:auto;overflow-x:hidden}.modal-container .modal-content::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:fixed;top:calc(var(--space-unit) * 6);left:50%;transform:translateX(-50%);width:auto;height:auto;min-width:calc(var(--space-unit) * 40);min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);line-height:1.33;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-4);line-height:1.5;letter-spacing:0}.modal-container>header h1+h2{margin-top:0}}";
+
+const ZModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.modalClose = createEvent(this, "modalClose", 7);
+    this.modalHeaderActive = createEvent(this, "modalHeaderActive", 7);
+    this.modalBackgroundClick = createEvent(this, "modalBackgroundClick", 7);
+    /** aria-label for close button (optional) */
+    this.closeButtonLabel = "close modal";
+  }
+  emitModalClose() {
+    this.modalClose.emit({ modalid: this.modalid });
+  }
+  emitModalHeaderActive() {
+    this.modalHeaderActive.emit({ modalid: this.modalid });
+  }
+  emitBackgroundClick() {
+    this.modalBackgroundClick.emit({ modalid: this.modalid });
+  }
+  render() {
+    return [
+      h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", null, this.modaltitle), this.modalsubtitle && h("h2", null, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content" }, h("slot", { name: "modalContent" }))),
+      h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })
+    ];
+  }
+};
+ZModal.style = stylesCss;
+
+export { ZModal as z_modal };

package/www/build/z-myz-card-alert.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { e as AlertTypesEnum } from './index-8f67b3da.js';
+
+const stylesCss = ":host{position:absolute;font-family:var(--font-family-sans);font-weight:var(--font-rg);width:100%;top:0px;left:0px;z-index:2}:host>z-alert{height:calc(var(--space-unit) * 6)}.relativeContainer{position:relative;display:grid;grid-template-columns:18px auto 46px;grid-template-rows:1fr;grid-column-gap:var(--space-unit);align-items:center;padding:0;outline:none}.relativeContainer::-moz-focus-inner{border:0}.alert-external-wrapper.removeAlert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.addAlert{background:var(--color-success-inverse)}:host div.removeAlert{background:var(--color-warning-inverse)}:host div>.contentText{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.contentAction{color:var(--color-primary01);font-size:12px;font-weight:var(--font-sb);height:20px;letter-spacing:0.32px;line-height:20px;cursor:pointer}:host div>z-icon{justify-self:center}";
+
+const ZMyzCardAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.undoAction = createEvent(this, "undoAction", 7);
+  }
+  emitUndoAction() {
+    this.undoAction.emit({ actionType: this.type });
+  }
+  handleSpaceKeyPress(e) {
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      e.preventDefault();
+      this.emitUndoAction();
+    }
+  }
+  handleActionButtonClick(e) {
+    e.preventDefault();
+    this.emitUndoAction();
+  }
+  retrieveClass() {
+    let className = "";
+    switch (this.type) {
+      case "add":
+        className = "addAlert";
+        break;
+      case "remove":
+        className = "removeAlert";
+        break;
+      default:
+        className = "";
+        break;
+    }
+    return className;
+  }
+  getAlertType() {
+    switch (this.type) {
+      case "add":
+        return AlertTypesEnum.success;
+      case "remove":
+        return AlertTypesEnum.warning;
+      default:
+        return null;
+    }
+  }
+  render() {
+    return (h("div", { class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { type: this.getAlertType() }, h("div", { class: "relativeContainer" }, h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { class: "contentText" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "contentAction", onClick: (e) => {
+        this.handleActionButtonClick(e);
+      }, onKeyPress: (e) => {
+        this.handleSpaceKeyPress(e);
+      } }, this.actiontext))))));
+  }
+};
+ZMyzCardAlert.style = stylesCss;
+
+export { ZMyzCardAlert as z_myz_card_alert };

package/www/build/z-myz-card-body.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host{height:340px;width:auto}:host>div{height:340px;width:auto;display:flex;align-items:center;justify-content:center;position:relative}";
+
+const ZMyzCardBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", null, h("slot", { name: "alert" }), h("slot", { name: "cover" })));
+  }
+};
+ZMyzCardBody.style = stylesCss;
+
+export { ZMyzCardBody as z_myz_card_body };

package/www/build/z-myz-card-cover.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = "img{display:block;margin:auto auto;height:340px;max-width:100%;object-fit:cover}img.faded{opacity:0.3}";
+
+const ZMyzCardCover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  hadleOnImageError() {
+    this.img = this.defaultimg;
+  }
+  render() {
+    return (h("img", { class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+  }
+};
+ZMyzCardCover.style = stylesCss;
+
+export { ZMyzCardCover as z_myz_card_cover };

package/{dist/cjs/z-myz-card-dictionary.cjs.entry.js → www/build/z-myz-card-dictionary.entry.js}

@@ -1,16 +1,12 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f4b351d.js');
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { B as ButtonVariantEnum } from './index-8f67b3da.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;height:522px;width:100%;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;height:522px;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out;z-index:2}:host>div .content.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);margin-top:-2px}:host>div .front,:host>div .back{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));z-index:1;top:0;left:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);display:flex;justify-content:center}.hideInfo{display:none}";
 
 const ZMyzCardDictionary = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardFlipped = index.createEvent(this, "cardFlipped", 7);
+    registerInstance(this, hostRef);
+    this.cardFlipped = createEvent(this, "cardFlipped", 7);
     /** card is disabled */
     this.disabled = false;
     /** card is flipped */
@@ -28,9 +24,9 @@ const ZMyzCardDictionary = class {
     this.cardFlipped.emit(showBack);
   }
   render() {
-    return (index.h("div", null, index.h("z-myz-card", null, index.h("z-myz-card-header", { titolo: this.name }), index.h("div", { class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { class: "front" }, index.h("z-myz-card-body", null, index.h("z-myz-card-cover", { slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { class: this.hideinfobtn ? "hideInfo" : "", variant: index$1.ButtonVariantEnum.secondary, icon: "informationsource", issmall: true, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { class: "back" }, index.h("slot", { name: "info" }))), index.h("slot", null))));
+    return (h("div", null, h("z-myz-card", null, h("z-myz-card-header", { titolo: this.name }), h("div", { class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { class: "front" }, h("z-myz-card-body", null, h("z-myz-card-cover", { slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { class: this.hideinfobtn ? "hideInfo" : "", variant: ButtonVariantEnum.secondary, icon: "informationsource", issmall: true, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { class: "back" }, h("slot", { name: "info" }))), h("slot", null))));
   }
 };
 ZMyzCardDictionary.style = stylesCss;
 
-exports.z_myz_card_dictionary = ZMyzCardDictionary;
+export { ZMyzCardDictionary as z_myz_card_dictionary };

package/{dist/cjs/z-myz-card-footer-sections.cjs.entry.js → www/build/z-myz-card-footer-sections.entry.js}

@@ -1,19 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
+import { r as registerInstance, h } from './index-44936066.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{box-sizing:border-box;border-radius:0px 0px var(--radius-base) var(--radius-base);border-top:var(--border-base) solid var(--color-surface03);padding:var(--space-unit) calc(var(--space-unit) * 2) 0;height:128px;color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";
 
 const ZMyzCardFooterSections = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
   }
   render() {
-    return (index.h("div", null, index.h("footer", null, index.h("div", { class: "top" }, index.h("slot", { name: "top" })), index.h("div", { class: "bottom" }, index.h("slot", { name: "bottom" })))));
+    return (h("div", null, h("footer", null, h("div", { class: "top" }, h("slot", { name: "top" })), h("div", { class: "bottom" }, h("slot", { name: "bottom" })))));
   }
 };
 ZMyzCardFooterSections.style = stylesCss;
 
-exports.z_myz_card_footer_sections = ZMyzCardFooterSections;
+export { ZMyzCardFooterSections as z_myz_card_footer_sections };

package/www/build/z-myz-card-footer.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, h } from './index-44936066.js';
+import { L as LicenseTypeEnum } from './index-8f67b3da.js';
+
+const stylesCss = "footer{font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-surface05);background-color:var(--color-surface01);margin:0px;padding:0px;position:relative;z-index:5;height:calc(var(--space-unit) * 6);width:auto;top:0px;transition:height 500ms ease-in-out, top 500ms ease-in-out;border-radius:0px 0px var(--border-radius) var(--border-radius);border-top:var(--border-size-medium) solid var(--color-surface03)}footer.real,footer.trial{border-top:var(--border-size-medium) solid var(--accent)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:16px;line-height:22px;height:40px;margin:0px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2)\n    var(--space-unit) calc(var(--space-unit) * 2);overflow:hidden;background-color:var(--color-surface01);transition:all 200ms linear}footer.isopen>p{font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear;background-color:var(--bg-neutral-200)}footer.isopen.real>p,footer.isopen.trial>p{background-color:var(--accent)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{height:60px;overflow:hidden}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{font-size:14px;height:20px;line-height:20px;margin:0px;padding:0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer>div.content>div>p.year_isbn{padding-top:var(--space-unit);display:flex;flex-direction:row;justify-content:space-between}footer>div.content>div>p.year_isbn>span.isbn{text-overflow:ellipsis;overflow:hidden}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;white-space:initial;text-overflow:initial}footer.isopen>div.content>div>p.year_isbn{flex-direction:column;height:50px;padding-left:0px}footer.isopen>div.content>div>p.year_isbn>span.isbn{display:inline-grid;padding-left:0px}footer.isopen{height:295px;top:-212px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out, top 500ms ease-in-out}.toggle{position:absolute;top:-24px;left:16px;z-index:10}.faded{opacity:0.3;pointer-events:none}";
+
+const ZMyzCardFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** footer opened by default (optional) */
+    this.opened = false;
+    this.isOpen = false;
+    this.allowTooltipAuthors = false;
+  }
+  handleToggle() {
+    this.isOpen = !this.isOpen;
+  }
+  getTitleAuthors() {
+    return this.allowTooltipAuthors ? this.autori : "";
+  }
+  componentWillLoad() {
+    if (this.opened)
+      this.isOpen = true;
+  }
+  elementsEllipsis() {
+    this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;
+  }
+  elementAuthorsHasEllipsis() {
+    return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;
+  }
+  retrieveClass() {
+    return {
+      isopen: this.isOpen,
+      real: this.cardtype === LicenseTypeEnum.real,
+      trial: this.cardtype === LicenseTypeEnum.trial,
+    };
+  }
+  footerTransitionHandler(e) {
+    if (["visibility", "height"].includes(e.propertyName)) {
+      this.elementsEllipsis();
+    }
+  }
+  render() {
+    return (h("div", { class: this.faded && "faded" }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", null, this.titolo), h("div", { class: "content" }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { class: "bold" }, this.autori))), h("p", { class: "year_isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { class: "bold" }, this.isbn), " (ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" }))))));
+  }
+};
+ZMyzCardFooter.style = stylesCss;
+
+export { ZMyzCardFooter as z_myz_card_footer };