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

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

@@ -1,68 +0,0 @@
-import { html } from "lit";
-import { BreadcrumbHomepageVariant, BreadcrumbPathStyle } from "../../beans";
-import "./index";
-import "./style.stories.css";
-/**
- * Breadcrumb is a relevant component for SEO oriented applications.
- * As the crawlers flatten the light dom and the shadow dom, it is important to move all the relevant SEO content in the light DOM, to not affect indexability.
- *
- * The component will handle the logic for generating the proper markup inside the shadow dom.
- * No slot is rendered inside the latter.
- * Like the other use case, don't pass a custom label to the first child because it will be overwritten by the default home value.
- * This mode can be also used by SEO non-relevant application.
- * @example```
- * <z-breadcrumb>
- *  <a href="./home_link"></a>
- *  <a href="./link1">link1</a>
- *  <a href="./link2">link2</a>
- *  <a href="./link3">link3</a>
- * </z-breadcrumb>```
- *
- * This component follows the accessibility guidelines provided by W3C https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
- */
-const StoryMeta = {
-    title: "ZBreadcrumb",
-    component: "z-breadcrumb",
-    argTypes: {
-        pathStyle: {
-            options: Object.values(BreadcrumbPathStyle),
-            control: {
-                type: "select",
-            },
-        },
-        homepageVariant: {
-            options: Object.values(BreadcrumbHomepageVariant),
-            control: {
-                type: "select",
-            },
-        },
-    },
-    args: {
-        pathStyle: BreadcrumbPathStyle.SEMIBOLD,
-        homepageVariant: BreadcrumbHomepageVariant.ICON,
-        maxNodesToShow: 5,
-        preventFollowUrl: false,
-        overflowMenuItemRows: 0,
-        truncateChar: 30,
-    },
-};
-export default StoryMeta;
-export const Breadcrumb = {
-    render: (args) => html `<div class="z-breadcrumb-story-container">
-      <z-breadcrumb
-        .pathStyle=${args.pathStyle}
-        .homepageVariant=${args.homepageVariant}
-        .maxNodesToShow=${args.maxNodesToShow}
-        .preventFollowUrl=${args.preventFollowUrl}
-        .overflowMenuItemRows=${args.overflowMenuItemRows}
-        .truncateChar=${args.truncateChar}
-      >
-        <a href="https://www.zanichelli.it"></a>
-        <a href="./link1">Lingua inglese - Scuola secondaria di primo grado</a>
-        <a href="./link2">Lingua Inglese - Lessico e funzioni linguistiche e comunicative</a>
-        <a href="./link3">Il tempo libero e i luoghi del tempo libero</a>
-        <a href="./link4">Chiedere di descrivere le proprie vacanze</a>
-      </z-breadcrumb>
-    </div>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-breadcrumb/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,yBAAyB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC;YAC3C,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;YACjD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,mBAAmB,CAAC,QAAQ;QACvC,eAAe,EAAE,yBAAyB,CAAC,IAAI;QAC/C,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,KAAK;QACvB,oBAAoB,EAAE,CAAC;QACvB,YAAY,EAAE,EAAE;KACjB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;qBAEa,IAAI,CAAC,SAAS;2BACR,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,cAAc;4BACjB,IAAI,CAAC,gBAAgB;gCACjB,IAAI,CAAC,oBAAoB;wBACjC,IAAI,CAAC,YAAY;;;;;;;;WAQ9B;CACsB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZBreadcrumb} from \".\";\nimport {BreadcrumbHomepageVariant, BreadcrumbPathStyle} from \"../../beans\";\nimport \"./index\";\nimport \"./style.stories.css\";\n\n/**\n * Breadcrumb is a relevant component for SEO oriented applications.\n * As the crawlers flatten the light dom and the shadow dom, it is important to move all the relevant SEO content in the light DOM, to not affect indexability.\n *\n * The component will handle the logic for generating the proper markup inside the shadow dom.\n * No slot is rendered inside the latter.\n * Like the other use case, don't pass a custom label to the first child because it will be overwritten by the default home value.\n * This mode can be also used by SEO non-relevant application.\n * @example```\n * <z-breadcrumb>\n *  <a href=\"./home_link\"></a>\n *  <a href=\"./link1\">link1</a>\n *  <a href=\"./link2\">link2</a>\n *  <a href=\"./link3\">link3</a>\n * </z-breadcrumb>```\n *\n * This component follows the accessibility guidelines provided by W3C https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/\n */\nconst StoryMeta = {\n  title: \"ZBreadcrumb\",\n  component: \"z-breadcrumb\",\n  argTypes: {\n    pathStyle: {\n      options: Object.values(BreadcrumbPathStyle),\n      control: {\n        type: \"select\",\n      },\n    },\n    homepageVariant: {\n      options: Object.values(BreadcrumbHomepageVariant),\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    pathStyle: BreadcrumbPathStyle.SEMIBOLD,\n    homepageVariant: BreadcrumbHomepageVariant.ICON,\n    maxNodesToShow: 5,\n    preventFollowUrl: false,\n    overflowMenuItemRows: 0,\n    truncateChar: 30,\n  },\n} satisfies Meta<ZBreadcrumb>;\n\nexport default StoryMeta;\n\nexport const Breadcrumb = {\n  render: (args) =>\n    html`<div class=\"z-breadcrumb-story-container\">\n      <z-breadcrumb\n        .pathStyle=${args.pathStyle}\n        .homepageVariant=${args.homepageVariant}\n        .maxNodesToShow=${args.maxNodesToShow}\n        .preventFollowUrl=${args.preventFollowUrl}\n        .overflowMenuItemRows=${args.overflowMenuItemRows}\n        .truncateChar=${args.truncateChar}\n      >\n        <a href=\"https://www.zanichelli.it\"></a>\n        <a href=\"./link1\">Lingua inglese - Scuola secondaria di primo grado</a>\n        <a href=\"./link2\">Lingua Inglese - Lessico e funzioni linguistiche e comunicative</a>\n        <a href=\"./link3\">Il tempo libero e i luoghi del tempo libero</a>\n        <a href=\"./link4\">Chiedere di descrivere le proprie vacanze</a>\n      </z-breadcrumb>\n    </div>`,\n} satisfies StoryObj<ZBreadcrumb>;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAa,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAE7F;;GAEG;AAOH,MAAM,OAAO,OAAO;;yBAKc,SAAS;oBAOlC,EAAE;;;;;;wBAwBY,KAAK;oBAIN,UAAU,CAAC,MAAM;uBAIX,aAAa,CAAC,OAAO;;4BAQjB,YAAY,CAAC,IAAI;oBAIb,WAAW,CAAC,GAAG;;IAEzC,aAAa;QACnB,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI;gBAC3B,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;aAC5D;SACF,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,yBACM,IAAI,CAAC,aAAa,EAAE,kBACZ,IAAI,CAAC,SAAS,IAAI,SAAS,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBAElB,IAAI,CAAC,UAAU,EAAE;gBAClB,eAAQ,CACN,CACL,CAAC;QACJ,CAAC;QAED,OAAO,CACL,8BACM,IAAI,CAAC,aAAa,EAAE,kBACZ,IAAI,CAAC,SAAS,IAAI,SAAS,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS;YAE5C,IAAI,CAAC,UAAU,EAAE;YAClB,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * **Deprecated:** Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private getAttributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": !!this.hostElement.textContent.trim(),\n      },\n    };\n  }\n\n  private renderIcon(): JSX.Element | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          {...this.getAttributes()}\n          aria-label={this.ariaLabel || undefined}\n          href={this.href}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.getAttributes()}\n        aria-label={this.ariaLabel || undefined}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={this.htmlrole || this.role || undefined}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"]}

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

