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

package/dist/collection/components/navigation/z-menu/index.js

@@ -6,245 +6,239 @@ import { h, Host } from "@stencil/core";
  * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenu {
-  constructor() {
+    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() {
+        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();
+    }
     /**
-     * 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.
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
      */
-    this.floating = false;
-    /** The opening state of the menu. */
-    this.open = false;
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
     /**
-     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
-     * A small border is placed under it as a separator from other elements.
+     * Correctly set position of the floating menu in order to prevent overflow.
+     * @param live Should run the method on every refresh frame.
      */
-    this.verticalContext = false;
-    this.toggle = this.toggle.bind(this);
-    this.checkContent = this.checkContent.bind(this);
-    this.onLabelSlotChange = this.onLabelSlotChange.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();
-  }
-  /**
-   * 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, null, 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 }))))));
-  }
-  static get is() { return "z-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Flag to set the active status of the menu."
-        },
-        "attribute": "active",
-        "reflect": true
-      },
-      "floating": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
-        },
-        "attribute": "floating",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The opening state of the menu."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "verticalContext": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
-        },
-        "attribute": "vertical-context",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasHeader": {},
-      "hasContent": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "opened",
-        "name": "opened",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "The menu has been opened."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    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`;
         }
-      }, {
-        "method": "closed",
-        "name": "closed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "The menu has been closed."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+        if (live) {
+            this.raf = requestAnimationFrame(this.reflow.bind(this, live));
         }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "onOpenChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    /**
+     * 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 }))))));
+    }
+    static get is() { return "z-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to set the active status of the menu."
+                },
+                "attribute": "active",
+                "reflect": true
+            },
+            "floating": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
+                },
+                "attribute": "floating",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The opening state of the menu."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "verticalContext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
+                },
+                "attribute": "vertical-context",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasHeader": {},
+            "hasContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The menu has been opened."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The menu has been closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/navigation/z-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/navigation/z-menu/index.spec.js

@@ -0,0 +1,120 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZMenuSection } from "../z-menu-section";
+import { ZMenu } from "./index";
+describe("Suite test ZMenu", () => {
+    it("Test render ZMenu label only", async () => {
+        const page = await newSpecPage({
+            components: [ZMenu],
+            html: `<z-menu role="menu">
+        <h3>Menu label</h3>
+      </z-menu>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-menu role="menu">
+        <mock:shadow-root>
+          <div class="menu-label">
+            <div class="menu-label-content">
+              <slot></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3>Menu label</h3>
+    </z-menu>`);
+    });
+    it("Test render ZMenu with items", async () => {
+        const page = await newSpecPage({
+            components: [ZMenu, ZMenuSection],
+            html: `<z-menu role="menu">
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <a href="#" slot="item">Item 2</a>
+        <a href="#" slot="item">Item 3</a>
+      </z-menu>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-menu role="menu">
+        <mock:shadow-root>
+          <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
+            <div class="menu-label-content">
+              <slot></slot>
+              <z-icon name="chevron-down"></z-icon>
+            </div>
+          </button>
+          <div class="content">
+            <div class="items" role="menu">
+              <slot name="item"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <a href="#" slot="item">Item 2</a>
+        <a href="#" slot="item">Item 3</a>
+    </z-menu>`);
+    });
+    it("Test render ZMenu with submenu", async () => {
+        const page = await newSpecPage({
+            components: [ZMenu, ZMenuSection],
+            html: `<z-menu role="menu">
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <z-menu-section slot="item">
+          <h3>Item 2</h2>
+          <a href="#" slot="item">Item 2.1</a>
+          <a href="#" slot="item">Item 2.2</a>
+        </z-menu-section>
+      </z-menu>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-menu role="menu">
+        <mock:shadow-root>
+          <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
+            <div class="menu-label-content">
+              <slot></slot>
+              <z-icon name="chevron-down"></z-icon>
+            </div>
+          </button>
+          <div class="content">
+            <div class="items" role="menu">
+              <slot name="item"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <z-menu-section role="menu" slot="item">
+          <mock:shadow-root>
+            <button aria-pressed="false" class="label">
+              <slot></slot>
+              <z-icon name="chevron-down"></z-icon>
+            </button>
+          </mock:shadow-root>
+          <h3>Item 2</h3>
+          <a href="#" slot="item">Item 2.1</a>
+          <a href="#" slot="item">Item 2.2</a>
+        </z-menu-section>
+    </z-menu>`);
+    });
+    it("Test ZMenu toggle events", async () => {
+        const page = await newSpecPage({
+            components: [ZMenu],
+            html: `<z-menu role="menu">
+        <div slot="item">item</div>
+      </z-menu>`,
+        });
+        const menu = page.rootInstance;
+        const openedCallback = jest.fn();
+        page.doc.addEventListener("opened", openedCallback);
+        await page.waitForChanges();
+        // call `toggle` to open the menu
+        menu.toggle();
+        expect(openedCallback).toHaveBeenCalled();
+        const closedCallback = jest.fn();
+        page.doc.addEventListener("closed", closedCallback);
+        await page.waitForChanges();
+        // the menu is already open, this call will close it
+        menu.toggle();
+        expect(closedCallback).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/navigation/z-menu/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-menu/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;gBAEI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;cAUpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;YACjC,IAAI,EAAE;;;;;gBAKI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;cAmBpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;YACjC,IAAI,EAAE;;;;;;;;gBAQI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BpB,CAAC,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;gBAEI;SACX,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,iCAAiC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,oDAAoD;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZMenuSection} from \"../z-menu-section\";\n\nimport {ZMenu} from \"./index\";\n\ndescribe(\"Suite test ZMenu\", () => {\n  it(\"Test render ZMenu label only\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu role=\"menu\">\n        <mock:shadow-root>\n          <div class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n    </z-menu>`);\n  });\n\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu, ZMenuSection],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu role=\"menu\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n    </z-menu>`);\n  });\n\n  it(\"Test render ZMenu with submenu\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu, ZMenuSection],\n      html: `<z-menu role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section slot=\"item\">\n          <h3>Item 2</h2>\n          <a href=\"#\" slot=\"item\">Item 2.1</a>\n          <a href=\"#\" slot=\"item\">Item 2.2</a>\n        </z-menu-section>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu role=\"menu\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section role=\"menu\" slot=\"item\">\n          <mock:shadow-root>\n            <button aria-pressed=\"false\" class=\"label\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </button>\n          </mock:shadow-root>\n          <h3>Item 2</h3>\n          <a href=\"#\" slot=\"item\">Item 2.1</a>\n          <a href=\"#\" slot=\"item\">Item 2.2</a>\n        </z-menu-section>\n    </z-menu>`);\n  });\n\n  it(\"Test ZMenu toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenu],\n      html: `<z-menu role=\"menu\">\n        <div slot=\"item\">item</div>\n      </z-menu>`,\n    });\n    const menu = page.rootInstance;\n\n    const openedCallback = jest.fn();\n    page.doc.addEventListener(\"opened\", openedCallback);\n    await page.waitForChanges();\n    // call `toggle` to open the menu\n    menu.toggle();\n    expect(openedCallback).toHaveBeenCalled();\n\n    const closedCallback = jest.fn();\n    page.doc.addEventListener(\"closed\", closedCallback);\n    await page.waitForChanges();\n    // the menu is already open, this call will close it\n    menu.toggle();\n    expect(closedCallback).toHaveBeenCalled();\n  });\n});\n"]}