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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAO5D,MAAM,OAAO,QAAQ;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Host} from \"@stencil/core\";\nimport {DividerSize, DividerOrientation} from \"../../beans\";\n@Component({\n  tag: \"z-divider\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZDivider {\n  /** [optional] Divider size */\n  @Prop()\n  size?: DividerSize = DividerSize.SMALL;\n\n  /** [optional] Divider color */\n  @Prop()\n  color?: string = \"gray200\";\n\n  /** [optional] Divider orintation */\n  @Prop()\n  orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n  render(): HTMLZDividerElement {\n    return (\n      <Host\n        class={`divider-${this.size} divider-${this.orientation}`}\n        style={{backgroundColor: `var(--${this.color})`}}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAO5D,MAAM,OAAO,QAAQ;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n  tag: \"z-divider\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZDivider {\n  /** [optional] Divider size */\n  @Prop()\n  size?: DividerSize = DividerSize.SMALL;\n\n  /** [optional] Divider color */\n  @Prop()\n  color?: string = \"gray200\";\n\n  /** [optional] Divider orintation */\n  @Prop()\n  orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n  render(): HTMLZDividerElement {\n    return (\n      <Host\n        class={`divider-${this.size} divider-${this.orientation}`}\n        style={{backgroundColor: `var(--${this.color})`}}\n      />\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-divider/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,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,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,QAAQ,CAAC;YACtB,IAAI,EAAE,kDAAkD;SACzD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,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,uCAAuC;SAC9C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,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,yCAAyC;SAChD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZDivider} from \"./index\";\n\ndescribe(\"Suite test ZDivider\", () => {\n  it(\"Test render ZDivider default properties\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider class=\"divider-horizontal divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider orientation horizontal\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider orientation=\"horizontal\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider orientation=\"horizontal\" class=\"divider-horizontal divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider orientation vertical\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider orientation=\"vertical\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider orientation=\"vertical\" class=\"divider-vertical divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider size small\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider size=\"small\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider size=\"small\" class=\"divider-horizontal divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider size medium\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider size=\"medium\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider size=\"medium\" class=\"divider-horizontal divider-medium\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider size large\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider size=\"large\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider size=\"large\" class=\"divider-horizontal divider-large\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider color token\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider color=\"blue900\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider color=\"blue900\" class=\"divider-horizontal divider-small\" style=\"background-color: var(--blue900);\">\n    \n      </z-divider>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-divider/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,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,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,QAAQ,CAAC;YACtB,IAAI,EAAE,kDAAkD;SACzD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,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,uCAAuC;SAC9C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,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,yCAAyC;SAChD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZDivider} from \"./index\";\n\ndescribe(\"Suite test ZDivider\", () => {\n  it(\"Test render ZDivider default properties\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider class=\"divider-horizontal divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider orientation horizontal\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider orientation=\"horizontal\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider orientation=\"horizontal\" class=\"divider-horizontal divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider orientation vertical\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider orientation=\"vertical\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider orientation=\"vertical\" class=\"divider-vertical divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider size small\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider size=\"small\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider size=\"small\" class=\"divider-horizontal divider-small\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider size medium\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider size=\"medium\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider size=\"medium\" class=\"divider-horizontal divider-medium\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider size large\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider size=\"large\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider size=\"large\" class=\"divider-horizontal divider-large\" style=\"background-color: var(--gray200);\">\n    \n      </z-divider>\n    `);\n  });\n\n  it(\"Test render ZDivider color token\", async () => {\n    const page = await newSpecPage({\n      components: [ZDivider],\n      html: `<z-divider color=\"blue900\"></z-divider>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-divider color=\"blue900\" class=\"divider-horizontal divider-small\" style=\"background-color: var(--blue900);\">\n    \n      </z-divider>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-divider/index.stories.js