@@ -1,104 +0,0 @@
-import { html } from "lit";
-import { ButtonVariant, ControlSize, IconPosition } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZButton",
-    component: "z-button",
-    args: {
-        variant: ButtonVariant.PRIMARY,
-        size: ControlSize.BIG,
-        disabled: false,
-        icon: "download",
-        iconPosition: IconPosition.LEFT,
-        ariaLabel: "Clicca sul bottone",
-        htmlrole: "button",
-    },
-    argTypes: {
-        variant: {
-            options: Object.values(ButtonVariant),
-            control: { type: "inline-radio" },
-        },
-        size: {
-            options: Object.values(ControlSize),
-            control: { type: "inline-radio" },
-        },
-        iconPosition: {
-            options: Object.values(IconPosition),
-            control: { type: "inline-radio" },
-        },
-    },
-    render: (args) => html `<z-button
-      variant=${args.variant}
-      size=${args.size}
-      disabled=${args.disabled}
-      icon=${args.icon}
-      .iconPosition=${args.iconPosition}
-      .ariaLabel=${args.ariaLabel}
-      htmlrole=${args.htmlrole}
-    >
-      Click me
-    </z-button>`,
-};
-export default StoryMeta;
-export const Primary = {};
-export const SecondaryXSmall = {
-    args: {
-        variant: ButtonVariant.SECONDARY,
-        size: ControlSize.X_SMALL,
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant", "icon"],
-        },
-    },
-};
-export const TertiarySmall = {
-    args: {
-        variant: ButtonVariant.TERTIARY,
-        size: ControlSize.SMALL,
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant", "icon"],
-        },
-    },
-};
-export const IconOnly = {
-    render: (args) => html `<z-button
-      variant=${args.variant}
-      size=${args.size}
-      disabled=${args.disabled}
-      icon=${args.icon}
-      .iconPosition=${args.iconPosition}
-      .ariaLabel=${args.ariaLabel}
-      htmlrole=${args.htmlrole}
-    />`,
-};
-export const LinkButton = {
-    args: {
-        icon: "arrow-quad-north-east",
-        href: "https://wikipedia.com",
-        target: "_blank",
-        role: "link",
-    },
-    render: (args) => html `<z-button
-      variant=${args.variant}
-      size=${args.size}
-      disabled=${args.disabled}
-      icon=${args.icon}
-      .iconPosition=${args.iconPosition}
-      .ariaLabel=${args.ariaLabel}
-      htmlrole=${args.htmlrole}
-      href=${args.href}
-      target=${args.target}
-    >
-      Go to wikipedia
-    </z-button>`,
-};
-export const IconRight = {
-    args: {
-        icon: "arrow-right",
-        iconPosition: IconPosition.RIGHT,
-    },
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-button/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZButton} from \".\";\nimport {ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZButton\",\n  component: \"z-button\",\n  args: {\n    variant: ButtonVariant.PRIMARY,\n    size: ControlSize.BIG,\n    disabled: false,\n    icon: \"download\",\n    iconPosition: IconPosition.LEFT,\n    ariaLabel: \"Clicca sul bottone\",\n    htmlrole: \"button\",\n  },\n  argTypes: {\n    variant: {\n      options: Object.values(ButtonVariant),\n      control: {type: \"inline-radio\"},\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {type: \"inline-radio\"},\n    },\n    iconPosition: {\n      options: Object.values(IconPosition),\n      control: {type: \"inline-radio\"},\n    },\n  },\n  render: (args) =>\n    html`<z-button\n      variant=${args.variant}\n      size=${args.size}\n      disabled=${args.disabled}\n      icon=${args.icon}\n      .iconPosition=${args.iconPosition}\n      .ariaLabel=${args.ariaLabel}\n      htmlrole=${args.htmlrole}\n    >\n      Click me\n    </z-button>`,\n} satisfies Meta<ZButton>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZButton>;\n\nexport const Primary = {};\n\nexport const SecondaryXSmall = {\n  args: {\n    variant: ButtonVariant.SECONDARY,\n    size: ControlSize.X_SMALL,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"icon\"],\n    },\n  },\n} satisfies Story;\n\nexport const TertiarySmall = {\n  args: {\n    variant: ButtonVariant.TERTIARY,\n    size: ControlSize.SMALL,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"icon\"],\n    },\n  },\n} satisfies Story;\n\nexport const IconOnly = {\n  render: (args) =>\n    html`<z-button\n      variant=${args.variant}\n      size=${args.size}\n      disabled=${args.disabled}\n      icon=${args.icon}\n      .iconPosition=${args.iconPosition}\n      .ariaLabel=${args.ariaLabel}\n      htmlrole=${args.htmlrole}\n    />`,\n} satisfies Story;\n\nexport const LinkButton = {\n  args: {\n    icon: \"arrow-quad-north-east\",\n    href: \"https://wikipedia.com\",\n    target: \"_blank\",\n    role: \"link\",\n  },\n  render: (args) =>\n    html`<z-button\n      variant=${args.variant}\n      size=${args.size}\n      disabled=${args.disabled}\n      icon=${args.icon}\n      .iconPosition=${args.iconPosition}\n      .ariaLabel=${args.ariaLabel}\n      htmlrole=${args.htmlrole}\n      href=${args.href}\n      target=${args.target}\n    >\n      Go to wikipedia\n    </z-button>`,\n} satisfies Story;\n\nexport const IconRight = {\n  args: {\n    icon: \"arrow-right\",\n    iconPosition: IconPosition.RIGHT,\n  },\n} satisfies Story;\n"]}

