@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/modal/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Method, Element, Listen} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../../beans\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/**\n * @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n */\n@Component({\n  tag: \"z-modal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZModal {\n  /** unique id */\n  @Prop()\n  modalid: string;\n\n  /** title text (optional) */\n  @Prop()\n  modaltitle?: string;\n\n  /** subtitle (optional) */\n  @Prop()\n  modalsubtitle?: string;\n\n  /** aria-label for close button (optional) */\n  @Prop()\n  closeButtonLabel = \"chiudi modale\";\n\n  /** add role \"alertdialog\" to dialog (optional, default is false) */\n  @Prop()\n  alertdialog?: boolean = false;\n\n  /** if true, the modal is closable (optional, default is true) */\n  @Prop()\n  closable?: boolean = true;\n\n  /** if true, the modal can scroll inside, if false the viewport can scroll */\n  @Prop()\n  scrollInside?: boolean = true;\n\n  private dialog: HTMLDialogElement;\n\n  @Element() host: HTMLZModalElement;\n\n  /** emitted on close button click, returns modalid */\n  @Event()\n  modalClose: EventEmitter;\n\n  private emitModalClose(): void {\n    if (this.closable) {\n      this.modalClose.emit({modalid: this.modalid});\n    }\n  }\n\n  /** emitted on modal header click, returns modalid */\n  @Event()\n  modalHeaderActive: EventEmitter;\n\n  private emitModalHeaderActive(): void {\n    this.modalHeaderActive.emit({modalid: this.modalid});\n  }\n\n  /** emitted on background click, returns modalid */\n  @Event()\n  modalBackgroundClick: EventEmitter;\n\n  private emitBackgroundClick(): void {\n    if (this.closable) {\n      this.modalBackgroundClick.emit({modalid: this.modalid});\n    }\n  }\n\n  componentDidLoad(): void {\n    if (typeof window.HTMLDialogElement !== \"function\") {\n      /* workaround to fix `registerDialog` in test environment:\n      stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n      which is used by `registerDialog` to recognize the element as dialog */\n      if (!this.dialog.localName) {\n        Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n      }\n      dialogPolyfill.registerDialog(this.dialog);\n      this.dialog.setAttribute(\"open\", \"true\");\n    } else {\n      this.open();\n    }\n  }\n\n  /** open modal */\n  @Method()\n  async open(): Promise<void> {\n    this.dialog?.showModal();\n  }\n\n  /** close modal */\n  @Method()\n  async close(): Promise<void> {\n    if (this.closable) {\n      this.dialog?.close();\n    }\n  }\n\n  /**\n   * Get a list of focusable elements in the dialog.\n   * Remove elements with `display: none` from the list, because they're not focusable.\n   *\n   * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n   * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n   */\n  private get focusableElements(): HTMLElement[] {\n    return [\n      ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n      ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n    ].filter((element) => getComputedStyle(element).display !== \"none\");\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code !== KeyboardCode.TAB) {\n      return;\n    }\n\n    const focusableElements = this.focusableElements;\n    const shadowActiveElement = this.host.shadowRoot.activeElement;\n    const activeElement = this.host.ownerDocument.activeElement;\n    const firstFocusableElement = focusableElements[0];\n    const lastFocusableElement = focusableElements[focusableElements.length - 1];\n    if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {\n      // shift + tab was pressed and current active element is the first focusable element\n      e.preventDefault();\n      lastFocusableElement.focus();\n    } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {\n      // shift + tab was pressed and current active element is the first focusable element\n      e.preventDefault();\n      firstFocusableElement.focus();\n    }\n  }\n\n  private closeButtonSlot(): HTMLElement | void {\n    if (this.closable) {\n      return (\n        <slot name=\"modalCloseButton\">\n          <button\n            aria-label={this.closeButtonLabel}\n            onClick={() => this.close()}\n          >\n            <z-icon name=\"multiply-circle-filled\"></z-icon>\n          </button>\n        </slot>\n      );\n    }\n  }\n\n  private handleEscape(e: Event): void {\n    if (this.closable) {\n      return;\n    }\n    e.preventDefault();\n  }\n\n  render(): HTMLZModalElement {\n    return (\n      <dialog\n        class={{\n          \"modal-dialog\": !this.scrollInside,\n        }}\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-content\"\n        role={this.alertdialog ? \"alertdialog\" : undefined}\n        ref={(el) => (this.dialog = el as HTMLDialogElement)}\n        onClose={() => this.emitModalClose()}\n        onCancel={(e) => this.handleEscape(e)}\n      >\n        <div\n          class={{\n            \"modal-container\": true,\n            \"modal-container-scroll-inside\": this.scrollInside,\n            \"modal-container-scroll-outside\": !this.scrollInside,\n          }}\n          id={this.modalid}\n        >\n          <header onClick={this.emitModalHeaderActive.bind(this)}>\n            <div>\n              {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n              {this.closeButtonSlot()}\n            </div>\n            {this.modalsubtitle && <h2 id=\"modal-subtitle\">{this.modalsubtitle}</h2>}\n          </header>\n\n          <div\n            class={{\n              \"modal-content-scroll-inside\": this.scrollInside,\n              \"modal-content-scroll-outside\": !this.scrollInside,\n            }}\n            id=\"modal-content\"\n          >\n            <slot name=\"modalContent\"></slot>\n          </div>\n        </div>\n        <div\n          class={{\n            \"modal-background\": true,\n            \"modal-background-scroll-outside\": !this.scrollInside,\n          }}\n          data-action=\"modalBackground\"\n          data-modal={this.modalid}\n          onClick={() => {\n            this.emitBackgroundClick();\n            this.close();\n          }}\n        ></div>\n      </dialog>\n    );\n  }\n}\n"]}

