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

package/dist/collection/components/book-card/z-book-card-app/index.js

@@ -7,10 +7,11 @@ import { ControlSize, InfoRevealPosition } from "../../../beans";
  */
 export class ZBookCardApp {
     constructor() {
-        /**
-         * Show or hide laZ prefix before app name
-         */
+        this.logo = undefined;
+        this.name = undefined;
+        this.link = undefined;
         this.laz = true;
+        this.info = undefined;
     }
     emitAppClick() {
         this.appClick.emit();
@@ -22,7 +23,7 @@ export class ZBookCardApp {
         return null;
     }
     render() {
-        return (h("div", { key: '9c6abc487430655fe73fe11e15962c0e621eee17' }, h("a", { key: '352e4cfa7d40141fe95049de52a1c1828406b88b', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: 'e89e99543a0831ac0262a664eaab5777c9a24ba7', src: this.logo, alt: "" })), h("div", { key: '042dbe9eb0f8ec774eb75e825027f64deb833f1b', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '775bc626e17c45a4540f953bb541347216a6e94f', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '59de145e1fc152411218a7eb12c9193f96e9e7f5' }, this.info))), h("a", { key: '537cb5d86c400a4026b0a07cd17975903b2e8711', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '2bb8cbc909ee0edcf0ccf2abd61fa2cb62521380', name: "chevron-right", fill: "color-primary01-icon" }))));
+        return (h("div", { key: '5ef854f5cb70ed3e3750e32e6469ace8e2773e42' }, h("a", { key: 'df49cbb9f602561cabdc8175a3b17c813c27bc64', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: 'c4075fe5cfae3b00942adfbf27c46721c8e631a7', src: this.logo, alt: "" })), h("div", { key: 'cb4385fe88fe47b4d76f30a801db8372932454fc', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '4b4d80bdcf33594ccd4855009fc81fc7cb7d86be', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '89796ca522db7490e228c3857b76bf66eb0fe5ba' }, this.info))), h("a", { key: 'cc88826351021ba4f83a7cdec0df4b3e0e810168', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '3eb419c96a67fe00b9f0410b8579323d3f9edf67', name: "chevron-right", fill: "color-primary01-icon" }))));
     }
     static get is() { return "z-book-card-app"; }
     static get encapsulation() { return "shadow"; }