package/dist/collection/components/z-button-sort/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-button-sort/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AAMxD,MAAM,OAAO,WAAW;;;;;;4BAmBE,KAAK;6BAIJ,KAAK;0BAIP,KAAK;uBAIR,IAAI;4BAGT,KAAK;;IAQZ,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;YACxE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAEzC,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,KAAK,EAAC,UAAU,IAEf,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CACzD;YACP,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,CAAQ;YACnE,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAQ;YACjF,+DACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-button-sort/index.stories.js

@@ -1,31 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZButtonSort",
-    args: {
-        label: "sort",
-        counter: 3,
-        desclabel: "label DESC",
-        sortlabelasc: "1-9",
-        sortlabeldesc: "9-1",
-        isselected: true,
-        sortasc: true,
-    },
-    render: (args) => html `<z-button-sort
-      label="${args.label}"
-      counter="${args.counter}"
-      desclabel="${args.desclabel}"
-      sortlabelasc="${args.sortlabelasc}"
-      sortlabeldesc="${args.sortlabeldesc}"
-      isselected="${args.isselected}"
-      sortasc="${args.sortasc}"
-    ></z-button-sort>`,
-};
-export default StoryMeta;
-export const Default = {};
-export const Ellipsis = {
-    args: {
-        label: "Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più",
-    },
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-button-sort/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,YAAY;QACvB,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;eACO,IAAI,CAAC,KAAK;iBACR,IAAI,CAAC,OAAO;mBACV,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;uBAChB,IAAI,CAAC,aAAa;oBACrB,IAAI,CAAC,UAAU;iBAClB,IAAI,CAAC,OAAO;sBACP;CACO,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,iFAAiF;KACzF;CACc,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport type {ZButtonSort} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZButtonSort\",\n  args: {\n    label: \"sort\",\n    counter: 3,\n    desclabel: \"label DESC\",\n    sortlabelasc: \"1-9\",\n    sortlabeldesc: \"9-1\",\n    isselected: true,\n    sortasc: true,\n  },\n  render: (args) =>\n    html`<z-button-sort\n      label=\"${args.label}\"\n      counter=\"${args.counter}\"\n      desclabel=\"${args.desclabel}\"\n      sortlabelasc=\"${args.sortlabelasc}\"\n      sortlabeldesc=\"${args.sortlabeldesc}\"\n      isselected=\"${args.isselected}\"\n      sortasc=\"${args.sortasc}\"\n    ></z-button-sort>`,\n} satisfies Meta<ZButtonSort>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZButtonSort>;\n\nexport const Default = {};\n\nexport const Ellipsis = {\n  args: {\n    label: \"Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più\",\n  },\n} satisfies Story;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,KAAK;;;;0BAeH,KAAK;yBAON,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,aAAa;oBACtB,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,UAAU,GAAQ;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,WAAK,KAAK,EAAC,SAAS;oBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,UAAU,GAAQ;YAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;YACzB,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YACtC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;QAC7C,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC/D,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,aAAa,IAAI;wBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;wBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;qBAClG;oBACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD;gBACL,IAAI,CAAC,aAAa,EAAE,CAChB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /**\n   * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n   * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n   */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"]}

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