@@ -0,0 +1,45 @@
+import { html } from "lit";
+import { DividerOrientation, DividerSize } from "../../beans";
+import { getColorTokens } from "../../utils/storybook-utils";
+import "./index";
+const StoryMeta = {
+    title: "ZDivider",
+    component: "z-divider",
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(DividerSize),
+        },
+        orientation: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(DividerOrientation),
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: getColorTokens().map((token) => token.replace("--", "")),
+        },
+    },
+    args: {
+        size: DividerSize.SMALL,
+        color: "gray200",
+        orientation: DividerOrientation.HORIZONTAL,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `<div style="height: 300px; padding: 24px">
+      <z-divider
+        size="${args.size}"
+        color="${args.color}"
+        orientation="${args.orientation}"
+      ></z-divider>
+    </div>`,
+    name: "ZDivider",
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-divider/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-divider/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;SAClE;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW,CAAC,KAAK;QACvB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,kBAAkB,CAAC,UAAU;KAC3C;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;gBAEQ,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;;WAE5B;IACT,IAAI,EAAE,UAAU;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZDivider} from \".\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZDivider\",\n  component: \"z-divider\",\n  argTypes: {\n    size: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(DividerSize),\n    },\n    orientation: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(DividerOrientation),\n    },\n    color: {\n      control: {\n        type: \"select\",\n      },\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n    },\n  },\n  args: {\n    size: DividerSize.SMALL,\n    color: \"gray200\",\n    orientation: DividerOrientation.HORIZONTAL,\n  },\n} satisfies Meta<ZDivider>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<div style=\"height: 300px; padding: 24px\">\n      <z-divider\n        size=\"${args.size}\"\n        color=\"${args.color}\"\n        orientation=\"${args.orientation}\"\n      ></z-divider>\n    </div>`,\n  name: \"ZDivider\",\n} satisfies StoryObj<ZDivider>;\n"]}

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '8738533f14d7ef5917825e6632b63e995a410d24' });
+        return h(Host, { key: 'dbc7747f3cf3b0578212c4d86f28410d40826cdc' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-ghost-loading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-ghost-loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-ghost-loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-ghost-loading/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;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZGhostLoading} from \"./index\";\n\ndescribe(\"Suite test ZGhostLoading\", () => {\n  it(\"Test render ZGhostLoading\", async () => {\n    const page = await newSpecPage({\n      components: [ZGhostLoading],\n      html: `<z-ghost-loading></z-ghost-loading>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-ghost-loading>\n      <mock:shadow-root></mock:shadow-root>\n    </z-ghost-loading>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-ghost-loading/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;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZGhostLoading} from \"./index\";\n\ndescribe(\"Suite test ZGhostLoading\", () => {\n  it(\"Test render ZGhostLoading\", async () => {\n    const page = await newSpecPage({\n      components: [ZGhostLoading],\n      html: `<z-ghost-loading></z-ghost-loading>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-ghost-loading>\n      <mock:shadow-root></mock:shadow-root>\n    </z-ghost-loading>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-ghost-loading/index.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "./index";
+export default {
+    title: "ZGhostLoading",
+    component: "z-ghost-loading",
+};
+export const ZGhostLoading = {
+    render: () => html `<div style="height:24px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
+      <div style="width:50%; height:24px"><z-ghost-loading></z-ghost-loading></div>
+      <br /><br />
+      <div style="height:12px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
+      <div style="height:12px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
+      <div style="height:12px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
+      <div style="width:50%; height:12px"><z-ghost-loading></z-ghost-loading></div>
+      <br /><br />
+      <div style="display:flex">
+        <div style="width:30%; height:50px; padding-right:20px"><z-ghost-loading></z-ghost-loading></div>
+        <div style="width:30%; height:50px; padding-right:20px"><z-ghost-loading></z-ghost-loading></div>
+        <div style="width:30%; height:50px;"><z-ghost-loading></z-ghost-loading></div>
+      </div>`,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-ghost-loading/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-ghost-loading/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;aAYK;CACZ,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n  title: \"ZGhostLoading\",\n  component: \"z-ghost-loading\",\n};\n\nexport const ZGhostLoading = {\n  render: () =>\n    html`<div style=\"height:24px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n      <div style=\"width:50%; height:24px\"><z-ghost-loading></z-ghost-loading></div>\n      <br /><br />\n      <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n      <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n      <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n      <div style=\"width:50%; height:12px\"><z-ghost-loading></z-ghost-loading></div>\n      <br /><br />\n      <div style=\"display:flex\">\n        <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n        <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n        <div style=\"width:30%; height:50px;\"><z-ghost-loading></z-ghost-loading></div>\n      </div>`,\n};\n"]}