@@ -52,10 +53,8 @@ export class ZBookCardApp {
                     "tags": [],
                     "text": "App logo url"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "logo"
+                "attribute": "logo",
+                "reflect": false
             },
             "name": {
                 "type": "string",
@@ -71,10 +70,8 @@ export class ZBookCardApp {
                     "tags": [],
                     "text": "App name"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
+                "attribute": "name",
+                "reflect": false
             },
             "link": {
                 "type": "string",
@@ -90,10 +87,8 @@ export class ZBookCardApp {
                     "tags": [],
                     "text": "link to the app website"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "link"
+                "attribute": "link",
+                "reflect": false
             },
             "laz": {
                 "type": "boolean",
@@ -109,10 +104,8 @@ export class ZBookCardApp {
                     "tags": [],
                     "text": "Show or hide laZ prefix before app name"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "laz",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "info": {
@@ -129,10 +122,8 @@ export class ZBookCardApp {
                     "tags": [],
                     "text": "Info text to show as inforeveal"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "info"
+                "attribute": "info",
+                "reflect": false
             }
         };
     }
@@ -156,3 +147,4 @@ export class ZBookCardApp {
     }
     static get elementRef() { return "hostElement"; }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card-app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE/D;;;;GAIG;AAMH,MAAM,OAAO,YAAY;;;;;mBAyBhB,IAAI;;;IAYH,YAAY;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,YAAM,KAAK,EAAC,KAAK,WAAY,CAAC;QACvC,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,0DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ;gBAEd,IAAI,CAAC,IAAI,IAAI,CACZ,4DACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,GAAG,EAAC,EAAE,GACN,CACH;gBACD,4DAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,SAAS,EAAE;oBAChB,IAAI,CAAC,IAAI,CACN,CACJ;YACH,IAAI,CAAC,IAAI,IAAI,CACZ,sEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,kBAAkB,CAAC,SAAS,EACtC,KAAK,EAAC,aAAa;gBAEnB,8DAAM,IAAI,CAAC,IAAI,CAAO,CACR,CACjB;YACD,0DACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,SAAS,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ;gBAEf,+DACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,sBAAsB,GACnB,CACR,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../../beans\";\n\n/**\n * ZBookCardApp component\n * @cssprop --z-book-card-app-padding-x - set left and right padding\n * @cssprop --z-book-card-app-padding-y - set top and bottom padding\n */\n@Component({\n  tag: \"z-book-card-app\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZBookCardApp {\n  @Element() hostElement: HTMLZBookCardAppElement;\n\n  /**\n   * App logo url\n   */\n  @Prop()\n  logo?: string;\n\n  /**\n   * App name\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * link to the app website\n   */\n  @Prop()\n  link: string;\n\n  /**\n   * Show or hide laZ prefix before app name\n   */\n  @Prop()\n  laz? = true;\n\n  /**\n   * Info text to show as inforeveal\n   */\n  @Prop()\n  info?: string;\n\n  /** click on app link */\n  @Event()\n  appClick: EventEmitter;\n\n  private emitAppClick(): void {\n    this.appClick.emit();\n  }\n\n  private renderLaz(): HTMLSpanElement | null {\n    if (this.laz) {\n      return <span class=\"laz\">laZ </span>;\n    }\n\n    return null;\n  }\n\n  render(): HTMLZBookCardAppElement {\n    return (\n      <div>\n        <a\n          class=\"app z-link\"\n          href={this.link}\n          aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n          onClick={() => this.emitAppClick()}\n          target=\"_blank\"\n        >\n          {this.logo && (\n            <img\n              src={this.logo}\n              alt=\"\"\n            />\n          )}\n          <div class=\"name body-4-sb\">\n            {this.renderLaz()}\n            {this.name}\n          </div>\n        </a>\n        {this.info && (\n          <z-info-reveal\n            icon=\"info\"\n            size={ControlSize.X_SMALL}\n            position={InfoRevealPosition.TOP_RIGHT}\n            class=\"info body-5\"\n          >\n            <div>{this.info}</div>\n          </z-info-reveal>\n        )}\n        <a\n          class=\"z-link z-link-icon\"\n          href={this.link}\n          aria-label={`vai a ${this.laz ? \"laz\" : \"\"} ${this.name}`}\n          onClick={() => this.emitAppClick()}\n          target=\"_blank\"\n        >\n          <z-icon\n            name=\"chevron-right\"\n            fill=\"color-primary01-icon\"\n          ></z-icon>\n        </a>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -38,3 +38,4 @@ export const CardApp = {
     })}
     ></z-book-card-app>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card-app/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,0BAA0B,CAAC;AAClC,OAAO,SAAS,CAAC;AAKjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,6BAA6B,EAAE,EAAC,OAAO,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,EAAC;QACxD,6BAA6B,EAAE,EAAC,OAAO,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,EAAC;KACzD;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,IAAI;QACT,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,mBAAmB;KAC1B;CACsC,CAAC;AAE1C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,6BAA6B,EAAE,IAAI;QACnC,6BAA6B,EAAE,IAAI;KACpC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;YACV,IAAI,CAAC,GAAG;aACP,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;cACR,QAAQ,CAAC;QACf,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,CAAC;QAClE,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,CAAC;KACnE,CAAC;wBACgB;CACP,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCardApp} from \".\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardAppStoriesArgs = ZBookCardApp &\n  CSSVarsArguments<\"z-book-card-app-padding-x\" | \"z-book-card-app-padding-y\">;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCardApp\",\n  component: \"z-book-card-app\",\n  argTypes: {\n    \"--z-book-card-app-padding-x\": {control: {type: \"text\"}},\n    \"--z-book-card-app-padding-y\": {control: {type: \"text\"}},\n  },\n  args: {\n    logo: \"https://placehold.co/24\",\n    name: \"Esercizi\",\n    laz: true,\n    info: \"Cosa fa l'applicazione?\",\n    link: \"link-applicazione\",\n  },\n} satisfies Meta<ZBookCardAppStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardAppStoriesArgs>;\n\nexport const CardApp = {\n  args: {\n    \"--z-book-card-app-padding-x\": null,\n    \"--z-book-card-app-padding-y\": null,\n  },\n  render: (args) =>\n    html`<z-book-card-app\n      logo=${args.logo}\n      name=${args.name}\n      laz=${args.laz}\n      info=${args.info}\n      link=${args.link}\n      style=${styleMap({\n        \"--z-book-card-app-padding-x\": args[\"--z-book-card-app-padding-x\"],\n        \"--z-book-card-app-padding-y\": args[\"--z-book-card-app-padding-y\"],\n      })}\n    ></z-book-card-app>`,\n} satisfies Story;\n"]}

package/dist/collection/components/css-components/z-fab/index.stories.js

