@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

package/dist/collection/components/z-cover-hero/index.stories.js

@@ -1,256 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-button/index";
-import "../z-info-reveal/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZCoverHero",
-    component: "z-cover-hero",
-    argTypes: {
-        "variant": {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(CoverHeroVariant),
-        },
-        "contentPosition": {
-            if: {
-                arg: "variant",
-                eq: CoverHeroVariant.STACKED,
-            },
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(CoverHeroContentPosition),
-        },
-        "--cover-hero-text-color": getColorTokenArgConfig(),
-        "--cover-hero-overlay": {
-            if: {
-                arg: "variant",
-                eq: CoverHeroVariant.OVERLAY,
-            },
-        },
-        "--cover-hero-aspect-ratio": {
-            if: {
-                arg: "preserveAspectRatio",
-            },
-            control: {
-                type: "text",
-            },
-        },
-    },
-    args: {
-        "variant": CoverHeroVariant.OVERLAY,
-        "contentPosition": CoverHeroContentPosition.TOP,
-        "preserveAspectRatio": true,
-        "--cover-hero-aspect-ratio": undefined,
-        "--cover-hero-overlay": "linear-gradient(270deg, #0000 0%, #000000e6 100%)",
-        "--cover-hero-text-color": "var(--color-text-inverse)",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        .contentPosition=${args.contentPosition}
-        .variant=${args.variant}
-        .preserveAspectRatio=${args.preserveAspectRatio}
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-        "--cover-hero-aspect-ratio": args["--cover-hero-aspect-ratio"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-        <z-info-reveal
-          slot="info-reveal"
-          position="bottom_right"
-        >
-          <span>Lorem ipsum dolor sit amet.</span>
-        </z-info-reveal>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const CustomAspectRatio = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "preserveAspectRatio"],
-        },
-    },
-    args: {
-        "--cover-hero-aspect-ratio": "16/8",
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-        "--cover-hero-aspect-ratio": args["--cover-hero-aspect-ratio"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-        <z-info-reveal
-          slot="info-reveal"
-          position="bottom_right"
-        >
-          <span>Lorem ipsum dolor sit amet.</span>
-        </z-info-reveal>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const AutoAspectRatio = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "preserveAspectRatio"],
-        },
-    },
-    args: {
-        "--cover-hero-aspect-ratio": "",
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container z-cover-hero-auto-ratio">
-      <z-cover-hero
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-        "--cover-hero-aspect-ratio": args["--cover-hero-aspect-ratio"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/4934920/pexels-photo-4934920.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const WithoutPreservingAspectRatio = {
-    argTypes: {
-        "variant": { table: { disable: true } },
-        "preserveAspectRatio": { table: { disable: true } },
-        "--cover-hero-aspect-ratio": { table: { disable: true } },
-    },
-    args: {
-        textContent: "Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        .preserveAspectRatio=${false}
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>${args.textContent}</div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const StackedVariant = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "preserveAspectRatio", "--cover-hero-aspect-ratio", "--cover-hero-text-color"],
-        },
-    },
-    args: {
-        variant: CoverHeroVariant.STACKED,
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        .contentPosition=${args.contentPosition}
-        .preserveAspectRatio=${args.preserveAspectRatio}
-        .variant=${args.variant}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-        <z-info-reveal
-          slot="info-reveal"
-          position="bottom_right"
-        >
-          <span>Lorem ipsum dolor sit amet.</span>
-        </z-info-reveal>
-      </z-cover-hero>
-    </div>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-cover-hero/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZCoverHero} from \".\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-info-reveal/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCoverHeroStoriesArgs = ZCoverHero &\n  CSSVarsArguments<\"cover-hero-text-color\" | \"cover-hero-overlay\" | \"cover-hero-aspect-ratio\">;\n\nconst StoryMeta = {\n  title: \"ZCoverHero\",\n  component: \"z-cover-hero\",\n  argTypes: {\n    \"variant\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(CoverHeroVariant),\n    },\n    \"contentPosition\": {\n      if: {\n        arg: \"variant\",\n        eq: CoverHeroVariant.STACKED,\n      },\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(CoverHeroContentPosition),\n    },\n    \"--cover-hero-text-color\": getColorTokenArgConfig(),\n    \"--cover-hero-overlay\": {\n      if: {\n        arg: \"variant\",\n        eq: CoverHeroVariant.OVERLAY,\n      },\n    },\n    \"--cover-hero-aspect-ratio\": {\n      if: {\n        arg: \"preserveAspectRatio\",\n      },\n      control: {\n        type: \"text\",\n      },\n    },\n  },\n  args: {\n    \"variant\": CoverHeroVariant.OVERLAY,\n    \"contentPosition\": CoverHeroContentPosition.TOP,\n    \"preserveAspectRatio\": true,\n    \"--cover-hero-aspect-ratio\": undefined,\n    \"--cover-hero-overlay\": \"linear-gradient(270deg, #0000 0%, #000000e6 100%)\",\n    \"--cover-hero-text-color\": \"var(--color-text-inverse)\",\n  },\n} satisfies Meta<ZCoverHeroStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCoverHeroStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"z-cover-hero-story-container\">\n      <z-cover-hero\n        .contentPosition=${args.contentPosition}\n        .variant=${args.variant}\n        .preserveAspectRatio=${args.preserveAspectRatio}\n        style=${styleMap({\n          \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n          \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n          \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n        })}\n      >\n        <img\n          slot=\"cover\"\n          src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n          alt=\"\"\n        />\n        <div slot=\"content\">\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n          </div>\n          <div class=\"buttons\">\n            <z-button variant=\"primary\">Primary</z-button>\n            <z-button variant=\"secondary\">Secondary</z-button>\n          </div>\n        </div>\n        <z-info-reveal\n          slot=\"info-reveal\"\n          position=\"bottom_right\"\n        >\n          <span>Lorem ipsum dolor sit amet.</span>\n        </z-info-reveal>\n      </z-cover-hero>\n    </div>\n  `,\n} satisfies Story;\n\nexport const CustomAspectRatio = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"preserveAspectRatio\"],\n    },\n  },\n  args: {\n    \"--cover-hero-aspect-ratio\": \"16/8\",\n  },\n  render: (args) => html`\n    <div class=\"z-cover-hero-story-container\">\n      <z-cover-hero\n        style=${styleMap({\n          \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n          \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n          \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n        })}\n      >\n        <img\n          slot=\"cover\"\n          src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n          alt=\"\"\n        />\n        <div slot=\"content\">\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n          </div>\n          <div class=\"buttons\">\n            <z-button variant=\"primary\">Primary</z-button>\n            <z-button variant=\"secondary\">Secondary</z-button>\n          </div>\n        </div>\n        <z-info-reveal\n          slot=\"info-reveal\"\n          position=\"bottom_right\"\n        >\n          <span>Lorem ipsum dolor sit amet.</span>\n        </z-info-reveal>\n      </z-cover-hero>\n    </div>\n  `,\n};\n\nexport const AutoAspectRatio = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"preserveAspectRatio\"],\n    },\n  },\n  args: {\n    \"--cover-hero-aspect-ratio\": \"\",\n  },\n  render: (args) => html`\n    <div class=\"z-cover-hero-story-container z-cover-hero-auto-ratio\">\n      <z-cover-hero\n        style=${styleMap({\n          \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n          \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n          \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n        })}\n      >\n        <img\n          slot=\"cover\"\n          src=\"https://images.pexels.com/photos/4934920/pexels-photo-4934920.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n          alt=\"\"\n        />\n        <div slot=\"content\">\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n          </div>\n          <div class=\"buttons\">\n            <z-button variant=\"primary\">Primary</z-button>\n            <z-button variant=\"secondary\">Secondary</z-button>\n          </div>\n        </div>\n      </z-cover-hero>\n    </div>\n  `,\n};\n\nexport const WithoutPreservingAspectRatio = {\n  argTypes: {\n    \"variant\": {table: {disable: true}},\n    \"preserveAspectRatio\": {table: {disable: true}},\n    \"--cover-hero-aspect-ratio\": {table: {disable: true}},\n  },\n  args: {\n    textContent:\n      \"Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\",\n  },\n  render: (args) => html`\n    <div class=\"z-cover-hero-story-container\">\n      <z-cover-hero\n        .preserveAspectRatio=${false}\n        style=${styleMap({\n          \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n          \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n        })}\n      >\n        <img\n          slot=\"cover\"\n          src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n          alt=\"\"\n        />\n        <div slot=\"content\">\n          <div>${args.textContent}</div>\n          <div class=\"buttons\">\n            <z-button variant=\"primary\">Primary</z-button>\n            <z-button variant=\"secondary\">Secondary</z-button>\n          </div>\n        </div>\n      </z-cover-hero>\n    </div>\n  `,\n};\n\nexport const StackedVariant = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"preserveAspectRatio\", \"--cover-hero-aspect-ratio\", \"--cover-hero-text-color\"],\n    },\n  },\n  args: {\n    variant: CoverHeroVariant.STACKED,\n  },\n  render: (args) => html`\n    <div class=\"z-cover-hero-story-container\">\n      <z-cover-hero\n        .contentPosition=${args.contentPosition}\n        .preserveAspectRatio=${args.preserveAspectRatio}\n        .variant=${args.variant}\n      >\n        <img\n          slot=\"cover\"\n          src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n          alt=\"\"\n        />\n        <div slot=\"content\">\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n          </div>\n          <div class=\"buttons\">\n            <z-button variant=\"primary\">Primary</z-button>\n            <z-button variant=\"secondary\">Secondary</z-button>\n          </div>\n        </div>\n        <z-info-reveal\n          slot=\"info-reveal\"\n          position=\"bottom_right\"\n        >\n          <span>Lorem ipsum dolor sit amet.</span>\n        </z-info-reveal>\n      </z-cover-hero>\n    </div>\n  `,\n};\n"]}

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