@@ -1,303 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { CardVariant } from "../../beans";
-import "../z-icon/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZCard",
-    component: "z-card",
-    argTypes: {
-        variant: {
-            control: {
-                type: "inline-radio",
-                labels: {
-                    null: "default",
-                },
-            },
-            options: [null, ...Object.values(CardVariant)],
-        },
-    },
-    args: {
-        variant: null,
-        showShadow: false,
-        clickable: false,
-    },
-};
-export default StoryMeta;
-export const WithImage = {
-    render: (args) => html `
-    <z-card
-      class="demo-card"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-    >
-      <img
-        slot="cover"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <span
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </span>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-  `,
-};
-export const WithImageAndIcon = {
-    args: {
-        coverIcon: "play-filled",
-    },
-    render: (args) => html `
-    <z-card
-      class="demo-card"
-      cover-icon="${args.coverIcon}"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-    >
-      <img
-        slot="cover"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-  `,
-};
-export const ColorCover = {
-    args: {
-        "--z-card--color-cover-background": "var(--yellow500)",
-    },
-    render: (args) => html `
-    <z-card
-      class="demo-card"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-      style="--z-card--color-cover-background: ${args["--z-card--color-cover-background"]};"
-    >
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-  `,
-};
-export const TextVariantPrimaryBackground = {
-    args: {
-        "--z-card--text-border-radius": "4px",
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant"],
-        },
-    },
-    render: (args) => html `
-    <z-card
-      class="text-variant-card"
-      variant="text"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-      style=${styleMap({
-        "--z-card--text-background": "var(--color-primary01)",
-        "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
-        "color": "var(--color-text-inverse)",
-    })}
-    >
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action">
-        <z-icon
-          name="share"
-          fill="color-surface01"
-        ></z-icon>
-      </button>
-      <button slot="action">
-        <z-icon
-          name="delete"
-          fill="color-surface01"
-        ></z-icon>
-      </button>
-    </z-card>
-  `,
-};
-export const TextVariantSurfaceBackgroundAndBordered = {
-    args: {
-        "--z-card--text-border": "2px solid var(--gray800)",
-        "--z-card--text-border-radius": "4px",
-        "--z-card--text-padding": "16px 8px",
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant"],
-        },
-    },
-    render: (args) => html `<z-card
-      class="text-variant-card"
-      variant="text"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-      style=${styleMap({
-        "--z-card--text-background": `var(--color-surface01)`,
-        "--z-card--text-border": `${args["--z-card--text-border"]}`,
-        "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
-        "--z-card--text-padding": `${args["--z-card--text-padding"]}`,
-    })}
-    >
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action">
-        <z-icon
-          name="share"
-          fill="color-primary01"
-        ></z-icon>
-      </button>
-      <button slot="action">
-        <z-icon
-          name="delete"
-          fill="color-primary01"
-        ></z-icon>
-      </button>
-    </z-card>`,
-};
-export const WithImageAndClickListener = {
-    parameters: {
-        controls: {
-            exclude: ["clickable", "showShadow"],
-        },
-    },
-    render: (args) => html `
-    <script>
-      window.cardClickCount = 0;
-      document.getElementById("btn-card").addEventListener("click", (e) => {
-        window.cardClickCount = window.cardClickCount + 1;
-        const alertBox = document.getElementById("click-alert-container");
-        if (!alertBox) {
-          return;
-        }
-
-        alertBox.innerText = "Card click count: " + window.cardClickCount;
-      });
-    </script>
-    <z-card
-      class="demo-card"
-      variant=${args.variant}
-      clickable
-    >
-      <img
-        slot="cover"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <span
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </span>
-      <button
-        id="btn-card"
-        slot="title"
-      >
-        <span>Card title</span>
-      </button>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-    <div id="click-alert-container">Card click count: 0</div>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-card/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 {ZCard} from \".\";\nimport {CardVariant} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCardStoriesArgs = ZCard &\n  CSSVarsArguments<\n    | \"z-card--color-cover-background\"\n    | \"z-card--color-cover-background\"\n    | \"z-card--text-border\"\n    | \"z-card--text-border-radius\"\n    | \"z-card--text-padding\"\n  >;\nconst StoryMeta = {\n  title: \"ZCard\",\n  component: \"z-card\",\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n        labels: {\n          null: \"default\",\n        },\n      },\n      options: [null, ...Object.values(CardVariant)],\n    },\n  },\n  args: {\n    variant: null,\n    showShadow: false,\n    clickable: false,\n  },\n} satisfies Meta<ZCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCardStoriesArgs>;\n\nexport const WithImage = {\n  render: (args) => html`\n    <z-card\n      class=\"demo-card\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n    >\n      <img\n        slot=\"cover\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <span\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </span>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const WithImageAndIcon = {\n  args: {\n    coverIcon: \"play-filled\",\n  },\n  render: (args) => html`\n    <z-card\n      class=\"demo-card\"\n      cover-icon=\"${args.coverIcon}\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n    >\n      <img\n        slot=\"cover\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const ColorCover = {\n  args: {\n    \"--z-card--color-cover-background\": \"var(--yellow500)\",\n  },\n  render: (args) => html`\n    <z-card\n      class=\"demo-card\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n      style=\"--z-card--color-cover-background: ${args[\"--z-card--color-cover-background\"]};\"\n    >\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const TextVariantPrimaryBackground = {\n  args: {\n    \"--z-card--text-border-radius\": \"4px\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\"],\n    },\n  },\n  render: (args) => html`\n    <z-card\n      class=\"text-variant-card\"\n      variant=\"text\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n      style=${styleMap({\n        \"--z-card--text-background\": \"var(--color-primary01)\",\n        \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n        \"color\": \"var(--color-text-inverse)\",\n      })}\n    >\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\">\n        <z-icon\n          name=\"share\"\n          fill=\"color-surface01\"\n        ></z-icon>\n      </button>\n      <button slot=\"action\">\n        <z-icon\n          name=\"delete\"\n          fill=\"color-surface01\"\n        ></z-icon>\n      </button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const TextVariantSurfaceBackgroundAndBordered = {\n  args: {\n    \"--z-card--text-border\": \"2px solid var(--gray800)\",\n    \"--z-card--text-border-radius\": \"4px\",\n    \"--z-card--text-padding\": \"16px 8px\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\"],\n    },\n  },\n  render: (args) =>\n    html`<z-card\n      class=\"text-variant-card\"\n      variant=\"text\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n      style=${styleMap({\n        \"--z-card--text-background\": `var(--color-surface01)`,\n        \"--z-card--text-border\": `${args[\"--z-card--text-border\"]}`,\n        \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n        \"--z-card--text-padding\": `${args[\"--z-card--text-padding\"]}`,\n      })}\n    >\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\">\n        <z-icon\n          name=\"share\"\n          fill=\"color-primary01\"\n        ></z-icon>\n      </button>\n      <button slot=\"action\">\n        <z-icon\n          name=\"delete\"\n          fill=\"color-primary01\"\n        ></z-icon>\n      </button>\n    </z-card>`,\n} satisfies Story;\n\nexport const WithImageAndClickListener = {\n  parameters: {\n    controls: {\n      exclude: [\"clickable\", \"showShadow\"],\n    },\n  },\n  render: (args) => html`\n    <script>\n      window.cardClickCount = 0;\n      document.getElementById(\"btn-card\").addEventListener(\"click\", (e) => {\n        window.cardClickCount = window.cardClickCount + 1;\n        const alertBox = document.getElementById(\"click-alert-container\");\n        if (!alertBox) {\n          return;\n        }\n\n        alertBox.innerText = \"Card click count: \" + window.cardClickCount;\n      });\n    </script>\n    <z-card\n      class=\"demo-card\"\n      variant=${args.variant}\n      clickable\n    >\n      <img\n        slot=\"cover\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <span\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </span>\n      <button\n        id=\"btn-card\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </button>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n    <div id=\"click-alert-container\">Card click count: 0</div>\n  `,\n} satisfies Story;\n"]}