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

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.stories.js

@@ -1,41 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "Deprecated/ZMenuSection",
-    component: "z-menu-section-deprecated",
-    args: {
-        active: false,
-    },
-};
-export default StoryMeta;
-export const WithItems = {
-    render: (args) => html `
-    <z-menu-section-deprecated .active=${args.active}>
-      <h3>Label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <a
-        href=""
-        slot="item"
-        active
-        >Item 3 - active</a
-      >
-    </z-menu-section-deprecated>
-  `,
-};
-export const WithoutItems = {
-    render: (args) => html `
-    <z-menu-section-deprecated .active=${args.active}>
-      <h3>Label</h3>
-    </z-menu-section-deprecated>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-menu-section-deprecated/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,2BAA2B;IACtC,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CACqC,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yCACiB,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBjD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yCACiB,IAAI,CAAC,MAAM;;;GAGjD;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSectionDeprecated} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"Deprecated/ZMenuSection\",\n  component: \"z-menu-section-deprecated\",\n  args: {\n    active: false,\n  },\n} satisfies Meta<ZMenuSectionDeprecated>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSectionDeprecated>;\n\nexport const WithItems = {\n  render: (args) => html`\n    <z-menu-section-deprecated .active=${args.active}>\n      <h3>Label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        active\n        >Item 3 - active</a\n      >\n    </z-menu-section-deprecated>\n  `,\n} satisfies Story;\n\nexport const WithoutItems = {\n  render: (args) => html`\n    <z-menu-section-deprecated .active=${args.active}>\n      <h3>Label</h3>\n    </z-menu-section-deprecated>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/deprecated/z-section-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,4BAA4B,EAAC,MAAM,gBAAgB,CAAC;AAEzE;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG;YAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,IAAI,CAC1F,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH;YACD,6DAAM,IAAI,EAAC,eAAe,GAAG;YAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,IAAI,CACzF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/deprecated/z-section-title/index.stories.js

@@ -1,57 +0,0 @@
-import { html } from "lit";
-import { ZSectionTitleDividerPosition } from "../../../beans";
-import { getColorTokenArgConfig } from "../../../utils/storybook-utils";
-import "./index";
-/**
- * ⚠️ This component is **deprecated** and may be removed soon.
- * Use the typography tokens or classes instead (see `Typography/Typography classes` section).
- */
-const StoryMeta = {
-    title: "Deprecated/ZSectionTitle",
-    component: "z-section-title",
-    argTypes: {
-        "dividerPosition": {
-            options: Object.values(ZSectionTitleDividerPosition),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        "--z-section-title--divider-color": getColorTokenArgConfig(),
-    },
-    args: {
-        "uppercase": true,
-        "--z-section-title--divider-color": "var(--red500)",
-    },
-};
-export default StoryMeta;
-export const PrimaryTitleOnly = {
-    args: {
-        dividerPosition: ZSectionTitleDividerPosition.BEFORE,
-    },
-    render: (args) => html `
-    <z-section-title
-      .dividerPosition=${args.dividerPosition}
-      .uppercase=${args.uppercase}
-      .style="--z-section-title--divider-color: ${args["--z-section-title--divider-color"]}"
-    >
-      <h4 slot="primary-title">Primary title</h4>
-    </z-section-title>
-  `,
-};
-export const SecondaryTitle = {
-    parameters: {
-        controls: {
-            exclude: ["dividerPosition"],
-        },
-    },
-    render: (args) => html `
-    <z-section-title
-      .uppercase=${args.uppercase}
-      .style="--z-section-title--divider-color: ${args["--z-section-title--divider-color"]}"
-    >
-      <h5 slot="secondary-title">Secondary title</h5>
-      <h4 slot="primary-title">Primary title</h4>
-    </z-section-title>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/deprecated/z-section-title/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-section-title/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,4BAA4B,EAAC,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAmB,sBAAsB,EAAC,MAAM,gCAAgC,CAAC;AACxF,OAAO,SAAS,CAAC;AAIjB;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,iBAAiB,EAAE;YACjB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC;YACpD,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,kCAAkC,EAAE,sBAAsB,EAAE;KAC7D;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;QACjB,kCAAkC,EAAE,eAAe;KACpD;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,eAAe,EAAE,4BAA4B,CAAC,MAAM;KACrD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;mBAC1B,IAAI,CAAC,SAAS;kDACiB,IAAI,CAAC,kCAAkC,CAAC;;;;GAIvF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;SAC7B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;kDACiB,IAAI,CAAC,kCAAkC,CAAC;;;;;GAKvF;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZSectionTitle} from \".\";\nimport {ZSectionTitleDividerPosition} from \"../../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZSectionTitleStoriesArgs = ZSectionTitle & CSSVarsArguments<\"z-section-title--divider-color\">;\n\n/**\n * ⚠️ This component is **deprecated** and may be removed soon.\n * Use the typography tokens or classes instead (see `Typography/Typography classes` section).\n */\nconst StoryMeta = {\n  title: \"Deprecated/ZSectionTitle\",\n  component: \"z-section-title\",\n  argTypes: {\n    \"dividerPosition\": {\n      options: Object.values(ZSectionTitleDividerPosition),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    \"--z-section-title--divider-color\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"uppercase\": true,\n    \"--z-section-title--divider-color\": \"var(--red500)\",\n  },\n} satisfies Meta<ZSectionTitleStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSectionTitleStoriesArgs>;\n\nexport const PrimaryTitleOnly = {\n  args: {\n    dividerPosition: ZSectionTitleDividerPosition.BEFORE,\n  },\n  render: (args) => html`\n    <z-section-title\n      .dividerPosition=${args.dividerPosition}\n      .uppercase=${args.uppercase}\n      .style=\"--z-section-title--divider-color: ${args[\"--z-section-title--divider-color\"]}\"\n    >\n      <h4 slot=\"primary-title\">Primary title</h4>\n    </z-section-title>\n  `,\n} satisfies Story;\n\nexport const SecondaryTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"dividerPosition\"],\n    },\n  },\n  render: (args) => html`\n    <z-section-title\n      .uppercase=${args.uppercase}\n      .style=\"--z-section-title--divider-color: ${args[\"--z-section-title--divider-color\"]}\"\n    >\n      <h5 slot=\"secondary-title\">Secondary title</h5>\n      <h4 slot=\"primary-title\">Primary title</h4>\n    </z-section-title>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/file-upload/z-dragdrop-area/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOnF,MAAM,OAAO,aAAa;;;wBAOb,KAAK;;IAMR,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;YAE9B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-upload/z-file/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpG,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAQ3D,MAAM,OAAO,KAAK;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,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;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;IACvB,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,EAAC,IAAI;YACF,IAAI,CAAC,YAAY,IAAI,CACpB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI;gBAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb;YACD,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO;gBAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-file\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFile {\n  private icon: HTMLElement;\n\n  private ellipsis?: HTMLSpanElement;\n\n  private chip?: HTMLZChipElement;\n\n  /** File chip id */\n  @Prop()\n  fileNumber: number;\n\n  /** File name */\n  @Prop()\n  fileName: string;\n\n  @State()\n  allowPopover = false;\n\n  @State()\n  popoverVisible = false;\n\n  @Element() el: HTMLZFileElement;\n\n  /** Emitted when a z-file component is removed from the DOM */\n  @Event()\n  removeFile: EventEmitter;\n\n  private removeFileHandler(): void {\n    this.removeFile.emit({fileName: this.fileName});\n    this.el.remove();\n  }\n\n  @Listen(\"mouseover\")\n  onMouseOver(): void {\n    this.popoverVisible = true;\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave(): void {\n    this.popoverVisible = false;\n  }\n\n  @Listen(\"interactiveIconClick\")\n  onInteractiveIconClick(): void {\n    this.removeFileHandler();\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowPopover = true;\n    }\n\n    this.icon?.focus?.();\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLZFileElement {\n    return (\n      <Host>\n        {this.allowPopover && (\n          <z-popover\n            open={this.popoverVisible}\n            position={PopoverPosition.AUTO}\n            bindTo={this.chip}\n          >\n            <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n          </z-popover>\n        )}\n        <z-chip\n          ref={(el) => (this.chip = el as HTMLZChipElement)}\n          id={`chip-${this.fileNumber}`}\n          interactiveIcon=\"multiply-circled\"\n          type={ZChipType.DEFAULT}\n        >\n          <span\n            ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n            tabIndex={-1}\n          >\n            {this.fileName}\n          </span>\n        </z-chip>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-upload/z-file/index.stories.js

@@ -1,17 +0,0 @@
-import { html } from "lit";
-import "./index";
-export default {
-    title: "ZFile",
-    component: "z-file",
-};
-export const Default = {
-    args: {
-        fileNumber: 1,
-        fileName: "abcdefghilmnopqrst.jpg",
-    },
-    render: (args) => html `<z-file
-      file-number="${args.fileNumber}"
-      file-name="${args.fileName}"
-    ></z-file>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;CACE,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,wBAAwB;KACnC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,UAAU;mBACjB,IAAI,CAAC,QAAQ;eACjB;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFile} from \".\";\nimport \"./index\";\n\nexport default {\n  title: \"ZFile\",\n  component: \"z-file\",\n} satisfies Meta<ZFile>;\n\nexport const Default = {\n  args: {\n    fileNumber: 1,\n    fileName: \"abcdefghilmnopqrst.jpg\",\n  },\n  render: (args) =>\n    html`<z-file\n      file-number=\"${args.fileNumber}\"\n      file-name=\"${args.fileName}\"\n    ></z-file>`,\n} satisfies StoryObj<ZFile>;\n"]}

package/dist/collection/components/file-upload/z-file-upload/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\n\nexport type ZFileUploadError = {cause: \"format\" | \"size\"; message: string};\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** Value to set on the file input's `name` attribute (for use with forms) */\n  @Prop()\n  inputName? = \"z-file-upload\";\n\n  /**\n   * Whether to show errors in the internal modal or leave the handling to the app.\n   * Errors will still be emitted.\n   */\n  @Prop()\n  showErrors = true;\n\n  /** Internal store of the component type. It will change when viewport goes from desktop to tablet/mobile and vice versa */\n  @State()\n  private _type: ZFileUploadType = this.type;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** Map of files whose upload caused an error and the relative errors, with the cause and a message */\n  @State()\n  invalidFiles: Map<string, ZFileUploadError[]> = new Map<string, ZFileUploadError[]>();\n\n  /** Input ref */\n  @State()\n  private input: HTMLInputElement;\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter<File>;\n\n  /**\n   * Emits an array of error messages related to one or more files not allowed.\n   * Emitted when some file is dropped or selected.\n   */\n  @Event()\n  fileError: EventEmitter<{file: string; errors: ZFileUploadError[]}>;\n\n  @Element() host: HTMLZFileUploadElement;\n\n  private errorModal: HTMLZModalElement;\n\n  /** Listen `removeFile` event sent from z-file component */\n  @Listen(\"removeFile\")\n  onFileRemoved(e: CustomEvent): void {\n    this.removeFile(e.detail.fileName);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.checkFilesValidity(this.input.files);\n  }\n\n  /** Get the list of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** Remove a previously uploaded file */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    const files = this.files;\n    const index = files.findIndex((file) => file.name === fileName);\n    if (index >= 0) {\n      files.splice(index, 1);\n      this.files = [...files];\n    }\n  }\n\n  private checkFilesValidity(files: FileList): Map<string, string[]> {\n    if (!files.length) {\n      return;\n    }\n\n    Array.from(files).forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk && !this.files.find((f) => f.name === file.name)) {\n        this.files = [...this.files, file];\n        this.fileInput.emit(file);\n        this.input.value = \"\";\n\n        return;\n      }\n\n      const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;\n      const formatError = `Il file ${file.name} ha un formato non supportato`;\n      const errors = [\n        !fileSizeOk && {cause: \"size\" as const, message: sizeError},\n        !fileFormatOk && {cause: \"format\" as const, message: formatError},\n      ].filter(Boolean);\n      this.invalidFiles.set(file.name, errors);\n      this.invalidFiles = new Map(this.invalidFiles); // trigger state update\n      this.fileError.emit({file: file.name, errors});\n    });\n  }\n\n  private resetErrors(): void {\n    this.invalidFiles = new Map<string, ZFileUploadError[]>();\n  }\n\n  private onFilesChange(e: Event): void {\n    this.checkFilesValidity((e.target as HTMLInputElement).files);\n  }\n\n  componentWillLoad(): void {\n    // force default type on mobile and tablet viewport\n    const mql = window.matchMedia(\"(max-width: 1151px)\");\n    this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;\n    mql.addEventListener(\"change\", (e) => {\n      this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;\n    });\n  }\n\n  componentDidUpdate(): void {\n    if (!this.showErrors || !this.invalidFiles.size) {\n      return;\n    }\n\n    this.errorModal.open();\n  }\n\n  private renderDescription(cssClass): HTMLElement | undefined {\n    if (!this.description) {\n      return;\n    }\n\n    return (\n      <span\n        id=\"description\"\n        class={cssClass}\n      >\n        {this.description}\n      </span>\n    );\n  }\n\n  private renderAllowedFilesMessage(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const defaultMessage =\n      fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;\n\n    if (!this.allowedFilesMessage && !defaultMessage) {\n      return;\n    }\n\n    return <span class=\"allowed-files-message body-3\">{this.allowedFilesMessage || defaultMessage}</span>;\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={{\"files-container\": true, \"hidden\": !this.files.length}}>\n        <div class=\"uploaded-files-label heading-3-sb\">{this.uploadedFilesLabel}</div>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        type=\"file\"\n        name={this.inputName}\n        multiple\n        onChange={(e) => this.onFilesChange(e)}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n      this.renderInput(),\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFilesMessage(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFilesMessage()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private renderFileErrors(): HTMLElement[] {\n    return Array.from(this.invalidFiles).map(([fileName, errors]) => {\n      const prefix = `Il file ${fileName}`;\n\n      return (\n        <span class=\"error-message\">\n          Il file <span class=\"body-3-sb\">{fileName}</span>\n          {errors.map(({message}) => message.replace(prefix, \"\")).join(\" e \")}.\n        </span>\n      );\n    });\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        {this.mainTitle && (\n          <div\n            id=\"title\"\n            class=\"heading-3-sb\"\n          >\n            {this.mainTitle}\n          </div>\n        )}\n        {this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        {!!this.invalidFiles.size && this.showErrors && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => this.resetErrors()}\n            onModalBackgroundClick={() => this.resetErrors()}\n          >\n            <div slot=\"modalContent\">\n              <div class=\"modal-wrapper body-3\">\n                {this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()}\n              </div>\n            </div>\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-upload/z-file-upload/index.stories.js

@@ -1,140 +0,0 @@
-import { html } from "lit";
-import { ButtonVariant, ZFileUploadType } from "../../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZFileUpload",
-    component: "z-file-upload",
-    argTypes: {
-        type: {
-            options: Object.values(ZFileUploadType),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        buttonVariant: {
-            options: Object.values(ButtonVariant),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        fileMaxSize: 50,
-        acceptedFormat: ".pdf, .doc, .tiff, .png, .jpg",
-        mainTitle: "Allega un file",
-        description: "Vuoi allegare un file per chiarire meglio la tua richiesta?",
-        uploadBtnLabel: "allega",
-        hasFileSection: true,
-        showErrors: true,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        buttonVariant: ButtonVariant.PRIMARY,
-    },
-    render: (args) => html `<h4 class="heading-4">
-        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
-        using it!
-      </h4>
-      <z-file-upload
-        type=${ZFileUploadType.DEFAULT}
-        .showErrors=${args.showErrors}
-        .hasFileSection=${args.hasFileSection}
-        description="${args.description}"
-        .buttonVariant=${args.buttonVariant}
-        .fileMaxSize=${args.fileMaxSize}
-        .acceptedFormat=${args.acceptedFormat}
-        .mainTitle=${args.mainTitle}
-        .uploadBtnLabel=${args.uploadBtnLabel}
-      />
-      <script>
-        fileNumber = 0;
-        document.addEventListener("fileInput", (e) => {
-          fileNumber++;
-          const item = e.detail;
-          const chip = document.createElement("Z-FILE");
-          chip.setAttribute("slot", "files");
-          chip.setAttribute("file-number", fileNumber);
-          chip.setAttribute("file-name", item.name);
-          document.querySelector("z-file-upload")?.appendChild(chip);
-        });
-      </script>`,
-};
-export const Dragdrop = {
-    args: {
-        dragAndDropLabel: "Rilascia i file in questa area per allegarli.",
-    },
-    render: (args) => html `<h4 class="heading-4">
-        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
-        using it!
-      </h4>
-      <br />
-      <z-file-upload
-        type=${ZFileUploadType.DRAGDROP}
-        .showErrors=${args.showErrors}
-        .hasFileSection=${args.hasFileSection}
-        description="${args.description}"
-        .fileMaxSize=${args.fileMaxSize}
-        .acceptedFormat=${args.acceptedFormat}
-        .mainTitle=${args.mainTitle}
-        .dragAndDropLabel=${args.dragAndDropLabel}
-      />
-      <script>
-        document.addEventListener("fileInput", (e) => {
-          const item = e.detail;
-          const chip = document.createElement("Z-FILE");
-          chip.setAttribute("slot", "files");
-          chip.setAttribute("filetype", item.type);
-          chip.setAttribute("file-name", item.name);
-          document.querySelector("z-file-upload")?.appendChild(chip);
-        });
-      </script>`,
-};
-export const DragdropEnglish = {
-    args: {
-        mainTitle: "Attach a file",
-        description: "Do you want to attach a file to clarify your request?",
-        uploadBtnLabel: "Attach",
-        dragAndDropLabel: "Drop the image here",
-        allowedFilesMessage: "You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB",
-        uploadClickableMessage: "Load",
-        uploadMessage: "or drag from your computer",
-        errorModalTitle: "Loading error",
-        errorModalMessage: "The file does not respect the allowed parameters.",
-        uploadedFilesLabel: "Uploaded files",
-    },
-    render: (args) => html `<h4 class="heading-4">
-        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
-        using it!
-      </h4>
-      <br />
-      <z-file-upload
-        type=${ZFileUploadType.DRAGDROP}
-        .showErrors=${args.showErrors}
-        .hasFileSection=${args.hasFileSection}
-        description="${args.description}"
-        .fileMaxSize=${args.fileMaxSize}
-        .acceptedFormat=${args.acceptedFormat}
-        .mainTitle=${args.mainTitle}
-        .dragAndDropLabel=${args.dragAndDropLabel}
-        .allowedFilesMessage=${args.allowedFilesMessage}
-        .uploadClickableMessage=${args.uploadClickableMessage}
-        .uploadMessage=${args.uploadMessage}
-        .errorModalTitle=${args.errorModalTitle}
-        .errorModalMessage=${args.errorModalMessage}
-        .uploadedFilesLabel=${args.uploadedFilesLabel}
-        .uploadBtnLabel=${args.uploadBtnLabel}
-      />
-      <script>
-        document.addEventListener("fileInput", (e) => {
-          const item = e.detail;
-          const chip = document.createElement("Z-FILE");
-          chip.setAttribute("slot", "files");
-          chip.setAttribute("filetype", item.type);
-          chip.setAttribute("file-name", item.name);
-          document.querySelector("z-file-upload")?.appendChild(chip);
-        });
-      </script>`,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZFileUpload\",\n  component: \"z-file-upload\",\n  argTypes: {\n    type: {\n      options: Object.values(ZFileUploadType),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    buttonVariant: {\n      options: Object.values(ButtonVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    fileMaxSize: 50,\n    acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n    mainTitle: \"Allega un file\",\n    description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n    uploadBtnLabel: \"allega\",\n    hasFileSection: true,\n    showErrors: true,\n  },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n  args: {\n    buttonVariant: ButtonVariant.PRIMARY,\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <z-file-upload\n        type=${ZFileUploadType.DEFAULT}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .buttonVariant=${args.buttonVariant}\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      />\n      <script>\n        fileNumber = 0;\n        document.addEventListener(\"fileInput\", (e) => {\n          fileNumber++;\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"file-number\", fileNumber);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n  args: {\n    dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n      />\n      <script>\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const DragdropEnglish = {\n  args: {\n    mainTitle: \"Attach a file\",\n    description: \"Do you want to attach a file to clarify your request?\",\n    uploadBtnLabel: \"Attach\",\n    dragAndDropLabel: \"Drop the image here\",\n    allowedFilesMessage: \"You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB\",\n    uploadClickableMessage: \"Load\",\n    uploadMessage: \"or drag from your computer\",\n    errorModalTitle: \"Loading error\",\n    errorModalMessage: \"The file does not respect the allowed parameters.\",\n    uploadedFilesLabel: \"Uploaded files\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n        .allowedFilesMessage=${args.allowedFilesMessage}\n        .uploadClickableMessage=${args.uploadClickableMessage}\n        .uploadMessage=${args.uploadMessage}\n        .errorModalTitle=${args.errorModalTitle}\n        .errorModalMessage=${args.errorModalMessage}\n        .uploadedFilesLabel=${args.uploadedFilesLabel}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      />\n      <script>\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n"]}

package/dist/collection/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role = \"list\";\n\n  private setChildrenSizeType(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setChildrenSizeType();\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,185 +0,0 @@
-import { html } from "lit";
-import { ListSize, ListType } from "../../../beans";
-import "../z-list-element/index";
-import "../z-list-group/index";
-import "./index";
-const StoryMeta = {
-    title: "ZList/ZList",
-    component: "z-list",
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ListSize),
-        },
-        listType: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ListType),
-        },
-    },
-    args: {
-        size: ListSize.MEDIUM,
-        listType: ListType.NONE,
-    },
-    render: (args) => html `
-    <z-list
-      .listType=${args.listType}
-      size=${args.size}
-    >
-      <z-list-element
-        .listType=${args.listType}
-        size=${args.size}
-        >Elemento 1</z-list-element
-      >
-      <z-list-element
-        .listType=${args.listType}
-        size=${args.size}
-        >Elemento 2</z-list-element
-      >
-      <z-list-element
-        .listType=${args.listType}
-        size=${args.size}
-        >Elemento 3</z-list-element
-      >
-    </z-list>
-  `,
-};
-export default StoryMeta;
-export const Default = {};
-export const HeaderDivider = {
-    render: (args) => html `<z-list>
-      <z-list-group divider-type="header">
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-      <z-list-group divider-type="header">
-        <div slot="header-title">Gruppo 2</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-    </z-list>`,
-};
-export const ElementDivider = {
-    render: (args) => html `<z-list>
-      <z-list-group divider-type="element">
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-      <z-list-group divider-type="element">
-        <div slot="header-title">Gruppo 2</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-    </z-list>`,
-};
-export const ClickableElements = {
-    render: () => html `<z-list>
-      <z-list-group>
-        <z-list-element clickable>Elemento 1</z-list-element>
-        <z-list-element clickable>Elemento 2</z-list-element>
-        <z-list-element clickable>Elemento 3</z-list-element>
-      </z-list-group>
-    </z-list>`,
-};
-export const ExpandableElements = {
-    render: () => html `<z-list size="large">
-      <z-list-group divider-type="element">
-        <z-list-element
-          expandable
-          align-button="left"
-          expandable-style="accordion"
-          ><span>Elemento 1</span><span slot="inner-content">INNER CONTENT 1 BUTTON LEFT</span></z-list-element
-        >
-        <z-list-element
-          expandable
-          align-button="right"
-          expandable-style="menu"
-          ><span>Elemento 2</span><span slot="inner-content">INNER CONTENT 2</span></z-list-element
-        >
-        <z-list-element
-          expandable
-          align-button="right"
-          expandable-style="menu"
-          ><span>Elemento 3</span><span slot="inner-content">INNER CONTENT 3</span></z-list-element
-        >
-      </z-list-group>
-    </z-list>`,
-};
-export const UnorderedIndex = {
-    parameters: {
-        controls: {
-            exclude: ["size", "listType"],
-        },
-    },
-    args: {
-        listType: ListType.UNORDERED,
-    },
-};
-export const OrderedIndex = {
-    parameters: {
-        controls: {
-            exclude: ["size", "listType"],
-        },
-    },
-    args: {
-        listType: ListType.ORDERED,
-    },
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZList} from \".\";\nimport {ListSize, ListType} from \"../../../beans\";\nimport \"../z-list-element/index\";\nimport \"../z-list-group/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZList/ZList\",\n  component: \"z-list\",\n  argTypes: {\n    size: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ListSize),\n    },\n    listType: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ListType),\n    },\n  },\n  args: {\n    size: ListSize.MEDIUM,\n    listType: ListType.NONE,\n  },\n  render: (args) => html`\n    <z-list\n      .listType=${args.listType}\n      size=${args.size}\n    >\n      <z-list-element\n        .listType=${args.listType}\n        size=${args.size}\n        >Elemento 1</z-list-element\n      >\n      <z-list-element\n        .listType=${args.listType}\n        size=${args.size}\n        >Elemento 2</z-list-element\n      >\n      <z-list-element\n        .listType=${args.listType}\n        size=${args.size}\n        >Elemento 3</z-list-element\n      >\n    </z-list>\n  `,\n} satisfies Meta<ZList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZList>;\n\nexport const Default = {} satisfies Story;\n\nexport const HeaderDivider = {\n  render: (args) =>\n    html`<z-list>\n      <z-list-group divider-type=\"header\">\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n      <z-list-group divider-type=\"header\">\n        <div slot=\"header-title\">Gruppo 2</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const ElementDivider = {\n  render: (args) =>\n    html`<z-list>\n      <z-list-group divider-type=\"element\">\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n      <z-list-group divider-type=\"element\">\n        <div slot=\"header-title\">Gruppo 2</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const ClickableElements = {\n  render: () =>\n    html`<z-list>\n      <z-list-group>\n        <z-list-element clickable>Elemento 1</z-list-element>\n        <z-list-element clickable>Elemento 2</z-list-element>\n        <z-list-element clickable>Elemento 3</z-list-element>\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const ExpandableElements = {\n  render: () =>\n    html`<z-list size=\"large\">\n      <z-list-group divider-type=\"element\">\n        <z-list-element\n          expandable\n          align-button=\"left\"\n          expandable-style=\"accordion\"\n          ><span>Elemento 1</span><span slot=\"inner-content\">INNER CONTENT 1 BUTTON LEFT</span></z-list-element\n        >\n        <z-list-element\n          expandable\n          align-button=\"right\"\n          expandable-style=\"menu\"\n          ><span>Elemento 2</span><span slot=\"inner-content\">INNER CONTENT 2</span></z-list-element\n        >\n        <z-list-element\n          expandable\n          align-button=\"right\"\n          expandable-style=\"menu\"\n          ><span>Elemento 3</span><span slot=\"inner-content\">INNER CONTENT 3</span></z-list-element\n        >\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const UnorderedIndex = {\n  parameters: {\n    controls: {\n      exclude: [\"size\", \"listType\"],\n    },\n  },\n  args: {\n    listType: ListType.UNORDERED,\n  },\n} satisfies Story;\n\nexport const OrderedIndex = {\n  parameters: {\n    controls: {\n      exclude: [\"size\", \"listType\"],\n    },\n  },\n  args: {\n    listType: ListType.ORDERED,\n  },\n} satisfies Story;\n"]}

