@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { handleKeyboardSubmit } from "../../../../utils/utils";
 import Hammer from "hammerjs";
+import { handleKeyboardSubmit } from "../../../../utils/utils";
 /**
  * @slot  - pocket header content
  */
@@ -23,7 +23,7 @@ export class ZPocketHeader {
         mc.on("pandown", () => this.emitPocketHeaderPan("down"));
     }
     render() {
-        return (h("header", { key: 'dbf411ce43b511c02c768d79c20eb95991b3555d', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, h("slot", { key: '30b0c595f0c4e503dbe8e144c3805be2a8d4aed5' })));
+        return (h("header", { key: 'e7f1ed78dd4b33c701d5bd0f648c9401d8a38313', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, h("slot", { key: '1d8bb012ac6dcdf3337d0c70df59b3b098e9de56' })));
     }
     static get is() { return "z-pocket-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/pocket/z-pocket-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AACtE,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAC7D,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B;;GAEG;AAMH,MAAM,OAAO,aAAa;IAWhB,qBAAqB;QAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IACnD,CAAC;IAMO,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAC,CAAC,CAAC;IAC5D,CAAC;IAED;;QACE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpE;IAED,gBAAgB;QACd,uBAAuB;QACvB,MAAM,EAAE,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAC,CAAC,CAAC;QAC1D,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAC3C,UAAU,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,qBAAqB,CAAC,EACvF,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;YAEjD,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\nimport Hammer from \"hammerjs\";\n\n/**\n * @slot  - pocket header content\n */\n@Component({\n  tag: \"z-pocket-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketHeader {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  private swipeWrap: HTMLElement;\n\n  /** Emitted on pocket header click */\n  @Event()\n  pocketHeaderClick: EventEmitter;\n\n  private emitPocketHeaderClick(): void {\n    this.pocketHeaderClick.emit({id: this.pocketid});\n  }\n\n  /** Emitted on pocket header pan */\n  @Event()\n  pocketHeaderPan: EventEmitter;\n\n  private emitPocketHeaderPan(direction: string): void {\n    this.pocketHeaderPan.emit({id: this.pocketid, direction});\n  }\n\n  constructor() {\n    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);\n  }\n\n  componentDidLoad(): void {\n    // INFO: swipe handling\n    const mc = new Hammer(this.swipeWrap);\n    mc.get(\"pan\").set({direction: Hammer.DIRECTION_VERTICAL});\n    mc.on(\"panup\", () => this.emitPocketHeaderPan(\"up\"));\n    mc.on(\"pandown\", () => this.emitPocketHeaderPan(\"down\"));\n  }\n\n  render(): HTMLElement {\n    return (\n      <header\n        role=\"button\"\n        tabindex={0}\n        onClick={() => this.emitPocketHeaderClick()}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick)}\n        ref={(el) => (this.swipeWrap = el as HTMLElement)}\n      >\n        <slot />\n      </header>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/snowflakes/myz/pocket/z-pocket-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACtE,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAC,oBAAoB,EAAC,MAAM,yBAAyB,CAAC;AAE7D;;GAEG;AAMH,MAAM,OAAO,aAAa;IAWhB,qBAAqB;QAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IACnD,CAAC;IAMO,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAC,CAAC,CAAC;IAC5D,CAAC;IAED;;QACE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpE;IAED,gBAAgB;QACd,uBAAuB;QACvB,MAAM,EAAE,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAC,CAAC,CAAC;QAC1D,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAC3C,UAAU,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,qBAAqB,CAAC,EACvF,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;YAEjD,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport Hammer from \"hammerjs\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - pocket header content\n */\n@Component({\n  tag: \"z-pocket-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketHeader {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  private swipeWrap: HTMLElement;\n\n  /** Emitted on pocket header click */\n  @Event()\n  pocketHeaderClick: EventEmitter;\n\n  private emitPocketHeaderClick(): void {\n    this.pocketHeaderClick.emit({id: this.pocketid});\n  }\n\n  /** Emitted on pocket header pan */\n  @Event()\n  pocketHeaderPan: EventEmitter;\n\n  private emitPocketHeaderPan(direction: string): void {\n    this.pocketHeaderPan.emit({id: this.pocketid, direction});\n  }\n\n  constructor() {\n    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);\n  }\n\n  componentDidLoad(): void {\n    // INFO: swipe handling\n    const mc = new Hammer(this.swipeWrap);\n    mc.get(\"pan\").set({direction: Hammer.DIRECTION_VERTICAL});\n    mc.on(\"panup\", () => this.emitPocketHeaderPan(\"up\"));\n    mc.on(\"pandown\", () => this.emitPocketHeaderPan(\"down\"));\n  }\n\n  render(): HTMLElement {\n    return (\n      <header\n        role=\"button\"\n        tabindex={0}\n        onClick={() => this.emitPocketHeaderClick()}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick)}\n        ref={(el) => (this.swipeWrap = el as HTMLElement)}\n      >\n        <slot />\n      </header>\n    );\n  }\n}\n"]}

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/pocket/z-pocket-header/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,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,uDAAuD;SAC9D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,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,aAAa,CAAC;YAC3B,IAAI,EAAE,0DAA0D;SACjE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZPocketHeader} from \"./index\";\n\ndescribe(\"Suite test ZPocketHeader\", () => {\n  it(\"Test render ZPocketHeader\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketHeader],\n      html: `<z-pocket-header></z-pocket-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-header>\n        <mock:shadow-root>\n          <header role=\"button\" tabindex=\"0\" style=\"undefined: rgba(0,0,0,0);\">\n            <slot></slot>\n          </header>\n        </mock:shadow-root>\n      </z-pocket-header>\n    `);\n  });\n\n  it(\"Test render ZPocketHeader - with props\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketHeader],\n      html: `<z-pocket-header pocketid=\"pocket\"></z-pocket-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-header pocketid=\"pocket\">\n        <mock:shadow-root>\n          <header role=\"button\" tabindex=\"0\" style=\"undefined: rgba(0,0,0,0);\">\n            <slot></slot>\n          </header>\n        </mock:shadow-root>\n      </z-pocket-header>\n    `);\n  });\n\n  it(\"Test render ZPocketHeader - with content\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketHeader],\n      html: `<z-pocket-header>pocket header content</z-pocket-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-header>\n        <mock:shadow-root>\n          <header role=\"button\" tabindex=\"0\" style=\"undefined: rgba(0,0,0,0);\">\n            <slot></slot>\n          </header>\n        </mock:shadow-root>\n        pocket header content\n      </z-pocket-header>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../../src/snowflakes/myz/pocket/z-pocket-header/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,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,uDAAuD;SAC9D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,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,aAAa,CAAC;YAC3B,IAAI,EAAE,0DAA0D;SACjE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZPocketHeader} from \"./index\";\n\ndescribe(\"Suite test ZPocketHeader\", () => {\n  it(\"Test render ZPocketHeader\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketHeader],\n      html: `<z-pocket-header></z-pocket-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-header>\n        <mock:shadow-root>\n          <header role=\"button\" tabindex=\"0\" style=\"undefined: rgba(0,0,0,0);\">\n            <slot></slot>\n          </header>\n        </mock:shadow-root>\n      </z-pocket-header>\n    `);\n  });\n\n  it(\"Test render ZPocketHeader - with props\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketHeader],\n      html: `<z-pocket-header pocketid=\"pocket\"></z-pocket-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-header pocketid=\"pocket\">\n        <mock:shadow-root>\n          <header role=\"button\" tabindex=\"0\" style=\"undefined: rgba(0,0,0,0);\">\n            <slot></slot>\n          </header>\n        </mock:shadow-root>\n      </z-pocket-header>\n    `);\n  });\n\n  it(\"Test render ZPocketHeader - with content\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketHeader],\n      html: `<z-pocket-header>pocket header content</z-pocket-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-header>\n        <mock:shadow-root>\n          <header role=\"button\" tabindex=\"0\" style=\"undefined: rgba(0,0,0,0);\">\n            <slot></slot>\n          </header>\n        </mock:shadow-root>\n        pocket header content\n      </z-pocket-header>\n    `);\n  });\n});\n"]}

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.stories.js

