@zanichelli/albe-web-components 5.5.1-rc.1 → 5.5.1

package/www/build/z-myz-topbar.entry.js

@@ -0,0 +1,190 @@
+import { r as registerInstance, h, g as getElement } from './index-81176684.js';
+import { B as ButtonVariantEnum, c as ButtonSizeEnum } from './index-3ee81524.js';
+import { m as mobileBreakpoint, t as tabletBreakpoint } from './breakpoints-c386984e.js';
+
+const stylesCss = ":host a{cursor:pointer}header{position:sticky;top:0;z-index:99;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main-header\";margin-bottom:calc(var(--space-unit) * 6.5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}.main-header{display:grid;grid-template-columns:2fr 2fr 4fr 100px;grid-template-rows:1fr;grid-template-areas:\"logo link-int link-ext login\";grid-area:main-header;grid-column-gap:calc(var(--space-unit) * 0.5);align-items:center;background-color:var(--bg-grey-900);height:auto;align-items:center;z-index:10}.main-header.myz-out{background-color:var(--bg-white)}.logo{grid-area:logo;padding:6px}z-logo{transform:scale(0.9)}.dropdown-menu{display:none}.dropdown-menu.hidden{visibility:hidden}.dropdown-links{grid-area:dropdown-links;list-style:none;display:block;max-height:32px;margin:0;padding:0}.arrow{fill:var(--text-grey-200)}.dropdown-links>li{list-style:none;display:inline-block;margin:0;padding:0}.dropdown-links>li>a{width:auto;height:auto;color:var(--myz-blue);font-size:14px;letter-spacing:0.18px;line-height:32px;text-decoration:none;margin:var(--space-unit);padding-bottom:calc(var(--space-unit) * 0.5)}.dropdown-links>li>a:hover,.dropdown-links>li>a.active{color:var(--text-grey-800);border-bottom:2px solid var(--myz-blue)}.mobile-header{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:center;align-items:center;width:100%;background-color:var(--bg-grey-900);z-index:inherit;height:52px;position:fixed;top:0px;left:0;z-index:999}.mobile-header.myz-out{background-color:var(--bg-white)}.mobile-header>z-button{margin:0 calc(var(--space-unit) * 2)}.mobile-content{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;width:100%;background-color:var(--bg-grey-900);position:fixed;top:52px;left:0;z-index:999;max-height:0px;overflow:hidden;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{display:block;position:relative;padding:0;margin:0px calc(var(--space-unit) * 4);height:0;width:calc(100% - 64px);max-height:0;font-size:1px;line-height:0;clear:both;border:none;border-top:1px solid var(--text-grey-700)}.menu-mobile{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;color:var(--bg-white);padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);cursor:pointer}.myz-out .menu-mobile{color:var(--text-grey-800)}.menu-toggle{grid-area:menu-toggle;display:flex;flex-direction:column;margin:0 var(--space-unit)}.menu-toggle .bar{width:20px;height:2px;background-color:var(--bg-white);margin:2px auto;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{overflow:hidden;height:0%;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.hidden{visibility:hidden}.login{grid-area:login;display:flex;justify-content:flex-end;padding:0 calc(var(--space-unit) * 2)}.login>z-button{color:var(--bg-white);fill:var(--bg-white)}.booktab-button>z-button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center;padding:calc(var(--space-unit) * 2) 0px calc(var(--space-unit) * 4) 0px}.link-ext{grid-area:link-ext;overflow:hidden;height:0%;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.link-ext-span{display:inline-block;width:100%;margin:calc(var(--space-unit) * 0.5) auto;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);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{overflow:hidden;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.link-int>span{width:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:flex-start}.link-int>span>.menu-item{height:auto;color:var(--bg-white);letter-spacing:0.2px;font-weight:var(--font-sb);font-size:16px;text-decoration:none;outline:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.link-int>span>.menu-item:hover,.link-int>span>.menu-item:focus{border-radius:0px}.link-int>span>.menu-item>span{white-space:nowrap}.link-int>span>.menu-item>i{padding-top:calc(var(--space-unit) * 2);height:28px;width:24px;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-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-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{height:auto;color:var(--bg-white);letter-spacing:0.2px;font-weight:var(--font-sb);font-size:16px;text-decoration:none;outline:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.myz-out .mobile-login>span>.menu-item{color:var(--text-grey-800)}.mobile-login>span>.menu-item>i{padding-top:calc(var(--space-unit) * 2);height:28px;width:24px;text-align:right}.mobile-login>span>.menu-item>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-login>span>.menu-item>span>z-icon{padding-right:var(--space-unit);fill:var(--bg-white)}.menu-item>i::before{border-style:solid;border-width:0.12em 0.12em 0 0;content:\" \";display:inline-block;height:0.45em;left:0.16em;position:relative;top:-0.12em;transform:rotate(135deg) scale(1.2);vertical-align:top;width:0.45em;margin-top:2px;margin-left:2px;margin-right:6px;transition:all 0.5s ease}.menu-item.isopen>i::before{top:0.24em;transform:rotate(-45deg) scale(1.2);transition:all 0.5s ease}.mobile-dropdown{background:white;display:block;overflow:hidden;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px;max-height:0px;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{grid-template-columns:1fr 0.8fr 1.5fr 1.1fr 0.7fr;grid-template-rows:0.2fr auto;grid-template-areas:\"main-header main-header main-header main-header main-header\" \"dropdown-menu dropdown-menu dropdown-menu dropdown-menu dropdown-menu\";margin-bottom:0}header.myz-out{top:0px;grid-template-rows:1fr}.main-header{display:grid;grid-template-columns:170px auto auto 120px;grid-template-rows:1fr;grid-template-areas:\"logo link-int link-ext login\";grid-area:main-header}.dropdown-menu{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"dropdown-links\";grid-area:dropdown-menu;grid-column-gap:var(--space-unit);background:var(--bg-grey-200);height:32px;visibility:visible;z-index:9;padding-left:160px}.booktab-button,.mobile-header,.mobile-login,.mobile-dropdown,.menu-mobile{display:none}.link-int{grid-area:link-int;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;max-height:46px;margin-top:calc(var(--space-unit) * 0.5)}.link-int>span{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;width:auto}.link-int>span>.menu-item{width:auto;height:auto;color:var(--bg-white);letter-spacing:0.2px;line-height:14px;font-weight:var(--font-sb);text-decoration:none;outline:none;padding:calc(var(--space-unit) * 1.5)}.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;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;max-height:46px}.link-ext-span{width:auto;line-height:14px;margin:var(--space-unit);padding:calc(var(--space-unit) * 0.5) var(--space-unit)}}@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.isMobile = true;
+    this.isMenuMobileOpen = false;
+    this.intMenuData = [];
+    this.extMenuData = [];
+    this.isLogged = 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;
+    return !hideIcons && { 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 ? ButtonVariantEnum.secondary : ButtonVariantEnum.tertiary, icon: "login", size: ButtonSizeEnum.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 null;
+    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/www/build/z-navigation-tab-link.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, e as createEvent, h } from './index-81176684.js';
+import { N as NavigationTabsOrientations, a as NavigationTabsSizes } from './index-3ee81524.js';
+import { i as icons } from './icons-92a7dcde.js';
+
+const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}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{content:\"\";position:absolute;background-color:var(--color-hover-secondary)}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]>*{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}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{width:var(--border-size-large);height:100%;top:0;right:0}";
+
+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 = NavigationTabsOrientations.horizontal;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSizes.big;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    this.selected = true;
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, '')}-filled`;
+    if (this.selected && Object.keys(icons).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
+  }
+  static get watchers() { return {
+    "selected": ["onSelected"]
+  }; }
+};
+ZNavigationTabLink.style = navigationTabCss;
+
+export { ZNavigationTabLink as z_navigation_tab_link };

package/www/build/z-navigation-tab.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, e as createEvent, h } from './index-81176684.js';
+import { N as NavigationTabsOrientations, a as NavigationTabsSizes } from './index-3ee81524.js';
+import { i as icons } from './icons-92a7dcde.js';
+
+const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}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{content:\"\";position:absolute;background-color:var(--color-hover-secondary)}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]>*{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}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{width:var(--border-size-large);height:100%;top:0;right:0}";
+
+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 = NavigationTabsOrientations.horizontal;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSizes.big;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    if (!this.disabled) {
+      this.selected = true;
+    }
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, '')}-filled`;
+    if (this.selected && Object.keys(icons).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
+  }
+  static get watchers() { return {
+    "selected": ["onSelected"]
+  }; }
+};
+ZNavigationTab.style = navigationTabCss;
+
+export { ZNavigationTab as z_navigation_tab };

