@zanichelli/albe-web-components 2.33.5-rc2 → 2.34.0

package/dist/cjs/z-menu-dropdown_2.cjs.entry.js

@@ -3,86 +3,86 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-21817092.js');
-const utils = require('./utils-c3cf6ba2.js');
-require('./breakpoints-776c8868.js');
+const index$1 = require('./index-de6c491e.js');
+const utils = require('./utils-12053886.js');
+require('./breakpoints-88c4fd6c.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) {
-    index.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 (index.h("ul", null, this.linkarray.map(bean => (index.h("li", null, index.h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
-    }
-  }
-  renderButtonMenu() {
-    return (index.h("span", { class: "arrow" }, index.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 !== index$1.keybordKeyCodeEnum.TAB)
-      return;
-    const tree = utils.getElementTree(utils.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 (index.h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
-        document.addEventListener("click", this.handleFocus);
-        document.addEventListener("keyup", this.handleFocus);
-      }, onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleToggle) }, index.h("div", { class: "container", onClick: () => this.handleToggle() }, index.h("span", { class: "user-wrapper" }, index.h("z-icon", { name: "user-avatar", width: 14, height: 14 }), index.h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
-  }
-};
+const ZMenuDropdown = class {
+  constructor(hostRef) {
+    index.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 (index.h("ul", null, this.linkarray.map(bean => (index.h("li", null, index.h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
+    }
+  }
+  renderButtonMenu() {
+    return (index.h("span", { class: "arrow" }, index.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 !== index$1.keybordKeyCodeEnum.TAB)
+      return;
+    const tree = utils.getElementTree(utils.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 (index.h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
+        document.addEventListener("click", this.handleFocus);
+        document.addEventListener("keyup", this.handleFocus);
+      }, onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleToggle) }, index.h("div", { class: "container", onClick: () => this.handleToggle() }, index.h("span", { class: "user-wrapper" }, index.h("z-icon", { name: "user-avatar", width: 14, height: 14 }), index.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) {
-    index.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 (index.h("ul", null, this.list &&
-      this.list.map((bean, i) => (index.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"]
-  }; }
-};
+const ZMyzList = class {
+  constructor(hostRef) {
+    index.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 (index.h("ul", null, this.list &&
+      this.list.map((bean, i) => (index.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;
 
 exports.z_menu_dropdown = ZMenuDropdown;

package/dist/cjs/z-menu-section.cjs.entry.js

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

package/dist/cjs/z-menu.cjs.entry.js

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

package/dist/cjs/z-messages-pocket.cjs.entry.js

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