@@ -101,3 +101,4 @@ export const Multiple = {
     </button>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-fab/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,KAAK,EAAC,MAAM,4BAA4B,CAAC;AACjD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;GAcG;AACH,eAAe;IACb,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,eAAe,CAAC;YACpD,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;YAChG,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;KACF;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,SAAS;QACzB,MAAM,EAAE,sBAAsB;QAC9B,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,SAAS;QACjB,kBAAkB,EAAE,KAAK;QACzB,gBAAgB,EAAE,IAAI;KACvB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEV,QAAQ,CAAC;QACf,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;QAC9C,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC;QACxC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;KAC7C,CAAC;;QAEA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE;QAC1D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,SAAS,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;;GAEvD;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEV,QAAQ,CAAC;QACf,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;QAC9C,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,iBAAiB,EAAE,IAAI,CAAC,YAAY,KAAK,iBAAiB;QAC1D,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC;QACxC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;KAC7C,CAAC;;qBAEa,IAAI,CAAC,IAAI;cAChB,IAAI,CAAC,KAAK;;;cAGV,QAAQ,CAAC;QACf,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,aAAa,EAAE,IAAI;QACnB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;GAIL;CACF,CAAC","sourcesContent":["import {html} from \"lit\";\nimport {classMap} from \"lit/directives/class-map.js\";\nimport {ICONS} from \"../../../constants/iconset\";\nimport \"../../z-icon/index\";\nimport \"./index.stories.css\";\n\n/**\n * You can use the `.z-fab` class on a `<button>` or `<a>` with some additional configuration class:\n * - Sizes: `.z-fab-small`, `.z-fab-x-small`. Default with no size classes, is `big`\n * - Color variants: `.z-fab-primary03`, `.z-fab-surface01`, `.z-fab-surface02`, `.z-fab-surface04`. Default with no color classes, is `primary01`\n * - `.z-fab-extended`: show the label (if any) near the icon\n * - `.z-fab-extendable`: label will be shown only on mouse hover and only on desktop viewports (don't add the `.z-fab-extended` class in this case)\n *\n * Some css custom properties are also available to customize the component:\n * - `--z-fab-right-offset`: the right offset of the fab button (Default: `--grid-margin`)\n * - `--z-fab-bottom-offset`: the bottom offset of the fab button (Default: `--grid-margin`)\n * - `--z-fab-icon-size`: the size of the icon (Default: `20px`)\n * - `--z-fab-icon-fill`: the fill color of the icon (Default: `--color-inverse-icon`)\n *\n * > NB: for the `extended` and `extendable` versions, always wrap the text of the label with some element (e.g. a `<span>`).\n */\nexport default {\n  title: \"ZFab\",\n  argTypes: {\n    icon: {\n      options: Object.keys(ICONS),\n      control: {type: \"select\"},\n    },\n    size: {\n      options: [\"default\", \"z-fab-small\", \"z-fab-x-small\"],\n      control: {type: \"inline-radio\"},\n    },\n    colorVariant: {\n      options: [\"default\", \"z-fab-primary03\", \"z-fab-surface01\", \"z-fab-surface02\", \"z-fab-surface04\"],\n      control: {type: \"inline-radio\"},\n    },\n  },\n  args: {\n    \"colorVariant\": \"default\",\n    \"icon\": \"question-mark-circle\",\n    \"label\": \"Info\",\n    \"size\": \"default\",\n    \"z-fab-extendable\": false,\n    \"z-fab-extended\": true,\n  },\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  tags: [\"!autodocs\"],\n};\n\nexport const Default = {\n  render: (args) => html`\n    <button\n      class=${classMap({\n        \"z-fab\": true,\n        \"z-fab-small\": args.size === \"z-fab-small\",\n        \"z-fab-x-small\": args.size === \"z-fab-x-small\",\n        \"z-fab-primary03\": args.colorVariant === \"z-fab-primary03\",\n        \"z-fab-surface01\": args.colorVariant === \"z-fab-surface01\",\n        \"z-fab-surface02\": args.colorVariant === \"z-fab-surface02\",\n        \"z-fab-surface04\": args.colorVariant === \"z-fab-surface04\",\n        \"z-fab-extended\": args[\"z-fab-extended\"],\n        \"z-fab-extendable\": args[\"z-fab-extendable\"],\n      })}\n    >\n      ${args.icon ? html`<z-icon name=${args.icon}></z-icon>` : \"\"}\n      ${args.label ? html`<span>${args.label}</span>` : \"\"}\n    </button>\n  `,\n};\n\n/**\n * Multiple ZFab can be used in the same page (max 3), but only one can be \"default\". The other ones must have a smaller size and can't have the text.\n * You can space them by setting the `--z-fab-bottom-offset` CSS prop.\n */\nexport const Multiple = {\n  render: (args) => html`\n    <button\n      class=${classMap({\n        \"z-fab\": true,\n        \"z-fab-small\": args.size === \"z-fab-small\",\n        \"z-fab-x-small\": args.size === \"z-fab-x-small\",\n        \"z-fab-primary03\": args.colorVariant === \"z-fab-primary03\",\n        \"z-fab-surface01\": args.colorVariant === \"z-fab-surface01\",\n        \"z-fab-surface02\": args.colorVariant === \"z-fab-surface02\",\n        \"z-fab-surface04\": args.colorVariant === \"z-fab-surface04\",\n        \"z-fab-extended\": args[\"z-fab-extended\"],\n        \"z-fab-extendable\": args[\"z-fab-extendable\"],\n      })}\n    >\n      <z-icon name=${args.icon}></z-icon>\n      <span>${args.label}</span>\n    </button>\n    <button\n      class=${classMap({\n        \"z-fab\": true,\n        \"fab2\": true,\n        \"z-fab-small\": true,\n        \"z-fab-surface01\": true,\n      })}\n    >\n      <z-icon name=\"support\"></z-icon>\n    </button>\n  `,\n};\n"]}

package/dist/collection/components/css-components/z-label/index.stories.js

@@ -7,3 +7,4 @@ export default {
 export const Default = {
     render: () => html ` <label class="z-label"> Etichetta </label> `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-label/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,8CAA8C;CACjE,CAAC","sourcesContent":["import {html} from \"lit\";\n\nexport default {\n  title: \"ZLabel\",\n  argTypes: {},\n  args: {},\n};\n\nexport const Default = {\n  render: () => html` <label class=\"z-label\"> Etichetta </label> `,\n};\n"]}