package/dist/collection/components/list/z-list-element/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACpG,OAAO,EACL,WAAW,EACX,yBAAyB,EACzB,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,QAAQ,GACT,MAAM,gBAAgB,CAAC;AAOxB,MAAM,OAAO,YAAY;IA+BvB,sBAAsB,CAAC,CAAc;QACnC,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC;YACpC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YACrF,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IA8GD;;OAEG;IACH;QAdQ,sBAAiB,GAAG;YAC1B,SAAS,EAAE;gBACT,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,cAAc;aACtB;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,cAAc;aACtB;SACF,CAAC;2BAtGwC,yBAAyB,CAAC,IAAI;yBAMlD,KAAK;4BAMH,iBAAiB;2BAMT,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;0BAMtB,KAAK;+BAMY,mBAAmB,CAAC,SAAS;;oBAYnD,QAAQ,CAAC,MAAM;qBAMhB,MAAM;wBAMF,KAAK;mCAMK,GAAG;wBAMZ,QAAQ,CAAC,IAAI;;oBAY5B,UAAU;4BAIc,CAAC;gCAGb,KAAK;QAiBtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpD;IAED;;;OAGG;IACK,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACjD,CAAC;IAEO,aAAa,CAAC,KAAK;QACzB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,CAAC;QACtD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,YAAY,CAAC,UAAU;gBAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,YAAY,CAAC,QAAQ;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,YAAY,CAAC,KAAK;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACxC,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACjD,CAAC;IAED;;;OAGG;IACK,sBAAsB;QAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,cACE,IAAI,EACF,IAAI,CAAC,gBAAgB;gBACnB,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI;gBACnD,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,GAExD,CACH,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,qBAAqB;QAC3B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,WACE,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;gBACtC,UAAU,EAAE,IAAI,CAAC,gBAAgB;aAClC;YAED,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,aAAa;QACnB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;YACpC,OAAO,eAAQ,CAAC;QAClB,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACvC,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B;gBACnC;oBAAM,IAAI,CAAC,mBAAmB;8BAAc;gBAC5C,eAAQ,CACJ,CACP,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,EAAE,CAAC;YACzC,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B;gBACnC,+BAAyB;gBACzB,eAAQ,CACJ,CACP,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAC7D,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,EAChE,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAC3C,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAC3D,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;YAE5C,4DACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,WAAW,EACjE,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,EACxD,QAAQ,EAAC,IAAI,EACb,EAAE,EAAE,qBAAqB,IAAI,CAAC,aAAa,EAAE,EAC7C,IAAI,EAAC,qBAAqB;gBAE1B,4DAAK,KAAK,EAAC,0BAA0B;oBAClC,IAAI,CAAC,sBAAsB,EAAE;oBAC7B,IAAI,CAAC,aAAa,EAAE,CACjB;gBACL,IAAI,CAAC,qBAAqB,EAAE,CACzB;YACL,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,OAAO,IAAI,CAC/C,kEACE,KAAK,EAAE,EAAC,qBAAqB,EAAE,IAAI,CAAC,YAAY,EAAC,EACjD,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] Sets element as tree item.\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"listitem\";\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   * @returns void\n   */\n  private handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  /**\n   * Renders button to expand element.\n   * @returns expadable button\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   * @returns expanded content\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   * @returns list content\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.hasTreeItems ? undefined : this.htmlTabindex}\n        role={this.hasTreeItems ? \"none\" : this.role}\n      >\n        <div\n          class={this.hasTreeItems ? \"tree-element-container\" : \"container\"}\n          style={!this.disabled && {color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            class={{\"z-tree-list-divider\": this.hasTreeItems}}\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}