@@ -0,0 +1,15 @@
+import {html} from "lit";
+import "./index";
+
+export default {
+  title: "Snowflakes/Pocket/ZPocketHeader",
+  component: "z-pocket-header",
+
+  args: {
+    pocketid: "my-pocket",
+  },
+};
+
+export const ZPocketHeader = {
+  render: (args) => html`<z-pocket-header pocketid="${args.pocketid}"> ZPocketHeader Content </z-pocket-header>`,
+};

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/pocket/z-pocket-header/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAQjD,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,sDAAsD;IACtD,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,GAAG,EAAE;QACpD,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,sFAAsF;IACtF,MAAM,IAAI,GAAG,mBAAmB,CAAC;IACjC,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,EAAE,EAAE;QAClC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE;YACnC,MAAM,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,IAAI,CAAC,UAAU,CAAC,qCAAqC,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAE7D,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndeclare global {\n  interface Window {\n    onPocketHeaderClick: () => void;\n  }\n}\n\nit(\"Test ZPocketHeader should emit pocketHeaderClick event\", async () => {\n  const page = await newE2EPage();\n\n  // Define a window.onCustomEvent function on the page.\n  let clickCounter = 0;\n  await page.exposeFunction(\"onPocketHeaderClick\", () => {\n    clickCounter++;\n  });\n\n  // Attach an event listener to page to capture a custom event on page load/navigation.\n  const type = \"pocketHeaderClick\";\n  page.evaluateOnNewDocument((type) => {\n    document.addEventListener(type, () => {\n      window.onPocketHeaderClick();\n    });\n  }, type);\n\n  await page.setContent(`<z-pocket-header></z-pocket-header>`);\n  const header = await page.find(\"z-pocket-header >>> header\");\n\n  expect(clickCounter).toEqual(0);\n\n  await header.click();\n  await page.waitForChanges();\n  expect(clickCounter).toEqual(1);\n\n  await header.click();\n  await page.waitForChanges();\n  expect(clickCounter).toEqual(2);\n});\n"]}
+{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../../../src/snowflakes/myz/pocket/z-pocket-header/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAQjD,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,sDAAsD;IACtD,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,GAAG,EAAE;QACpD,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,sFAAsF;IACtF,MAAM,IAAI,GAAG,mBAAmB,CAAC;IACjC,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,EAAE,EAAE;QAClC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE;YACnC,MAAM,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,IAAI,CAAC,UAAU,CAAC,qCAAqC,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAE7D,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndeclare global {\n  interface Window {\n    onPocketHeaderClick: () => void;\n  }\n}\n\nit(\"Test ZPocketHeader should emit pocketHeaderClick event\", async () => {\n  const page = await newE2EPage();\n\n  // Define a window.onCustomEvent function on the page.\n  let clickCounter = 0;\n  await page.exposeFunction(\"onPocketHeaderClick\", () => {\n    clickCounter++;\n  });\n\n  // Attach an event listener to page to capture a custom event on page load/navigation.\n  const type = \"pocketHeaderClick\";\n  page.evaluateOnNewDocument((type) => {\n    document.addEventListener(type, () => {\n      window.onPocketHeaderClick();\n    });\n  }, type);\n\n  await page.setContent(`<z-pocket-header></z-pocket-header>`);\n  const header = await page.find(\"z-pocket-header >>> header\");\n\n  expect(clickCounter).toEqual(0);\n\n  await header.click();\n  await page.waitForChanges();\n  expect(clickCounter).toEqual(1);\n\n  await header.click();\n  await page.waitForChanges();\n  expect(clickCounter).toEqual(2);\n});\n"]}

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZPocketMessage {
     render() {
-        return (h("div", { key: '77c4ac87fc391b13dea88c69e71165692075170e' }, h("z-icon", { key: '12387df9bfe2fb8fa3cc0e5cfc2f1515e8ddf322', name: "exclamation-circle" }), h("div", { key: '4ae85314b4c54d9de77f5cc2e789fcfa2516cfac', class: "content" }, h("slot", { key: '7dcf450d21455d6796faa2cfb1222aab546a94d6' })), h("div", { key: 'a51ae4748bb1c29223d35fb10633e51fc17506ec', class: "cta-wrapper" }, h("slot", { key: '2641720771473f5ce8cd207731273f82810dc428', name: "cta" }))));
+        return (h("div", { key: '94fdc25ba4ed0c5f5e84c009b28349a659a35e7d' }, h("z-icon", { key: 'dbfe2f3bde1476afa7b852e3e53f1150477e9992', name: "exclamation-circle" }), h("div", { key: '7391e3e79397acaf1d8ef706549403f33ff4e649', class: "content" }, h("slot", { key: '7a54d609a2d40de9df327b3a73bc9a9e01eddc27' })), h("div", { key: 'dd97a4204d0ab7668b3ef6847b18ae578bb4aeea', class: "cta-wrapper" }, h("slot", { key: '7bdc0e8253113f03976d151baefaf7b8bcbf777f', name: "cta" }))));
     }
     static get is() { return "z-pocket-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/pocket/z-pocket-message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3C;;;GAGG;AAMH,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL;YACE,+DAAQ,IAAI,EAAC,oBAAoB,GAAG;YACpC,4DAAK,KAAK,EAAC,SAAS;gBAClB,8DAAQ,CACJ;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot  - message body\n * @slot cta - message CTAs\n */\n@Component({\n  tag: \"z-pocket-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketMessage {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-icon name=\"exclamation-circle\" />\n        <div class=\"content\">\n          <slot />\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot name=\"cta\" />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/snowflakes/myz/pocket/z-pocket-message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3C;;;GAGG;AAMH,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL;YACE,+DAAQ,IAAI,EAAC,oBAAoB,GAAG;YACpC,4DAAK,KAAK,EAAC,SAAS;gBAClB,8DAAQ,CACJ;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot  - message body\n * @slot cta - message CTAs\n */\n@Component({\n  tag: \"z-pocket-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketMessage {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-icon name=\"exclamation-circle\" />\n        <div class=\"content\">\n          <slot />\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot name=\"cta\" />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/pocket/z-pocket-message/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAEvC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,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,cAAc,CAAC;YAC5B,IAAI,EAAE;;;;0BAIc;SACrB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;KAiB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZPocketMessage} from \"./index\";\n\ndescribe(\"Suite test ZMessage\", () => {\n  it(\"Test render ZMessage\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketMessage],\n      html: `<z-pocket-message></z-pocket-message>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-message>\n        <mock:shadow-root>\n          <div>\n            <z-icon name=\"exclamation-circle\"></z-icon>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n            <div class=\"cta-wrapper\">\n              <slot name=\"cta\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-pocket-message>\n    `);\n  });\n\n  it(\"Test render ZMessage - with content\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketMessage],\n      html: `<z-pocket-message>message content</z-pocket-message>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-message>\n        <mock:shadow-root>\n          <div>\n            <z-icon name=\"exclamation-circle\"></z-icon>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n            <div class=\"cta-wrapper\">\n              <slot name=\"cta\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        message content\n      </z-pocket-message>\n    `);\n  });\n\n  it(\"Test render ZMessage - with content and cta\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketMessage],\n      html: `<z-pocket-message>\n        message content\n        <z-button slot=\"cta\">cta 1</z-button>\n        <z-button slot=\"cta\">cta 2</z-button>\n      </z-pocket-message>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-message>\n        <mock:shadow-root>\n          <div>\n            <z-icon name=\"exclamation-circle\"></z-icon>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n            <div class=\"cta-wrapper\">\n              <slot name=\"cta\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        message content\n        <z-button slot=\"cta\">cta 1</z-button>\n        <z-button slot=\"cta\">cta 2</z-button>\n      </z-pocket-message>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../../src/snowflakes/myz/pocket/z-pocket-message/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAEvC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,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,cAAc,CAAC;YAC5B,IAAI,EAAE;;;;0BAIc;SACrB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;KAiB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZPocketMessage} from \"./index\";\n\ndescribe(\"Suite test ZMessage\", () => {\n  it(\"Test render ZMessage\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketMessage],\n      html: `<z-pocket-message></z-pocket-message>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-message>\n        <mock:shadow-root>\n          <div>\n            <z-icon name=\"exclamation-circle\"></z-icon>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n            <div class=\"cta-wrapper\">\n              <slot name=\"cta\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-pocket-message>\n    `);\n  });\n\n  it(\"Test render ZMessage - with content\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketMessage],\n      html: `<z-pocket-message>message content</z-pocket-message>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-message>\n        <mock:shadow-root>\n          <div>\n            <z-icon name=\"exclamation-circle\"></z-icon>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n            <div class=\"cta-wrapper\">\n              <slot name=\"cta\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        message content\n      </z-pocket-message>\n    `);\n  });\n\n  it(\"Test render ZMessage - with content and cta\", async () => {\n    const page = await newSpecPage({\n      components: [ZPocketMessage],\n      html: `<z-pocket-message>\n        message content\n        <z-button slot=\"cta\">cta 1</z-button>\n        <z-button slot=\"cta\">cta 2</z-button>\n      </z-pocket-message>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-pocket-message>\n        <mock:shadow-root>\n          <div>\n            <z-icon name=\"exclamation-circle\"></z-icon>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n            <div class=\"cta-wrapper\">\n              <slot name=\"cta\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        message content\n        <z-button slot=\"cta\">cta 1</z-button>\n        <z-button slot=\"cta\">cta 2</z-button>\n      </z-pocket-message>\n    `);\n  });\n});\n"]}

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.stories.js

