@zanichelli/albe-web-components 12.4.1-RC1 → 12.4.1

package/dist/components/z-menu-section.js

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index9.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(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-icon02)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const ZMenuSectionStyle0 = stylesCss;
+
+const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.open = undefined;
+        this.hasContent = undefined;
+    }
+    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 > 0;
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+    }
+    componentWillLoad() {
+        this.checkContent();
+    }
+    render() {
+        return (h(Host, { key: 'beadad10be10337d069e96c4144372b3ae9188d7', role: "menu", open: this.open }, h("button", { key: 'd76a6e7da3bb60238571b5a4e9c76b2923b07a97', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'ba6a653482a7e3f5de77877e7e69225c236b85f8', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    }
+    get hostElement() { return this; }
+    static get style() { return ZMenuSectionStyle0; }
+}, [1, "z-menu-section", {
+        "active": [516],
+        "open": [32],
+        "hasContent": [32]
+    }, [[4, "click", "handleClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-menu-section", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-menu-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMenuSection$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMenuSection = ZMenuSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMenuSection, defineCustomElement };
+
+//# sourceMappingURL=z-menu-section.js.map

package/dist/components/z-menu-section.js.map

@@ -0,0 +1 @@
+{"file":"z-menu-section.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,k8DAAk8D,CAAC;AACr9D,2BAAe,SAAS;;MCWXA,cAAY;;;;;;;;;;;IAqBf,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACrD;;IAID,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;;;;IAKO,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACjF;;;;;IAMO,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;KAC7D;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,EAC7D,IAAI,CAAC,UAAU,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAAI,CACxE,EACR,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,OAAO,IAChB,YACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMenuSection"],"sources":["src/components/navigation/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/navigation/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-icon02);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Element, Listen, Host} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMenu extends Components.ZMenu, HTMLElement {}
+export const ZMenu: {
+    prototype: ZMenu;
+    new (): ZMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-menu.js

@@ -0,0 +1,144 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-text01)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{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);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){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\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const ZMenuStyle0 = stylesCss;
+
+const ZMenu$1 = /*@__PURE__*/ proxyCustomElement(class ZMenu extends HTMLElement {
+    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);
+        }
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.floating = false;
+        this.open = false;
+        this.verticalContext = false;
+        this.hasHeader = undefined;
+        this.hasContent = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.checkContent = this.checkContent.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+    }
+    componentWillLoad() {
+        this.checkContent();
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
+    /**
+     * 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.
+     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+     */
+    onItemsChange() {
+        this.checkContent();
+        const items = this.hostElement.querySelectorAll("[slot=item]");
+        items.forEach((item) => {
+            item.setAttribute("role", "menuitem");
+            item.dataset.text = item.textContent;
+        });
+    }
+    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", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+        }
+        return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
+    }
+    render() {
+        return (h(Host, { key: 'f76898d2bf69ae311b8e0ae16ac15651a72aff19' }, this.renderMenuLabel(), this.hasContent && (h("div", { class: "content", ref: (el) => (this.content = el) }, 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 this; }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+    static get style() { return ZMenuStyle0; }
+}, [1, "z-menu", {
+        "active": [516],
+        "floating": [516],
+        "open": [1540],
+        "verticalContext": [516, "vertical-context"],
+        "hasHeader": [32],
+        "hasContent": [32]
+    }, [[4, "click", "handleClick"]], {
+        "open": ["onOpenChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-menu", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMenu$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMenu = ZMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMenu, defineCustomElement };
+
+//# sourceMappingURL=z-menu.js.map

package/dist/components/z-menu.js.map

@@ -0,0 +1 @@
+{"file":"z-menu.js","mappings":"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","names":["ZMenu"],"sources":["src/components/navigation/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/navigation/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n\n  --z-menu-label-color: var(--color-text01);\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  outline: none;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-within {\n  z-index: 1;\n  padding-right: calc(var(--space-unit) * 0.5);\n  padding-left: calc(var(--space-unit) * 0.5);\n  margin-right: calc(var(--space-unit) * -0.5);\n  margin-left: calc(var(--space-unit) * -0.5);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n  font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(*),\n.menu-label:focus-within .menu-label-content ::slotted(*) {\n  letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {\n  box-shadow: none !important;\n}\n\n/* border */\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  content: \"\";\n  pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n  height: var(--border-size-small);\n  background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  height: var(--border-size-large);\n  background-color: var(--color-secondary01);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-5);\n  font-weight: inherit;\n  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n  line-height: 1.2;\n  outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(*),\n.menu-label .menu-label-content z-icon {\n  padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: currentcolor;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n  border-color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch, Host} from \"@stencil/core\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() hostElement: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = false;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  private content: HTMLElement;\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the floating list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n      return;\n    }\n\n    this.reflow();\n    this.open = false;\n    this.closed.emit();\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (this.open) {\n      this.reflow(true);\n    } else {\n      cancelAnimationFrame(this.raf);\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (this.content) {\n      const {style} = this.content;\n      const {left} = this.hostElement.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  /**\n   * Set `menuitem` role to all menu items.\n   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n   */\n  private onItemsChange(): void {\n    this.checkContent();\n    const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n    items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.dataset.text = item.textContent;\n    });\n  }\n\n  private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n    if (this.hasContent) {\n      return (\n        <button\n          class=\"menu-label\"\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          onClick={this.toggle}\n        >\n          <div class=\"menu-label-content\">\n            <slot onSlotchange={this.onLabelSlotChange}></slot>\n            <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n          </div>\n        </button>\n      );\n    }\n\n    return (\n      <div class=\"menu-label\">\n        <div class=\"menu-label-content\">\n          <slot onSlotchange={this.onLabelSlotChange}></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZMenuElement {\n    return (\n      <Host>\n        {this.renderMenuLabel()}\n\n        {this.hasContent && (\n          <div\n            class=\"content\"\n            ref={(el) => (this.content = el)}\n          >\n            {this.hasHeader && (\n              <header class=\"header\">\n                <slot\n                  name=\"header\"\n                  onSlotchange={this.checkContent}\n                ></slot>\n              </header>\n            )}\n\n            <div\n              class=\"items\"\n              role=\"menu\"\n            >\n              <slot\n                name=\"item\"\n                onSlotchange={this.onItemsChange}\n              ></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-messages-pocket.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMessagesPocket extends Components.ZMessagesPocket, HTMLElement {}
+export const ZMessagesPocket: {
+    prototype: ZMessagesPocket;
+    new (): ZMessagesPocket;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-messages-pocket.js

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { q as PocketStatus } from './index2.js';
+import { d as defineCustomElement$5 } from './index9.js';
+import { d as defineCustomElement$4 } from './index22.js';
+import { d as defineCustomElement$3 } from './index23.js';
+import { d as defineCustomElement$2 } from './index24.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{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);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-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--border-radius)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--border-radius)}}";
+const ZMessagesPocketStyle0 = stylesCss;
+
+const ZMessagesPocket$1 = /*@__PURE__*/ proxyCustomElement(class ZMessagesPocket extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pocketid = undefined;
+        this.messages = undefined;
+        this.status = PocketStatus.PREVIEW;
+    }
+    handlePocketToggle(e) {
+        if (e.detail.id === this.pocketid) {
+            this.status = e.detail.status;
+        }
+    }
+    renderHeader() {
+        let message;
+        let icon;
+        switch (this.status) {
+            case PocketStatus.PREVIEW:
+            case PocketStatus.CLOSED:
+                message = (h("span", null, "Messaggi ", h("span", { class: "badge" }, this.messages)));
+                icon = "chevron-up";
+                break;
+            case PocketStatus.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", { key: '3aefef3d845cb5f672ed037667da8d59bf2355dd', pocketid: this.pocketid, status: this.status, class: this.status }, this.renderHeader(), this.renderBody()));
+    }
+    static get style() { return ZMessagesPocketStyle0; }
+}, [1, "z-messages-pocket", {
+        "pocketid": [1],
+        "messages": [2],
+        "status": [1025]
+    }, [[16, "pocketToggle", "handlePocketToggle"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-messages-pocket", "z-icon", "z-pocket", "z-pocket-body", "z-pocket-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-messages-pocket":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMessagesPocket$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-pocket":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-pocket-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-pocket-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMessagesPocket = ZMessagesPocket$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMessagesPocket, defineCustomElement };
+
+//# sourceMappingURL=z-messages-pocket.js.map

package/dist/components/z-messages-pocket.js.map

@@ -0,0 +1 @@
+{"file":"z-messages-pocket.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ytDAAytD,CAAC;AAC5uD,8BAAe,SAAS;;MCUXA,iBAAe;;;;;;;sBAWH,YAAY,CAAC,OAAO;;IAG3C,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;SAC/B;KACF;IAEO,YAAY;QAClB,IAAI,OAAoB,CAAC;QACzB,IAAI,IAAY,CAAC;QACjB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAK,YAAY,CAAC,OAAO,CAAC;YAC1B,KAAK,YAAY,CAAC,MAAM;gBACtB,OAAO,IACL,6BACW,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC9C,CACR,CAAC;gBACF,IAAI,GAAG,YAAY,CAAC;gBACpB,MAAM;YACR,KAAK,YAAY,CAAC,IAAI;gBACpB,OAAO,GAAG,yBAAmB,CAAC;gBAC9B,IAAI,GAAG,cAAc,CAAC;gBACtB,MAAM;SACT;QAED,QACE,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACrC,OAAO,EACR,cACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACc,EAClB;KACH;IAEO,UAAU;QAChB,QACE,qBAAe,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACpC,WAAK,KAAK,EAAC,MAAM,IACf,eAAQ,CACJ,EACN,WAAK,KAAK,EAAC,UAAU,GAAG,CACV,EAChB;KACH;IAED,MAAM;QACJ,QACE,iEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,MAAM,IAEjB,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,CACT,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMessagesPocket"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n  width: 100%;\n}\n\n:host > z-pocket.closed {\n  width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n  display: inline-block;\n  padding: 0 calc(var(--space-unit) * 0.5);\n  margin-left: var(--space-unit);\n  background: var(--color-secondary02);\n  border-radius: 50%;\n  color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n  overflow: hidden;\n  padding: var(--space-unit);\n  margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n  position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n  overflow: auto;\n  max-height: calc(100vh - 166px);\n  scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > z-pocket {\n    width: 768px;\n    margin: 0 calc((100% - 768px) / 2);\n  }\n\n  :host > z-pocket.closed {\n    margin: 0 calc((100% - 158px) / 2);\n  }\n\n  :host > z-pocket.open > z-pocket-body > div.body {\n    max-height: 326px;\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1152px) {\n  :host > z-pocket.open > z-pocket-body > div.body {\n    scrollbar-color: var(--color-primary01) var(--color-surface03);\n    scrollbar-width: thin;\n  }\n\n  :host ::-webkit-scrollbar {\n    width: 10px;\n    background: linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );\n    border-radius: var(--border-radius);\n  }\n\n  :host ::-webkit-scrollbar-thumb {\n    width: var(--space-unit);\n    background-color: var(--color-primary01);\n    border-radius: var(--border-radius);\n  }\n}\n","import {Component, Prop, h, Listen /* , State */} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-messages-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMessagesPocket {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** number of messages */\n  @Prop()\n  messages: number;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  private renderHeader(): HTMLZPocketHeaderElement {\n    let message: HTMLElement;\n    let icon: string;\n    switch (this.status) {\n      case PocketStatus.PREVIEW:\n      case PocketStatus.CLOSED:\n        message = (\n          <span>\n            Messaggi <span class=\"badge\">{this.messages}</span>\n          </span>\n        );\n        icon = \"chevron-up\";\n        break;\n      case PocketStatus.OPEN:\n        message = <span>Riduci</span>;\n        icon = \"chevron-down\";\n        break;\n    }\n\n    return (\n      <z-pocket-header pocketid={this.pocketid}>\n        {message}\n        <z-icon\n          name={icon}\n          width={14}\n          height={14}\n        />\n      </z-pocket-header>\n    );\n  }\n\n  private renderBody(): HTMLZPocketBodyElement {\n    return (\n      <z-pocket-body pocketid={this.pocketid}>\n        <div class=\"body\">\n          <slot />\n        </div>\n        <div class=\"gradient\" />\n      </z-pocket-body>\n    );\n  }\n\n  render(): HTMLZPocketElement {\n    return (\n      <z-pocket\n        pocketid={this.pocketid}\n        status={this.status}\n        class={this.status}\n      >\n        {this.renderHeader()}\n        {this.renderBody()}\n      </z-pocket>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZModal extends Components.ZModal, HTMLElement {}
+export const ZModal: {
+    prototype: ZModal;
+    new (): ZModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-modal.js

@@ -0,0 +1,8 @@
+import { Z as ZModal$1, d as defineCustomElement$1 } from './index15.js';
+
+const ZModal = ZModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZModal, defineCustomElement };
+
+//# sourceMappingURL=z-modal.js.map

package/dist/components/z-modal.js.map

@@ -0,0 +1 @@
+{"file":"z-modal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-myz-card-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardAlert extends Components.ZMyzCardAlert, HTMLElement {}
+export const ZMyzCardAlert: {
+    prototype: ZMyzCardAlert;
+    new (): ZMyzCardAlert;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-myz-card-alert.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { o as AlertType } from './index2.js';
+import { d as defineCustomElement$3 } from './index3.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
+const ZMyzCardAlertStyle0 = stylesCss;
+
+const ZMyzCardAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardAlert extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.undoAction = createEvent(this, "undoAction", 7);
+        this.iconname = undefined;
+        this.contenttext = undefined;
+        this.actiontext = undefined;
+        this.type = undefined;
+    }
+    emitUndoAction() {
+        this.undoAction.emit({ actionType: this.type });
+    }
+    handleSpaceKeyPress(e) {
+        if (e.keyCode == 32 || e.keyCode == 13) {
+            e.preventDefault();
+            this.emitUndoAction();
+        }
+    }
+    handleActionButtonClick(e) {
+        e.preventDefault();
+        this.emitUndoAction();
+    }
+    retrieveClass() {
+        let className = "";
+        switch (this.type) {
+            case "add":
+                className = "add-alert";
+                break;
+            case "remove":
+                className = "remove-alert";
+                break;
+            default:
+                className = "";
+                break;
+        }
+        return className;
+    }
+    getAlertType() {
+        switch (this.type) {
+            case "add":
+                return AlertType.SUCCESS;
+            case "remove":
+                return AlertType.WARNING;
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (h("div", { key: '1b444689e78b349adce31ea4d4b318ae447acc05', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '8774b645a0c306246db8afbed890b372ae8dcdff', type: this.getAlertType() }, h("div", { key: '03df6396443cffd9b791a9b29b146f05f405a035', class: "relative-container" }, h("z-icon", { key: '7d0a21e9cd2dbbde634440b3e36f2d892023cc81', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'a0bc80e8f7b28cebba25ad3f8a5f9bf3233a6930', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+                this.handleActionButtonClick(e);
+            }, onKeyPress: (e) => {
+                this.handleSpaceKeyPress(e);
+            } }, this.actiontext))))));
+    }
+    static get style() { return ZMyzCardAlertStyle0; }
+}, [1, "z-myz-card-alert", {
+        "iconname": [1],
+        "contenttext": [1],
+        "actiontext": [1],
+        "type": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-myz-card-alert", "z-alert", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-myz-card-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzCardAlert$1);
+            }
+            break;
+        case "z-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZMyzCardAlert = ZMyzCardAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardAlert, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-alert.js.map

package/dist/components/z-myz-card-alert.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-card-alert.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,u7BAAu7B,CAAC;AAC18B,4BAAe,SAAS;;MCOXA,eAAa;;;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,YACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardAlert"],"sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n  height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n  position: relative;\n  display: grid;\n  align-items: center;\n  padding: 0;\n  grid-column-gap: var(--space-unit);\n  grid-template-columns: 18px auto 46px;\n  grid-template-rows: 1fr;\n  outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n  border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n  border: var(--border-size-medium) solid var(--color-surface02);\n  border-top: none;\n}\n\n:host div.add-alert {\n  background: var(--color-success-inverse);\n}\n\n:host div.remove-alert {\n  background: var(--color-warning-inverse);\n}\n\n:host div > .content-text {\n  color: var(--color-surface05);\n  font-size: 14px;\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n:host div > .content-action {\n  height: 20px;\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 20px;\n}\n\n:host div > z-icon {\n  justify-self: center;\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardAlert {\n  /** icon name */\n  @Prop()\n  iconname: string;\n\n  /** content text */\n  @Prop()\n  contenttext: string;\n\n  /** action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** alert variant type */\n  @Prop()\n  type: string;\n\n  /** undo action click/keyboard event, returns actionType */\n  @Event()\n  undoAction: EventEmitter;\n\n  private emitUndoAction(): void {\n    this.undoAction.emit({actionType: this.type});\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      this.emitUndoAction();\n    }\n  }\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.emitUndoAction();\n  }\n\n  private retrieveClass(): string {\n    let className = \"\";\n    switch (this.type) {\n      case \"add\":\n        className = \"add-alert\";\n        break;\n      case \"remove\":\n        className = \"remove-alert\";\n        break;\n      default:\n        className = \"\";\n        break;\n    }\n\n    return className;\n  }\n\n  private getAlertType(): AlertType {\n    switch (this.type) {\n      case \"add\":\n        return AlertType.SUCCESS;\n      case \"remove\":\n        return AlertType.WARNING;\n      default:\n        return null;\n    }\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n        <z-alert type={this.getAlertType()}>\n          <div class=\"relative-container\">\n            <z-icon\n              name={this.iconname}\n              width={18}\n              height={18}\n              class={this.retrieveClass()}\n            ></z-icon>\n            <span class=\"content-text\">{this.contenttext}</span>\n            {this.actiontext && !!this.actiontext.trim().length && (\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"content-action\"\n                onClick={(e: MouseEvent) => {\n                  this.handleActionButtonClick(e);\n                }}\n                onKeyPress={(e: KeyboardEvent) => {\n                  this.handleSpaceKeyPress(e);\n                }}\n              >\n                {this.actiontext}\n              </span>\n            )}\n          </div>\n        </z-alert>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card-body.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardBody extends Components.ZMyzCardBody, HTMLElement {}
+export const ZMyzCardBody: {
+    prototype: ZMyzCardBody;
+    new (): ZMyzCardBody;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-myz-card-body.js

@@ -0,0 +1,8 @@
+import { Z as ZMyzCardBody$1, d as defineCustomElement$1 } from './index17.js';
+
+const ZMyzCardBody = ZMyzCardBody$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardBody, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-body.js.map

package/dist/components/z-myz-card-body.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-card-body.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-myz-card-cover.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZMyzCardCover extends Components.ZMyzCardCover, HTMLElement {}
+export const ZMyzCardCover: {
+    prototype: ZMyzCardCover;
+    new (): ZMyzCardCover;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/z-myz-card-cover.js

@@ -0,0 +1,8 @@
+import { Z as ZMyzCardCover$1, d as defineCustomElement$1 } from './index18.js';
+
+const ZMyzCardCover = ZMyzCardCover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZMyzCardCover, defineCustomElement };
+
+//# sourceMappingURL=z-myz-card-cover.js.map

package/dist/components/z-myz-card-cover.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-card-cover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}