package/dist/collection/components/css-components/z-link/index.stories.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-link/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAC,KAAK,EAAC,MAAM,4BAA4B,CAAC;AACjD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,CAAC;YAClE,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;iBAChB;aACF;SACF;QACD,aAAa,EAAE;YACb,EAAE,EAAE;gBACF,GAAG,EAAE,MAAM;gBACX,MAAM,EAAE,IAAI;aACb;SACF;KACF;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,KAAK;QACtB,iBAAiB,EAAE,KAAK;QACxB,kBAAkB,EAAE,KAAK;QACzB,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAI,EAAa,EAAE,CAAC,CAAC;IACvC,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,aAAa;IAClD,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,YAAY;IAChD,gBAAgB,EAAE,IAAI,CAAC,YAAY,KAAK,gBAAgB;IACxD,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC;IACtC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC;IAC1C,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;IAC5C,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAClC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;gBAIR,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;;UAEhC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI;;;GAG9E;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEF,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;UACtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI;;;GAG9E;CACF,CAAC","sourcesContent":["import {html} from \"lit\";\nimport {classMap, type ClassInfo} from \"lit/directives/class-map.js\";\nimport {ICONS} from \"../../../constants/iconset\";\nimport \"../../z-icon/index\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"ZLink\",\n  argTypes: {\n    \"colorVariant\": {\n      options: [\"z-link\", \"z-link-blue\", \"z-link-red\", \"z-link-inverse\"],\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    \"icon\": {\n      options: [null, ...Object.keys(ICONS)],\n      control: {\n        type: \"select\",\n        labels: {\n          null: \"No icon\",\n        },\n      },\n    },\n    \"z-link-icon\": {\n      if: {\n        arg: \"icon\",\n        truthy: true,\n      },\n    },\n  },\n  args: {\n    \"colorVariant\": \"z-link\",\n    \"text\": \"Zanichelli.it\",\n    \"icon\": null,\n    \"z-link-active\": false,\n    \"z-link-disabled\": false,\n    \"z-link-underline\": false,\n    \"z-link-icon\": false,\n    \"z-link-sb\": false,\n  },\n};\n\nconst getClasses = (args): ClassInfo => ({\n  \"z-link\": true,\n  \"z-link-blue\": args.colorVariant === \"z-link-blue\",\n  \"z-link-red\": args.colorVariant === \"z-link-red\",\n  \"z-link-inverse\": args.colorVariant === \"z-link-inverse\",\n  \"z-link-active\": args[\"z-link-active\"],\n  \"z-link-disabled\": args[\"z-link-disabled\"],\n  \"z-link-underline\": args[\"z-link-underline\"],\n  \"z-link-icon\": args[\"z-link-icon\"],\n  \"z-link-sb\": args[\"z-link-sb\"],\n});\n\nexport const ZLink = {\n  render: (args) => html`\n    <div class=\"z-link-story\">\n      <a\n        href=\"zanichelli.it\"\n        class=${classMap(getClasses(args))}\n      >\n        ${args.icon ? html`<z-icon name=${args.icon}></z-icon>` : \"\"} ${args.text}\n      </a>\n    </div>\n  `,\n};\n\nexport const ZLinkButton = {\n  render: (args) => html`\n    <div class=\"z-link-story\">\n      <button class=${classMap(getClasses(args))}>\n        ${args.icon ? html`<z-icon name=${args.icon}></z-icon>` : \"\"} ${args.text}\n      </button>\n    </div>\n  `,\n};\n"]}

package/dist/collection/components/css-components/z-scrollbar/index.stories.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-scrollbar/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;GAcjB;CACF,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index.stories.css\";\n\n/**\n * <p>If applied to elements with CSS property \"overflow:scroll\", the class will apply to both the vertical AND the horizontal scrollbars. To avoid this, use \"overflow-y\" instead.</p>\n * Bear in mind that the scrollbar behaves in different ways depending on the browser: <br />\n *    <ul>\n *      <li>Chrome desktop + Android + MS Edge + opera:\n *        <ul>\n *          <li>primary color scrollbar thumb with right angles</li>\n *          <li>gray scrollbar track</li>\n *          <li>thumb gets darker on hover</li>\n *          <li>thumb doesn't bounce when at end of track</li>\n *        </ul>\n *      </li>\n *      <li>Safari on Mac + chromium 69 (booktab):\n *        <ul>\n *          <li>thumb bounces when at end of track</li>\n *        </ul>\n *      </li>\n *      <li>Safari on iPad:\n *        <ul>\n *          <li>no scrollbars</li>\n *        </ul>\n *      </li>\n *      <li>Chrome on iPad:\n *        <ul>\n *          <li>gray, narrower thumb</li>\n *          <li>no track</li>\n *        </ul>\n *      </li>\n *      <li>Firefox desktop:\n *        <ul>\n *          <li>thumb has border radius</li>\n *          <li>no track</li>\n *          <li>thumb gets wider on hover</li>\n *        </ul>\n *      </li>\n *      <li>Firefox on Android:\n *        <ul>\n *          <li>th scrollbar disappears if you're not actively scrolling</li>\n *          <li>thumb has border radius</li>\n *          <li>no track</li>\n *        </ul>\n *      </li>\n *      <li>Samsung browser:\n *        <ul>\n *          <li>no side margins</li>\n *        </ul>\n *      </li>\n *    </ul>\n */\nconst StoryMeta = {\n  title: \"ZScrollbar\",\n};\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: () => html`\n    <div class=\"z-scrollbar-story\">\n      <div class=\"scrollbar-container z-scrollbar\">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales purus et congue pellentesque. Sed quis\n          venenatis nibh. Cras ut velit vel nisl cursus euismod ac quis lorem. In eget nisl lectus. Quisque id nibh in\n          nisi viverra varius vitae id est. Nulla tincidunt mi eget consequat lacinia. Quisque rhoncus dolor a tortor\n          fermentum molestie. Vivamus posuere non sapien vitae auctor. Donec dignissim efficitur consectetur.\n          Suspendisse eu bibendum tortor. Nulla facilisi. Mauris pharetra eleifend dolor. Morbi velit odio, mollis et\n          euismod eu, imperdiet in lectus. Maecenas laoreet tellus et diam finibus blandit. Mauris aliquam quis tellus\n          et congue.\n        </p>\n      </div>\n    </div>\n  `,\n};\n"]}

package/dist/collection/components/date-picker/utils.js

@@ -74,3 +74,4 @@ function setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
     prevMonthArrow.setAttribute("aria-label", "Anno precedente");
     nextMonthArrow.setAttribute("aria-label", "Anno successivo");
 }
+//# sourceMappingURL=utils.js.map