@@ -0,0 +1,36 @@
+import {html} from "lit";
+import "../../../../components/z-button/index";
+import "./index";
+
+export default {
+  title: "Snowflakes/Pocket/ZPocketMessage",
+  component: "z-message",
+};
+
+export const ZPocketMessage = {
+  render: () =>
+    html`<z-pocket-message>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </z-pocket-message>`,
+};
+
+export const ZPocketMessageCta = {
+  render: () =>
+    html`<z-pocket-message>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+      <z-button
+        variant="tertiary"
+        slot="cta"
+        >First slotted CTA</z-button
+      >
+      <z-button
+        variant="tertiary"
+        slot="cta"
+        >Second slotted CTA</z-button
+      >
+    </z-pocket-message>`,
+};

package/dist/collection/snowflakes/myz/z-alert/index.js

@@ -7,7 +7,7 @@ export class ZAlert {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '613583f9f9d6686e8c1fce89174dc7b6051623e3', class: this.type }, h("slot", { key: 'fd1884ab9eddfb1da4a0b7d952a48870eade1de7' })));
+        return (h("div", { key: 'a04290b826aa50ecac798ad9126d93ee1d7e883e', class: this.type }, h("slot", { key: 'bc0f26d27fe3a68484f3079f11fb1c767fe255c4' })));
     }
     static get is() { return "z-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAGjD;;GAEG;AAOH,MAAM,OAAO,MAAM;;;;IAKjB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACnB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../beans/index\";\n\n/**\n * @slot - alert content\n */\n\n@Component({\n  tag: \"z-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAlert {\n  /** alert variant type */\n  @Prop()\n  type: AlertType;\n\n  render(): HTMLDivElement {\n    return (\n      <div class={this.type}>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAE/C;;GAEG;AAOH,MAAM,OAAO,MAAM;;;;IAKjB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACnB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../beans/index\";\n\n/**\n * @slot - alert content\n */\n\n@Component({\n  tag: \"z-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAlert {\n  /** alert variant type */\n  @Prop()\n  type: AlertType;\n\n  render(): HTMLDivElement {\n    return (\n      <div class={this.type}>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/snowflakes/myz/z-alert/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-alert/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,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;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZAlert} from \"./index\";\n\ndescribe(\"Suite test ZAlert\", () => {\n  it(\"Test render ZAlert vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZAlert],\n      html: `<z-alert></z-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-alert>\n      <mock:shadow-root>\n        <div>\n          <slot></slot>\n        </div>\n      </mock:shadow-root>\n    </z-alert>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-alert/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,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;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZAlert} from \"./index\";\n\ndescribe(\"Suite test ZAlert\", () => {\n  it(\"Test render ZAlert vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZAlert],\n      html: `<z-alert></z-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-alert>\n      <mock:shadow-root>\n        <div>\n          <slot></slot>\n        </div>\n      </mock:shadow-root>\n    </z-alert>\n    `);\n  });\n});\n"]}