package/dist/collection/components/modal/z-modal/index.spec.js

@@ -1,192 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ZModal } from "./index";
-describe("Suite test ZModal", () => {
-    it("Test render empty ZModal", async () => {
-        const page = await newSpecPage({
-            components: [ZModal],
-            html: `<z-modal></z-modal>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-modal>
-        <mock:shadow-root>
-        <dialog role="dialog" aria-describedby="modal-content" aria-labelledby="modal-title" open="true">
-          <div class="modal-container modal-container-scroll-inside">
-            <header>
-              <div>
-                <slot name="modalCloseButton">
-                  <button aria-label="chiudi modale">
-                    <z-icon name="multiply-circle-filled"></z-icon>
-                  </button>
-                </slot>
-              </div>
-            </header>
-            <div class="modal-content-scroll-inside" id="modal-content">
-              <slot name="modalContent"></slot>
-            </div>
-          </div>
-          <div class="modal-background" data-action="modalBackground"></div>
-        </dialog>
-        </mock:shadow-root>
-      </z-modal>
-    `);
-    });
-    it("Test render ZModal with props", async () => {
-        const page = await newSpecPage({
-            components: [ZModal],
-            html: `<z-modal modalid="modal" modaltitle="title" modalsubtitle="subtitle" close-button-label="chiudi modale"></z-modal>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-modal modalid="modal" modaltitle="title" modalsubtitle="subtitle" close-button-label="chiudi modale">
-        <mock:shadow-root>
-        <dialog role="dialog" aria-describedby="modal-content" aria-labelledby="modal-title" open="true">
-          <div class="modal-container modal-container-scroll-inside" id="modal">
-            <header>
-              <div>
-                <h1 id="modal-title">title</h1>
-                <slot name="modalCloseButton">
-                  <button aria-label="chiudi modale">
-                    <z-icon name="multiply-circle-filled"></z-icon>
-                  </button>
-                </slot>
-              </div>
-              <h2 id="modal-subtitle">subtitle</h2>
-            </header>
-            <div class="modal-content-scroll-inside" id="modal-content">
-              <slot name="modalContent"></slot>
-            </div>
-          </div>
-          <div class="modal-background" data-action="modalBackground" data-modal="modal"></div>
-        </dialog>
-        </mock:shadow-root>
-      </z-modal>
-    `);
-    });
-    it("Test render ZModal with prop scrollable set to true", async () => {
-        const page = await newSpecPage({
-            components: [ZModal],
-            html: `<z-modal modalid="modal" modaltitle="title" modalsubtitle="subtitle" close-button-label="chiudi modale" scroll-inside="true"></z-modal>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-modal modalid="modal" modaltitle="title" modalsubtitle="subtitle" close-button-label="chiudi modale" scroll-inside="true">
-        <mock:shadow-root>
-        <dialog role="dialog" aria-describedby="modal-content" aria-labelledby="modal-title" open="true">
-          <div class="modal-container modal-container-scroll-inside" id="modal">
-            <header>
-              <div>
-                <h1 id="modal-title">title</h1>
-                <slot name="modalCloseButton">
-                  <button aria-label="chiudi modale">
-                    <z-icon name="multiply-circle-filled"></z-icon>
-                  </button>
-                </slot>
-              </div>
-              <h2 id="modal-subtitle">subtitle</h2>
-            </header>
-            <div class="modal-content-scroll-inside" id="modal-content">
-              <slot name="modalContent"></slot>
-            </div>
-          </div>
-          <div class="modal-background" data-action="modalBackground" data-modal="modal"></div>
-        </div>
-      </div>
-    </dialog>
-  </mock:shadow-root>
-</z-modal>
-`);
-    });
-    it("Test render ZModal with prop scrollable set to false", async () => {
-        const page = await newSpecPage({
-            components: [ZModal],
-            html: `<z-modal modalid="modal" modaltitle="title" modalsubtitle="subtitle" close-button-label="chiudi modale" scroll-inside="false"></z-modal>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-modal modalid="modal" modaltitle="title" modalsubtitle="subtitle" close-button-label="chiudi modale" scroll-inside="false">
-        <mock:shadow-root>
-        <dialog role="dialog" aria-describedby="modal-content" aria-labelledby="modal-title" class="modal-dialog" open="true">
-          <div class="modal-container modal-container-scroll-outside" id="modal">
-            <header>
-              <div>
-                <h1 id="modal-title">title</h1>
-                <slot name="modalCloseButton">
-                  <button aria-label="chiudi modale">
-                    <z-icon name="multiply-circle-filled"></z-icon>
-                  </button>
-                </slot>
-              </div>
-              <h2 id="modal-subtitle">subtitle</h2>
-            </header>
-            <div class="modal-content-scroll-outside" id="modal-content">
-              <slot name="modalContent"></slot>
-            </div>
-          </div>
-              <div class="modal-background modal-background-scroll-outside" data-action="modalBackground" data-modal="modal"></div>
-        </div>
-      </div>
-    </dialog>
-  </mock:shadow-root>
-</z-modal>
-`);
-    });
-    it("Test render ZModal with slotted content", async () => {
-        const page = await newSpecPage({
-            components: [ZModal],
-            html: `<z-modal><div slot="modalContent">Contenuto dello <b>slot</b></div></z-modal>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-modal>
-        <mock:shadow-root>
-        <dialog role="dialog" aria-describedby="modal-content" aria-labelledby="modal-title" open="true">
-          <div class="modal-container modal-container-scroll-inside">
-            <header>
-              <div>
-                <slot name="modalCloseButton">
-                  <button aria-label="chiudi modale">
-                    <z-icon name="multiply-circle-filled"></z-icon>
-                  </button>
-                </slot>
-              </div>
-            </header>
-            <div class="modal-content-scroll-inside" id="modal-content">
-              <slot name="modalContent"></slot>
-            </div>
-          </div>
-          <div class="modal-background" data-action="modalBackground"></div>
-        </dialog>
-        </mock:shadow-root>
-        <div slot="modalContent">Contenuto dello <b>slot</b></div>
-      </z-modal>
-    `);
-    });
-    it("Test render ZModal with slotted content and close button", async () => {
-        const page = await newSpecPage({
-            components: [ZModal],
-            html: `<z-modal><div slot="modalContent">Contenuto dello <b>slot</b></div><button slot="modalCloseButton" aria-label="close">X</button></z-modal>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-modal>
-        <mock:shadow-root>
-        <dialog role="dialog" aria-describedby="modal-content" aria-labelledby="modal-title" open="true">
-          <div class="modal-container modal-container-scroll-inside">
-            <header>
-              <div>
-                <slot name="modalCloseButton">
-                  <button aria-label="chiudi modale">
-                    <z-icon name="multiply-circle-filled"></z-icon>
-                  </button>
-                </slot>
-              </div>
-            </header>
-            <div class="modal-content-scroll-inside" id="modal-content">
-              <slot name="modalContent"></slot>
-            </div>
-          </div>
-          <div class="modal-background" data-action="modalBackground"></div>
-        </dialog>
-        </mock:shadow-root>
-        <div slot="modalContent">Contenuto dello <b>slot</b></div>
-        <button aria-label="close" slot="modalCloseButton">X</button>
-      </z-modal>
-    `);
-    });
-});
-//# sourceMappingURL=index.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/modal/z-modal/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,qBAAqB;SAC5B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,oHAAoH;SAC3H,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,yIAAyI;SAChJ,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BjC,CAAC,CAAC;IACD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,0IAA0I;SACjJ,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BjC,CAAC,CAAC;IACD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,+EAA+E;SACtF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,4IAA4I;SACnJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZModal} from \"./index\";\n\ndescribe(\"Suite test ZModal\", () => {\n  it(\"Test render empty ZModal\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal></z-modal>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-modal>\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\">\n            <header>\n              <div>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\"></div>\n        </dialog>\n        </mock:shadow-root>\n      </z-modal>\n    `);\n  });\n\n  it(\"Test render ZModal with props\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\"></z-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\">\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\" id=\"modal\">\n            <header>\n              <div>\n                <h1 id=\"modal-title\">title</h1>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n              <h2 id=\"modal-subtitle\">subtitle</h2>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\" data-modal=\"modal\"></div>\n        </dialog>\n        </mock:shadow-root>\n      </z-modal>\n    `);\n  });\n\n  it(\"Test render ZModal with prop scrollable set to true\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"true\"></z-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"true\">\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\" id=\"modal\">\n            <header>\n              <div>\n                <h1 id=\"modal-title\">title</h1>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n              <h2 id=\"modal-subtitle\">subtitle</h2>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\" data-modal=\"modal\"></div>\n        </div>\n      </div>\n    </dialog>\n  </mock:shadow-root>\n</z-modal>\n`);\n  });\n\n  it(\"Test render ZModal with prop scrollable set to false\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"false\"></z-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"false\">\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" class=\"modal-dialog\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-outside\" id=\"modal\">\n            <header>\n              <div>\n                <h1 id=\"modal-title\">title</h1>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n              <h2 id=\"modal-subtitle\">subtitle</h2>\n            </header>\n            <div class=\"modal-content-scroll-outside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n              <div class=\"modal-background modal-background-scroll-outside\" data-action=\"modalBackground\" data-modal=\"modal\"></div>\n        </div>\n      </div>\n    </dialog>\n  </mock:shadow-root>\n</z-modal>\n`);\n  });\n\n  it(\"Test render ZModal with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal><div slot=\"modalContent\">Contenuto dello <b>slot</b></div></z-modal>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-modal>\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\">\n            <header>\n              <div>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\"></div>\n        </dialog>\n        </mock:shadow-root>\n        <div slot=\"modalContent\">Contenuto dello <b>slot</b></div>\n      </z-modal>\n    `);\n  });\n  it(\"Test render ZModal with slotted content and close button\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal><div slot=\"modalContent\">Contenuto dello <b>slot</b></div><button slot=\"modalCloseButton\" aria-label=\"close\">X</button></z-modal>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-modal>\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\">\n            <header>\n              <div>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\"></div>\n        </dialog>\n        </mock:shadow-root>\n        <div slot=\"modalContent\">Contenuto dello <b>slot</b></div>\n        <button aria-label=\"close\" slot=\"modalCloseButton\">X</button>\n      </z-modal>\n    `);\n  });\n});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Element, Prop, State, Watch, Host, Event, EventEmitter, Listen} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.\n * Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader {\n  @Element() hostElement: HTMLZAppHeaderElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * Set the hero image source for the header.\n   * You can also use a [slot=\"hero\"] node for advanced customization.\n   */\n  @Prop()\n  hero: string;\n\n  /**\n   * Should place an overlay over the hero image.\n   * Useful for legibility purpose.\n   */\n  @Prop({reflect: true})\n  overlay = false;\n\n  /**\n   * Control menu bar position in the header.\n   * - auto: the menu bar is positioned near the title\n   * - stack: the menu bar is positioned below the title\n   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n   */\n  @Prop({reflect: true})\n  flow: \"auto\" | \"stack\" | \"offcanvas\" = \"auto\";\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({reflect: true})\n  drawerOpen = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current viewport.\n   * Used to change the aspect of the search button (icon only) on mobile and tablet.\n   */\n  @State()\n  private currentViewport: \"mobile\" | \"tablet\" | \"desktop\" = \"mobile\";\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  menuLength: number;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  private container?: HTMLDivElement;\n\n  private menuElements?: NodeListOf<HTMLElement>;\n\n  private observer?: IntersectionObserver =\n    SUPPORT_INTERSECTION_OBSERVER &&\n    new IntersectionObserver(\n      ([entry]) => {\n        this._stuck = !entry.isIntersecting;\n      },\n      {\n        threshold: 0.5,\n      }\n    );\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n  }\n\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  evaluateViewport(): void {\n    if (window.innerWidth < 768) {\n      this.currentViewport = \"mobile\";\n    } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n      this.currentViewport = \"tablet\";\n    } else {\n      this.currentViewport = \"desktop\";\n    }\n  }\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    const elements = this.menuElements;\n    elements.forEach((element) => {\n      (element as HTMLZMenuElement).open = false;\n      (element as HTMLZMenuElement).floating = !this.drawerOpen;\n      (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n    });\n  }\n\n  private get title(): string {\n    const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n    if (titleElement === null) {\n      return \"\";\n    }\n\n    return titleElement.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n  }\n\n  private get canShowSearchbar(): boolean {\n    if (!this.enableSearch) {\n      return false;\n    }\n\n    // Always show the searchbar on desktop, even if a searchPageUrl is set\n    if (this.searchPageUrl) {\n      return this.currentViewport === \"desktop\";\n    }\n\n    return true;\n  }\n\n  /**\n   * Whether the header has a hero image, either as a prop or as a slot.\n   */\n  private get hasHero(): boolean {\n    return !!this.hero || this.hostElement.querySelector(\"[slot=hero]\") !== null;\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n  }\n\n  private collectMenuElements(): void {\n    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuLength = menuElements.length;\n    this.setMenuFloatingMode();\n  }\n\n  private enableStuckObserver(): void {\n    if (this.observer) {\n      this.observer.observe(this.container);\n    }\n  }\n\n  private disableStuckMode(): void {\n    this._stuck = false;\n    if (this.observer) {\n      this.observer.unobserve(this.container);\n    }\n  }\n\n  @Watch(\"stuck\")\n  onStuckMode(): void {\n    if (this.stuck) {\n      this.enableStuckObserver();\n    } else {\n      this.disableStuckMode();\n    }\n  }\n\n  private renderSearchLinkButton(): HTMLZButtonElement | null {\n    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === \"desktop\") {\n      return null;\n    }\n\n    return (\n      <z-button\n        class=\"search-page-button\"\n        variant={ButtonVariant.SECONDARY}\n        href={this.searchPageUrl}\n        icon=\"search\"\n        size={ControlSize.X_SMALL}\n      ></z-button>\n    );\n  }\n\n  private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={searchButtonIconOnly}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  componentDidLoad(): void {\n    this.collectMenuElements();\n    this.onStuckMode();\n    this.evaluateViewport();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    return (\n      <Host menu-length={this.menuLength}>\n        {this.hasHero && (\n          <div class=\"hero-container\">\n            <slot name=\"hero\">\n              {this.hero && (\n                <img\n                  alt=\"\"\n                  src={this.hero}\n                />\n              )}\n            </slot>\n          </div>\n        )}\n\n        <div\n          class=\"heading-panel\"\n          ref={(el) => (this.container = el)}\n        >\n          <div class=\"heading-container\">\n            <div class=\"heading-subtitle\">\n              <slot name=\"top-subtitle\"></slot>\n            </div>\n            <div class=\"heading-title\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <slot name=\"title\"></slot>\n\n              {this.renderSearchLinkButton()}\n            </div>\n\n            <div class=\"heading-subtitle\">\n              <slot name=\"subtitle\"></slot>\n            </div>\n          </div>\n\n          {(this.canShowMenu || this.canShowSearchbar) && (\n            <div class=\"menu-container\">\n              {this.canShowMenu && (\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                ></slot>\n              )}\n\n              {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n            </div>\n          )}\n        </div>\n\n        <z-offcanvas\n          variant={OffCanvasVariant.OVERLAY}\n          transitiondirection={TransitionDirection.RIGHT}\n          open={this.drawerOpen}\n          onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        >\n          <button\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\"></z-icon>\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            ></slot>\n          </div>\n        </z-offcanvas>\n\n        {this._stuck && (\n          <div class=\"heading-stuck\">\n            <div class=\"heading-stuck-content\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <div class=\"heading-title\">\n                <slot name=\"stucked-title\">{this.title}</slot>\n              </div>\n\n              {this.renderSearchLinkButton()}\n              {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,203 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ZAppHeader } from "./index";
-describe("Suite test ZAppHeader", () => {
-    it("Test render empty ZAppHeader", async () => {
-        const page = await newSpecPage({
-            components: [ZAppHeader],
-            html: `<z-app-header></z-app-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-app-header menu-length="0" flow="auto">
-        <mock:shadow-root>
-          <div class="heading-panel">
-            <div class="heading-container">
-              <div class="heading-subtitle">
-                <slot name="top-subtitle"></slot>
-              </div>
-              <div class="heading-title">
-                <slot name="title"></slot>
-              </div>
-              <div class="heading-subtitle">
-                <slot name="subtitle"></slot>
-              </div>
-            </div>
-            <div class="menu-container">
-              <slot name="menu"></slot>
-            </div>
-          </div>
-          <z-offcanvas transitiondirection="right" variant="overlay">
-            <button aria-label="Chiudi menu" class="drawer-close" slot="canvasContent" aria-hidden="true" disabled>
-              <z-icon name="close"></z-icon>
-            </button>
-            <div class="drawer-content" slot="canvasContent" aria-hidden="true">
-              <slot name="menu"></slot>
-            </div>
-          </z-offcanvas>
-        </mock:shadow-root>
-      </z-app-header>
-    `);
-    });
-    it("Test render ZAppHeader with title", async () => {
-        const page = await newSpecPage({
-            components: [ZAppHeader],
-            html: `<z-app-header>
-        <h1 slot="title">Titolo di test</h1>
-      </z-app-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-app-header menu-length="0" flow="auto">
-        <mock:shadow-root>
-          <div class="heading-panel">
-            <div class="heading-container">
-              <div class="heading-subtitle">
-                <slot name="top-subtitle"></slot>
-              </div>
-              <div class="heading-title">
-                <slot name="title"></slot>
-              </div>
-              <div class="heading-subtitle">
-                <slot name="subtitle"></slot>
-              </div>
-            </div>
-            <div class="menu-container">
-              <slot name="menu"></slot>
-            </div>
-          </div>
-          <z-offcanvas transitiondirection="right" variant="overlay">
-            <button aria-label="Chiudi menu" class="drawer-close" slot="canvasContent" aria-hidden="true" disabled>
-              <z-icon name="close"></z-icon>
-            </button>
-            <div class="drawer-content" slot="canvasContent" aria-hidden="true">
-              <slot name="menu"></slot>
-            </div>
-          </z-offcanvas>
-        </mock:shadow-root>
-        <h1 slot="title">Titolo di test</h1>
-      </z-app-header>
-    `);
-    });
-    it("Test render ZAppHeader with title and subtitle", async () => {
-        const page = await newSpecPage({
-            components: [ZAppHeader],
-            html: `<z-app-header>
-        <h1 slot="title">Titolo di test</h1>
-        <h2 slot="subtitle">Sottotitolo di test</h2>
-      </z-app-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-app-header menu-length="0" flow="auto">
-        <mock:shadow-root>
-          <div class="heading-panel">
-            <div class="heading-container">
-              <div class="heading-subtitle">
-                <slot name="top-subtitle"></slot>
-              </div>
-              <div class="heading-title">
-                <slot name="title"></slot>
-              </div>
-              <div class="heading-subtitle">
-                <slot name="subtitle"></slot>
-              </div>
-            </div>
-            <div class="menu-container">
-              <slot name="menu"></slot>
-            </div>
-          </div>
-        </div>
-        <z-offcanvas transitiondirection="right" variant="overlay">
-            <button aria-label="Chiudi menu" class="drawer-close" slot="canvasContent" aria-hidden="true" disabled>
-              <z-icon name="close"></z-icon>
-            </button>
-            <div class="drawer-content" slot="canvasContent" aria-hidden="true">
-              <slot name="menu"></slot>
-            </div>
-          </z-offcanvas>
-        </mock:shadow-root>
-        <h1 slot="title">Titolo di test</h1>
-        <h2 slot="subtitle">Sottotitolo di test</h2>
-      </z-app-header>
-    `);
-    });
-    it("Test render ZAppHeader with title and top subtitle", async () => {
-        const page = await newSpecPage({
-            components: [ZAppHeader],
-            html: `<z-app-header>
-        <h2 slot="top-subtitle">Sottotitolo di test</h2>
-        <h1 slot="title">Titolo di test</h1>
-      </z-app-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-app-header menu-length="0" flow="auto">
-        <mock:shadow-root>
-          <div class="heading-panel">
-            <div class="heading-container">
-              <div class="heading-subtitle">
-                <slot name="top-subtitle"></slot>
-              </div>
-              <div class="heading-title">
-                <slot name="title"></slot>
-              </div>
-              <div class="heading-subtitle">
-                <slot name="subtitle"></slot>
-              </div>
-            </div>
-            <div class="menu-container">
-              <slot name="menu"></slot>
-            </div>
-          </div>
-        </div>
-        <z-offcanvas transitiondirection="right" variant="overlay">
-            <button aria-label="Chiudi menu" class="drawer-close" slot="canvasContent" aria-hidden="true" disabled>
-              <z-icon name="close"></z-icon>
-            </button>
-            <div class="drawer-content" slot="canvasContent" aria-hidden="true">
-              <slot name="menu"></slot>
-            </div>
-          </z-offcanvas>
-        </mock:shadow-root>
-        <h2 slot="top-subtitle">Sottotitolo di test</h2>
-        <h1 slot="title">Titolo di test</h1>
-      </z-app-header>
-    `);
-    });
-    it("Test render ZAppHeader with stuck layout", async () => {
-        const page = await newSpecPage({
-            components: [ZAppHeader],
-            html: `<z-app-header stuck>
-        <h1 slot="title">Titolo di test</h1>
-      </z-app-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-app-header menu-length="0" flow="auto" stuck>
-        <mock:shadow-root>
-          <div class="heading-panel">
-            <div class="heading-container">
-              <div class="heading-subtitle">
-                <slot name="top-subtitle"></slot>
-              </div>
-              <div class="heading-title">
-                <slot name="title"></slot>
-              </div>
-              <div class="heading-subtitle">
-                <slot name="subtitle"></slot>
-              </div>
-            </div>
-            <div class="menu-container">
-              <slot name="menu"></slot>
-            </div>
-          </div>
-          <z-offcanvas transitiondirection="right" variant="overlay">
-            <button aria-label="Chiudi menu" class="drawer-close" slot="canvasContent" aria-hidden="true" disabled>
-              <z-icon name="close"></z-icon>
-            </button>
-            <div class="drawer-content" slot="canvasContent" aria-hidden="true">
-              <slot name="menu"></slot>
-            </div>
-          </z-offcanvas>
-        </mock:shadow-root>
-        <h1 slot="title">Titolo di test</h1>
-      </z-app-header>
-    `);
-    });
-});
-//# sourceMappingURL=index.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-app-header/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,+BAA+B;SACtC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;sBAEU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;sBAGU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;sBAGU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;sBAEU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZAppHeader} from \"./index\";\n\ndescribe(\"Suite test ZAppHeader\", () => {\n  it(\"Test render empty ZAppHeader\", async () => {\n    const page = await newSpecPage({\n      components: [ZAppHeader],\n      html: `<z-app-header></z-app-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-app-header menu-length=\"0\" flow=\"auto\">\n        <mock:shadow-root>\n          <div class=\"heading-panel\">\n            <div class=\"heading-container\">\n              <div class=\"heading-subtitle\">\n                <slot name=\"top-subtitle\"></slot>\n              </div>\n              <div class=\"heading-title\">\n                <slot name=\"title\"></slot>\n              </div>\n              <div class=\"heading-subtitle\">\n                <slot name=\"subtitle\"></slot>\n              </div>\n            </div>\n            <div class=\"menu-container\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </div>\n          <z-offcanvas transitiondirection=\"right\" variant=\"overlay\">\n            <button aria-label=\"Chiudi menu\" class=\"drawer-close\" slot=\"canvasContent\" aria-hidden=\"true\" disabled>\n              <z-icon name=\"close\"></z-icon>\n            </button>\n            <div class=\"drawer-content\" slot=\"canvasContent\" aria-hidden=\"true\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </z-offcanvas>\n        </mock:shadow-root>\n      </z-app-header>\n    `);\n  });\n\n  it(\"Test render ZAppHeader with title\", async () => {\n    const page = await newSpecPage({\n      components: [ZAppHeader],\n      html: `<z-app-header>\n        <h1 slot=\"title\">Titolo di test</h1>\n      </z-app-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-app-header menu-length=\"0\" flow=\"auto\">\n        <mock:shadow-root>\n          <div class=\"heading-panel\">\n            <div class=\"heading-container\">\n              <div class=\"heading-subtitle\">\n                <slot name=\"top-subtitle\"></slot>\n              </div>\n              <div class=\"heading-title\">\n                <slot name=\"title\"></slot>\n              </div>\n              <div class=\"heading-subtitle\">\n                <slot name=\"subtitle\"></slot>\n              </div>\n            </div>\n            <div class=\"menu-container\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </div>\n          <z-offcanvas transitiondirection=\"right\" variant=\"overlay\">\n            <button aria-label=\"Chiudi menu\" class=\"drawer-close\" slot=\"canvasContent\" aria-hidden=\"true\" disabled>\n              <z-icon name=\"close\"></z-icon>\n            </button>\n            <div class=\"drawer-content\" slot=\"canvasContent\" aria-hidden=\"true\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </z-offcanvas>\n        </mock:shadow-root>\n        <h1 slot=\"title\">Titolo di test</h1>\n      </z-app-header>\n    `);\n  });\n\n  it(\"Test render ZAppHeader with title and subtitle\", async () => {\n    const page = await newSpecPage({\n      components: [ZAppHeader],\n      html: `<z-app-header>\n        <h1 slot=\"title\">Titolo di test</h1>\n        <h2 slot=\"subtitle\">Sottotitolo di test</h2>\n      </z-app-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-app-header menu-length=\"0\" flow=\"auto\">\n        <mock:shadow-root>\n          <div class=\"heading-panel\">\n            <div class=\"heading-container\">\n              <div class=\"heading-subtitle\">\n                <slot name=\"top-subtitle\"></slot>\n              </div>\n              <div class=\"heading-title\">\n                <slot name=\"title\"></slot>\n              </div>\n              <div class=\"heading-subtitle\">\n                <slot name=\"subtitle\"></slot>\n              </div>\n            </div>\n            <div class=\"menu-container\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </div>\n        </div>\n        <z-offcanvas transitiondirection=\"right\" variant=\"overlay\">\n            <button aria-label=\"Chiudi menu\" class=\"drawer-close\" slot=\"canvasContent\" aria-hidden=\"true\" disabled>\n              <z-icon name=\"close\"></z-icon>\n            </button>\n            <div class=\"drawer-content\" slot=\"canvasContent\" aria-hidden=\"true\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </z-offcanvas>\n        </mock:shadow-root>\n        <h1 slot=\"title\">Titolo di test</h1>\n        <h2 slot=\"subtitle\">Sottotitolo di test</h2>\n      </z-app-header>\n    `);\n  });\n\n  it(\"Test render ZAppHeader with title and top subtitle\", async () => {\n    const page = await newSpecPage({\n      components: [ZAppHeader],\n      html: `<z-app-header>\n        <h2 slot=\"top-subtitle\">Sottotitolo di test</h2>\n        <h1 slot=\"title\">Titolo di test</h1>\n      </z-app-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-app-header menu-length=\"0\" flow=\"auto\">\n        <mock:shadow-root>\n          <div class=\"heading-panel\">\n            <div class=\"heading-container\">\n              <div class=\"heading-subtitle\">\n                <slot name=\"top-subtitle\"></slot>\n              </div>\n              <div class=\"heading-title\">\n                <slot name=\"title\"></slot>\n              </div>\n              <div class=\"heading-subtitle\">\n                <slot name=\"subtitle\"></slot>\n              </div>\n            </div>\n            <div class=\"menu-container\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </div>\n        </div>\n        <z-offcanvas transitiondirection=\"right\" variant=\"overlay\">\n            <button aria-label=\"Chiudi menu\" class=\"drawer-close\" slot=\"canvasContent\" aria-hidden=\"true\" disabled>\n              <z-icon name=\"close\"></z-icon>\n            </button>\n            <div class=\"drawer-content\" slot=\"canvasContent\" aria-hidden=\"true\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </z-offcanvas>\n        </mock:shadow-root>\n        <h2 slot=\"top-subtitle\">Sottotitolo di test</h2>\n        <h1 slot=\"title\">Titolo di test</h1>\n      </z-app-header>\n    `);\n  });\n\n  it(\"Test render ZAppHeader with stuck layout\", async () => {\n    const page = await newSpecPage({\n      components: [ZAppHeader],\n      html: `<z-app-header stuck>\n        <h1 slot=\"title\">Titolo di test</h1>\n      </z-app-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-app-header menu-length=\"0\" flow=\"auto\" stuck>\n        <mock:shadow-root>\n          <div class=\"heading-panel\">\n            <div class=\"heading-container\">\n              <div class=\"heading-subtitle\">\n                <slot name=\"top-subtitle\"></slot>\n              </div>\n              <div class=\"heading-title\">\n                <slot name=\"title\"></slot>\n              </div>\n              <div class=\"heading-subtitle\">\n                <slot name=\"subtitle\"></slot>\n              </div>\n            </div>\n            <div class=\"menu-container\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </div>\n          <z-offcanvas transitiondirection=\"right\" variant=\"overlay\">\n            <button aria-label=\"Chiudi menu\" class=\"drawer-close\" slot=\"canvasContent\" aria-hidden=\"true\" disabled>\n              <z-icon name=\"close\"></z-icon>\n            </button>\n            <div class=\"drawer-content\" slot=\"canvasContent\" aria-hidden=\"true\">\n              <slot name=\"menu\"></slot>\n            </div>\n          </z-offcanvas>\n        </mock:shadow-root>\n        <h1 slot=\"title\">Titolo di test</h1>\n      </z-app-header>\n    `);\n  });\n});\n"]}

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

@@ -1 +0,0 @@
-{"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"]}