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

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

@@ -1,120 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-menu-section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEpG;;;;GAIG;AAMH,MAAM,OAAO,YAAY;;;;;;IAqBf,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACtD,CAAC;IAED,wEAAwE;IAExE,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAClF,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;gBAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;gBAC7D,IAAI,CAAC,UAAU,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAI,CACxE;YACR,IAAI,CAAC,IAAI,IAAI,CACZ,WAAK,KAAK,EAAC,OAAO;gBAChB,YACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop, State, Event, EventEmitter, Element, Listen, Host} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,50 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ZMenuSection } from "./index";
-describe("Suite test ZMenuSection", () => {
-    it("Test render ZMenu with items", async () => {
-        const page = await newSpecPage({
-            components: [ZMenuSection],
-            html: `<z-menu-section>
-        <h3>Menu section 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-section>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-menu-section role="menu">
-        <mock:shadow-root>
-          <button aria-pressed="false" class="label">
-            <slot></slot>
-            <z-icon name="chevron-down"></z-icon>
-          </button>
-        </mock:shadow-root>
-        <h3>Menu section 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-section>`);
-    });
-    it("Test ZMenuSection toggle events", async () => {
-        const page = await newSpecPage({
-            components: [ZMenuSection],
-            html: `<z-menu-section>
-        <div slot="item">item</div>
-      </z-menu-section>`,
-        });
-        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-section/index.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-menu-section/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE;;;;;wBAKY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;sBAYZ,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE;;wBAEY;SACnB,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\";\n\nimport {ZMenuSection} from \"./index\";\n\ndescribe(\"Suite test ZMenuSection\", () => {\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuSection],\n      html: `<z-menu-section>\n        <h3>Menu section 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-section>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu-section role=\"menu\">\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>Menu section 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-section>`);\n  });\n\n  it(\"Test ZMenuSection toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuSection],\n      html: `<z-menu-section>\n        <div slot=\"item\">item</div>\n      </z-menu-section>`,\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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-navigation-tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Listen, Element, State, Watch, Host, Event, EventEmitter} from \"@stencil/core\";\nimport {NavigationTabsSize, NavigationTabsOrientation, NavigationTabsKeyboardEvents} from \"../../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel?: string;\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    tabElement.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        zicon?.setAttribute(\"name\", strokeIcon);\n\n        return;\n      }\n\n      zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/notification/z-info-box/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/notification/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAEtE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;0BAON,IAAI;;IAMT,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK;YACjB,6DAAM,IAAI,EAAC,SAAS,GAAG;YACtB,IAAI,CAAC,UAAU,IAAI,CAClB,cACE,IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon flag */\n  @Prop()\n  isclosable = true;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div id={this.boxid}>\n        <slot name=\"content\" />\n        {this.isclosable && (\n          <z-icon\n            name=\"multiply\"\n            data-action=\"infoBoxClose\"\n            onClick={() => this.emitInfoBoxClose()}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/notification/z-info-box/index.spec.js

@@ -1,71 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ZInfoBox } from "./index";
-describe("Suite test ZInfoBox", () => {
-    it("Test render ZInfoBox vuoto", async () => {
-        const page = await newSpecPage({
-            components: [ZInfoBox],
-            html: `<z-info-box></z-info-box>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-info-box>
-        <mock:shadow-root>
-          <div>
-            <slot name="content"></slot>
-            <z-icon data-action="infoBoxClose" name="multiply"></z-icon>
-          </div>
-        </mock:shadow-root>
-      </z-info-box>
-    `);
-    });
-    it("Test render ZInfoBox con props", async () => {
-        const page = await newSpecPage({
-            components: [ZInfoBox],
-            html: `<z-info-box boxid="box" isclosable="true"></z-info-box>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-info-box boxid="box" isclosable="true">
-        <mock:shadow-root>
-          <div id="box">
-            <slot name="content"></slot>
-            <z-icon data-action="infoBoxClose" name="multiply"></z-icon>
-          </div>
-        </mock:shadow-root>
-      </z-info-box>
-    `);
-    });
-    it("Test render ZInfoBox non closable", async () => {
-        const page = await newSpecPage({
-            components: [ZInfoBox],
-            html: `<z-info-box boxid="box" isclosable="false"></z-info-box>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-info-box boxid="box" isclosable="false">
-        <mock:shadow-root>
-          <div id="box">
-            <slot name="content"></slot>
-          </div>
-        </mock:shadow-root>
-      </z-info-box>
-    `);
-    });
-    it("Test render ZInfoBox con content", async () => {
-        const page = await newSpecPage({
-            components: [ZInfoBox],
-            html: `<z-info-box boxid="box">
-          <span slot="content">info box content</span>
-        </z-info-box>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-info-box boxid="box">
-        <mock:shadow-root>
-          <div id="box">
-            <slot name="content"></slot>
-            <z-icon data-action="infoBoxClose" name="multiply"></z-icon>
-          </div>
-        </mock:shadow-root>
-            <span slot="content">info box content</span>
-      </z-info-box>
-    `);
-    });
-});
-//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/notification/z-info-box/index.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/notification/z-info-box/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yDAAyD;SAChE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,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,QAAQ,CAAC;YACtB,IAAI,EAAE,0DAA0D;SACjE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;sBAEU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZInfoBox} from \"./index\";\n\ndescribe(\"Suite test ZInfoBox\", () => {\n  it(\"Test render ZInfoBox vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZInfoBox],\n      html: `<z-info-box></z-info-box>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-info-box>\n        <mock:shadow-root>\n          <div>\n            <slot name=\"content\"></slot>\n            <z-icon data-action=\"infoBoxClose\" name=\"multiply\"></z-icon>\n          </div>\n        </mock:shadow-root>\n      </z-info-box>\n    `);\n  });\n\n  it(\"Test render ZInfoBox con props\", async () => {\n    const page = await newSpecPage({\n      components: [ZInfoBox],\n      html: `<z-info-box boxid=\"box\" isclosable=\"true\"></z-info-box>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-info-box boxid=\"box\" isclosable=\"true\">\n        <mock:shadow-root>\n          <div id=\"box\">\n            <slot name=\"content\"></slot>\n            <z-icon data-action=\"infoBoxClose\" name=\"multiply\"></z-icon>\n          </div>\n        </mock:shadow-root>\n      </z-info-box>\n    `);\n  });\n\n  it(\"Test render ZInfoBox non closable\", async () => {\n    const page = await newSpecPage({\n      components: [ZInfoBox],\n      html: `<z-info-box boxid=\"box\" isclosable=\"false\"></z-info-box>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-info-box boxid=\"box\" isclosable=\"false\">\n        <mock:shadow-root>\n          <div id=\"box\">\n            <slot name=\"content\"></slot>\n          </div>\n        </mock:shadow-root>\n      </z-info-box>\n    `);\n  });\n\n  it(\"Test render ZInfoBox con content\", async () => {\n    const page = await newSpecPage({\n      components: [ZInfoBox],\n      html: `<z-info-box boxid=\"box\">\n          <span slot=\"content\">info box content</span>\n        </z-info-box>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-info-box boxid=\"box\">\n        <mock:shadow-root>\n          <div id=\"box\">\n            <slot name=\"content\"></slot>\n            <z-icon data-action=\"infoBoxClose\" name=\"multiply\"></z-icon>\n          </div>\n        </mock:shadow-root>\n            <span slot=\"content\">info box content</span>\n      </z-info-box>\n    `);\n  });\n});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/notification/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAC,MAAM,eAAe,CAAC;AAG5E;;;;GAIG;AAMH,MAAM,OAAO,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,eAAe,IAAI,CACvB,cACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,cACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,cACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;gBAEpC,cACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {NotificationType} from \"../../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,84 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ZNotification } from "./index";
-describe("Suite test ZNotification", () => {
-    it("Test render ZNotification with icon, action and close button", async () => {
-        const page = await newSpecPage({
-            components: [ZNotification],
-            html: `<z-notification
-        contenticonname="gear"
-        actiontext="Annulla"
-        type="success"
-        showclose="true"
-      >Testo della notifica</z-notification>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-notification actiontext="Annulla" contenticonname="gear" showclose="true" type="success">
-        <mock:shadow-root>
-          <z-icon
-            class="status-icon"
-            name="gear"
-            width="16"
-            height="16"
-          ></z-icon>
-          <div class="content-container">
-            <div class="content-text"><slot></slot></div>
-            <button class="action-button" type="button">Annulla</button>
-          </div>
-          <button class="close-button" type="button">
-            <z-icon
-              name="multiply-circle"
-              width="16"
-              height="16"
-            />
-          </button>
-        </mock:shadow-root>
-        Testo della notifica
-      </z-notification>
-    `);
-    });
-    it("Test render ZNotification without icon, action and close button", async () => {
-        const page = await newSpecPage({
-            components: [ZNotification],
-            html: `<z-notification type="success">Testo della notifica</z-notification>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-notification type="success">
-        <mock:shadow-root>
-          <div class="content-container">
-            <div class="content-text"><slot></slot></div>
-          </div>
-        </mock:shadow-root>
-        Testo della notifica
-      </z-notification>
-    `);
-    });
-    it("Test render ZNotification with icon, action", async () => {
-        const page = await newSpecPage({
-            components: [ZNotification],
-            html: `<z-notification
-        contenticonname="gear"
-        actiontext="Annulla"
-        type="success"
-        showclose="false"
-      >Testo della notifica</z-notification>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <z-notification actiontext="Annulla" contenticonname="gear" showclose="false" type="success">
-        <mock:shadow-root>
-          <z-icon
-            class="status-icon"
-            name="gear"
-            width="16"
-            height="16"
-          ></z-icon>
-          <div class="content-container">
-            <div class="content-text"><slot></slot></div>
-            <button class="action-button" type="button">Annulla</button>
-          </div>
-        </mock:shadow-root>
-        Testo della notifica
-      </z-notification>
-    `);
-    });
-});
-//# sourceMappingURL=index.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/notification/z-notification/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE;;;;;6CAKiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE;;;;;6CAKiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZNotification} from \"./index\";\n\ndescribe(\"Suite test ZNotification\", () => {\n  it(\"Test render ZNotification with icon, action and close button\", async () => {\n    const page = await newSpecPage({\n      components: [ZNotification],\n      html: `<z-notification\n        contenticonname=\"gear\"\n        actiontext=\"Annulla\"\n        type=\"success\"\n        showclose=\"true\"\n      >Testo della notifica</z-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-notification actiontext=\"Annulla\" contenticonname=\"gear\" showclose=\"true\" type=\"success\">\n        <mock:shadow-root>\n          <z-icon\n            class=\"status-icon\"\n            name=\"gear\"\n            width=\"16\"\n            height=\"16\"\n          ></z-icon>\n          <div class=\"content-container\">\n            <div class=\"content-text\"><slot></slot></div>\n            <button class=\"action-button\" type=\"button\">Annulla</button>\n          </div>\n          <button class=\"close-button\" type=\"button\">\n            <z-icon\n              name=\"multiply-circle\"\n              width=\"16\"\n              height=\"16\"\n            />\n          </button>\n        </mock:shadow-root>\n        Testo della notifica\n      </z-notification>\n    `);\n  });\n\n  it(\"Test render ZNotification without icon, action and close button\", async () => {\n    const page = await newSpecPage({\n      components: [ZNotification],\n      html: `<z-notification type=\"success\">Testo della notifica</z-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-notification type=\"success\">\n        <mock:shadow-root>\n          <div class=\"content-container\">\n            <div class=\"content-text\"><slot></slot></div>\n          </div>\n        </mock:shadow-root>\n        Testo della notifica\n      </z-notification>\n    `);\n  });\n\n  it(\"Test render ZNotification with icon, action\", async () => {\n    const page = await newSpecPage({\n      components: [ZNotification],\n      html: `<z-notification\n        contenticonname=\"gear\"\n        actiontext=\"Annulla\"\n        type=\"success\"\n        showclose=\"false\"\n      >Testo della notifica</z-notification>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-notification actiontext=\"Annulla\" contenticonname=\"gear\" showclose=\"false\" type=\"success\">\n        <mock:shadow-root>\n          <z-icon\n            class=\"status-icon\"\n            name=\"gear\"\n            width=\"16\"\n            height=\"16\"\n          ></z-icon>\n          <div class=\"content-container\">\n            <div class=\"content-text\"><slot></slot></div>\n            <button class=\"action-button\" type=\"button\">Annulla</button>\n          </div>\n        </mock:shadow-root>\n        Testo della notifica\n      </z-notification>\n    `);\n  });\n});\n"]}

package/dist/collection/components/notification/z-notification/test.e2e.js

@@ -1,25 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-it("should render the given text content as accessible text", async () => {
-    const page = await newE2EPage();
-    const notificationTextContent = "Testo della notifica";
-    await page.setContent(`<z-notification>${notificationTextContent}</z-notification>`);
-    const notificationBody = await page.find("z-notification");
-    expect(notificationBody).toEqualText(notificationTextContent);
-});
-it("emits a notificationAction event when the component has an action element and the user clicks on it", async () => {
-    const page = await newE2EPage();
-    await page.setContent('<z-notification actiontext="Azione">Testo della notifica</z-notification>');
-    const notificationActionSpy = await page.spyOnEvent("notificationAction");
-    const actionElement = await page.find("z-notification >>> .action-button");
-    await actionElement.click();
-    expect(notificationActionSpy).toHaveReceivedEvent();
-});
-it("emits a notificationClose event when the component has a close button and the user clicks on it", async () => {
-    const page = await newE2EPage();
-    await page.setContent('<z-notification showclose="true">Testo della notifica</z-notification>');
-    const notificationActionSpy = await page.spyOnEvent("notificationClose");
-    const closeButton = await page.find("z-notification >>> .close-button");
-    await closeButton.click();
-    expect(notificationActionSpy).toHaveReceivedEvent();
-});
-//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/notification/z-notification/test.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/notification/z-notification/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;IACvE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,uBAAuB,GAAG,sBAAsB,CAAC;IACvD,MAAM,IAAI,CAAC,UAAU,CAAC,mBAAmB,uBAAuB,mBAAmB,CAAC,CAAC;IAErF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE3D,MAAM,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;AAChE,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,qGAAqG,EAAE,KAAK,IAAI,EAAE;IACnH,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2EAA2E,CAAC,CAAC;IACnG,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAE1E,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;IAC3E,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;AACtD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iGAAiG,EAAE,KAAK,IAAI,EAAE;IAC/G,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,wEAAwE,CAAC,CAAC;IAChG,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEzE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;IACxE,MAAM,WAAW,CAAC,KAAK,EAAE,CAAC;IAE1B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;AACtD,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"should render the given text content as accessible text\", async () => {\n  const page = await newE2EPage();\n  const notificationTextContent = \"Testo della notifica\";\n  await page.setContent(`<z-notification>${notificationTextContent}</z-notification>`);\n\n  const notificationBody = await page.find(\"z-notification\");\n\n  expect(notificationBody).toEqualText(notificationTextContent);\n});\n\nit(\"emits a notificationAction event when the component has an action element and the user clicks on it\", async () => {\n  const page = await newE2EPage();\n  await page.setContent('<z-notification actiontext=\"Azione\">Testo della notifica</z-notification>');\n  const notificationActionSpy = await page.spyOnEvent(\"notificationAction\");\n\n  const actionElement = await page.find(\"z-notification >>> .action-button\");\n  await actionElement.click();\n\n  expect(notificationActionSpy).toHaveReceivedEvent();\n});\n\nit(\"emits a notificationClose event when the component has a close button and the user clicks on it\", async () => {\n  const page = await newE2EPage();\n  await page.setContent('<z-notification showclose=\"true\">Testo della notifica</z-notification>');\n  const notificationActionSpy = await page.spyOnEvent(\"notificationClose\");\n\n  const closeButton = await page.find(\"z-notification >>> .close-button\");\n  await closeButton.click();\n\n  expect(notificationActionSpy).toHaveReceivedEvent();\n});\n"]}

package/dist/collection/components/notification/z-toast-notification/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/notification/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} from \"../../../beans\";\nimport {mobileBreakpoint} from \"../../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"]}