@@ -1 +0,0 @@
-{"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.stories.js

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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.stories.js

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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,qBAAqB,EAAE,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAErE;;;GAGG;AAMH,MAAM,OAAO,KAAK;;;;;;;;;IA6BhB;;;OAGG;IACK,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,SAAS,GAAS,CAAC;QACrC,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,SAAS,GAAY,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG;YACf,OAAO,EAAE,eAAe;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DAAK,KAAK,EAAC,cAAc;gBACvB,0EACE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,IAC/C,QAAQ,GAEX,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC;gBACL,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAC5C,0EACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,IAAI,WAAW,IACpC,QAAQ,GAEX,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAC5C,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\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 | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  render(): SVGElement {\n    const svgAttrs = {\n      viewBox: \"0 0 1000 1000\",\n      width: this.width,\n      height: this.height,\n    };\n\n    return (\n      <Host aria-hidden=\"true\">\n        <div class=\"icon-wrapper\">\n          <svg\n            id={this.iconid || undefined}\n            fill={this.fill ? `var(--${this.fill})` : undefined}\n            {...svgAttrs}\n          >\n            {this.selectPathOrPolygon(ICONS[this.name])}\n          </svg>\n          {COLOR_INDICATOR_ICONS.includes(this.name) && (\n            <svg\n              class=\"color-indicator\"\n              fill={this.indicatorColor || \"#FFFFFF00\"}\n              {...svgAttrs}\n            >\n              {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n            </svg>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,71 +0,0 @@
-import { html } from "lit";
-import { COLOR_INDICATOR_ICONS } from "../../constants/iconset";
-import { getColorTokens } from "../../utils/storybook-utils";
-import "./index";
-const StoryMeta = {
-    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 default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-icon
-      name=${args.name}
-      height=${args.height}
-      width=${args.width}
-      fill=${args.fill}
-    ></z-icon>`,
-};
-export const ZIconRem = {
-    args: {
-        name: "download",
-        height: "1.125rem",
-        width: "1.125rem",
-        fill: "color-primary01",
-    },
-    render: (args) => html `<z-icon
-      name=${args.name}
-      height=${args.height}
-      width=${args.width}
-      fill=${args.fill}
-    ></z-icon>`,
-};
-export const ColorIndicator = {
-    argTypes: {
-        name: {
-            options: COLOR_INDICATOR_ICONS,
-            control: { type: "select" },
-        },
-        indicatorColor: {
-            control: { type: "color" },
-        },
-    },
-    args: {
-        name: COLOR_INDICATOR_ICONS[0],
-        fill: "color-black",
-        indicatorColor: "#ff0000",
-        width: 64,
-        height: 64,
-    },
-    render: (args) => html `<z-icon
-      name=${args.name}
-      height=${args.height}
-      width=${args.width}
-      fill=${args.fill}
-      .indicatorColor=${args.indicatorColor}
-    ></z-icon>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"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,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,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,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;eACP;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,iBAAiB;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;eACP;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,qBAAqB;YAC9B,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC;SACzB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC;QAC9B,IAAI,EAAE,aAAa;QACnB,cAAc,EAAE,SAAS;QACzB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;wBACE,IAAI,CAAC,cAAc;eAC5B;CACE,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {COLOR_INDICATOR_ICONS} from \"../../constants/iconset\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\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 default StoryMeta;\n\ntype Story = StoryObj<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} satisfies Story;\n\nexport const ZIconRem = {\n  args: {\n    name: \"download\",\n    height: \"1.125rem\",\n    width: \"1.125rem\",\n    fill: \"color-primary01\",\n  },\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} satisfies Story;\n\nexport const ColorIndicator = {\n  argTypes: {\n    name: {\n      options: COLOR_INDICATOR_ICONS,\n      control: {type: \"select\"},\n    },\n    indicatorColor: {\n      control: {type: \"color\"},\n    },\n  },\n  args: {\n    name: COLOR_INDICATOR_ICONS[0],\n    fill: \"color-black\",\n    indicatorColor: \"#ff0000\",\n    width: 64,\n    height: 64,\n  },\n  render: (args) =>\n    html`<z-icon\n      name=${args.name}\n      height=${args.height}\n      width=${args.width}\n      fill=${args.fill}\n      .indicatorColor=${args.indicatorColor}\n    ></z-icon>`,\n} satisfies Story;\n"]}

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

@@ -1 +0,0 @@
-{"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.stories.js

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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 * @cssprop --trigger-icon-size - Size of the trigger icon for big size.\n * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.\n * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.\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"]}

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

@@ -1,59 +0,0 @@
-import { html } from "lit";
-import { ControlSize, InfoRevealPosition } from "../../beans";
-import { ICONS } from "../../constants/iconset";
-import "../z-button/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZInfoReveal",
-    component: "z-info-reveal",
-    argTypes: {
-        icon: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(ICONS).sort(),
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-        position: {
-            options: Object.values(InfoRevealPosition),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    parameters: {
-        layout: "centered",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        label: "",
-        icon: "informationsource",
-        size: ControlSize.BIG,
-        position: InfoRevealPosition.TOP_RIGHT,
-    },
-    render: (args) => html `
-    <div class="z-info-reveal-story-wrapper">
-      <z-button .size=${args.size}>Button</z-button>
-      <z-info-reveal
-        .label=${args.label}
-        .icon=${args.icon}
-        .size=${args.size}
-        .position=${args.position}
-      >
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
-          Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
-        </div>
-      </z-info-reveal>
-    </div>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-info-reveal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;YAC1C,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,WAAW,CAAC,GAAG;QACrB,QAAQ,EAAE,kBAAkB,CAAC,SAAS;KACvC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEA,IAAI,CAAC,IAAI;;iBAEhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;gBACT,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;;;;;;;;GAQ9B;CAC8B,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZInfoReveal} from \".\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZInfoReveal\",\n  component: \"z-info-reveal\",\n  argTypes: {\n    icon: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.keys(ICONS).sort(),\n    },\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ControlSize),\n    },\n    position: {\n      options: Object.values(InfoRevealPosition),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<ZInfoReveal>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  args: {\n    label: \"\",\n    icon: \"informationsource\",\n    size: ControlSize.BIG,\n    position: InfoRevealPosition.TOP_RIGHT,\n  },\n  render: (args) => html`\n    <div class=\"z-info-reveal-story-wrapper\">\n      <z-button .size=${args.size}>Button</z-button>\n      <z-info-reveal\n        .label=${args.label}\n        .icon=${args.icon}\n        .size=${args.size}\n        .position=${args.position}\n      >\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n          Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n        </div>\n      </z-info-reveal>\n    </div>\n  `,\n} satisfies StoryObj<ZInfoReveal>;\n"]}