package/dist/collection/components/date-picker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/date-picker/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ZDatePickerMode, ZDatePickerModeValue, ZDatePickerPosition, ZRangePickerMode} from \"../../beans\";\n\nexport function validateDate(dateStr: string, hasTime = false): boolean {\n  const regex = hasTime ? /^\\d{1,2}[/-]\\d{1,2}[/-]\\d{2,4} - \\d{2}:\\d{2}$/ : /^\\d{1,2}[/-]\\d{1,2}[/-]\\d{2,4}$/;\n\n  if (dateStr.match(regex) === null) {\n    return false;\n  }\n\n  return true;\n}\n\nexport function setFlatpickrPosition(\n  element: HTMLElement,\n  mode: ZDatePickerMode | ZRangePickerMode\n): ZDatePickerPosition {\n  const toggleHeight = element.children[0].clientHeight;\n  element.style.setProperty(\"--z-range-picker--toggle-height\", `${toggleHeight}px`);\n\n  const flatpickrHeight =\n    mode === ZDatePickerMode.DATE_TIME\n      ? ZDatePickerModeValue.DATE_TIME\n      : mode === ZDatePickerMode.MONTHS\n        ? ZDatePickerModeValue.MONTHS\n        : ZDatePickerModeValue.DATE;\n\n  const bottom = element.getBoundingClientRect().bottom;\n  const overflowBottom = bottom + flatpickrHeight > window.innerHeight;\n  const overflowTop = bottom - flatpickrHeight - toggleHeight < 0;\n\n  if (!overflowTop && overflowBottom) {\n    return ZDatePickerPosition.TOP;\n  }\n\n  return ZDatePickerPosition.BOTTOM;\n}\n\nexport function setAriaOptions(element: HTMLElement, mode: ZDatePickerMode | ZRangePickerMode): void {\n  const calendar = element.getElementsByClassName(\"flatpickr-calendar\");\n\n  Array.from(calendar).forEach((element) => {\n    element.setAttribute(\"tabindex\", \"0\");\n    const prevMonthArrow = element.getElementsByClassName(\"flatpickr-prev-month\")[0];\n    const nextMonthArrow = element.getElementsByClassName(\"flatpickr-next-month\")[0];\n\n    const tabindexElements = element.querySelectorAll('[tabindex = \"-1\"]');\n    tabindexElements.forEach((element) => element.setAttribute(\"tabindex\", \"0\"));\n\n    Array.from(element.getElementsByClassName(\"flatpickr-day\")).forEach((date: HTMLElement) => {\n      if (date.classList.contains(\"flatpickr-disabled\")) {\n        date.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    prevMonthArrow.setAttribute(\"tabindex\", \"0\");\n    nextMonthArrow.setAttribute(\"tabindex\", \"0\");\n\n    prevMonthArrow.setAttribute(\"role\", \"button\");\n    nextMonthArrow.setAttribute(\"role\", \"button\");\n\n    element.getElementsByClassName(\"cur-year\")[0].setAttribute(\"aria-label\", \"Anno\");\n\n    if (mode === ZDatePickerMode.DATE) {\n      setDateAriaOptions(element, prevMonthArrow, nextMonthArrow);\n    }\n    if (mode === ZDatePickerMode.DATE_TIME) {\n      setDateTimeAriaOptions(element, prevMonthArrow, nextMonthArrow);\n    }\n    if (mode === ZDatePickerMode.MONTHS) {\n      setMonthsAriaOptions(element, prevMonthArrow, nextMonthArrow);\n    }\n  });\n}\n\nfunction setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow): void {\n  Array.from(calendar.getElementsByClassName(\"flatpickr-days\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"tabindex\", \"-1\")\n  );\n\n  Array.from(calendar.getElementsByClassName(\"flatpickr-day\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"role\", \"button\")\n  );\n\n  calendar.getElementsByClassName(\"flatpickr-monthDropdown-months\")[0].setAttribute(\"aria-label\", \"Mese\");\n\n  prevMonthArrow.setAttribute(\"aria-label\", \"Mese precedente\");\n  nextMonthArrow.setAttribute(\"aria-label\", \"Mese successivo\");\n}\n\nfunction setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow): void {\n  Array.from(calendar.getElementsByClassName(\"flatpickr-days\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"tabindex\", \"-1\")\n  );\n\n  Array.from(calendar.getElementsByClassName(\"flatpickr-day\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"role\", \"button\")\n  );\n\n  calendar.getElementsByClassName(\"flatpickr-monthDropdown-months\")[0].setAttribute(\"aria-label\", \"Mese\");\n\n  prevMonthArrow.setAttribute(\"aria-label\", \"Mese precedente\");\n  nextMonthArrow.setAttribute(\"aria-label\", \"Mese successivo\");\n\n  Array.from(calendar.getElementsByClassName(\"time24hr\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"tabindex\", \"-1\")\n  );\n\n  calendar.getElementsByClassName(\"flatpickr-hour\")[0].setAttribute(\"aria-label\", \"Ora\");\n  calendar.getElementsByClassName(\"flatpickr-minute\")[0].setAttribute(\"aria-label\", \"Minuti\");\n}\n\nfunction setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow): void {\n  Array.from(calendar.getElementsByClassName(\"flatpickr-monthSelect-months\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"tabindex\", \"-1\")\n  );\n\n  Array.from(calendar.getElementsByClassName(\"flatpickr-monthSelect-month\")).forEach((element: HTMLElement) =>\n    element.setAttribute(\"role\", \"button\")\n  );\n\n  prevMonthArrow.setAttribute(\"aria-label\", \"Anno precedente\");\n  nextMonthArrow.setAttribute(\"aria-label\", \"Anno successivo\");\n}\n"]}

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
@@ -6,13 +6,11 @@ import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans"
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
     constructor() {
-        /** z-input aria label */
+        this.datePickerId = undefined;
         this.ariaLabel = "";
-        /** [Optional] datepicker mode: date, datetime, only months */
+        this.label = undefined;
         this.mode = ZDatePickerMode.DATE;
-        /** [Optional] the datepicker input name */
         this.name = undefined;
-        /** [Optional] the datepicker input value */
         this.value = undefined;
         this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
         this.inputError = false;
@@ -26,9 +24,7 @@ export class ZDatePicker {
             (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close();
         }
         if (ev.key === "Enter" || ev.key === " ") {
-            if (!this.hasChildren) {
-                (_b = this.picker) === null || _b === void 0 ? void 0 : _b.open();
-            }
+            !this.hasChildren && ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.open());
             const isCrossIconEntered = document.activeElement.classList.contains("reset-icon");
             if (isCrossIconEntered) {
                 this.inputError = false;
@@ -42,16 +38,10 @@ export class ZDatePicker {
             const isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
             const isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
             const arrowPressed = isPrevArrowEntered || isNextArrowEntered;
-            if (arrowPressed && ev.key === " ") {
-                ev.preventDefault();
-            }
+            arrowPressed && ev.key === " " && ev.preventDefault();
             if (this.mode === ZDatePickerMode.MONTHS) {
-                if (isPrevArrowEntered) {
-                    (_d = this.picker) === null || _d === void 0 ? void 0 : _d.changeYear(this.picker.currentYear - 1);
-                }
-                if (isNextArrowEntered) {
-                    (_e = this.picker) === null || _e === void 0 ? void 0 : _e.changeYear(this.picker.currentYear + 1);
-                }
+                isPrevArrowEntered && ((_d = this.picker) === null || _d === void 0 ? void 0 : _d.changeYear(this.picker.currentYear - 1));
+                isNextArrowEntered && ((_e = this.picker) === null || _e === void 0 ? void 0 : _e.changeYear(this.picker.currentYear + 1));
                 if (arrowPressed) {
                     const calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
                     const months = calendar === null || calendar === void 0 ? void 0 : calendar.querySelectorAll(".flatpickr-monthSelect-month");
@@ -60,37 +50,32 @@ export class ZDatePicker {
                         element.setAttribute("aria-label", `${element.innerHTML} ${(_a = this.picker) === null || _a === void 0 ? void 0 : _a.currentYear}`);
                     });
                     //Force check of the current day
-                    Array.from(months !== null && months !== void 0 ? months : []).forEach((element, index) => {
-                        var _a;
-                        const curMonth = new Date().getMonth();
-                        const curYear = new Date().getFullYear();
-                        if (index === curMonth) {
-                            if (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.currentYear) === curYear) {
-                                element.setAttribute("class", "flatpickr-monthSelect-month today");
-                            }
-                            else {
-                                element.setAttribute("class", "flatpickr-monthSelect-month");
+                    months &&
+                        Array.from(months).forEach((element, index) => {
+                            var _a;
+                            const curMonth = new Date().getMonth();
+                            const curYear = new Date().getFullYear();
+                            if (index === curMonth) {
+                                if (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.currentYear) === curYear) {
+                                    element.setAttribute("class", "flatpickr-monthSelect-month today");
+                                }
+                                else {
+                                    element.setAttribute("class", "flatpickr-monthSelect-month");
+                                }
                             }
-                        }
-                    });
+                        });
                 }
             }
             else {
-                if (isPrevArrowEntered) {
-                    (_f = this.picker) === null || _f === void 0 ? void 0 : _f.changeMonth(-1);
-                }
-                if (isNextArrowEntered) {
-                    (_g = this.picker) === null || _g === void 0 ? void 0 : _g.changeMonth(1);
-                }
+                isPrevArrowEntered && ((_f = this.picker) === null || _f === void 0 ? void 0 : _f.changeMonth(-1));
+                isNextArrowEntered && ((_g = this.picker) === null || _g === void 0 ? void 0 : _g.changeMonth(1));
             }
         }
     }
     componentWillLoad() {
         const customToggle = this.element.querySelector("[slot=toggle]");
         this.hasChildren = !!customToggle;
-        if (this.hasChildren) {
-            customToggle.setAttribute("data-toggle", "data-toggle");
-        }
+        this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
     }
     componentDidLoad() {
         this.setupPickers();
@@ -105,6 +90,7 @@ export class ZDatePicker {
             dateFormat: this.mode === ZDatePickerMode.DATE_TIME ? "d-m-Y - H:i" : "d-m-Y",
             ariaDateFormat: this.mode === ZDatePickerMode.MONTHS ? "F Y" : "d F Y",
             minuteIncrement: 1,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             time_24hr: true,
             onChange: (_selectedDates, dateStr) => {
                 this.emitDateSelect(dateStr);
@@ -172,7 +158,7 @@ export class ZDatePicker {
             } })));
     }
     render() {
-        return (h("div", { key: 'a17c625e0c3ba0c69b7805670f178a1c2a12a4d2', class: {
+        return (h("div", { key: 'b09b51672ed595a08b95443f9a2e1f9866402de3', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,
@@ -205,10 +191,8 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "unique id"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "date-picker-id"
+                "attribute": "date-picker-id",
+                "reflect": false
             },
             "ariaLabel": {
                 "type": "string",
@@ -224,10 +208,8 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "z-input aria label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "aria-label",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
@@ -244,10 +226,8 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "z-input label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "mode": {
                 "type": "string",
@@ -259,8 +239,7 @@ export class ZDatePicker {
                         "ZDatePickerMode": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ZDatePickerMode",
-                            "referenceLocation": "ZDatePickerMode"
+                            "id": "src/beans/index.tsx::ZDatePickerMode"
                         }
                     }
                 },
@@ -270,10 +249,8 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "[Optional] datepicker mode: date, datetime, only months"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode",
+                "reflect": false,
                 "defaultValue": "ZDatePickerMode.DATE"
             },
             "name": {
@@ -290,10 +267,8 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "[Optional] the datepicker input name"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "name",
+                "reflect": false,
                 "defaultValue": "undefined"
             },
             "value": {
@@ -310,10 +285,8 @@ export class ZDatePicker {
                     "tags": [],
                     "text": "[Optional] the datepicker input value"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "value",
+                "reflect": false,
                 "defaultValue": "undefined"
             }
         };
@@ -359,3 +332,4 @@ export class ZDatePicker {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/date-picker/z-date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/z-date-picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, h} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\nimport monthSelectPlugin from \"flatpickr/dist/plugins/monthSelect\";\nimport {InputType, ZDatePickerMode, ZDatePickerPosition} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-date-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZDatePicker {\n  @Element() element: HTMLZDatePickerElement;\n\n  /** unique id */\n  @Prop()\n  datePickerId: string;\n\n  /** z-input aria label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** z-input label */\n  @Prop()\n  label?: string;\n\n  /** [Optional] datepicker mode: date, datetime, only months */\n  @Prop()\n  mode: ZDatePickerMode = ZDatePickerMode.DATE;\n\n  /** [Optional] the datepicker input name */\n  @Prop()\n  name?: string = undefined;\n\n  /** [Optional] the datepicker input value */\n  @Prop()\n  value?: string = undefined;\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  inputError = false;\n\n  private picker;\n\n  private hasChildren: boolean;\n\n  /** emitted when date changes, returns selected date */\n  @Event()\n  dateSelect: EventEmitter;\n\n  private emitDateSelect(date): void {\n    this.dateSelect.emit(date);\n  }\n\n  @Listen(\"keydown\", {capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Escape\") {\n      this.picker?.close();\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      !this.hasChildren && this.picker?.open();\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        this.inputError = false;\n        this.picker?.setDate([]);\n        this.dateSelect.emit(null);\n      }\n\n      const flatpickrDayPressed = document.activeElement.classList.contains(\"flatpickr-day\");\n      if (flatpickrDayPressed) {\n        //Sistemare il toggle\n      }\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      arrowPressed && ev.key === \" \" && ev.preventDefault();\n\n      if (this.mode === ZDatePickerMode.MONTHS) {\n        isPrevArrowEntered && this.picker?.changeYear(this.picker.currentYear - 1);\n\n        isNextArrowEntered && this.picker?.changeYear(this.picker.currentYear + 1);\n\n        if (arrowPressed) {\n          const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[0];\n          const months = calendar?.querySelectorAll(\".flatpickr-monthSelect-month\");\n          months?.forEach((element) => {\n            element.setAttribute(\"aria-label\", `${element.innerHTML} ${this.picker?.currentYear}`);\n          });\n\n          //Force check of the current day\n          months &&\n            Array.from(months).forEach((element, index) => {\n              const curMonth = new Date().getMonth();\n              const curYear = new Date().getFullYear();\n\n              if (index === curMonth) {\n                if (this.picker?.currentYear === curYear) {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month today\");\n                } else {\n                  element.setAttribute(\"class\", \"flatpickr-monthSelect-month\");\n                }\n              }\n            });\n        }\n      } else {\n        isPrevArrowEntered && this.picker?.changeMonth(-1);\n        isNextArrowEntered && this.picker?.changeMonth(1);\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    const customToggle = this.element.querySelector(\"[slot=toggle]\");\n    this.hasChildren = !!customToggle;\n    this.hasChildren && customToggle.setAttribute(\"data-toggle\", \"data-toggle\");\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;\n\n    this.picker = flatpickr(`.${classToAppend}`, {\n      appendTo: this.element.children[0] as HTMLElement,\n      enableTime: this.mode === ZDatePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      dateFormat: this.mode === ZDatePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: this.mode === ZDatePickerMode.MONTHS ? \"F Y\" : \"d F Y\",\n      minuteIncrement: 1,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      time_24hr: true,\n      onChange: (_selectedDates, dateStr) => {\n        this.emitDateSelect(dateStr);\n      },\n      onOpen: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element as HTMLElement, this.mode);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element as HTMLElement, this.mode);\n      },\n      wrap: true,\n      plugins: this.mode === ZDatePickerMode.MONTHS && [\n        monthSelectPlugin({\n          dateFormat: \"m-Y\",\n          altFormat: \"m-Y\",\n        }),\n      ],\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZDatePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    } else if (this.mode === ZDatePickerMode.MONTHS) {\n      return `${flatpickr.formatDate(date, \"m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private onStopTyping(value): void {\n    let text = value.detail.value;\n\n    if (this.mode === ZDatePickerMode.MONTHS) {\n      text = \"01-\".concat(value.detail.value);\n    }\n\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZDatePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(englishParsedData, this.mode === ZDatePickerMode.DATE_TIME);\n\n    if (text === \"\") {\n      this.inputError = false;\n      this.picker.setDate([]);\n      this.dateSelect.emit(null);\n    } else if (!isValidDate) {\n      this.inputError = true;\n      this.dateSelect.emit(null);\n    } else if (isValidDate) {\n      this.inputError = false;\n      this.picker.setDate([value.detail.value]);\n      this.dateSelect.emit(this.formatDate(new Date(englishParsedData)));\n    }\n  }\n\n  private renderSlottedContent(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-hidden`}>\n        <input\n          class=\"hidden-input\"\n          data-input\n          name={this.name}\n          value={this.value}\n        ></input>\n        <slot name=\"toggle\"></slot>\n      </div>\n    );\n  }\n\n  private renderZInput(): HTMLDivElement {\n    return (\n      <div class={`${this.datePickerId}-container`}>\n        <z-input\n          data-input=\"data-input\"\n          ariaLabel={this.ariaLabel}\n          label={this.label}\n          class={this.datePickerId}\n          type={InputType.TEXT}\n          icon=\"event\"\n          message={false}\n          name={this.name}\n          tabindex=\"0\"\n          value={this.value}\n          onStopTyping={(value) => {\n            this.onStopTyping(value);\n          }}\n          onStartTyping={() => {\n            this.inputError = false;\n          }}\n        ></z-input>\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"flatpickr-toggle-container\": true,\n          [this.flatpickrPosition]: true,\n          [this.mode]: true,\n        }}\n      >\n        {this.hasChildren ? this.renderSlottedContent() : this.renderZInput()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/z-date-picker/index.stories.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/z-date-picker/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAEjB;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,IAAI,EAAE,eAAe,CAAC,IAAI;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;iCAES,IAAI,CAAC,YAAY;wDACM,IAAI,CAAC,YAAY;;;;;;;iBAOxD,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY;eAC5B,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,SAAS;kBAClB,IAAI,CAAC,KAAK;kBACV,IAAI,CAAC,KAAK;;;;;;2BAMD,IAAI,CAAC,YAAY;;;GAGzC;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,uBAAuB;QAC9B,KAAK,EAAE,YAAY;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,gCAAgC;QACvC,IAAI,EAAE,eAAe,CAAC,SAAS;QAC/B,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,kBAAkB;KACzB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,eAAe,CAAC,MAAM;QAC5B,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;KACrB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,oBAAoB;KAC3B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;iCAES,IAAI,CAAC,YAAY;wDACM,IAAI,CAAC,YAAY;;;;;;;iBAOxD,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY;eAC5B,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,SAAS;kBAClB,IAAI,CAAC,KAAK;kBACV,IAAI,CAAC,KAAK;;;;;;;;2BAQD,IAAI,CAAC,YAAY;;;GAGzC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZDatePicker} from \".\";\nimport {ZDatePickerMode} from \"../../../beans\";\nimport \"../../z-button/index\";\nimport \"../index.stories.css\";\nimport \"./index\";\n\n/**\n * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.\n * This component emits an event called `dateSelect` with the value of the selected date.\n */\nconst StoryMeta = {\n  title: \"ZDatePicker\",\n  component: \"z-date-picker\",\n  argTypes: {\n    mode: {\n      options: Object.values(ZDatePickerMode),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    ariaLabel: \"date-picker\",\n    mode: ZDatePickerMode.DATE,\n  },\n  render: (args) => html`\n    <script>\n      document.getElementById(\"${args.datePickerId}\").addEventListener(\"dateSelect\", (e) => {\n        const input = document.getElementById(\"output-${args.datePickerId}\");\n        input.innerHTML = \"[\" + e.detail + \"]\";\n      });\n    </script>\n    <div class=\"story-container\">\n      <div class=\"story-picker-container\">\n        <z-date-picker\n          mode=${args.mode}\n          .datePickerId=${args.datePickerId}\n          id=${args.datePickerId}\n          ariaLabel=${args.ariaLabel}\n          label=${args.label}\n          value=${args.value}\n        ></z-date-picker>\n      </div>\n      <div class=\"story-output-container\">\n        <span>OUTPUT:</span>\n        <br />\n        <span id=\"output-${args.datePickerId}\" />\n      </div>\n    </div>\n  `,\n} satisfies Meta<ZDatePicker>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZDatePicker>;\n\nexport const Date: Story = {\n  args: {\n    datePickerId: \"picker-01\",\n    label: \"ZDatePicker with date\",\n    value: \"25-12-2024\",\n  },\n} satisfies Story;\n\nexport const DateAndTime: Story = {\n  args: {\n    datePickerId: \"picker-02\",\n    label: \"ZDatePicker with date and time\",\n    mode: ZDatePickerMode.DATE_TIME,\n    value: \"05-12-2024 - 12:01\",\n    name: \"date-time-picker\",\n  },\n} satisfies Story;\n\nexport const MonthsOnly: Story = {\n  args: {\n    datePickerId: \"picker-03\",\n    label: \"ZDatePicker with only months\",\n    mode: ZDatePickerMode.MONTHS,\n    value: \"12-2024\",\n    name: \"month-picker\",\n  },\n} satisfies Story;\n\nexport const CustomToggle: Story = {\n  args: {\n    datePickerId: \"picker-04\",\n    label: \"date picker\",\n    value: \"25-01-2024\",\n    name: \"date-toogle-picker\",\n  },\n  render: (args) => html`\n    <script>\n      document.getElementById(\"${args.datePickerId}\").addEventListener(\"dateSelect\", (e) => {\n        const input = document.getElementById(\"output-${args.datePickerId}\");\n        input.innerHTML = \"[\" + e.detail + \"]\";\n      });\n    </script>\n    <div class=\"story-container\">\n      <div class=\"story-picker-container\">\n        <z-date-picker\n          mode=${args.mode}\n          .datePickerId=${args.datePickerId}\n          id=${args.datePickerId}\n          ariaLabel=${args.ariaLabel}\n          label=${args.label}\n          value=${args.value}\n        >\n          <z-button slot=\"toggle\">Open ZDatePicker</z-button>\n        </z-date-picker>\n      </div>\n      <div class=\"story-output-container\">\n        <span>OUTPUT:</span>\n        <br />\n        <span id=\"output-${args.datePickerId}\" />\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}