package/dist/collection/snowflakes/myz/z-alert/index.stories.js

@@ -0,0 +1,30 @@
+import {html} from "lit";
+import "./index";
+
+export default {
+  title: "Snowflakes/ZAlert",
+  component: "z-alert",
+
+  argTypes: {
+    type: {
+      control: {
+        type: "select",
+      },
+
+      options: ["success", "warning", "error"],
+    },
+  },
+
+  args: {
+    type: "success",
+  },
+};
+
+export const ZAlert = {
+  render: (args) => html`
+    <z-alert type="${args.type}">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+    </z-alert>
+  `,
+};

package/dist/collection/snowflakes/myz/z-otp/index.js

@@ -14,7 +14,7 @@ export class ZOtp {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: 'd43a7825cc988d029a8f3907a2d6b4241ffe649e', class: "otp-container" }, h("div", { key: 'e70cd5ac9baa4264995fbb529e86759a6fb2a239', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '9e28959418f6f1b382f16836935e12b3acddfa8f', class: "otp-container" }, h("div", { key: '9348bd6807e797441789a465ebdae3a03d1a7534', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -25,7 +25,7 @@ export class ZOtp {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: 'f0b2b27c8936059f3aa0d9ca4d207a4b61297e2d', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '87ee18c72daec6c0c903aa91e5a717c4d5a729b5', message: this.message, status: this.status })));
     }
     static get is() { return "z-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-otp/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-otp/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAC,MAAM,eAAe,CAAC;AACtE,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAO3C,MAAM,OAAO,IAAI;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,aACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE,CAAC;wBACnB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC5B,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC5B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE,CAAC;wBACnB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACtD,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;oBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC1C,CAAC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE;YACN,wEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Event, EventEmitter, Prop} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-otp/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACtE,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAO3C,MAAM,OAAO,IAAI;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,aACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE,CAAC;wBACnB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC5B,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC5B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE,CAAC;wBACnB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACtD,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;oBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC1C,CAAC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE;YACN,wEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/snowflakes/myz/z-otp/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-otp/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAE7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iBAAiB;SACxB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,8BAA8B;SACrC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,yDAAyD;SAChE,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 {ZOtp} from \"./index\";\n\ndescribe(\"Suite test ZOtp\", () => {\n  it(\"Test render ZOtp senza prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZOtp],\n      html: `<z-otp></z-otp>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-otp>\n        <mock:shadow-root>\n          <div class='otp-container'>\n            <div class=\"digits-container\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n            </div>\n            <z-input-message></z-input-message>\n          </div>\n        </mock:shadow-root>\n      </z-otp>\n    `);\n  });\n\n  it(\"Test render ZOtp con prop inputNum\", async () => {\n    const page = await newSpecPage({\n      components: [ZOtp],\n      html: `<z-otp inputNum='3'></z-otp>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-otp inputNum='3'>\n        <mock:shadow-root>\n          <div class='otp-container'>\n            <div class=\"digits-container\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n            </div>\n            <z-input-message></z-input-message>\n          </div>\n        </mock:shadow-root>\n      </z-otp>\n    `);\n  });\n\n  it(\"Test render ZOtp con messaggio errore\", async () => {\n    const page = await newSpecPage({\n      components: [ZOtp],\n      html: `<z-otp status='error' message='Otp non valido'></z-otp>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-otp status='error' message='Otp non valido'>\n        <mock:shadow-root>\n          <div class='otp-container'>\n            <div class=\"digits-container\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n            </div>\n            <z-input-message status='error' message='Otp non valido'></z-input-message>\n          </div>\n        </mock:shadow-root>\n      </z-otp>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-otp/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAE7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iBAAiB;SACxB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,8BAA8B;SACrC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,yDAAyD;SAChE,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 {ZOtp} from \"./index\";\n\ndescribe(\"Suite test ZOtp\", () => {\n  it(\"Test render ZOtp senza prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZOtp],\n      html: `<z-otp></z-otp>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-otp>\n        <mock:shadow-root>\n          <div class='otp-container'>\n            <div class=\"digits-container\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n            </div>\n            <z-input-message></z-input-message>\n          </div>\n        </mock:shadow-root>\n      </z-otp>\n    `);\n  });\n\n  it(\"Test render ZOtp con prop inputNum\", async () => {\n    const page = await newSpecPage({\n      components: [ZOtp],\n      html: `<z-otp inputNum='3'></z-otp>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-otp inputNum='3'>\n        <mock:shadow-root>\n          <div class='otp-container'>\n            <div class=\"digits-container\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n            </div>\n            <z-input-message></z-input-message>\n          </div>\n        </mock:shadow-root>\n      </z-otp>\n    `);\n  });\n\n  it(\"Test render ZOtp con messaggio errore\", async () => {\n    const page = await newSpecPage({\n      components: [ZOtp],\n      html: `<z-otp status='error' message='Otp non valido'></z-otp>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-otp status='error' message='Otp non valido'>\n        <mock:shadow-root>\n          <div class='otp-container'>\n            <div class=\"digits-container\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n              <input class=\"error\" type=\"text\" autocomplete=\"off\" minlength=\"1\" maxlength=\"1\">\n            </div>\n            <z-input-message status='error' message='Otp non valido'></z-input-message>\n          </div>\n        </mock:shadow-root>\n      </z-otp>\n    `);\n  });\n});\n"]}