package/www/build/z-navigation-tabs.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-81176684.js';
+import { N as NavigationTabsOrientations, a as NavigationTabsSizes } from './index-3ee81524.js';
+
+const stylesCss = ":host{position:relative;display:flex;flex-direction:row;z-index:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);overflow:hidden}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:var(--color-white);border:none;outline:none;fill:var(--color-primary01);border-radius:var(--border-no-radius);cursor:pointer;z-index:1;box-shadow:0px 0px 4px 1px rgb(66, 69, 72, 0.40)}.navigation-button:focus:focus-visible{fill:var(--color-primary01);box-shadow:inset var(--shadow-focus-primary)}.navigation-button:disabled{display:none}nav{display:flex;align-items:center;justify-content:flex-start;overflow:auto;scroll-behavior:smooth;scrollbar-width:none}:host([orientation='horizontal']) nav{width:100%}:host([orientation='horizontal']) .navigation-button{top:0;height:100%;width:calc(var(--space-unit) * 4)}:host([orientation='horizontal']) .navigation-button:first-child{left:0}:host([orientation='horizontal']) .navigation-button:last-child{right:0}:host([orientation='vertical']){flex-direction:column;width:fit-content}:host([orientation='vertical']) nav{flex-direction:column;align-items:stretch;height:100%}: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 = NavigationTabsOrientations.horizontal;
+    /**
+     * Navigation tabs size.
+     */
+    this.size = NavigationTabsSizes.big;
+  }
+  /**
+   * Getter for the direction to check based on current orientation.
+   */
+  get direction() {
+    return this.orientation == NavigationTabsOrientations.horizontal ? 'Left' : 'Top';
+  }
+  /**
+   * Getter for the dimension to check based on current orientation.
+   */
+  get dimension() {
+    return this.orientation == NavigationTabsOrientations.horizontal ? 'Width' : 'Height';
+  }
+  /**
+   * Set the `size` prop to all `z-navigation-tab` children.
+   */
+  setChildrenSize() {
+    const children = Array.from(this.host.children);
+    children.forEach((child) => {
+      child.setAttribute('size', this.size);
+    });
+  }
+  /**
+   * Set the `orientation` prop to all `z-navigation-tab` children.
+   */
+  setChildrenOrientation() {
+    const children = Array.from(this.host.children);
+    children.forEach((child) => {
+      child.setAttribute('orientation', this.orientation);
+    });
+  }
+  /**
+   * Check if the navigation buttons are needed on window resize.
+   */
+  checkScrollVisible() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigate = this.tabsNav[`scroll${this.dimension}`] > this.tabsNav[`client${this.dimension}`];
+  }
+  /**
+   * Check if navigation buttons can be enabled for each direction.
+   */
+  checkScrollEnabled() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigateNext = (this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`]) <
+      this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
+  }
+  /**
+   * Listen for child tab selection.
+   * Deselect all other previously selected tabs,
+   * then scroll to the new selected tab and center it.
+   * @param {CustomEvent} event `selected` event triggered by a child tab
+   */
+  onTabSelected(event) {
+    const tab = event.target;
+    const children = Array.from(this.host.children);
+    children.forEach((child) => {
+      if (child !== tab) {
+        child.removeAttribute('selected');
+      }
+    });
+  }
+  /**
+   * Scroll the navigation bar half of its size backward.
+   */
+  navigateBackwards() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
+    });
+  }
+  /**
+   * Scroll the navigation bar half of its size forward.
+   */
+  navigateForward() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] +
+        (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
+    });
+  }
+  componentDidRender() {
+    this.setChildrenSize();
+    this.setChildrenOrientation();
+    this.checkScrollVisible();
+  }
+  render() {
+    return h(Host, { class: {
+        'interactive-2': this.size === NavigationTabsSizes.small,
+        'interactive-1': this.size !== NavigationTabsSizes.small
+      }, scrollable: this.canNavigate }, this.canNavigate && h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation == NavigationTabsOrientations.horizontal ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation == NavigationTabsOrientations.horizontal ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "size": ["setChildrenSize"],
+    "orientation": ["setChildrenOrientation"],
+    "canNavigate": ["checkScrollEnabled"]
+  }; }
+};
+ZNavigationTabs.style = stylesCss;
+
+export { ZNavigationTabs as z_navigation_tabs };

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

@@ -0,0 +1,42 @@
+import { r as registerInstance, e as createEvent, h } from './index-81176684.js';
+
+const stylesCss = ":host{--z-notification--top-offset:0;display:flex;align-items:flex-start;width:100%;padding:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);border-bottom:var(--border-size-medium) solid var(--color-surface03);outline:none;box-sizing:border-box}:host[sticky]{position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-success-inverse)}:host([type=\"warning\"]){background:var(--color-warning-inverse)}:host([type=\"error\"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:flex;align-items:center;height:20px}:host([type=\"success\"]) .status-icon{fill:var(--color-success01)}:host([type=\"warning\"]) .status-icon{fill:var(--color-warning02)}:host([type=\"error\"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{margin:0;padding:0;background:transparent;border:none;font-family:inherit;cursor:pointer}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2);flex-wrap:wrap;flex:1 auto}.content-text{max-width:800px;color:var(--color-text01);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:20px;letter-spacing:0.16px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);line-height:16px;letter-spacing:0.32px}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
+
+const ZNotification = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.notificationAction = createEvent(this, "notificationAction", 7);
+    this.notificationClose = createEvent(this, "notificationClose", 7);
+    /** Enable close icon */
+    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);
+  }
+  handleActionButtonClick(e) {
+    e.preventDefault();
+    this.notificationAction.emit();
+  }
+  handleCloseButtonClick(e) {
+    e.preventDefault();
+    this.notificationClose.emit();
+  }
+  render() {
+    var _a;
+    return [
+      this.contenticonname && h("z-icon", { class: "status-icon", name: this.contenticonname, width: 16, height: 16 }),
+      h("div", { class: "content-container" }, h("div", { class: "content-text" }, h("slot", null)), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) &&
+        h("button", { class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext)),
+      this.showclose && h("button", { class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { name: "multiply-circle", width: 16, height: 16 }))
+    ];
+  }
+};
+ZNotification.style = stylesCss;
+
+export { ZNotification as z_notification };

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

@@ -0,0 +1,59 @@
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-81176684.js';
+import { O as OffCanvasVariantsEnum, x as TransitionDirectionEnum } from './index-3ee81524.js';
+
+const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0px;z-index:1000;display:none;justify-content:end;height:100%;min-width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;flex-direction:column;z-index:1010;min-width:100%;height:100%;overflow:-moz-scrollbars-none;overflow:hidden;background:var(--color-surface01);transform:translateX(100%)}@keyframes enterRight{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-name:enterRight;animation-duration:0.4s;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exitRight{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-name:exitRight;animation-duration:0.4s;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;height:calc(100% - var(--z-offcanvas--top-space));top:var(--z-offcanvas--top-space);left:0;right:0;bottom:0}[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 enterLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-name:enterLeft;animation-duration:0.4s;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exitLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-name:exitLeft;animation-duration:0.4s;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{flex:1 auto;overflow:auto;overflow-x:hidden;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-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)}.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{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.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;height:auto;min-width:max(var(--z-offcanvas--container-width), 375px);min-height:calc(var(--space-unit) * 40);max-width:max(var(--z-offcanvas--container-width), 375px)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{animation-name:grow;animation-duration:0.4s;animation-timing-function:ease-out;width:auto}}";
+
+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 = OffCanvasVariantsEnum.pushcontent;
+    /** open component. Default: false */
+    this.open = false;
+    /** open content transitioning in a specified direction left | right. Default: left */
+    this.transitiondirection = TransitionDirectionEnum.left;
+  }
+  componentWillLoad() {
+    this.handleOpenStatus();
+  }
+  onOpenChanged() {
+    this.handleOpenStatus();
+    this.canvasOpenStatusChanged.emit(this.open);
+  }
+  handleOpenStatus() {
+    if (this.open) {
+      this.hostElement.style.display = "flex";
+    }
+    else if (this.variant === OffCanvasVariantsEnum.pushcontent) {
+      this.hostElement.style.display = "none";
+      document.body.style.overflowX = "hidden";
+    }
+  }
+  handleAnimationEnd() {
+    if (this.hostElement.hasAttribute("open")) {
+      this.hostElement.querySelector(`.canvas-content`).focus();
+    }
+    else if (this.variant === OffCanvasVariantsEnum.overlay) {
+      this.hostElement.style.display = "none";
+      document.body.style.overflowX = "initial";
+    }
+  }
+  render() {
+    return [
+      h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { class: "canvas-content", tabindex: "0" }, h("slot", { name: "canvasContent" }))),
+      h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => this.open = false })
+    ];
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["onOpenChanged"]
+  }; }
+};
+ZOffcanvas.style = stylesCss;
+
+export { ZOffcanvas as z_offcanvas };

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, e as createEvent, h } from './index-81176684.js';
+import { d as InputStatusEnum } from './index-3ee81524.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{height:72px;width:calc(var(--space-unit) * 5);font-size:32px;font-weight:300;font-family:var(--font-family-sans);text-align:center;caret-color:transparent;box-sizing:border-box;padding:0;color:var(--color-surface05)}input.error{border:1px solid;border-radius:4px;border-color:var(--color-error01);background-color:var(--color-error-inverse)}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)}}";
+
+const ZOtp = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.otpChange = createEvent(this, "otpChange", 7);
+    this.inputNum = 6;
+  }
+  emitInputChange(value) {
+    this.otpChange.emit({ value });
+  }
+  componentWillLoad() {
+    this.otp = Array.apply(null, Array(this.inputNum));
+    this.otpRef = Array.apply(null, Array(this.inputNum));
+  }
+  render() {
+    return (h("div", { class: "otp-container" }, h("div", { class: "digits-container" }, this.otp.map((_elem, i) => {
+      return (h("input", { class: this.status == InputStatusEnum.error ? "error" : null, onKeyDown: (e) => {
+          if (e.keyCode > 47)
+            this.otpRef[i].value = "";
+        }, onKeyUp: (e) => {
+          if (e.keyCode > 47) {
+            i < this.inputNum - 1 && this.otpRef[i + 1].focus();
+          }
+        }, onInput: (e) => {
+          this.otp[i] = e.target.value;
+          this.emitInputChange(this.otp.join(""));
+        }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: input => (this.otpRef[i] = input) }));
+    })), h("z-input-message", { message: this.message, status: this.status })));
+  }
+};
+ZOtp.style = stylesCss;
+
+export { ZOtp as z_otp };