@zanichelli/albe-web-components 6.3.2-rc1 → 6.3.2

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

@@ -5,9 +5,8 @@ const stylesCss = "button{display:flex;width:42px;width:calc(var(--space-unit) *
 const ZMyzCardIcon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** disabled status flag */
+    this.icon = undefined;
     this.isdisabled = false;
-    /** description of the icon*/
     this.ariaLabel = "";
   }
   render() {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { P as PopoverPosition } from './index-968a240f.js';
-import { h as handleKeyboardSubmit } from './utils-ccb4d66f.js';
+import { P as PopoverPositions } from './index-aee91593.js';
+import { h as handleKeyboardSubmit } from './utils-5dc8ce33.js';
 import './breakpoints-c386984e.js';
 
 const stylesCss = ":host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:\"\";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-secondary02);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
@@ -9,7 +9,7 @@ const ZMyzCardInfo = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.flipCard = createEvent(this, "flipCard", 7);
-    /** tabindex link attribute (optional) */
+    this.data = undefined;
     this.htmltabindex = 0;
     this.hiddenContent = false;
     this.tooltip = false;
@@ -90,7 +90,7 @@ const ZMyzCardInfo = class {
       return;
     }
     const { title, year, author, description } = this.cardData;
-    return (h("z-popover", { position: PopoverPosition.RIGHT, onClick: () => (this.tooltip = false) }, `${title} ${year} ${author} ${description}`));
+    return (h("z-popover", { position: PopoverPositions.RIGHT, onClick: () => (this.tooltip = false) }, `${title} ${year} ${author} ${description}`));
   }
   setExpirationLicenseMessage(type) {
     if ((type === "online" && this.cardData.onlineLicense.expired) ||

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

@@ -5,6 +5,7 @@ const stylesCss = "ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0
 const ZMyzCardList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.listdata = undefined;
     this.renderList = this.renderList.bind(this);
   }
   handleSpaceKeyPress(e, url) {

package/dist/esm/z-myz-card_4.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, h } from './index-a2ca4b97.js';
-import { L as LicenseType } from './index-968a240f.js';
+import { L as LicenseType } from './index-aee91593.js';
 
 const stylesCss$3 = ":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--accent)}div.faded{border:var(--border-size-medium) solid var(--color-surface02)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
 
 const ZMyzCardComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** pressed status */
+    this.faded = undefined;
+    this.cardtype = undefined;
     this.ispressed = false;
-    /** highlighted status */
     this.ishighlighted = false;
   }
   retrieveClass() {
@@ -56,6 +56,10 @@ const stylesCss$1 = "img{display:block;max-width:100%;height:340px;margin:auto;o
 const ZMyzCardCover = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.img = undefined;
+    this.titolo = undefined;
+    this.faded = undefined;
+    this.defaultimg = undefined;
   }
   hadleOnImageError() {
     this.img = this.defaultimg;
@@ -71,6 +75,9 @@ const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(
 const ZMyzCardHeader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.titolo = undefined;
+    this.faded = undefined;
+    this.cardtype = undefined;
     this.allowTooltip = false;
   }
   getTitle() {

package/dist/esm/z-myz-list-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { h as handleKeyboardSubmit } from './utils-ccb4d66f.js';
-import './index-968a240f.js';
+import { h as handleKeyboardSubmit } from './utils-5dc8ce33.js';
+import './index-aee91593.js';
 import './breakpoints-c386984e.js';
 
 const stylesCss = ":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host li>span.border{border-bottom:2px solid var(--bg-grey-200)}:host li span:hover,a:hover{color:var(--myz-blue);fill:var(--myz-blue)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--myz-blue);fill:var(--myz-blue)}";
@@ -10,9 +10,12 @@ const ZMyzListItem = class {
     registerInstance(this, hostRef);
     this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
     this.zListItemClick = createEvent(this, "zListItemClick", 7);
-    /** link target (optional) */
+    this.text = undefined;
+    this.link = undefined;
     this.linktarget = "_self";
-    /** underlined style flag */
+    this.icon = undefined;
+    this.listitemid = undefined;
+    this.action = undefined;
     this.underlined = true;
     this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
     this.emitZListItemClick = this.emitZListItemClick.bind(this);

package/dist/esm/z-myz-topbar.entry.js

@@ -0,0 +1,197 @@
+import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
+import { B as ButtonVariant, c as ButtonSize } from './index-aee91593.js';
+import { m as mobileBreakpoint, t as tabletBreakpoint } from './breakpoints-c386984e.js';
+
+const stylesCss = ":host a{cursor:pointer}header{position:sticky;z-index:99;top:0;display:grid;margin-bottom:calc(var(--space-unit) * 6.5);font-family:var(--dashboard-font);font-weight:var(--font-rg);grid-template:1fr / 1fr;grid-template-areas:\"main-header\"}.main-header{z-index:10;display:grid;height:auto;align-items:center;background-color:var(--bg-grey-900);grid-area:main-header;grid-column-gap:calc(var(--space-unit) * 0.5);grid-template:1fr / 2fr 2fr 4fr 100px;grid-template-areas:\"logo link-int link-ext login\"}.main-header.myz-out{background-color:var(--bg-white)}.logo{padding:6px;grid-area:logo}z-logo{transform:scale(0.9)}.dropdown-menu{display:none}.dropdown-menu.hidden{visibility:hidden}.dropdown-links{display:block;max-height:32px;padding:0;margin:0;grid-area:dropdown-links;list-style:none}.arrow{fill:var(--text-grey-200)}.dropdown-links>li{display:inline-block;padding:0;margin:0;list-style:none}.dropdown-links>li>a{width:auto;height:auto;padding-bottom:calc(var(--space-unit) * 0.5);margin:var(--space-unit);color:var(--myz-blue);font-size:14px;letter-spacing:0.18px;line-height:32px;text-decoration:none}.dropdown-links>li>a:hover,.dropdown-links>li>a.active{border-bottom:2px solid var(--myz-blue);color:var(--text-grey-800)}.mobile-header{position:fixed;z-index:inherit;z-index:999;top:0;left:0;display:flex;width:100%;height:52px;flex-flow:row nowrap;align-content:center;align-items:stretch;align-items:center;justify-content:space-between;background-color:var(--bg-grey-900)}.mobile-header.myz-out{background-color:var(--bg-white)}.mobile-header>z-button{margin:0 calc(var(--space-unit) * 2)}.mobile-content{position:fixed;z-index:999;top:52px;left:0;display:flex;overflow:hidden;width:100%;max-height:0;flex-flow:column nowrap;align-content:center;align-items:center;justify-content:center;background-color:var(--bg-grey-900);transition:max-height 1s cubic-bezier(0.46, 0, 1, 0.79)}.mobile-content.open{max-height:100vh;transition:max-height 2s cubic-bezier(0, 0.79, 0.46, 1)}.mobile-content.myz-out{background-color:var(--bg-white)}hr{position:relative;display:block;width:calc(100% - 64px);height:0;max-height:0;padding:0;border:none;border-top:1px solid var(--text-grey-700);margin:0 calc(var(--space-unit) * 4);clear:both;font-size:1px;line-height:0}.menu-mobile{display:flex;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:flex-start;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);color:var(--bg-white);cursor:pointer}.myz-out .menu-mobile{color:var(--text-grey-800)}.menu-toggle{display:flex;flex-direction:column;margin:0 var(--space-unit);grid-area:menu-toggle}.menu-toggle .bar{width:20px;height:2px;margin:2px auto;background-color:var(--bg-white);transition:all 0.3s ease-in-out}.myz-out .menu-toggle .bar{background-color:var(--text-grey-800)}.menu-toggle:hover{cursor:pointer}#mobile-menu.is-active .bar:nth-child(2){opacity:0}#mobile-menu.is-active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}#mobile-menu.is-active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.booktab-button,.mobile-login{display:flex;overflow:hidden;width:100%;height:0%;height:100%;max-height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:0}.hidden{visibility:hidden}.login{display:flex;justify-content:flex-end;padding:0 calc(var(--space-unit) * 2);grid-area:login}.login>z-button{color:var(--bg-white);fill:var(--bg-white)}.booktab-button>z-button{display:flex;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 4) 0}.link-ext{display:flex;overflow:hidden;width:100%;height:0%;height:100%;max-height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:0;grid-area:link-ext}.link-ext-span{display:inline-block;width:100%;box-sizing:border-box;padding:0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);margin:calc(var(--space-unit) * 0.5) auto;margin:0 auto;line-height:44px}.link-ext-span.myz:hover,.link-ext-span.myz:focus{background:var(--text-grey-800);border-radius:var(--border-radius);cursor:pointer}.link-ext z-link{font-size:12px;font-weight:var(--font-sb)}.link-int{display:flex;overflow:hidden;width:100%;height:100%;max-height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:0}.link-int>span{display:flex;width:100%;flex-flow:column nowrap;align-content:flex-start;align-items:stretch;justify-content:flex-start}.link-int>span>.menu-item{display:flex;width:100%;height:auto;box-sizing:border-box;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);margin:0 auto;color:var(--bg-white);font-size:16px;font-weight:var(--font-sb);letter-spacing:0.2px;line-height:44px;outline:none;text-decoration:none}.link-int>span>.menu-item:hover,.link-int>span>.menu-item:focus{border-radius:0}.link-int>span>.menu-item>span{white-space:nowrap}.link-int>span>.menu-item>i{width:24px;height:28px;padding-top:calc(var(--space-unit) * 2);text-align:right}.link-int>span:first-child>.menu-item{margin-top:0}.link-int>span>svg{display:none}.link-int>.mobile-dropdown{padding:0 48px}.mobile-login>span{display:flex;flex-flow:column nowrap;align-content:flex-start;align-items:stretch;justify-content:flex-start;fill:white}.mobile-login>span:focus,.mobile-login>span:hover{background:var(--text-grey-800)}.myz-out .mobile-login>span:focus,.myz-out .mobile-login>span:hover{background:none}.mobile-login>span>.menu-item{display:flex;width:100%;height:auto;box-sizing:border-box;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);margin:0 auto;color:var(--bg-white);font-size:16px;font-weight:var(--font-sb);letter-spacing:0.2px;line-height:44px;outline:none;text-decoration:none}.myz-out .mobile-login>span>.menu-item{color:var(--text-grey-800)}.mobile-login>span>.menu-item>i{width:24px;height:28px;padding-top:calc(var(--space-unit) * 2);text-align:right}.mobile-login>span>.menu-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-login>span>.menu-item>span>z-icon{padding-right:var(--space-unit);fill:var(--bg-white)}.menu-item>i::before{position:relative;top:-0.12em;left:0.16em;display:inline-block;width:0.45em;height:0.45em;border-width:0.12em 0.12em 0 0;border-style:solid;margin-top:2px;margin-right:6px;margin-left:2px;content:\" \";transform:rotate(135deg) scale(1.2);transition:all 0.5s ease;vertical-align:top}.menu-item.isopen>i::before{top:0.24em;transform:rotate(-45deg) scale(1.2);transition:all 0.5s ease}.mobile-dropdown{display:block;overflow:hidden;width:100%;max-height:0;box-sizing:border-box;padding:0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);margin:0 auto;background:white;line-height:44px;transition:max-height 0.3s ease}.mobile-dropdown.visible{max-height:100vh;transition:max-height 0.5s ease}@media only screen and (min-width: 768px){header{margin-bottom:0;grid-template:0.2fr auto / 1fr 0.8fr 1.5fr 1.1fr 0.7fr;grid-template-areas:\"main-header main-header main-header main-header main-header\" \"dropdown-menu dropdown-menu dropdown-menu dropdown-menu dropdown-menu\"}header.myz-out{top:0;grid-template-rows:1fr}.main-header{display:grid;grid-area:main-header;grid-template:1fr / 170px auto auto 120px;grid-template-areas:\"logo link-int link-ext login\"}.dropdown-menu{z-index:9;display:grid;height:32px;padding-left:160px;background:var(--bg-grey-200);grid-area:dropdown-menu;grid-column-gap:var(--space-unit);grid-template:1fr / 1fr;grid-template-areas:\"dropdown-links\";visibility:visible}.booktab-button,.mobile-header,.mobile-login,.mobile-dropdown,.menu-mobile{display:none}.link-int{display:flex;max-height:46px;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:flex-start;margin-top:calc(var(--space-unit) * 0.5);grid-area:link-int}.link-int>span{display:flex;width:auto;flex-flow:column nowrap;align-content:center;align-items:center;justify-content:flex-start}.link-int>span>.menu-item{width:auto;height:auto;padding:calc(var(--space-unit) * 1.5);color:var(--bg-white);font-weight:var(--font-sb);letter-spacing:0.2px;line-height:14px;outline:none;text-decoration:none}.link-int>span>svg{display:block}.menu-item>i{display:none}.link-int>span>.menu-item:focus,.link-int>span>.menu-item:hover{background:var(--text-grey-800);border-radius:var(--border-radius);cursor:pointer}.link-int>span>.menu-item::-moz-focus-inner{border:0}.link-int>span>.menu-item:focus+svg{visibility:visible}.link-ext{display:flex;max-height:46px;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:flex-end}.link-ext-span{width:auto;padding:calc(var(--space-unit) * 0.5) var(--space-unit);margin:var(--space-unit);line-height:14px}}@media only screen and (min-width: 1152px){.main-header{grid-template-columns:170px auto auto 180px}}";
+
+const ZMyzTopbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.intMenuData = [];
+    this.extMenuData = [];
+    this.isLogged = false;
+    this.intlinkdata = undefined;
+    this.extlinkdata = undefined;
+    this.userdata = undefined;
+    this.ismyz = undefined;
+    this.logolink = undefined;
+    this.imagealt = undefined;
+    this.activeintlinkid = undefined;
+    this.activesublinkid = undefined;
+    this.hideloginbutton = undefined;
+    this.activeMenuItem = undefined;
+    this.currentMenuItem = undefined;
+    this.isMobile = true;
+    this.isMenuMobileOpen = false;
+  }
+  activeIntLinkChange(newValue) {
+    this.activeMenuItem = this.currentMenuItem = this.intMenuData.find((item) => item.id === newValue);
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  handleZListItemLinkClick() {
+    this.isMenuMobileOpen = false;
+  }
+  handleZListItemClick() {
+    this.isMenuMobileOpen = false;
+  }
+  componentWillLoad() {
+    if (this.intlinkdata) {
+      this.intMenuData = typeof this.intlinkdata === "string" ? JSON.parse(this.intlinkdata) : this.intlinkdata;
+    }
+    this.activeMenuItem = this.currentMenuItem = this.intMenuData.find((item) => item.id === this.activeintlinkid);
+    if (this.extlinkdata) {
+      this.extMenuData = typeof this.extlinkdata === "string" ? JSON.parse(this.extlinkdata) : this.extlinkdata;
+    }
+    if (this.userdata) {
+      this.userData = typeof this.userdata === "string" ? JSON.parse(this.userdata) : this.userdata;
+      this.isLogged = this.userData.islogged;
+    }
+    this.handleResize();
+  }
+  renderLogoDiv() {
+    return (h("div", { class: "logo" }, h("z-logo", { link: this.logolink ? this.logolink : null, "target-blank": true, width: 144, height: 36, "image-alt": this.imagealt })));
+  }
+  renderIntMenu(menuItems) {
+    if (!this.isLogged || !this.ismyz) {
+      return;
+    }
+    return (h("div", { id: "link-int", class: "link-int" }, menuItems.map((item) => this.renderIntMenuItem(item))));
+  }
+  renderIntMenuItem(menuItem) {
+    const { id, label, link } = menuItem;
+    return (h("span", null, h("a", { href: link ? link : null, id: id, class: "menu-item", onClick: () => {
+        this.activeMenuItem = this.currentMenuItem = menuItem;
+        this.activeintlinkid = menuItem.id;
+        if (menuItem.subMenu) {
+          this.handleToggleMobileMenuItem(menuItem.id);
+        }
+      }, onMouseEnter: () => {
+        this.activeMenuItem = menuItem;
+      }, onMouseLeave: () => {
+        this.activeMenuItem = this.currentMenuItem;
+      }, role: link ? "link" : "button", tabindex: this.getIntMenuItemTabindex(menuItem) }, h("span", null, label), menuItem.subMenu ? h("i", null) : null), h("svg", { height: "8", width: "16", class: {
+        hidden: !this.activeMenuItem || this.activeMenuItem.id !== id,
+      } }, h("polygon", { points: "8,0 16,8 0,8", class: "arrow" })), this.isMobile && this.renderMenuItemsData(menuItem)));
+  }
+  getIntMenuItemTabindex(item) {
+    return this.intMenuData.indexOf(item) + 1;
+  }
+  handleToggleMobileMenuItem(elementId) {
+    if (!this.isMobile) {
+      return;
+    }
+    this.element.shadowRoot.querySelector(`#${elementId}`).classList.toggle("isopen");
+    this.element.shadowRoot.querySelector("#mobile-dropdown-" + elementId).classList.toggle("visible");
+  }
+  renderMenuItemsData(menuItem) {
+    if (!menuItem.subMenu) {
+      return null;
+    }
+    const listItems = menuItem.subMenu.map((item) => {
+      return {
+        id: item.id,
+        text: item.label,
+        link: item.link,
+        listitemid: item.id,
+      };
+    });
+    return this.renderMobileSubMenu(listItems, menuItem.id);
+  }
+  renderMobileSubMenu(menuItems, id) {
+    return (h("span", { class: "mobile-dropdown", id: id ? `mobile-dropdown-${id}` : "" }, h("z-myz-list", { list: menuItems })));
+  }
+  renderSubMenu(menuItem) {
+    if (!this.ismyz || !this.isLogged) {
+      return;
+    }
+    if (!menuItem || !menuItem.subMenu) {
+      return (h("div", { id: "dropdown-menu", class: `dropdown-menu hidden` }));
+    }
+    return (h("div", { id: "dropdown-menu", class: `dropdown-menu` }, h("ul", { class: "dropdown-links" }, menuItem.subMenu.map((item) => (h("li", null, h("a", { id: item.id, class: item.id === this.activesublinkid ? "active" : "", href: item.link ? item.link : null, role: item.link ? "link" : "button", tabindex: this.getIntMenuItemTabindex(menuItem) }, item.label)))))));
+  }
+  renderExtLinksIcons(icon) {
+    const width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+    const hideIcons = width > mobileBreakpoint && width < tabletBreakpoint;
+    if (!hideIcons) {
+      return { icon };
+    }
+  }
+  renderExtMenu(menuItems) {
+    if (!this.isLogged) {
+      return h("div", null);
+    }
+    return (h("div", { id: "link-ext", class: "link-ext" }, menuItems.map((menuItem) => {
+      const { id, label, link, icon } = menuItem;
+      return (h("span", { class: `link-ext-span${this.ismyz ? " myz" : ""}` }, h("z-link", Object.assign({ id: id, htmlid: id, href: link, iswhite: !!this.ismyz, target: "_blank", htmltabindex: 10 }, this.renderExtLinksIcons(icon)), label)));
+    })));
+  }
+  renderLoginDiv(userData) {
+    return (h("div", { class: "login" }, this.isLogged ? (h("z-menu-dropdown", { nomeutente: userData.name, menucontent: JSON.stringify(userData.userlinks) })) : (this.renderLoginButton())));
+  }
+  renderLoginButton() {
+    if (this.hideloginbutton) {
+      return;
+    }
+    return (h("z-button", { htmlid: "login-button", variant: this.ismyz ? ButtonVariant.SECONDARY : ButtonVariant.TERTIARY, icon: "login", size: ButtonSize.SMALL }, "entra"));
+  }
+  renderMobileLoginDiv(userData) {
+    return (h("div", { id: "mobile-login", class: "mobile-login" }, h("span", null, h("a", { class: "menu-item", id: "user-data", onClick: () => this.handleToggleMobileMenuItem("user-data"), role: "button" }, h("span", null, h("z-icon", { name: "user-avatar", height: 16, width: 16 }), userData.name), h("i", null)), this.renderUserData(userData))));
+  }
+  renderUserData(userData) {
+    if (this.isMobile && !userData) {
+      return null;
+    }
+    const listItems = userData.userlinks.map((item) => {
+      return {
+        text: item.label,
+        link: item.link,
+        icon: item.icon,
+        listitemid: item.id,
+      };
+    });
+    return this.renderMobileSubMenu(listItems, "user-data");
+  }
+  renderDesktopHeader() {
+    return (h("header", { class: !this.ismyz ? "myz-out" : "" }, this.renderMainHeader(), this.renderSubMenu(this.activeMenuItem)));
+  }
+  renderMainHeader() {
+    return (h("div", { id: "main-header", class: {
+        "main-header": true,
+        "myz-out": !this.ismyz,
+      } }, this.renderLogoDiv(), this.renderIntMenu(this.intMenuData), this.renderExtMenu(this.extMenuData), this.renderLoginDiv(this.userData)));
+  }
+  renderMobileHeader() {
+    return (h("header", null, this.renderMobileMenu(), this.renderMobileMenuContent()));
+  }
+  renderMobileMenu() {
+    return (h("div", { id: "mobile-header", class: `mobile-header${this.ismyz ? "" : " myz-out"}` }, this.renderLogoDiv(), this.renderMobileMenuToggle()));
+  }
+  renderMobileMenuToggle() {
+    if (!this.isLogged) {
+      return this.renderLoginButton();
+    }
+    return (h("div", { class: "menu-mobile", id: "mobile-menu-wrapper", onClick: () => (this.isMenuMobileOpen = !this.isMenuMobileOpen) }, h("div", { class: `menu-toggle${this.isMenuMobileOpen ? " is-active" : ""}`, id: "mobile-menu" }, h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" })), h("span", null, "Menu")));
+  }
+  renderMobileMenuContent() {
+    if (!this.isLogged) {
+      return;
+    }
+    return (h("div", { id: "mobile-content", class: {
+        "mobile-content": true,
+        "open": this.isMenuMobileOpen,
+        "myz-out": !this.ismyz,
+      } }, this.renderMobileLoginDiv(this.userData), this.ismyz && h("hr", null), this.renderIntMenu(this.intMenuData), h("hr", null), this.renderExtMenu(this.extMenuData)));
+  }
+  render() {
+    return this.isMobile ? this.renderMobileHeader() : this.renderDesktopHeader();
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "activeintlinkid": ["activeIntLinkChange"]
+  }; }
+};
+ZMyzTopbar.style = stylesCss;
+
+export { ZMyzTopbar as z_myz_topbar };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-968a240f.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-aee91593.js';
 import { I as ICONS } from './icons-56ca282c.js';
 
 const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{box-shadow:inset var(--shadow-focus-primary)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:hover:not([disabled])>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{top:0;right:0;width:var(--border-size-large);height:100%}";
@@ -8,22 +8,15 @@ const ZNavigationTabLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.selectedEvent = createEvent(this, "selected", 7);
-    /**
-     * Whether the tab is selected.
-     */
     this.selected = false;
-    /**
-     * Whether the tab is disabled.
-     */
     this.disabled = false;
-    /**
-     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
     this.orientation = NavigationTabsOrientation.HORIZONTAL;
-    /**
-     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
     this.size = NavigationTabsSize.BIG;
+    this.htmlTitle = undefined;
+    this.target = undefined;
+    this.href = undefined;
+    this.icon = undefined;
+    this.label = undefined;
   }
   /**
    * Scroll into view to center the tab.

package/dist/esm/z-navigation-tab.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-968a240f.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-aee91593.js';
 import { I as ICONS } from './icons-56ca282c.js';
 
 const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{box-shadow:inset var(--shadow-focus-primary)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:hover:not([disabled])>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{top:0;right:0;width:var(--border-size-large);height:100%}";
@@ -8,22 +8,13 @@ const ZNavigationTab = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.selectedEvent = createEvent(this, "selected", 7);
-    /**
-     * Whether the tab is selected.
-     */
     this.selected = false;
-    /**
-     * Whether the tab is disabled.
-     */
     this.disabled = false;
-    /**
-     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
     this.orientation = NavigationTabsOrientation.HORIZONTAL;
-    /**
-     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
     this.size = NavigationTabsSize.BIG;
+    this.icon = undefined;
+    this.label = undefined;
+    this.htmlTitle = undefined;
   }
   /**
    * Scroll into view to center the tab.

package/dist/esm/z-navigation-tabs.entry.js

@@ -1,19 +1,16 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-968a240f.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-aee91593.js';
 
 const stylesCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--color-white);border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px rgb(66 69 72 / 40%);cursor:pointer;fill:var(--color-primary01);outline:none}.navigation-button:focus:focus-visible{box-shadow:inset var(--shadow-focus-primary);fill:var(--color-primary01)}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
 
 const ZNavigationTabs = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Navigation tabs orientation.
-     */
     this.orientation = NavigationTabsOrientation.HORIZONTAL;
-    /**
-     * Navigation tabs size.
-     */
     this.size = NavigationTabsSize.BIG;
+    this.canNavigate = undefined;
+    this.canNavigatePrev = undefined;
+    this.canNavigateNext = undefined;
   }
   /**
    * Getter for the direction to check based on current orientation.

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

@@ -7,14 +7,11 @@ const ZNotification = class {
     registerInstance(this, hostRef);
     this.notificationAction = createEvent(this, "notificationAction", 7);
     this.notificationClose = createEvent(this, "notificationClose", 7);
-    /** Enable close icon */
+    this.contenticonname = undefined;
+    this.actiontext = undefined;
+    this.type = undefined;
     this.showclose = false;
-    /**
-     * Enable shadow.
-     * @deprecated shadow is available only for the `sticky` version of the notification.
-     */
     this.showshadow = false;
-    /** Enable sticky notification bar. */
     this.sticky = false;
     this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { O as OffCanvasVariant, u as TransitionDirection } from './index-968a240f.js';
+import { O as OffCanvasVariant, x as TransitionDirection } from './index-aee91593.js';
 
 const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;z-index:1000;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{z-index:1010;display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
 
@@ -7,15 +7,8 @@ const ZOffcanvas = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
-    /**
-     * Offcanvas variant.
-     * Can be one of "overlay", "pushcontent"
-     * Default variant: pushcontent
-     */
     this.variant = OffCanvasVariant.PUSHCONTENT;
-    /** open component. Default: false */
     this.open = false;
-    /** open content transitioning in a specified direction left | right. Default: left */
     this.transitiondirection = TransitionDirection.LEFT;
   }
   componentWillLoad() {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { d as InputStatus } from './index-968a240f.js';
+import { d as InputStatus } from './index-aee91593.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
 
@@ -7,8 +7,9 @@ const ZOtp = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.otpChange = createEvent(this, "otpChange", 7);
-    /** Input number */
     this.inputNum = 6;
+    this.status = undefined;
+    this.message = undefined;
   }
   emitInputChange(value) {
     this.otpChange.emit({ value });

package/dist/esm/z-pagination-bar.entry.js

@@ -0,0 +1,112 @@
+import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
+import { h as hammer } from './hammer-c3266b17.js';
+import { h as handleKeyboardSubmit } from './utils-5dc8ce33.js';
+import './_commonjsHelpers-9943807e.js';
+import './index-aee91593.js';
+import './breakpoints-c386984e.js';
+
+const stylesCss = ":host>div{display:flex;height:48px;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:space-around}:host>div>z-icon{margin:calc(var(--space-unit) * 2) 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01)}:host>div>z-icon.disabled{color:var(--color-disabled01);cursor:default;fill:var(--color-disabled01);pointer-events:none}";
+
+const ZPaginationBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.goToPage = createEvent(this, "goToPage", 7);
+    this.changeStartPage = createEvent(this, "changeStartPage", 7);
+    this.addPageToHistory = createEvent(this, "addPageToHistory", 7);
+    this.velocityConstantMultiplier = 2;
+    this.pages = undefined;
+    this.visiblepages = undefined;
+    this.currentpage = 1;
+    this.startpage = 1;
+    this.historyraw = undefined;
+    this.listhistoryrow = [];
+    this.currentPages = [];
+    this.navigateRight = this.navigateRight.bind(this);
+    this.navigateLeft = this.navigateLeft.bind(this);
+    this.emitGoToPage = this.emitGoToPage.bind(this);
+  }
+  componentDidLoad() {
+    this.scrollPage = this.scrollPage.bind(this);
+    const mc = new hammer(this.bar);
+    // listen to events...
+    mc.on("swiperight", this.scrollPage);
+    mc.on("swipeleft", this.scrollPage);
+  }
+  componentWillRender() {
+    this.initPagination();
+  }
+  componentWillUpdate() {
+    this.initPagination();
+  }
+  initPagination() {
+    this.loadPages();
+    if (this.historyraw) {
+      this.parsehistoryraw(this.historyraw);
+    }
+  }
+  parsehistoryraw(historyraw) {
+    this.listhistoryrow = [...JSON.parse(historyraw)];
+  }
+  scrollPage(ev) {
+    const vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
+    const deltaPage = Math.max(1, vel);
+    switch (ev.type) {
+      case "swiperight":
+        if (this.canNavigateLeft()) {
+          this.emitChangeStartPage(Math.max(1, this.startpage - deltaPage));
+        }
+        break;
+      case "swipeleft":
+        if (this.canNavigateRight()) {
+          this.emitChangeStartPage(Math.min(this.startpage + deltaPage, this.pages - this.visiblepages + 1));
+        }
+        break;
+    }
+  }
+  emitGoToPage(page) {
+    this.currentpage = page;
+    this.goToPage.emit({ page: page });
+    this.addPageToHistory.emit({ page: page });
+  }
+  emitChangeStartPage(startpage) {
+    this.startpage = startpage;
+    this.changeStartPage.emit({ startpage: startpage });
+  }
+  loadPages() {
+    this.currentPages.splice(0);
+    const lastPage = this.pageWindow();
+    let i;
+    for (i = 0; i < lastPage; i++) {
+      this.currentPages.push(i + this.startpage);
+    }
+  }
+  pageWindow() {
+    return Math.min(this.pages, this.visiblepages); //How many pages are there to show?
+  }
+  canNavigateLeft() {
+    return this.startpage > 1;
+  }
+  canNavigateRight() {
+    return this.startpage + this.visiblepages - 1 < this.pages;
+  }
+  navigateLeft() {
+    if (this.canNavigateLeft()) {
+      this.startpage--;
+      this.emitChangeStartPage(this.startpage);
+      this.loadPages();
+    }
+  }
+  navigateRight() {
+    if (this.canNavigateRight()) {
+      this.startpage++;
+      this.emitChangeStartPage(this.startpage);
+      this.loadPages();
+    }
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.bar = el) }, h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map((page) => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
+  }
+};
+ZPaginationBar.style = stylesCss;
+
+export { ZPaginationBar as z_pagination_bar };

package/dist/esm/z-pagination-page.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index-a2ca4b97.js';
+
+const stylesCss = ":host{display:inline-block;font-family:var(--font-family-sans);font-weight:var(--font-sb)}:host>button{display:inline-block;min-width:56px;height:48px;box-sizing:border-box;border:none;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;color:var(--color-primary01);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:inherit;line-height:48px;outline:none;text-align:center;text-decoration:none;transition:border-bottom 0.2s ease, font-size 0.2s ease}:host>button[disabled]{color:var(--color-disabled02);cursor:default;pointer-events:none}:host>button:hover{border-bottom:var(--border-size-large) solid var(--color-hover-light);background-color:var(--color-background);text-decoration:none;transition:border-bottom 0.2s ease, background-color 0.2s ease}:host>button:focus{border-bottom:var(--border-size-large) solid var(--color-hover-light);background-color:var(--color-background);box-shadow:var(--shadow-focus-primary);text-decoration:none}:host>button.visited{border-color:var(--color-hover-light);text-decoration:none}:host>button.selected{border-bottom:var(--border-size-large) solid var(--color-primary01);font-size:var(--font-size-7);transition:border-bottom 0.2s ease, font-size 0.2s ease}";
+
+const ZPaginationPage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageid = undefined;
+    this.value = undefined;
+    this.isselected = false;
+    this.isdisabled = false;
+    this.isvisited = false;
+    this.ariaLabel = "";
+  }
+  render() {
+    return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));
+  }
+};
+ZPaginationPage.style = stylesCss;
+
+export { ZPaginationPage as z_pagination_page };