package/dist/collection/snowflakes/myz/z-otp/index.stories.js

@@ -0,0 +1,32 @@
+import {html} from "lit";
+import "./index";
+
+export default {
+  title: "Snowflakes/ZOtp",
+  component: "z-otp",
+
+  argTypes: {
+    status: {
+      control: {
+        type: "select",
+      },
+
+      options: ["", "error"],
+    },
+  },
+
+  args: {
+    inputNum: 6,
+    status: "",
+    message: "",
+  },
+};
+
+export const ZOtp = {
+  render: (args) =>
+    html`<z-otp
+      .inputNum=${args.inputNum}
+      .status=${args.status}
+      .message=${args.message}
+    ></z-otp>`,
+};

package/dist/collection/snowflakes/myz/z-otp/test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-otp/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAQjD,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,sDAAsD;IACtD,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,MAAM,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;QAC7C,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,sFAAsF;IACtF,MAAM,IAAI,GAAG,WAAW,CAAC;IACzB,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,EAAE,EAAE;QAClC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAc,EAAE,EAAE;YACjD,MAAM,CAAC,WAAW,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAC,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAErD,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAE/B,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndeclare global {\n  interface Window {\n    onOtpChange: (e) => void;\n  }\n}\n\nit(\"Test ZOtp should emit inputChange event\", async () => {\n  const page = await newE2EPage();\n\n  // Define a window.onCustomEvent function on the page.\n  let inputValue = \"\";\n  await page.exposeFunction(\"onOtpChange\", (e) => {\n    inputValue = e.detail.value;\n  });\n\n  // Attach an event listener to page to capture a custom event on page load/navigation.\n  const type = \"otpChange\";\n  page.evaluateOnNewDocument((type) => {\n    document.addEventListener(type, (e: CustomEvent) => {\n      window.onOtpChange({type, detail: e.detail});\n    });\n  }, type);\n\n  await page.setContent(`<z-otp></z-otp>`);\n  const input = await page.find(\"z-otp >>> div input\");\n\n  expect(inputValue).toEqual(\"\");\n\n  await input.press(\"6\");\n  await page.waitForChanges();\n  expect(inputValue).toEqual(\"6\");\n});\n"]}
+{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-otp/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAQjD,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,sDAAsD;IACtD,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,MAAM,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;QAC7C,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,sFAAsF;IACtF,MAAM,IAAI,GAAG,WAAW,CAAC;IACzB,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,EAAE,EAAE;QAClC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAc,EAAE,EAAE;YACjD,MAAM,CAAC,WAAW,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAC,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAErD,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAE/B,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndeclare global {\n  interface Window {\n    onOtpChange: (e) => void;\n  }\n}\n\nit(\"Test ZOtp should emit inputChange event\", async () => {\n  const page = await newE2EPage();\n\n  // Define a window.onCustomEvent function on the page.\n  let inputValue = \"\";\n  await page.exposeFunction(\"onOtpChange\", (e) => {\n    inputValue = e.detail.value;\n  });\n\n  // Attach an event listener to page to capture a custom event on page load/navigation.\n  const type = \"otpChange\";\n  page.evaluateOnNewDocument((type) => {\n    document.addEventListener(type, (e: CustomEvent) => {\n      window.onOtpChange({type, detail: e.detail});\n    });\n  }, type);\n\n  await page.setContent(`<z-otp></z-otp>`);\n  const input = await page.find(\"z-otp >>> div input\");\n\n  expect(inputValue).toEqual(\"\");\n\n  await input.press(\"6\");\n  await page.waitForChanges();\n  expect(inputValue).toEqual(\"6\");\n});\n"]}

