@zanichelli/delta_share 2.0.3 → 2.0.6

package/dist/wc/esm/z-list_2.entry.js

@@ -1,83 +1,174 @@
-import { r as registerInstance, h } from './index-5ecd661f.js';
-import { k as keybordKeyCodeEnum } from './index-e68ea3a2.js';
-import { g as getElementTree, h as handleKeyboardSubmit, a as getClickedElement } from './utils-1c638931.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-b3a91e19.js';
+import { w as ListSize, E as ExpandableListButtonAlign, v as ListDividerType, k as DividerSize, z as ExpandableListStyle, F as KeyboardKeys } from './index-654849a7.js';
 
-const stylesCss$1 = "ul{margin:0;padding:0}";
+const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:flex;flex-direction:column}";
 
 const ZList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = ListSize.medium;
   }
-  componentWillLoad() {
-    if (this.inputrawdata) {
-      this.parseinputrawdata(this.inputrawdata);
+  setChildrenSizeType() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length - 1; i++) {
+      children[i].setAttribute("size", this.size);
     }
   }
-  parseinputrawdata(inputrawdata) {
-    this.list = [...JSON.parse(inputrawdata)];
-  }
-  oninputrawdataChange(newValue) {
-    this.parseinputrawdata(newValue);
+  componentDidLoad() {
+    this.setChildrenSizeType();
   }
   render() {
-    const lastElem = this.list ? this.list.length - 1 : -1;
-    return (h("ul", null, this.list &&
-      this.list.map((bean, i) => (h("z-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
+    return (h(Host, { role: "list" }, h("slot", null)));
   }
-  static get watchers() { return {
-    "inputrawdata": ["oninputrawdataChange"]
-  }; }
+  get host() { return getElement(this); }
 };
 ZList.style = stylesCss$1;
 
-const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:12px;height:32px;width:inherit;letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;background:var(--bg-grey-050);color:var(--text-grey-800);border-radius:var(--border-radius);border:var(--border-size-small) solid transparent;width:88px;outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{color:var(--myz-blue);fill:var(--myz-blue);border:var(--border-size-small) solid var(--myz-blue);box-shadow:0px 0px 2px 2px var(--myz-blue-light)}:host>a:active{color:var(--myz-blue-light);fill:var(--myz-blue-light);border:var(--border-size-small) solid var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}div.container{display:flex;align-items:center;justify-content:space-between;height:32px;position:relative;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{padding:0 var(--basex1);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;width:30px}div.container>span.arrow{display:flex;justify-content:center;align-items:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{list-style:none;padding-inline-start:var(--basex4);margin:0px}li{height:var(--basex3);display:flex;align-items:center}.menu-opened{padding-bottom:calc(var(--space-unit) * 2);width:auto !important;min-width:147px;position:inherit}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px}div.container>span.user-wrapper>span.user{width:87px}}";
+const stylesCss = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}:host([size=\"small\"])>.container{padding:calc(var(--space-unit) / 2) 0;min-height:calc(var(--space-unit) * 4)}:host([size=\"medium\"])>.container{padding:var(--space-unit) 0;min-height:calc(var(--space-unit) * 5)}:host([size=\"large\"])>.container{padding:calc(var(--space-unit) * 2) 0;min-height:calc(var(--space-unit) * 7)}:host([size=\"x-large\"])>.container{padding:calc(var(--space-unit) * 3) 0;min-height:calc(var(--space-unit) * 9)}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}";
 
-const ZMenuDropdown = class {
+const ZListElement = class {
+  /**
+   * Constructor.
+   */
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ismenuopen = false;
-    this.handleToggle = this.handleToggle.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
+    this.accessibleFocus = createEvent(this, "accessibleFocus", 7);
+    this.clickItem = createEvent(this, "clickItem", 7);
+    /**
+     * [optional] Align expandable button left or right.
+     */
+    this.alignButton = ExpandableListButtonAlign.left;
+    /**
+     * [optional] Sets element clickable.
+     */
+    this.clickable = false;
+    /**
+     * [optional] Sets the divider color.
+     */
+    this.dividerColor = "color-surface03";
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
+    this.dividerType = ListDividerType.none;
+    /**
+     * [optional] Sets the divider size.
+     */
+    this.dividerSize = DividerSize.small;
+    /**
+     * [optional] Sets element as expandable.
+     */
+    this.expandable = false;
+    /**
+     * [optional] Sets expandable style to element.
+     */
+    this.expandableStyle = ExpandableListStyle.accordion;
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = ListSize.medium;
+    /**
+     * [optional] Sets text color of the element.
+     */
+    this.color = "none";
+    /**
+     * [optional] Sets disabled style of the element.
+     */
+    this.disabled = false;
+    /**
+     * [optional] If is used in ZContextualMenu component
+     */
+    this.isContextualMenu = false;
+    this.showInnerContent = false;
+    this.openElementConfig = {
+      accordion: {
+        open: "minus-circled",
+        close: "plus-circled",
+      },
+      menu: {
+        open: "chevron-up",
+        close: "chevron-down",
+      },
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
-  componentWillRender() {
-    this.linkarray =
-      typeof this.menucontent === "string"
-        ? JSON.parse(this.menucontent)
-        : this.menucontent;
+  accessibleFocusHandler(e) {
+    if (this.listElementId === e.detail) {
+      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);
+      toFocus.focus();
+    }
   }
-  renderMenuOpen() {
-    if (this.ismenuopen) {
-      return (h("ul", null, this.linkarray.map(bean => (h("li", null, h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
+  /**
+   * Handler for click on element. If element is expandable, change state.
+   * @returns void
+   */
+  handleClick() {
+    this.clickItem.emit(this.listElementId);
+    if (!this.expandable) {
+      return;
     }
+    this.showInnerContent = !this.showInnerContent;
   }
-  renderButtonMenu() {
-    return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
+  calculateClass() {
+    if (this.isContextualMenu) {
+      return "container-contextual-menu";
+    }
+    return "container";
   }
-  retriveMenuClass() {
-    if (this.ismenuopen)
-      return "menu-opened";
+  handleKeyDown(event) {
+    const expandByKey = event.code === KeyboardKeys.ENTER;
+    switch (event.code) {
+      case KeyboardKeys.ARROW_DOWN:
+        event.preventDefault();
+        this.accessibleFocus.emit(this.listElementId + 1);
+        break;
+      case KeyboardKeys.ARROW_UP:
+        event.preventDefault();
+        this.accessibleFocus.emit(this.listElementId - 1);
+        break;
+      case KeyboardKeys.ENTER:
+        event.preventDefault();
+        this.clickItem.emit(this.listElementId);
+        break;
+    }
+    if (!this.expandable || !expandByKey) {
+      return;
+    }
+    this.showInnerContent = !this.showInnerContent;
   }
-  handleToggle() {
-    this.ismenuopen = !this.ismenuopen;
+  /**
+   * Renders button to expand element.
+   * @returns expadable button
+   */
+  renderExpandableButton() {
+    if (!this.expandable) {
+      return null;
+    }
+    return (h("z-icon", { name: this.showInnerContent
+        ? this.openElementConfig[this.expandableStyle].open
+        : this.openElementConfig[this.expandableStyle].close }));
   }
-  handleFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode !== keybordKeyCodeEnum.TAB)
-      return;
-    const tree = getElementTree(getClickedElement());
-    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
-    if (!menuParent) {
-      document.removeEventListener("click", this.handleFocus);
-      document.removeEventListener("keyup", this.handleFocus);
-      this.ismenuopen = false;
+  /**
+   * Renders expanded content if element is expandable.
+   * @returns expanded content
+   */
+  renderExpandedContent() {
+    if (!this.expandable) {
+      return null;
     }
+    return (h("div", { class: {
+        "z-list-element-inner-container": true,
+        expanded: this.showInnerContent,
+      } }, h("slot", { name: "inner-content" })));
   }
   render() {
-    return (h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
-        document.addEventListener("click", this.handleFocus);
-        document.addEventListener("keyup", this.handleFocus);
-      }, onKeyUp: (e) => handleKeyboardSubmit(e, this.handleToggle) }, h("div", { class: "container", onClick: () => this.handleToggle() }, h("span", { class: "user-wrapper" }, h("z-icon", { name: "user-avatar", width: 14, height: 14 }), h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
+    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.element && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
+  get host() { return getElement(this); }
 };
-ZMenuDropdown.style = stylesCss;
+ZListElement.style = stylesCss;
 
-export { ZList as z_list, ZMenuDropdown as z_menu_dropdown };
+export { ZList as z_list, ZListElement as z_list_element };

package/dist/wc/esm/z-logo.entry.js

@@ -1,20 +1,22 @@
-import { r as registerInstance, h } from './index-5ecd661f.js';
+import { r as registerInstance, h, H as Host } from './index-b3a91e19.js';
 
-const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{display:flex;flex-direction:row;justify-content:flex-start}polygon{fill:var(--myz-red)}path{fill:var(--bg-white)}";
+const stylesCss = ":host{display:inline-block;vertical-align:top;width:255px;height:64px}img{display:block;margin:auto;width:100%;height:100%;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}a{display:block;width:100%;height:100%}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}";
 
 const ZLogo = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** image width */
-    this.width = 163;
-    /** image height */
-    this.height = 42;
-  }
-  renderSvg() {
-    return (h("svg", { width: `${this.width}px`, height: `${this.height}px`, viewBox: "0 0 163 42" }, h("title", null, this.imagealt), h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-663.000000, -534.000000)" }, h("g", { transform: "translate(371.000000, 369.000000)" }, h("g", { transform: "translate(285.000000, 2.000000)" }, h("g", { transform: "translate(0.000000, 156.000000)" }, h("g", null, h("g", { transform: "translate(7.636364, 7.636364)" }, h("polygon", { points: "1.70530257e-13 40.7272727 161.884545 40.7272727 161.884545 0 1.70530257e-13 0" }), h("path", { d: "M148.501818,32.6807001 L154.248342,32.6807001 L154.248342,8.04537315 L148.501818,8.04537315 L148.501818,32.6807001 Z M134.349311,32.6807001 L146.667574,32.6807001 L146.667574,28.3207306 L140.436476,28.3207306 L140.436476,8.04537315 L134.349311,8.04537315 L134.349311,32.6807001 Z M120.196443,32.6807001 L132.513506,32.6807001 L132.513506,28.3207306 L126.283608,28.3207306 L126.283608,8.04537315 L120.196443,8.04537315 L120.196443,32.6807001 Z M105.225555,8.04537315 L105.225555,32.6807001 L118.363037,32.6807001 L118.363037,28.3195312 L111.381089,28.3195312 L111.381089,22.3858946 L117.967221,22.3858946 L117.967221,17.9899418 L111.381089,17.9899418 L111.381089,12.4077415 L118.363037,12.4077415 L118.363037,8.04537315 L105.225555,8.04537315 Z M86.9693975,32.6807001 L93.0613603,32.6807001 L93.0613603,22.3858946 L97.3013857,22.3858946 L97.3013857,32.6807001 L103.392149,32.6807001 L103.392149,8.04537315 L97.3013857,8.04537315 L97.3013857,17.9911413 L93.0613603,17.9911413 L93.0613603,8.04537315 L86.9693975,8.04537315 L86.9693975,32.6807001 Z M61.1321098,32.6807001 L66.8810325,32.6807001 L66.8810325,8.04537315 L61.1321098,8.04537315 L61.1321098,32.6807001 Z M33.8777427,23.237498 L32.2524996,12.5636689 L30.5936721,23.237498 L33.8777427,23.237498 Z M41.6777101,32.6807001 L35.8088433,32.6807001 L34.9644366,27.063716 L30.3609805,27.063716 L29.4829894,32.6807001 L23.6129231,32.6807001 L28.639782,8.04537315 L36.6520506,8.04537315 L41.6777101,32.6807001 Z M54.1207152,24.0279298 L48.8707602,8.04537315 L42.8759521,8.04537315 L42.8759521,32.6807001 L47.984373,32.6807001 L47.984373,16.6297753 L53.1971453,32.6807001 L59.2999032,32.6807001 L59.2999032,8.04537315 L54.1207152,8.04537315 L54.1207152,24.0279298 Z M68.7132396,20.3636364 C68.7132396,21.9672895 68.7132396,23.411417 68.8463776,24.8975249 C68.9795156,26.3908294 69.2481905,27.8013725 69.7951358,29.0188055 C70.9058185,31.4920537 73.1391784,33.0909091 77.4511703,33.0909091 C82.4144588,33.0909091 85.1371908,30.8479537 85.1371908,24.1958516 L85.1371908,23.9043874 L79.5058134,23.9043874 L79.4962178,24.1850567 C79.4782262,24.6636338 79.472229,25.2117785 79.4350463,25.7635216 C79.3990631,26.3092674 79.3330938,26.8466171 79.2023547,27.3191971 C78.939677,28.2523625 78.4503049,28.8628781 77.4511703,28.8628781 C74.9275455,28.8628781 74.4909489,26.7638557 74.4909489,20.3636364 C74.4909489,13.963417 74.9275455,11.8643946 77.4511703,11.8643946 C78.6578083,11.8643946 79.257529,12.7291918 79.257529,16.0240574 L79.257529,16.3179205 L84.855322,16.3179205 L84.866117,16.0360518 C85.0748198,10.6817454 82.8774432,7.63636364 77.4511703,7.63636364 C73.1403779,7.63636364 70.9082174,9.21602796 69.7951358,11.6832789 C69.2481905,12.8959142 68.9795156,14.3040584 68.8463776,15.8009613 C68.7132396,17.2906675 68.7132396,18.7443905 68.7132396,20.3636364 L68.7132396,20.3636364 Z M22.2095767,8.0465726 L22.2095767,12.930698 L13.748717,28.3207306 L22.41708,28.3207306 L22.41708,32.6807001 L7.63636364,32.6807001 L7.63636364,27.8673418 L16.0984227,12.408941 L8.70746481,12.408941 L8.70746481,8.0465726 L22.2095767,8.0465726 Z" }))))))))));
   }
   render() {
-    return (h("div", null, this.link && (h("a", { style: { width: `${this.width}px`, height: `${this.height}px` }, href: this.link, target: this.targetblank ? "_blank" : undefined }, this.renderSvg())), !this.link && this.renderSvg()));
+    const style = {};
+    if (this.width) {
+      style["width"] = style["max-width"] = `${this.width}px`;
+    }
+    if (this.height) {
+      style["height"] = style["max-height"] = `${this.height}px`;
+    }
+    return (h(Host, { style: style, class: { "mobile": !!this.mobileLogo } }, this.link ?
+      h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt })) :
+      h("img", { alt: this.imageAlt })));
   }
 };
 ZLogo.style = stylesCss;

package/dist/wc/esm/z-menu-dropdown_2.entry.js

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

package/dist/wc/esm/z-menu-section.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-5ecd661f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b3a91e19.js';
 
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--dashboard-font);--focus-shadow:0 0 2px 2px var(--blue100)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--dashboard-font);font-weight:var(--font-rg);color:var(--text-grey-800)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--blue500)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);text-align:left;background:transparent;border-radius:0;border:0;border-bottom:var(--border-size-small) solid var(--bg-grey-800);cursor:pointer}.label ::slotted(*){width:100%;margin:0;font-size:16px;line-height:20px}.label:focus:focus-visible{outline:none;box-shadow:var(--focus-shadow)}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--bg-grey-800)}.items{display:flex;flex-direction:column;width:100%;padding:calc(var(--space-unit) / 2) 0 calc(var(--space-unit) / 2 * 3)}.items>::slotted([slot='item']){display:inline-flex;margin:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) / 2);font-size:14px;line-height:20px;outline:none}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--focus-shadow)}.items>::slotted([slot='item']:hover){color:var(--blue500)}";
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);text-align:left;background:transparent;border-radius:0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);cursor:pointer}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{outline:none;box-shadow:var(--shadow-focus-primary)}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.items{display:flex;flex-direction:column;width:100%;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot='item']){display:inline-flex;margin:0;padding:calc(var(--space-unit) * 0.5);font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot='item']:last-child){padding-bottom:0}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot='item']:hover){color:var(--color-secondary01)}";
 
 const ZMenuSection = class {
   constructor(hostRef) {

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

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

package/dist/wc/esm/z-messages-pocket.entry.js

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