package/dist/collection/components/z-icon/index.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+import { ICONS } from "../../constants/iconset";
+export class ZIcon {
+    constructor() {
+        this.name = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.iconid = undefined;
+        this.fill = undefined;
+    }
+    selectPathOrPolygon(iconValue) {
+        if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
+            return h("path", { d: ICONS[this.name] });
+        }
+        return h("polygon", { points: ICONS[this.name] });
+    }
+    render() {
+        return (h(Host, { key: '1a1e571015e571d47fe06be2014c56c63ae2243d', "aria-hidden": "true" }, h("svg", { key: 'e2cc3ec6fc9d8e2fe31dc1b6a6ec0ed17556b3e4', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
+    }
+    static get is() { return "z-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "icon name"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "icon height (optional)"
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "icon width (optional)"
+                },
+                "attribute": "width",
+                "reflect": false
+            },
+            "iconid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "icon id (optional)"
+                },
+                "attribute": "iconid",
+                "reflect": false
+            },
+            "fill": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "icon fill (optional)"
+                },
+                "attribute": "fill",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAO9C,MAAM,OAAO,KAAK;;;;;;;;IAqBR,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CAAC;QAC5C,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAY,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DACE,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,IAE3C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ICONS} from \"../../constants/iconset\";\n\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** icon name */\n  @Prop()\n  name: string;\n\n  /** icon height (optional) */\n  @Prop()\n  height?: number;\n\n  /** icon width (optional) */\n  @Prop()\n  width?: number;\n\n  /** icon id (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** icon fill (optional) */\n  @Prop()\n  fill?: string;\n\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={ICONS[this.name]}></path>;\n    }\n\n    return <polygon points={ICONS[this.name]}></polygon>;\n  }\n\n  render(): SVGElement {\n    return (\n      <Host aria-hidden=\"true\">\n        <svg\n          viewBox=\"0 0 1000 1000\"\n          width={this.width}\n          height={this.height}\n          id={this.iconid}\n          fill={this.fill ? `var(--${this.fill})` : \"\"}\n        >\n          {this.selectPathOrPolygon(ICONS[this.name])}\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,96 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ICONS } from "../../constants/iconset";
+import { ZIcon } from "./index";
+describe("Suite test ZIcon", () => {
+    it("Test render ZIcon vuoto", async () => {
+        const page = await newSpecPage({
+            components: [ZIcon],
+            html: `<z-icon></z-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-icon aria-hidden="true">
+        <mock:shadow-root>
+          <svg fill="" viewBox="0 0 1000 1000" id="">
+            <polygon></polygon>
+          </svg>
+        </mock:shadow-root>
+      </z-icon>
+    `);
+    });
+    it("Test render ZIcon con path", async () => {
+        const page = await newSpecPage({
+            components: [ZIcon],
+            html: `<z-icon name="download" iconid="zicon"></z-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-icon name="download" iconid="zicon" aria-hidden="true">
+        <mock:shadow-root>
+          <svg fill="" viewBox="0 0 1000 1000" id="zicon">
+            <path d="${ICONS["download"]}"></path>
+          </svg>
+        </mock:shadow-root>
+      </z-icon>
+    `);
+    });
+    it("Test render ZIcon con path con dimensioni", async () => {
+        const page = await newSpecPage({
+            components: [ZIcon],
+            html: `<z-icon name="download" iconid="zicon" width="10" height="10"></z-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-icon name="download" iconid="zicon" width="10" height="10"  aria-hidden="true">
+        <mock:shadow-root>
+          <svg fill="" viewBox="0 0 1000 1000" width='10' height='10' id="zicon">
+            <path d="${ICONS["download"]}"></path>
+          </svg>
+        </mock:shadow-root>
+      </z-icon>
+    `);
+    });
+    it("Test render ZIcon con polygon", async () => {
+        const page = await newSpecPage({
+            components: [ZIcon],
+            html: `<z-icon name="chevron-down" iconid="zicon"></z-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-icon name="chevron-down" iconid="zicon" aria-hidden="true">
+        <mock:shadow-root>
+          <svg fill="" viewBox="0 0 1000 1000" id="zicon">
+            <path d="${ICONS["chevron-down"]}"></path>
+          </svg>
+        </mock:shadow-root>
+      </z-icon>
+    `);
+    });
+    it("Test render ZIcon con polygon con dimensioni", async () => {
+        const page = await newSpecPage({
+            components: [ZIcon],
+            html: `<z-icon name="chevron-down" iconid="zicon" width="10" height="10"></z-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-icon name="chevron-down" iconid="zicon" width="10" height="10" aria-hidden="true">
+        <mock:shadow-root>
+          <svg fill="" viewBox="0 0 1000 1000" width='10' height='10' id="zicon">
+            <path d="${ICONS["chevron-down"]}"></path>
+          </svg>
+        </mock:shadow-root>
+      </z-icon>
+    `);
+    });
+    it("Test render ZIcon con fill", async () => {
+        const page = await newSpecPage({
+            components: [ZIcon],
+            html: `<z-icon fill="color-primary01"></z-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-icon fill="color-primary01" aria-hidden="true">
+        <mock:shadow-root>
+          <svg  fill="var(--color-primary01)" viewBox="0 0 1000 1000" id="">
+            <polygon></polygon>
+          </svg>
+        </mock:shadow-root>
+      </z-icon>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,mBAAmB;SAC1B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,kDAAkD;SACzD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;uBAIX,KAAK,CAAC,UAAU,CAAC;;;;KAInC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,yEAAyE;SAChF,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;uBAIX,KAAK,CAAC,UAAU,CAAC;;;;KAInC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;uBAIX,KAAK,CAAC,cAAc,CAAC;;;;KAIvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,6EAA6E;SACpF,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;uBAIX,KAAK,CAAC,cAAc,CAAC;;;;KAIvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,0CAA0C;SACjD,CAAC,CAAC;QACH,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 {ICONS} from \"../../constants/iconset\";\nimport {ZIcon} from \"./index\";\n\ndescribe(\"Suite test ZIcon\", () => {\n  it(\"Test render ZIcon vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZIcon],\n      html: `<z-icon></z-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-icon aria-hidden=\"true\">\n        <mock:shadow-root>\n          <svg fill=\"\" viewBox=\"0 0 1000 1000\" id=\"\">\n            <polygon></polygon>\n          </svg>\n        </mock:shadow-root>\n      </z-icon>\n    `);\n  });\n\n  it(\"Test render ZIcon con path\", async () => {\n    const page = await newSpecPage({\n      components: [ZIcon],\n      html: `<z-icon name=\"download\" iconid=\"zicon\"></z-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-icon name=\"download\" iconid=\"zicon\" aria-hidden=\"true\">\n        <mock:shadow-root>\n          <svg fill=\"\" viewBox=\"0 0 1000 1000\" id=\"zicon\">\n            <path d=\"${ICONS[\"download\"]}\"></path>\n          </svg>\n        </mock:shadow-root>\n      </z-icon>\n    `);\n  });\n\n  it(\"Test render ZIcon con path con dimensioni\", async () => {\n    const page = await newSpecPage({\n      components: [ZIcon],\n      html: `<z-icon name=\"download\" iconid=\"zicon\" width=\"10\" height=\"10\"></z-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-icon name=\"download\" iconid=\"zicon\" width=\"10\" height=\"10\"  aria-hidden=\"true\">\n        <mock:shadow-root>\n          <svg fill=\"\" viewBox=\"0 0 1000 1000\" width='10' height='10' id=\"zicon\">\n            <path d=\"${ICONS[\"download\"]}\"></path>\n          </svg>\n        </mock:shadow-root>\n      </z-icon>\n    `);\n  });\n\n  it(\"Test render ZIcon con polygon\", async () => {\n    const page = await newSpecPage({\n      components: [ZIcon],\n      html: `<z-icon name=\"chevron-down\" iconid=\"zicon\"></z-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-icon name=\"chevron-down\" iconid=\"zicon\" aria-hidden=\"true\">\n        <mock:shadow-root>\n          <svg fill=\"\" viewBox=\"0 0 1000 1000\" id=\"zicon\">\n            <path d=\"${ICONS[\"chevron-down\"]}\"></path>\n          </svg>\n        </mock:shadow-root>\n      </z-icon>\n    `);\n  });\n\n  it(\"Test render ZIcon con polygon con dimensioni\", async () => {\n    const page = await newSpecPage({\n      components: [ZIcon],\n      html: `<z-icon name=\"chevron-down\" iconid=\"zicon\" width=\"10\" height=\"10\"></z-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-icon name=\"chevron-down\" iconid=\"zicon\" width=\"10\" height=\"10\" aria-hidden=\"true\">\n        <mock:shadow-root>\n          <svg fill=\"\" viewBox=\"0 0 1000 1000\" width='10' height='10' id=\"zicon\">\n            <path d=\"${ICONS[\"chevron-down\"]}\"></path>\n          </svg>\n        </mock:shadow-root>\n      </z-icon>\n    `);\n  });\n\n  it(\"Test render ZIcon con fill\", async () => {\n    const page = await newSpecPage({\n      components: [ZIcon],\n      html: `<z-icon fill=\"color-primary01\"></z-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-icon fill=\"color-primary01\" aria-hidden=\"true\">\n        <mock:shadow-root>\n          <svg  fill=\"var(--color-primary01)\" viewBox=\"0 0 1000 1000\" id=\"\">\n            <polygon></polygon>\n          </svg>\n        </mock:shadow-root>\n      </z-icon>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-icon/index.stories.js

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import { getColorTokens } from "../../utils/storybook-utils";
+import "./index";
+export default {
+    title: "ZIcon",
+    component: "z-icon",
+    argTypes: {
+        fill: {
+            options: getColorTokens().map((token) => token.replace("--", "")),
+            control: {
+                type: "select",
+            },
+        },
+    },
+    args: {
+        name: "download",
+        height: 24,
+        width: 24,
+        fill: "color-primary01",
+    },
+};
+export const Default = {
+    render: (args) => html `<z-icon
+      name="${args.name}"
+      height="${args.height}"
+      width="${args.width}"
+      fill="${args.fill}"
+    ></z-icon>`,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-icon/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,iBAAiB;KACxB;CACoB,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;eACZ,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;eACR;CACd,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nexport default {\n  title: \"ZIcon\",\n  component: \"z-icon\",\n  argTypes: {\n    fill: {\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    name: \"download\",\n    height: 24,\n    width: 24,\n    fill: \"color-primary01\",\n  },\n} satisfies Meta<ZIcon>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-icon\n      name=\"${args.name}\"\n      height=\"${args.height}\"\n      width=\"${args.width}\"\n      fill=\"${args.fill}\"\n    ></z-icon>`,\n};\n"]}

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

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+/**
+ * @slot content - set the info box content
+ */
+export class ZInfoBox {
+    constructor() {
+        this.boxid = undefined;
+        this.isclosable = true;
+    }
+    emitInfoBoxClose() {
+        this.infoBoxClose.emit({ boxid: this.boxid });
+    }
+    render() {
+        return (h("div", { key: '52cbca4a972a1fb53f65bf86428ee23f8933b616', id: this.boxid }, h("slot", { key: '3b83aa34338ceb6c11f74a316bf50dd77bd0c662', name: "content" }), this.isclosable && (h("z-icon", { key: '2b3f8bbb5ce69105bddac3253047199028f4e2c0', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+    }
+    static get is() { return "z-info-box"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "boxid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "info box unique id"
+                },
+                "attribute": "boxid",
+                "reflect": false
+            },
+            "isclosable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "render close icon flag"
+                },
+                "attribute": "isclosable",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "infoBoxClose",
+                "name": "infoBoxClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emitted on close icon click"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,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,+DACE,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, Event, EventEmitter, Prop, h} 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/z-info-box/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/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/z-info-box/index.stories.js

@@ -0,0 +1,20 @@
+import { html } from "lit";
+import "./index";
+const StoryMeta = {
+    title: "ZInfoBox",
+    component: "z-info-box",
+    args: {
+        isclosable: true,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `<z-info-box isclosable="${args.isclosable}">
+      <span slot="content"
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum convallis ex, eu faucibus velit
+        dignissim in. Quisque at risus accumsan, auctor enim a, varius tortor. Donec egestas sodales mi at imperdiet.
+        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span
+      >
+    </z-info-box>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-info-box/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA,2BAA2B,IAAI,CAAC,UAAU;;;;;;kBAMhC;CACjB,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZInfoBox} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZInfoBox\",\n  component: \"z-info-box\",\n  args: {\n    isclosable: true,\n  },\n} satisfies Meta<ZInfoBox>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-info-box isclosable=\"${args.isclosable}\">\n      <span slot=\"content\"\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum convallis ex, eu faucibus velit\n        dignissim in. Quisque at risus accumsan, auctor enim a, varius tortor. Donec egestas sodales mi at imperdiet.\n        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span\n      >\n    </z-info-box>`,\n};\n"]}

package/dist/collection/components/z-info-reveal/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { ControlSize, InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
@@ -47,7 +47,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '9760fea9358ffa3422f6dad090a03c30cd8b51f2', open: this.open }, h("button", { key: '52c39a04ac63089ecb493927b49dea106a94ee93', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { name: this.icon }), this.label && h("span", { class: "z-info-reveal-label" }, this.label)), h("div", { key: '839afc7d65706951dcf0b5a56aaa69c6c56cc720', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '598c69722edab2f836962b3807e50a4a8a296aee' }), h("button", { key: '53c5f103f7bcca4bf1d6ccb8d4454459b1a82afd', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '506717510c3ab82f30efbfe70753af7bc277a29f', name: "multiply" })))));
+        return (h(Host, { key: '45471ff481d7ce13ff05da131b5de64fadaf68d9', open: this.open }, h("button", { key: '8677715bec503a1bd07f6df15932a98417599495', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '48e14ecbee56d2dc6b9b297f8daa171c34c2a98d', name: this.icon }), this.label && h("span", { key: '89e72867433abd07cb334120558ccdc02a5bbb81', class: "z-info-reveal-label" }, this.label)), h("div", { key: '06268f048b3d6244f940900ca114dfcad5417849', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '3698cbc239ab16b04226e7e9f1619014500b30f6' }), h("button", { key: '7e03364aeb76b404d4ed78d640de500b95f68769', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '524131a6b9b100729c10657c778bc6bb1daf6946', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-reveal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACtF,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAMH,MAAM,OAAO,WAAW;;oBAGd,mBAAmB;wBAQK,kBAAkB,CAAC,YAAY;;yBAQnD,4BAA4B;oBAInB,WAAW,CAAC,GAAG;oBAI7B,KAAK;;IAMZ;;OAEG;IAIH,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9G,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QACvD,yGAAyG;QACzG,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAC/B,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,UAAU,CACnF,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,cAAc,IAAI,CAAC;IACpD,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED;;OAEG;IACK,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACxC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACnB,+DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACrC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC7B,qBAAqB;gBAElC,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;gBACxC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D;YACT,4DACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,qBAAqB,EACxB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;gBAElB,8DAAa;gBACb,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBACxB,8BAA8B;oBAEzC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACL,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop, State, Host, Listen, Watch, Element} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-info-reveal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}