package/dist/collection/snowflakes/myz/z-slideshow/index.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { Device } from "../../../beans";
-import { getDevice, handleKeyboardSubmit, convertJson } from "../../../utils/utils";
+import { convertJson, getDevice, handleKeyboardSubmit } from "../../../utils/utils";
 /**
  * Check if data is an array of strings.
  * @param {unknown} data Data to check

package/dist/collection/snowflakes/myz/z-slideshow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-slideshow/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, State, Element, Watch} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {getDevice, handleKeyboardSubmit, convertJson} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          !disabled && this.setCurrentSlide(nextSlide);\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-slideshow/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          !disabled && this.setCurrentSlide(nextSlide);\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/snowflakes/myz/z-slideshow/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/snowflakes/myz/z-slideshow/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSlideshow} from \"./index\";\n\ndescribe(\"Suite test ZSlideshow\", () => {\n  it(\"Test render ZSlideshow with data empty\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow></z-slideshow>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-slideshow>\n        <mock:shadow-root><div></div></mock:shadow-root>\n      </z-slideshow>\n    `);\n  });\n\n  it(\"Test render ZSlideshow with data set\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow data='[\"https://link1.png\", \"https://link2.png\" ,\"https://link3.png\"]'></z-slideshow>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n       <mock:shadow-root>\n         <div>\n           <main>\n             <z-icon class=\"disabled left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n               <div class=\"false slide\" id=\"slide0\">\n                 <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"hide slide\" id=\"slide1\">\n                 <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"hide slide\" id=\"slide2\">\n                 <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n               </div>\n             </div>\n             <z-icon class=\"false right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n           </main>\n           <footer>\n             <div class=\"footer-left\">\n               <slot name=\"footer-left\"></slot>\n             </div>\n             <div class=\"footer-center\">\n               <div class=\"bullet-container\">\n                 <a class=\"bullet selected\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n               </div>\n             </div>\n             <div class=\"footer-right\">\n               <slot name=\"footer-right\"></slot>\n             </div>\n           </footer>\n         </div>\n    `);\n  });\n\n  it(\"Test render ZSlideshow with data set and click on the last bullet\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow data='[\"https://link1.png\", \"https://link2.png\" ,\"https://link3.png\"]'></z-slideshow>`,\n    });\n\n    page.rootInstance.currentSlide = 2;\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n    <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n       <mock:shadow-root>\n         <div>\n           <main>\n             <z-icon class=\"false left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n               <div class=\"hide slide\" id=\"slide0\">\n                 <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"hide slide\" id=\"slide1\">\n                 <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"false slide\" id=\"slide2\">\n                 <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n               </div>\n             </div>\n             <z-icon class=\"disabled right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n           </main>\n           <footer>\n             <div class=\"footer-left\">\n               <slot name=\"footer-left\"></slot>\n             </div>\n             <div class=\"footer-center\">\n               <div class=\"bullet-container\">\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet selected\" role=\"button\" tabindex=\"0\"></a>\n               </div>\n             </div>\n             <div class=\"footer-right\">\n               <slot name=\"footer-right\"></slot>\n             </div>\n           </footer>\n         </div>\n    `);\n  });\n\n  it(\"Test render ZSlideshow with data set and click on scroll right and left\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow data='[\"https://link1.png\", \"https://link2.png\" ,\"https://link3.png\"]'></z-slideshow>`,\n    });\n\n    const scrollRight = page.root.shadowRoot.querySelector(\"z-icon.right\") as HTMLElement;\n    const scrollLeft = page.root.shadowRoot.querySelector(\"z-icon.left\") as HTMLElement;\n    let lengthSlide = 3;\n\n    while (lengthSlide > 0) {\n      expect(page.root).toEqualHtml(`\n      <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n         <mock:shadow-root>\n           <div>\n             <main>\n               <z-icon class=\"${\n                 lengthSlide === 3 ? \"disabled\" : \"false\"\n               } left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n               <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n                 <div class=\"${lengthSlide === 3 ? \"false\" : \"hide\"} slide\" id=\"slide0\">\n                   <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 2 ? \"false\" : \"hide\"} slide\" id=\"slide1\">\n                   <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 1 ? \"false\" : \"hide\"} slide\" id=\"slide2\">\n                   <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n                 </div>\n               </div>\n               <z-icon class=\"${\n                 lengthSlide === 1 ? \"disabled\" : \"false\"\n               } right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             </main>\n             <footer>\n               <div class=\"footer-left\">\n                 <slot name=\"footer-left\"></slot>\n               </div>\n               <div class=\"footer-center\">\n                 <div class=\"bullet-container\">\n                   <a class=\"bullet ${lengthSlide === 3 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 2 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 1 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                 </div>\n               </div>\n               <div class=\"footer-right\">\n                 <slot name=\"footer-right\"></slot>\n               </div>\n             </footer>\n           </div>\n      `);\n\n      scrollRight.click();\n      await page.waitForChanges();\n\n      lengthSlide--;\n    }\n\n    while (lengthSlide > 3) {\n      expect(page.root).toEqualHtml(`\n      <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n         <mock:shadow-root>\n           <div>\n             <main>\n               <z-icon class=\"${\n                 lengthSlide === 3 ? \"disabled\" : \"false\"\n               } left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n               <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n                 <div class=\"${lengthSlide === 3 ? \"false\" : \"hide\"} slide\" id=\"slide0\">\n                   <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 2 ? \"false\" : \"hide\"} slide\" id=\"slide1\">\n                   <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 1 ? \"false\" : \"hide\"} slide\" id=\"slide2\">\n                   <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n                 </div>\n               </div>\n               <z-icon class=\"${\n                 lengthSlide === 1 ? \"disabled\" : \"false\"\n               } right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             </main>\n             <footer>\n               <div class=\"footer-left\">\n                 <slot name=\"footer-left\"></slot>\n               </div>\n               <div class=\"footer-center\">\n                 <div class=\"bullet-container\">\n                   <a class=\"bullet ${lengthSlide === 3 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 2 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 1 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                 </div>\n               </div>\n               <div class=\"footer-right\">\n                 <slot name=\"footer-right\"></slot>\n               </div>\n             </footer>\n           </div>\n      `);\n\n      scrollLeft.click();\n      await page.waitForChanges();\n\n      lengthSlide++;\n    }\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/snowflakes/myz/z-slideshow/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSlideshow} from \"./index\";\n\ndescribe(\"Suite test ZSlideshow\", () => {\n  it(\"Test render ZSlideshow with data empty\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow></z-slideshow>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-slideshow>\n        <mock:shadow-root><div></div></mock:shadow-root>\n      </z-slideshow>\n    `);\n  });\n\n  it(\"Test render ZSlideshow with data set\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow data='[\"https://link1.png\", \"https://link2.png\" ,\"https://link3.png\"]'></z-slideshow>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n       <mock:shadow-root>\n         <div>\n           <main>\n             <z-icon class=\"disabled left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n               <div class=\"false slide\" id=\"slide0\">\n                 <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"hide slide\" id=\"slide1\">\n                 <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"hide slide\" id=\"slide2\">\n                 <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n               </div>\n             </div>\n             <z-icon class=\"false right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n           </main>\n           <footer>\n             <div class=\"footer-left\">\n               <slot name=\"footer-left\"></slot>\n             </div>\n             <div class=\"footer-center\">\n               <div class=\"bullet-container\">\n                 <a class=\"bullet selected\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n               </div>\n             </div>\n             <div class=\"footer-right\">\n               <slot name=\"footer-right\"></slot>\n             </div>\n           </footer>\n         </div>\n    `);\n  });\n\n  it(\"Test render ZSlideshow with data set and click on the last bullet\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow data='[\"https://link1.png\", \"https://link2.png\" ,\"https://link3.png\"]'></z-slideshow>`,\n    });\n\n    page.rootInstance.currentSlide = 2;\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n    <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n       <mock:shadow-root>\n         <div>\n           <main>\n             <z-icon class=\"false left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n               <div class=\"hide slide\" id=\"slide0\">\n                 <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"hide slide\" id=\"slide1\">\n                 <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n               </div>\n               <div class=\"false slide\" id=\"slide2\">\n                 <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n               </div>\n             </div>\n             <z-icon class=\"disabled right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n           </main>\n           <footer>\n             <div class=\"footer-left\">\n               <slot name=\"footer-left\"></slot>\n             </div>\n             <div class=\"footer-center\">\n               <div class=\"bullet-container\">\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet false\" role=\"button\" tabindex=\"0\"></a>\n                 <a class=\"bullet selected\" role=\"button\" tabindex=\"0\"></a>\n               </div>\n             </div>\n             <div class=\"footer-right\">\n               <slot name=\"footer-right\"></slot>\n             </div>\n           </footer>\n         </div>\n    `);\n  });\n\n  it(\"Test render ZSlideshow with data set and click on scroll right and left\", async () => {\n    const page = await newSpecPage({\n      components: [ZSlideshow],\n      html: `<z-slideshow data='[\"https://link1.png\", \"https://link2.png\" ,\"https://link3.png\"]'></z-slideshow>`,\n    });\n\n    const scrollRight = page.root.shadowRoot.querySelector(\"z-icon.right\") as HTMLElement;\n    const scrollLeft = page.root.shadowRoot.querySelector(\"z-icon.left\") as HTMLElement;\n    let lengthSlide = 3;\n\n    while (lengthSlide > 0) {\n      expect(page.root).toEqualHtml(`\n      <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n         <mock:shadow-root>\n           <div>\n             <main>\n               <z-icon class=\"${\n                 lengthSlide === 3 ? \"disabled\" : \"false\"\n               } left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n               <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n                 <div class=\"${lengthSlide === 3 ? \"false\" : \"hide\"} slide\" id=\"slide0\">\n                   <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 2 ? \"false\" : \"hide\"} slide\" id=\"slide1\">\n                   <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 1 ? \"false\" : \"hide\"} slide\" id=\"slide2\">\n                   <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n                 </div>\n               </div>\n               <z-icon class=\"${\n                 lengthSlide === 1 ? \"disabled\" : \"false\"\n               } right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             </main>\n             <footer>\n               <div class=\"footer-left\">\n                 <slot name=\"footer-left\"></slot>\n               </div>\n               <div class=\"footer-center\">\n                 <div class=\"bullet-container\">\n                   <a class=\"bullet ${lengthSlide === 3 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 2 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 1 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                 </div>\n               </div>\n               <div class=\"footer-right\">\n                 <slot name=\"footer-right\"></slot>\n               </div>\n             </footer>\n           </div>\n      `);\n\n      scrollRight.click();\n      await page.waitForChanges();\n\n      lengthSlide--;\n    }\n\n    while (lengthSlide > 3) {\n      expect(page.root).toEqualHtml(`\n      <z-slideshow data=\"[&quot;https://link1.png&quot;, &quot;https://link2.png&quot; ,&quot;https://link3.png&quot;]\">\n         <mock:shadow-root>\n           <div>\n             <main>\n               <z-icon class=\"${\n                 lengthSlide === 3 ? \"disabled\" : \"false\"\n               } left scroll\" height=\"40\" name=\"chevron-left-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n               <div id=\"slides\" style=\"width: NaNpx; transform: translate(-NaNpx);\">\n                 <div class=\"${lengthSlide === 3 ? \"false\" : \"hide\"} slide\" id=\"slide0\">\n                   <img src=\"https://link1.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 2 ? \"false\" : \"hide\"} slide\" id=\"slide1\">\n                   <img src=\"https://link2.png\" style=\"width: undefinedpx;\">\n                 </div>\n                 <div class=\"${lengthSlide === 1 ? \"false\" : \"hide\"} slide\" id=\"slide2\">\n                   <img src=\"https://link3.png\" style=\"width: undefinedpx;\">\n                 </div>\n               </div>\n               <z-icon class=\"${\n                 lengthSlide === 1 ? \"disabled\" : \"false\"\n               } right scroll\" height=\"40\" name=\"chevron-right-circle\" role=\"button\" tabindex=\"0\" width=\"40\"></z-icon>\n             </main>\n             <footer>\n               <div class=\"footer-left\">\n                 <slot name=\"footer-left\"></slot>\n               </div>\n               <div class=\"footer-center\">\n                 <div class=\"bullet-container\">\n                   <a class=\"bullet ${lengthSlide === 3 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 2 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                   <a class=\"bullet ${lengthSlide === 1 ? \"selected\" : \"false\"}\" role=\"button\" tabindex=\"0\"></a>\n                 </div>\n               </div>\n               <div class=\"footer-right\">\n                 <slot name=\"footer-right\"></slot>\n               </div>\n             </footer>\n           </div>\n      `);\n\n      scrollLeft.click();\n      await page.waitForChanges();\n\n      lengthSlide++;\n    }\n  });\n});\n"]}

package/dist/collection/snowflakes/myz/z-slideshow/index.stories.js

@@ -0,0 +1,16 @@
+import {html} from "lit";
+import "./index";
+
+export default {
+  title: "Snowflakes/ZSlideshow",
+  component: "z-slideshow",
+};
+
+export const ZSlideshow = {
+  render: () =>
+    html`<div style="width:500px;">
+      <z-slideshow
+        data='["https://cdn.pixabay.com/photo/2015/03/28/16/40/lake-696098_960_720.jpg","https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg","https://cdn.pixabay.com/photo/2016/04/18/22/05/seashells-1337565_960_720.jpg"]'
+      ></z-slideshow>
+    </div>`,
+};