@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/collection/components/z-book-cover/index.js

@@ -14,14 +14,14 @@ import defaultFallbackCover from "../../assets/images/png/placeholder-cover.png"
  */
 export class ZBookCover {
     constructor() {
-        /** Whether to show a stack of covers to represent multiple books. */
+        this.cover = undefined;
+        this.fallbackCover = undefined;
         this.multiple = false;
-        /** Whether to apply a border around the cover image (always applied when `multiple` is enabled). */
         this.bordered = false;
     }
     render() {
         var _a;
-        return (h(Host, { key: '2d26511d2f6c57adf2b20c0a98b86b5c18ca3b55' }, this.multiple && (h(Fragment, { key: '79279147bd5526ec381ee54681e70f2601f7d606' }, h("div", { key: 'a58d293a70ae353b24deda1917ba06b46cd6cb69', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '34496473686299a655126cd1222d1ae88eadada8', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: 'd3ffeff92bfcb9a4cfc8a1d250e03bcbb8de8aa1', class: "cover-container" }, h("img", { key: '9e05370d50d32cdcf7c0ffed6f0c9db11219b393', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: 'dc7b2f10a9762234f43cd0857bbd6471f1d061e8', name: "coverOverlay" }))));
+        return (h(Host, { key: 'a39c5ae748e87831c5032997d7b98ec3884bce13' }, this.multiple && (h(Fragment, { key: 'ffbce1953710801b0967cef86d3f3d525a08e83a' }, h("div", { key: '29fa36521978e853ae6518cf39c62479f83fe876', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'a3922017b9e6d1492bb0a4d3f29ee3438a674f11', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '73141066121f7d8a66319962294af2f368fe4523', class: "cover-container" }, h("img", { key: '41de1cbfe5faae14c4e6c52e25e0f64a80792555', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '9c49173fd6a0234c960aa8ae612f026a24521231', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }
@@ -51,10 +51,8 @@ export class ZBookCover {
                     "tags": [],
                     "text": "URL of the cover image."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "cover"
+                "attribute": "cover",
+                "reflect": false
             },
             "fallbackCover": {
                 "type": "string",
@@ -70,10 +68,8 @@ export class ZBookCover {
                     "tags": [],
                     "text": "URL of the fallback cover image."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fallback-cover"
+                "attribute": "fallback-cover",
+                "reflect": false
             },
             "multiple": {
                 "type": "boolean",
@@ -89,10 +85,8 @@ export class ZBookCover {
                     "tags": [],
                     "text": "Whether to show a stack of covers to represent multiple books."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "multiple",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "bordered": {
@@ -109,12 +103,11 @@ export class ZBookCover {
                     "tags": [],
                     "text": "Whether to apply a border around the cover image (always applied when `multiple` is enabled)."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "bordered",
+                "reflect": true,
                 "defaultValue": "false"
             }
         };
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-book-cover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,oBAAoB,MAAM,+CAA+C,CAAC;AAEjF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,UAAU;;;;wBAWV,KAAK;wBAIL,KAAK;;IAEhB,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,CAChB,EAAC,QAAQ;gBACP,4DAAK,KAAK,EAAC,mCAAmC,GAAO;gBACrD,4DAAK,KAAK,EAAC,mCAAmC,GAAO,CAC5C,CACZ;YACD,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DACE,GAAG,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,oBAAoB,iBAC3B,MAAM,EAClB,GAAG,EAAC,EAAE,EACN,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,oBAAoB,CAAC,GACxE;gBACF,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Fragment, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../assets/images/png/placeholder-cover.png\";\n\n/**\n * This component displays a book cover image,\n * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.\n * The aspect ratio of the cover image is preserved.\n * Alignment of the image inside the container can be customized via CSS properties.\n *\n * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.\n * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.\n * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)\n * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)\n * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)\n */\n@Component({\n  tag: \"z-book-cover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCover {\n  /** URL of the cover image. */\n  @Prop()\n  cover: string;\n\n  /** URL of the fallback cover image. */\n  @Prop()\n  fallbackCover: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop({reflect: true})\n  multiple = false;\n\n  /** Whether to apply a border around the cover image (always applied when `multiple` is enabled). */\n  @Prop({reflect: true})\n  bordered = false;\n\n  render(): HTMLZBookCoverElement {\n    return (\n      <Host>\n        {this.multiple && (\n          <Fragment>\n            <div class=\"shifted-stack-cover stack-cover-2\"></div>\n            <div class=\"shifted-stack-cover stack-cover-1\"></div>\n          </Fragment>\n        )}\n        <div class=\"cover-container\">\n          <img\n            src={this.cover ?? defaultFallbackCover}\n            aria-hidden=\"true\"\n            alt=\"\"\n            onError={() => (this.cover = this.fallbackCover || defaultFallbackCover)}\n          />\n          <slot name=\"coverOverlay\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -28,3 +28,4 @@ export const Default = {
     })}
     ></z-book-cover>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-book-cover/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,SAAS,CAAC;AAUjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,OAAO,EAAE,6EAA6E;QACtF,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;QACjB,uBAAuB,EAAE,OAAO;QAChC,8BAA8B,EAAE,sBAAsB;QACtD,8BAA8B,EAAE,KAAK;QACrC,8BAA8B,EAAE,MAAM;KACvC;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;kBACN,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,CAAC;QACtD,8BAA8B,EAAE,IAAI,CAAC,8BAA8B,CAAC;QACpE,8BAA8B,EAAE,IAAI,CAAC,8BAA8B,CAAC;QACpE,8BAA8B,EAAE,IAAI,CAAC,8BAA8B,CAAC;KACrE,CAAC;qBACa;CACJ,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZBookCover} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZBookCoverStoriesArgs = ZBookCover &\n  CSSVarsArguments<\n    | \"--z-book-cover-height\"\n    | \"--z-book-cover-border-radius\"\n    | \"--z-book-cover-stack-shift-x\"\n    | \"--z-book-cover-stack-shift-y\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCover\",\n  component: \"z-book-cover\",\n  args: {\n    \"cover\": \"https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg\",\n    \"bordered\": false,\n    \"multiple\": false,\n    \"--z-book-cover-height\": \"378px\",\n    \"--z-book-cover-border-radius\": \"var(--border-radius)\",\n    \"--z-book-cover-stack-shift-x\": \"8px\",\n    \"--z-book-cover-stack-shift-y\": \"12px\",\n  },\n} satisfies Meta<ZBookCoverStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCoverStoriesArgs>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-book-cover\n      cover=${args.cover}\n      .bordered=${args.bordered}\n      .multiple=${args.multiple}\n      style=${styleMap({\n        \"--z-book-cover-height\": args[\"--z-book-cover-height\"],\n        \"--z-book-cover-border-radius\": args[\"--z-book-cover-border-radius\"],\n        \"--z-book-cover-stack-shift-x\": args[\"--z-book-cover-stack-shift-x\"],\n        \"--z-book-cover-stack-shift-y\": args[\"--z-book-cover-stack-shift-y\"],\n      })}\n    ></z-book-cover>`,\n} satisfies Story;\n"]}

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

@@ -1,26 +1,20 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { BreadcrumbHomepageVariant, BreadcrumbPathStyle, Device, KeyboardCode, ListSize, PopoverPosition, } from "../../beans";
 import { getDevice, handleKeyboardSubmit } from "../../utils/utils";
 export class ZBreadcrumb {
     constructor() {
-        /** [optional] Sets the path style */
+        this.collapsedElements = [];
+        this.currentIndex = 0;
+        this.truncatePosition = null;
         this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
-        /** [optional] Variant of first node */
         this.homepageVariant = BreadcrumbHomepageVariant.ICON;
-        /** [optional] Sets max number of element to show */
         this.maxNodesToShow = 5;
-        /** [optional] Controls the behaviour on <a> tag click/enter */
         this.preventFollowUrl = false;
-        /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
         this.overflowMenuItemRows = 0;
-        /** [optional] Sets the maximun number of chars per single node */
         this.truncateChar = 30;
-        /** Detect whether the length of the nodes shown exceeds the container length */
+        this.viewPortWidth = undefined;
         this.hasOverflow = false;
         this.popoverEllipsisOpen = false;
-        this.collapsedElements = [];
-        this.currentIndex = 0;
-        this.truncatePosition = null;
     }
     handleResize() {
         this.viewPortWidth = getDevice();
@@ -205,10 +199,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: 'b0e69674c7e600f237dd64db7aee54aa1a29529e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ab4672d78b961bf88e3cbe29a7a880c872b7370c', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'd1237ebe6e8f96e4b43f4197a85c0084050f076d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '03fb62eefc39de3f78890d857ae23fb4f4a3307f', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'bf1d0a0686b68240bcfd866012d3f4236b450bf1' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'bccdd02377c6bb41f54baf717c987fcef541d95a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -234,8 +228,7 @@ export class ZBreadcrumb {
                         "BreadcrumbPathStyle": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::BreadcrumbPathStyle",
-                            "referenceLocation": "BreadcrumbPathStyle"
+                            "id": "src/beans/index.tsx::BreadcrumbPathStyle"
                         }
                     }
                 },
@@ -245,10 +238,8 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets the path style"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "path-style",
+                "reflect": true,
                 "defaultValue": "BreadcrumbPathStyle.UNDERLINED"
             },
             "homepageVariant": {
@@ -261,8 +252,7 @@ export class ZBreadcrumb {
                         "BreadcrumbHomepageVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::BreadcrumbHomepageVariant",
-                            "referenceLocation": "BreadcrumbHomepageVariant"
+                            "id": "src/beans/index.tsx::BreadcrumbHomepageVariant"
                         }
                     }
                 },
@@ -272,10 +262,8 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Variant of first node"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "homepage-variant",
+                "reflect": false,
                 "defaultValue": "BreadcrumbHomepageVariant.ICON"
             },
             "maxNodesToShow": {
@@ -292,10 +280,8 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets max number of element to show"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "max-nodes-to-show",
+                "reflect": false,
                 "defaultValue": "5"
             },
             "preventFollowUrl": {
@@ -312,10 +298,8 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Controls the behaviour on <a> tag click/enter"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "prevent-follow-url",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "overflowMenuItemRows": {
@@ -332,10 +316,8 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets max number of row for each path inside the popover. Zero equals unlimited"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "overflow-menu-item-rows",
+                "reflect": false,
                 "defaultValue": "0"
             },
             "truncateChar": {
@@ -352,10 +334,8 @@ export class ZBreadcrumb {
                     "tags": [],
                     "text": "[optional] Sets the maximun number of chars per single node"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "truncate-char",
+                "reflect": false,
                 "defaultValue": "30"
             }
         };
@@ -385,8 +365,7 @@ export class ZBreadcrumb {
                         "BreadcrumbPath": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::BreadcrumbPath",
-                            "referenceLocation": "BreadcrumbPath"
+                            "id": "src/beans/index.tsx::BreadcrumbPath"
                         }
                     }
                 }
@@ -412,3 +391,4 @@ export class ZBreadcrumb {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-breadcrumb/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE) {\n      requestAnimationFrame(() => {\n        if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n          if (!this.hasOverflow) {\n            this.hasOverflow = true;\n          }\n        }\n      });\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -65,3 +65,4 @@ export const Breadcrumb = {
       </z-breadcrumb>
     </div>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

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

@@ -5,35 +5,26 @@ import { ButtonType, ButtonVariant, ControlSize, IconPosition } from "../../bean
  */
 export class ZButton {
     constructor() {
-        /** defines a string value that labels the internal interactive element. Used for accessibility. */
         this.ariaLabel = undefined;
-        /**
-         * **Deprecated:** Use `htmlrole` instead.
-         * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
-         */
         this.role = "";
-        /** HTML button disabled attribute. */
+        this.htmlrole = undefined;
+        this.href = undefined;
+        this.target = undefined;
+        this.htmlid = undefined;
+        this.name = undefined;
         this.disabled = false;
-        /** HTML button type attribute. */
         this.type = ButtonType.BUTTON;
-        /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
         this.variant = ButtonVariant.PRIMARY;
-        /** the button icon position. Defaults to `left` */
+        this.icon = undefined;
         this.iconPosition = IconPosition.LEFT;
-        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
-        this.hasText = false;
     }
-    componentWillLoad() {
-        var _a;
-        this.hasText = !!((_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim());
-    }
-    get attributes() {
+    getAttributes() {
         return {
             id: this.htmlid,
             class: {
                 "z-button--container": true,
-                "z-button--has-text": this.hasText,
+                "z-button--has-text": !!this.hostElement.textContent.trim(),
             },
         };
     }
@@ -42,9 +33,9 @@ export class ZButton {
     }
     render() {
         if (this.href) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": this.ariaLabel || undefined, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+            return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel || undefined, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
-        return (h("button", Object.assign({}, this.attributes, { "aria-label": this.ariaLabel || undefined, name: this.name, type: this.type, disabled: this.disabled, role: this.htmlrole || this.role || undefined }), this.renderIcon(), h("slot", null)));
+        return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel || undefined, name: this.name, type: this.type, disabled: this.disabled, role: this.htmlrole || this.role || undefined }), this.renderIcon(), h("slot", null)));
     }
     static get is() { return "z-button"; }
     static get encapsulation() { return "scoped"; }
@@ -74,10 +65,8 @@ export class ZButton {
                     "tags": [],
                     "text": "defines a string value that labels the internal interactive element. Used for accessibility."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "aria-label",
+                "reflect": false,
                 "defaultValue": "undefined"
             },
             "role": {
@@ -97,10 +86,8 @@ export class ZButton {
                         }],
                     "text": "**Deprecated:** Use `htmlrole` instead."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "role",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "htmlrole": {
@@ -117,10 +104,8 @@ export class ZButton {
                     "tags": [],
                     "text": "defines role attribute, used for accessibility."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "htmlrole"
+                "attribute": "htmlrole",
+                "reflect": false
             },
             "href": {
                 "type": "string",
@@ -136,10 +121,8 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML <a> href attribute. If it is set, it renders an HTML <a> tag."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "href"
+                "attribute": "href",
+                "reflect": false
             },
             "target": {
                 "type": "string",
@@ -155,10 +138,8 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML a target attribute."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "target"
+                "attribute": "target",
+                "reflect": false
             },
             "htmlid": {
                 "type": "string",
@@ -174,10 +155,8 @@ export class ZButton {
                     "tags": [],
                     "text": "Identifier, should be unique."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "htmlid"
+                "attribute": "htmlid",
+                "reflect": false
             },
             "name": {
                 "type": "string",
@@ -193,10 +172,8 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button name attribute."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
+                "attribute": "name",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -212,10 +189,8 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button disabled attribute."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "disabled",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "type": {
@@ -228,8 +203,7 @@ export class ZButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonType",
-                            "referenceLocation": "ButtonType"
+                            "id": "src/beans/index.tsx::ButtonType"
                         }
                     }
                 },
@@ -239,10 +213,8 @@ export class ZButton {
                     "tags": [],
                     "text": "HTML button type attribute."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "type",
+                "reflect": false,
                 "defaultValue": "ButtonType.BUTTON"
             },
             "variant": {
@@ -255,8 +227,7 @@ export class ZButton {
                         "ButtonVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonVariant",
-                            "referenceLocation": "ButtonVariant"
+                            "id": "src/beans/index.tsx::ButtonVariant"
                         }
                     }
                 },
@@ -266,10 +237,8 @@ export class ZButton {
                     "tags": [],
                     "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "variant",
+                "reflect": true,
                 "defaultValue": "ButtonVariant.PRIMARY"
             },
             "icon": {
@@ -286,10 +255,8 @@ export class ZButton {
                     "tags": [],
                     "text": "`z-icon` name to use (optional)."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon"
+                "attribute": "icon",
+                "reflect": false
             },
             "iconPosition": {
                 "type": "string",
@@ -301,8 +268,7 @@ export class ZButton {
                         "IconPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::IconPosition",
-                            "referenceLocation": "IconPosition"
+                            "id": "src/beans/index.tsx::IconPosition"
                         }
                     }
                 },
@@ -312,10 +278,8 @@ export class ZButton {
                     "tags": [],
                     "text": "the button icon position. Defaults to `left`"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "icon-position",
+                "reflect": true,
                 "defaultValue": "IconPosition.LEFT"
             },
             "size": {
@@ -328,14 +292,12 @@ export class ZButton {
                         "ButtonSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonSize",
-                            "referenceLocation": "ButtonSize"
+                            "id": "src/beans/index.tsx::ButtonSize"
                         },
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize",
-                            "referenceLocation": "ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize"
                         }
                     }
                 },
@@ -345,13 +307,12 @@ export class ZButton {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "ControlSize.BIG"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
 }
+//# sourceMappingURL=index.js.map

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

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

@@ -101,3 +101,4 @@ export const IconRight = {
         iconPosition: IconPosition.RIGHT,
     },
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"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"]}