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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;;;;GAKG;AAMH,MAAM,OAAO,aAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;gBACD,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,4DAAK,KAAK,EAAC,cAAc;wBACvB,8DAAa,CACT;oBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;gBACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;oBAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -14,11 +14,12 @@ const StoryMeta = {
         },
     },
     args: {
-        contenticonname: "checkmark-circle-filled",
-        actiontext: "Annulla",
-        showclose: false,
-        sticky: false,
-        type: NotificationType.SUCCESS,
+        "--z-notification--content-max-width": "100%",
+        "contenticonname": "checkmark-circle-filled",
+        "actiontext": "Annulla",
+        "showclose": false,
+        "sticky": false,
+        "type": NotificationType.SUCCESS,
     },
 };
 export default StoryMeta;
@@ -30,6 +31,28 @@ export const Default = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
+    >
+      <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
+    </z-notification>
+  `,
+};
+/**
+ * To use the border top variant set the `borderposition` property to `top`.
+ */
+export const BorderTop = {
+    args: {
+        borderposition: "top",
+    },
+    render: (args) => html `
+    <z-notification
+      .contenticonname=${args.contenticonname}
+      .actiontext=${args.actiontext}
+      .type=${args.type}
+      .showclose=${args.showclose}
+      .sticky=${args.sticky}
+      .borderposition=${args.borderposition}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
     </z-notification>
@@ -43,6 +66,7 @@ export const LongText = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
       Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
@@ -71,6 +95,7 @@ export const BannerVariant = {
         .type=${args.type}
         .showclose=${args.showclose}
         sticky="true"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
         ${args.notificationText}
       </z-notification>
@@ -131,6 +156,7 @@ export const InlineVariant = {
         type=${args.type}
         showclose=${args.showclose}
         sticky="false"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
         ${args.notificationText}
       </z-notification>
@@ -144,3 +170,4 @@ export const InlineVariant = {
     </div>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZNotification} from \".\";\nimport {NotificationType} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNotificationStoriesArgs = ZNotification & {\n  notificationText: string;\n} & CSSVarsArguments<\"--z-notification--content-max-width\">;\n\nconst StoryMeta = {\n  title: \"ZNotification\",\n  component: \"z-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(NotificationType),\n    },\n  },\n  args: {\n    \"--z-notification--content-max-width\": \"100%\",\n    \"contenticonname\": \"checkmark-circle-filled\",\n    \"actiontext\": \"Annulla\",\n    \"showclose\": false,\n    \"sticky\": false,\n    \"type\": NotificationType.SUCCESS,\n  },\n} satisfies Meta<ZNotificationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNotificationStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n      style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n    >\n      <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n    </z-notification>\n  `,\n} satisfies Story;\n\n/**\n * To use the border top variant set the `borderposition` property to `top`.\n */\nexport const BorderTop = {\n  args: {\n    borderposition: \"top\",\n  },\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n      .borderposition=${args.borderposition}\n      style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n    >\n      <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n    </z-notification>\n  `,\n} satisfies Story;\n\nexport const LongText = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n      style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n      Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue\n      turpis, eu consectetur purus consectetur vitae.\n    </z-notification>\n  `,\n} satisfies Story;\n\n/**\n * To use the banner variant set the `sticky` property to `true`.\n */\nexport const BannerVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"banner-notification-demo\">\n      <z-notification\n        .contenticonname=${args.contenticonname}\n        .actiontext=${args.actiontext}\n        .type=${args.type}\n        .showclose=${args.showclose}\n        sticky=\"true\"\n        style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <h2 class=\"heading-1-sb\">Titolo della pagina</h2>\n      <div class=\"body-1\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis\n        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.\n        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed\n        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus\n        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante\n        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,\n        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,\n        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a\n        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper\n        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus\n        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius\n        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet\n        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem\n        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus\n        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.\n        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu\n        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque\n        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet\n        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,\n        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,\n        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent\n        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis\n        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec\n        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in\n        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et\n        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est\n        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus\n        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at\n        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.\n      </div>\n    </div>\n  `,\n} satisfies Story;\n\n/**\n * To use the inline variant set the `sticky` property to `false`.\n */\nexport const InlineVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"inline-notification-demo\">\n      <z-notification\n        contenticonname=${args.contenticonname}\n        actiontext=${args.actiontext}\n        type=${args.type}\n        showclose=${args.showclose}\n        sticky=\"false\"\n        style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <div class=\"content\">\n        <h2 class=\"heading-1\">Titolo della scheda</h2>\n        <div class=\"body-1\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n          Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.\n        </div>\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-notification/styles.css

@@ -1,14 +1,19 @@
 :host {
   --z-notification--top-offset: 0;
+  --z-notification--content-max-width: 100%;
 
-  display: flex;
+  display: block;
   width: 100%;
-  box-sizing: border-box;
+}
+
+.main-container {
+  display: flex;
+  max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
   padding: calc(var(--space-unit) * 2);
-  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  margin: 0 auto;
+  background-color: transparent;
   font-family: var(--font-family-sans);
-  outline: none;
 }
 
 :host([sticky]) {
@@ -54,8 +59,15 @@
   fill: var(--color-default-error);
 }
 
-:host > button,
-.content-container > button {
+:host([borderposition="bottom"]) {
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+:host([borderposition="top"]) {
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+}
+
+button {
   padding: 0;
   border: none;
   margin: 0;
@@ -78,7 +90,6 @@
 }
 
 .content-text {
-  max-width: 800px;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);

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

@@ -8,33 +8,14 @@ import { KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans
  */
 export class ZOffcanvas {
     constructor() {
-        /**
-         * Offcanvas variant.
-         * - `overlay`: The offcanvas covers the page content putting an overlay.
-         * - `pushcontent`: The offcanvas isn't absolutely positioned and "pushes" the page content.
-         * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.
-         * Also, the `pushcontent` variant doesn't have the open/close transition.
-         */
+        this.allFocusableElements = [];
+        this.previouslyFocusedElement = null;
         this.variant = OffCanvasVariant.PUSHCONTENT;
-        /** Whether the offcanvas is open. Default: false */
         this.open = false;
-        /**
-         * Open the content transitioning to a specified direction.
-         * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.
-         */
         this.transitiondirection = TransitionDirection.LEFT;
-        /**
-         * Skip the opening transition when the offcanvas is already open at the first render.
-         * @deprecated This prop is not needed anymore, the component will automatically skip the transition
-         *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
-         */
         this.skipLoadAnimation = false;
-        /** Whether to show the backdrop when the offcanvas is open. Default: true */
         this.showBackdrop = true;
-        /** Used to skip the opening transition when the offcanvas is already open at the first render. */
         this.skipAnimation = false;
-        this.allFocusableElements = [];
-        this.previouslyFocusedElement = null;
     }
     /**
      * Returns all focusable elements inside the offcanvas content.
@@ -159,8 +140,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '5f34f01d85a4c79e2e79d832fe224291ed2763c2', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'c5351d2287fb371fada3f3e611149c778cd985d3', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '8db8472f6fac67914ef17c88ff28f02a74fb5004', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '3903cb7475ffbc877f69d1c34b1812185daa8591', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '77b2fe27928f089bb35e5a381b6b89c9039e0f0e', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'aafb9bddcf3eb99e0b77dc0eb86703294dab0b56', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '1a73bcc5abb6fd674a9624f8a4390849b2383323', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '412138eb75e5c8afee64269ee5d9c2da5fccf7fb', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '149934216905198a8c0b8cfaff7851b4d1934706', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '555fe547b7c672189987edd94e0a2fc64ead2b25', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -186,8 +167,7 @@ export class ZOffcanvas {
                         "OffCanvasVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::OffCanvasVariant",
-                            "referenceLocation": "OffCanvasVariant"
+                            "id": "src/beans/index.tsx::OffCanvasVariant"
                         }
                     }
                 },
@@ -197,10 +177,8 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Offcanvas variant.\n- `overlay`: The offcanvas covers the page content putting an overlay.\n- `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n> NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\nAlso, the `pushcontent` variant doesn't have the open/close transition."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "variant",
+                "reflect": true,
                 "defaultValue": "OffCanvasVariant.PUSHCONTENT"
             },
             "open": {
@@ -217,10 +195,8 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether the offcanvas is open. Default: false"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "open",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "transitiondirection": {
@@ -233,8 +209,7 @@ export class ZOffcanvas {
                         "TransitionDirection": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::TransitionDirection",
-                            "referenceLocation": "TransitionDirection"
+                            "id": "src/beans/index.tsx::TransitionDirection"
                         }
                     }
                 },
@@ -244,10 +219,8 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Open the content transitioning to a specified direction.\nThe `up` direction always show the `overlay`, also when the variant is `pushcontent`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "transitiondirection",
+                "reflect": true,
                 "defaultValue": "TransitionDirection.LEFT"
             },
             "skipLoadAnimation": {
@@ -267,10 +240,8 @@ export class ZOffcanvas {
                         }],
                     "text": "Skip the opening transition when the offcanvas is already open at the first render."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "skip-load-animation",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "showBackdrop": {
@@ -287,10 +258,8 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether to show the backdrop when the offcanvas is open. Default: true"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "show-backdrop",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -349,3 +318,4 @@ export class ZOffcanvas {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** Whether to show the backdrop when the offcanvas is open. Default: true */\n  @Prop()\n  showBackdrop = true;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContainer: HTMLElement;\n\n  private canvasContent: HTMLElement;\n\n  private allFocusableElements: HTMLElement[] = [];\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n\n  /**\n   * Returns all focusable elements inside the offcanvas content.\n   * Elements are considered focusable if:\n   * - They are not disabled\n   * - They are visible in the layout\n   * - They have a non-negative tabIndex or an explicit tabindex=\"0\"\n   */\n  private getFocusableElements(): HTMLElement[] {\n    if (!this.canvasContent) {\n      return [];\n    }\n\n    const all = Array.from(this.canvasContent.querySelectorAll<HTMLElement>(\"*\"));\n\n    return all.filter((el) => {\n      const tabindex = el.getAttribute(\"tabindex\");\n      const isDisabled = el.hasAttribute(\"disabled\");\n      const isHidden = el.offsetParent === null;\n\n      return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === \"0\");\n    });\n  }\n\n  /**\n   * Keeps keyboard navigation trapped inside the offcanvas when it is open.\n   * Implements circular tab navigation:\n   * - If Shift + Tab is pressed on the first focusable element, move focus to the last.\n   * - If Tab is pressed on the last focusable element, move focus to the first.\n   */\n  private trapFocus(event: KeyboardEvent): void {\n    if (!this.allFocusableElements.length) {\n      return;\n    }\n\n    const first = this.allFocusableElements[0];\n    const last = this.allFocusableElements[this.allFocusableElements.length - 1];\n    const active = document.activeElement as HTMLElement;\n\n    if (event.shiftKey && active === first) {\n      event.preventDefault();\n      last.focus();\n    }\n\n    if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  /**\n   * Handles keyboard interactions when the offcanvas is open.\n   * - Closes the offcanvas when the Escape key is pressed.\n   * - Traps focus inside the component when the Tab key is used.\n   */\n  @Listen(\"keydown\", {target: \"document\"})\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open) {\n      return;\n    }\n\n    if (event.key === KeyboardCode.ESC) {\n      event.preventDefault();\n      this.open = false;\n\n      return;\n    }\n\n    if (event.key === KeyboardCode.TAB) {\n      this.trapFocus(event);\n    }\n  }\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (this.open) {\n      // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n      // Move focus inside the offcanvas once it is rendered.\n      if (this.allFocusableElements.length > 0) {\n        this.allFocusableElements[0].focus();\n      } else {\n        this.canvasContent?.focus();\n      }\n\n      this.handlePageOverflow();\n    } else {\n      // Restore focus to the element that was focused before the offcanvas was opened.\n      this.previouslyFocusedElement?.focus();\n\n      // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n    this.allFocusableElements = this.getFocusableElements();\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content z-scrollbar\"\n            role=\"presentation\"\n            ref={(el) => (this.canvasContent = el)}\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&\n          this.showBackdrop && (\n            <div\n              class=\"backdrop\"\n              onClick={() => (this.open = false)}\n            ></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZOffcanvasStoriesArgs = ZOffcanvas &\n  CSSVarsArguments<\"z-offcanvas--top-space\" | \"--z-offcanvas--container-width\" | \"--z-offcanvas--container-height\">;\n\nconst StoryMeta = {\n  title: \"ZOffcanvas\",\n  component: \"z-offcanvas\",\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      story: {\n        inline: false,\n        iframeHeight: \"600px\",\n      },\n    },\n  },\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(OffCanvasVariant),\n    },\n    transitiondirection: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(TransitionDirection),\n    },\n    showBackdrop: {\n      control: {\n        if: {\n          arg: \"variant\",\n          eq: OffCanvasVariant.OVERLAY,\n        },\n      },\n    },\n  },\n  args: {\n    \"open\": true,\n    \"showBackdrop\": true,\n    \"--z-offcanvas--top-space\": \"0px\",\n    \"--z-offcanvas--container-width\": \"375px\",\n  },\n} satisfies Meta<ZOffcanvasStoriesArgs>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvasStoriesArgs>;\n\nconst DEMO_TEXT =\n  \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\";\n\nexport const OverlayTransitionDirectionRight = {\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.RIGHT}\n        .showBackdrop=${args.showBackdrop}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n    </div>`,\n} satisfies Story;\n\nexport const OverlayTransitionDirectionLeft = {\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.LEFT}\n        .showBackdrop=${args.showBackdrop}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      ${args.transitiondirection === \"right\" ? html`<div class=\"offcanvas-story-content\"></div>` : \"\"}\n    </div>`,\n} satisfies Story;\n\nexport const TransitionDirectionUp = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"transitiondirection\", \"--z-offcanvas--top-space\", \"--z-offcanvas--container-width\"],\n    },\n  },\n  args: {\n    \"--z-offcanvas--container-height\": \"90%\",\n  },\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.OVERLAY}\n        .transitiondirection=${TransitionDirection.UP}\n        .showBackdrop=${args.showBackdrop}\n        style=\"--z-offcanvas--container-height: ${args[\"--z-offcanvas--container-height\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n    </div>`,\n} satisfies Story;\n\nexport const PushContent = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"--z-offcanvas--top-space\"],\n    },\n  },\n  args: {\n    transitiondirection: TransitionDirection.RIGHT,\n  },\n  render: (args) =>\n    html`<div\n      class=\"pushcontent-story ${args.transitiondirection}\"\n      id=\"offcanvas-story-container\"\n    >\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.PUSHCONTENT}\n        .transitiondirection=${args.transitiondirection}\n        style=\"--z-offcanvas--container-width: ${args[\"--z-offcanvas--container-width\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>Offcanvas content</p>\n        </div>\n      </z-offcanvas>\n\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n    </div>`,\n} satisfies Story;\n"]}

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { InputType } from "../../beans";
 /**
  * Pagination bar component.
@@ -7,24 +7,17 @@ import { InputType } from "../../beans";
  */
 export class ZPagination {
     constructor() {
-        /** Enable navigation arrows. */
+        this.label = undefined;
         this.navArrows = true;
-        /** Number of pages to skip. */
+        this.totalPages = undefined;
         this.skip = 0;
-        /** Enable buttons to go to the first and last pages. */
         this.edges = false;
-        /** Current page. */
+        this.split = undefined;
+        this.visiblePages = undefined;
         this.currentPage = 1;
-        /**
-         * Internal visible pages variable.
-         * Needed to better handle conflicting props like `visiblePages` and `split`.
-         * This state will change based on props values and validation,
-         * keeping original `visiblePages` value intact.
-         */
+        this.goToPage = undefined;
         this._visiblePages = this.visiblePages;
-        /** Used to hides/change some functionalities on smaller screen sizes */
         this.isMobile = false;
-        /** Value of the go to page input */
         this.goToPageValue = null;
     }
     /**
@@ -242,10 +235,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Pagination label placed before the bar."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "navArrows": {
                 "type": "boolean",
@@ -261,10 +252,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Enable navigation arrows."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "nav-arrows",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "totalPages": {
@@ -281,10 +270,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Total number of pages. Required."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "total-pages"
+                "attribute": "total-pages",
+                "reflect": false
             },
             "skip": {
                 "type": "number",
@@ -300,10 +287,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to skip."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "skip",
+                "reflect": false,
                 "defaultValue": "0"
             },
             "edges": {
@@ -320,10 +305,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Enable buttons to go to the first and last pages."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "edges",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "split": {
@@ -340,10 +323,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to show left/right of the current, before showing \"load more\" symbol (\u2026)."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "split"
+                "attribute": "split",
+                "reflect": false
             },
             "visiblePages": {
                 "type": "number",
@@ -359,10 +340,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to show at a time. If not set, all pages will be shown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "visible-pages"
+                "attribute": "visible-pages",
+                "reflect": false
             },
             "currentPage": {
                 "type": "number",
@@ -378,10 +357,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Current page."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "current-page",
+                "reflect": false,
                 "defaultValue": "1"
             },
             "goToPage": {
@@ -398,10 +375,8 @@ export class ZPagination {
                     "tags": [],
                     "text": "Whether to show \"go to page\" feature."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "go-to-page"
+                "attribute": "go-to-page",
+                "reflect": false
             }
         };
     }
@@ -456,3 +431,4 @@ export class ZPagination {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-pagination/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background\n * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01\n */\n@Component({\n  tag: \"z-pagination\",\n  styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n  @Element() host: HTMLZPaginationElement;\n\n  /** Pagination label placed before the bar. */\n  @Prop()\n  label?: string;\n\n  /** Enable navigation arrows. */\n  @Prop()\n  navArrows = true;\n\n  /** Total number of pages. Required. */\n  @Prop()\n  totalPages!: number;\n\n  /** Number of pages to skip. */\n  @Prop()\n  skip = 0;\n\n  /** Enable buttons to go to the first and last pages. */\n  @Prop()\n  edges = false;\n\n  /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n  @Prop()\n  split?: number;\n\n  /** Number of pages to show at a time. If not set, all pages will be shown. */\n  @Prop()\n  visiblePages?: number;\n\n  /** Current page. */\n  @Prop({mutable: true})\n  currentPage = 1;\n\n  /** Whether to show \"go to page\" feature. */\n  @Prop()\n  goToPage: boolean;\n\n  /**\n   * Internal visible pages variable.\n   * Needed to better handle conflicting props like `visiblePages` and `split`.\n   * This state will change based on props values and validation,\n   * keeping original `visiblePages` value intact.\n   */\n  @State()\n  private _visiblePages = this.visiblePages;\n\n  /** Used to hides/change some functionalities on smaller screen sizes */\n  @State()\n  isMobile = false;\n\n  /** Value of the go to page input */\n  @State()\n  goToPageValue = null;\n\n  /** Event emitted when the current page has changed. */\n  @Event()\n  pageChanged: EventEmitter;\n\n  /**\n   * Set the max width of the pages container.\n   */\n  @Watch(\"_visiblePages\")\n  setPagesContainerWidth(): void {\n    if (!this._visiblePages || this.split) {\n      this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n      return;\n    }\n\n    const pagesContainerStyle = window.getComputedStyle(this.host);\n    const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n    this.host.style.setProperty(\n      \"--z-pagination--pages-container-max-width\",\n      `calc(${pageButtonWidth} * ${this._visiblePages})`\n    );\n  }\n\n  /**\n   * Set visible pages.\n   * Ensure that the visible pages are always <= the total pages.\n   * If `visiblePages` isn't set, fallback to the total pages.\n   */\n  @Watch(\"visiblePages\")\n  setVisiblePages(): void {\n    this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n  }\n\n  /**\n   * On page changed.\n   * @emits pageChanged\n   */\n  @Watch(\"currentPage\")\n  onPageChanged(): void {\n    this.pageChanged.emit(this.currentPage);\n    this.scrollToPage();\n  }\n\n  /**\n   * On split changed.\n   * Empty `edges` value. The split feature wins over the pages chunks and edges.\n   */\n  @Watch(\"split\")\n  onSplitChanged(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n  }\n\n  /**\n   * Hide stuff on mobile.\n   */\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  onResize(): void {\n    this.setMobile();\n  }\n\n  /**\n   * Set functionalities according to screen size.\n   */\n  private setMobile(): void {\n    const mobileMediaQuery = \"screen and (max-width: 767px)\";\n    this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n  }\n\n  /**\n   * Get a list of pages chunks, each of `visiblePages` length.\n   * @returns {number[][]}\n   */\n  private getPagesChunks(): number[][] {\n    // array of numbers from 1 to `totalPages`\n    const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n    const chunks = [];\n    const chunksCount = Math.ceil(pages.length / this._visiblePages);\n    for (let index = 0; index < chunksCount; index++) {\n      chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n    }\n\n    return chunks;\n  }\n\n  /**\n   * Scroll to the left the chunk of pages containing the current page.\n   */\n  private scrollToPage(): void {\n    const container = this.host.querySelector(\".pages-container\") as HTMLElement;\n    const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n    const navBtn = this.host.querySelector(\".navigation-button\") as HTMLElement;\n\n    if (!pageBtn || !container) {\n      return;\n    }\n\n    const containerWidth = container.getBoundingClientRect().width;\n    const pageBtnWidth = pageBtn.getBoundingClientRect().width;\n    const navBtnWidth = navBtn?.getBoundingClientRect()?.width ?? 0;\n\n    container.scrollLeft = this.currentPage * pageBtnWidth - navBtnWidth - containerWidth / 2;\n  }\n\n  /**\n   * Select a page.\n   * Do validations on the passed value before assigning it to `currentPage`.\n   * @param {number} page Page number to set\n   */\n  private selectPage(page): void {\n    this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n  }\n\n  /**\n   * Render page number button.\n   * @param {number} page Page number to render\n   * @returns {HTMLButtonElement}\n   */\n  private renderPage(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"page-button\"\n        type=\"button\"\n        aria-current={this.currentPage === page ? \"page\" : \"false\"}\n        title={`Vai alla pagina ${page}`}\n        data-page={page}\n        data-current={this.currentPage === page}\n        onClick={() => this.selectPage(page)}\n      >\n        {page}\n      </button>\n    );\n  }\n\n  /**\n   * Render split button.\n   * @param {number} page Page to select on click.\n   * @returns {HTMLButtonElement}\n   */\n  private renderEllipsisButton(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"ellipsis-button\"\n        type=\"button\"\n        title={`Vai alla pagina ${page}`}\n        onClick={() => this.selectPage(page)}\n      >\n        …\n      </button>\n    );\n  }\n\n  /**\n   * Render chunked page buttons.\n   * @returns {HTMLDivElement[]}\n   */\n  private renderPages(): HTMLDivElement[] {\n    const pagesChunks = this.getPagesChunks();\n    if (pagesChunks.length <= 0) {\n      return;\n    }\n\n    return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n  }\n\n  /**\n   * Render page buttons when split feature is enabled.\n   * @returns {HTMLButtonElement[]}\n   */\n  private renderSplitPages(): HTMLButtonElement[] {\n    // left and right split pages, current page, first and last page, left and right ellipsis button\n    if (this.totalPages <= this.split * 2 + 5) {\n      // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n      return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n    }\n\n    if (this.currentPage <= this.split * 2 + 2) {\n      // Render first (2 * split + 3) pages, ellipsis, then last page.\n      return [\n        ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n        this.renderEllipsisButton(this.split * 2 + 4),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n      // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n      return [\n        this.renderPage(1),\n        this.renderEllipsisButton(this.currentPage - this.split - 1),\n        ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n        this.renderEllipsisButton(this.currentPage + this.split + 1),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    // Render first page, ellipsis, then last (2 * split + 3) pages.\n    return [\n      this.renderPage(1),\n      this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n      ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n    ];\n  }\n\n  private renderBackButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla pagina precedente\"\n        disabled={this.currentPage === 1}\n        onClick={() => this.selectPage(this.currentPage - 1)}\n      >\n        <z-icon name=\"chevron-left\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderForwardButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla prossima pagina\"\n        disabled={this.currentPage === this.totalPages}\n        onClick={() => this.selectPage(this.currentPage + 1)}\n      >\n        <z-icon name=\"chevron-right\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderMobile(): HTMLElement[] {\n    const pagesChunks = this.getPagesChunks();\n\n    return [\n      this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n      <div class=\"pagination-bar\">\n        {this.renderBackButton()}\n\n        {!this.goToPage && (\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {pagesChunks.length > 0 &&\n              pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n          </div>\n        )}\n\n        {this.goToPage && (\n          <form\n            class=\"mobile-go-to-page\"\n            onSubmit={(ev) => {\n              ev.preventDefault();\n              this.selectPage(this.goToPageValue);\n            }}\n          >\n            <z-input\n              class=\"go-to-page-input\"\n              type={InputType.NUMBER}\n              min={1}\n              max={this.totalPages}\n              message={false}\n              onInput={(ev: InputEvent) => {\n                this.goToPageValue = (ev.target as HTMLZInputElement).value;\n              }}\n              placeholder={this.currentPage.toString()}\n              hasclearicon={false}\n            ></z-input>\n            <span>{`/${this.totalPages}`}</span>\n          </form>\n        )}\n\n        {this.renderForwardButton()}\n      </div>,\n    ];\n  }\n\n  componentDidLoad(): void {\n    this.setVisiblePages();\n  }\n\n  componentDidRender(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n\n    this.setPagesContainerWidth();\n    this.setMobile();\n    this.scrollToPage();\n  }\n\n  render(): HTMLZPaginationElement {\n    if (this.isMobile) {\n      return <Host>{this.renderMobile()}</Host>;\n    }\n\n    return (\n      <Host>\n        <div class=\"pagination-bar\">\n          {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title=\"Vai alla pagina 1\"\n              disabled={this.currentPage === 1}\n              onClick={() => this.selectPage(1)}\n            >\n              Pagina 1\n            </button>\n          )}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage - this.skip}`}\n              disabled={this.currentPage <= this.skip}\n              onClick={() => this.selectPage(this.currentPage - this.skip)}\n            >\n              -{this.skip}\n            </button>\n          )}\n\n          {this.navArrows && this.renderBackButton()}\n\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {this.split ? this.renderSplitPages() : this.renderPages()}\n          </div>\n\n          {this.navArrows && this.renderForwardButton()}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage + this.skip}`}\n              disabled={this.currentPage > this.totalPages - this.skip}\n              onClick={() => this.selectPage(this.currentPage + this.skip)}\n            >\n              +{this.skip}\n            </button>\n          )}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.totalPages}`}\n              disabled={this.currentPage === this.totalPages}\n              onClick={() => this.selectPage(this.totalPages)}\n            >\n              Pagina {this.totalPages}\n            </button>\n          )}\n        </div>\n        {this.goToPage && (\n          <div class=\"go-to-page\">\n            <span class=\"z-label body-5-sb\">Vai a pagina:</span>\n            <div class=\"inputs\">\n              <z-input\n                class=\"go-to-page-input\"\n                type={InputType.NUMBER}\n                min={1}\n                max={this.totalPages}\n                message={false}\n                placeholder=\"2\"\n                hasclearicon={false}\n                onInput={(ev: InputEvent) => {\n                  this.goToPageValue = (ev.target as HTMLZInputElement).value;\n                }}\n                onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n              ></z-input>\n              <z-button\n                disabled={!this.goToPageValue}\n                title=\"Vai alla pagina inserita\"\n                onClick={() => this.selectPage(this.goToPageValue)}\n              >\n                vai\n              </z-button>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -115,3 +115,4 @@ export const Skip = {
         skip: 10,
     },
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-pagination/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAKjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;YACD,EAAE,EAAE;gBACF,GAAG,EAAE,OAAO;gBACZ,MAAM,EAAE,KAAK;aACd;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,OAAO,EAAE;YACP,EAAE,EAAE;gBACF,GAAG,EAAE,OAAO;gBACZ,MAAM,EAAE,KAAK;aACd;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,iCAAiC,EAAE,sBAAsB,EAAE;QAC3D,uCAAuC,EAAE,sBAAsB,EAAE;KAClE;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,GAAG;QACjB,cAAc,EAAE,CAAC;QACjB,aAAa,EAAE,CAAC;QAChB,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,KAAK;QACd,iCAAiC,EAAE,yBAAyB;QAC5D,uCAAuC,EAAE,wBAAwB;KAClE;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;eAET,IAAI,CAAC,KAAK;mBACN,IAAI,CAAC,SAAS;oBACb,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;cACzB,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;kBACnB,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK;cACX,QAAQ,CAAC;QACf,iCAAiC,EAAE,IAAI,CAAC,iCAAiC,CAAC;QAC1E,uCAAuC,EAAE,IAAI,CAAC,uCAAuC,CAAC;KACvF,CAAC;;GAEL;CACqC,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;KACT;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC;SACnC;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;KACZ;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE;KACT;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZPagination} from \".\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZPaginationStoriesArgs = ZPagination &\n  CSSVarsArguments<\"--z-pagination-background-color\" | \"--z-pagination-background-color-hover\">;\n\nconst StoryMeta = {\n  title: \"ZPagination\",\n  component: \"z-pagination\",\n  argTypes: {\n    \"totalPages\": {\n      control: {\n        type: \"number\",\n        min: 1,\n      },\n    },\n    \"visiblePages\": {\n      control: {\n        type: \"number\",\n        min: 1,\n      },\n      if: {\n        arg: \"split\",\n        truthy: false,\n      },\n    },\n    \"currentPage\": {\n      control: {\n        type: \"number\",\n        min: 1,\n      },\n    },\n    \"skip\": {\n      control: {\n        type: \"number\",\n        min: 1,\n      },\n    },\n    \"edges\": {\n      if: {\n        arg: \"split\",\n        truthy: false,\n      },\n    },\n    \"split\": {\n      control: {\n        type: \"number\",\n        min: 1,\n      },\n    },\n    \"--z-pagination-background-color\": getColorTokenArgConfig(),\n    \"--z-pagination-background-color-hover\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"label\": \"\",\n    \"navArrows\": true,\n    \"totalPages\": 201,\n    \"visiblePages\": 5,\n    \"currentPage\": 1,\n    \"goToPage\": false,\n    \"split\": undefined,\n    \"skip\": 0,\n    \"edges\": false,\n    \"--z-pagination-background-color\": \"var(--color-background)\",\n    \"--z-pagination-background-color-hover\": \"var(--color-surface01)\",\n  },\n  render: (args) => html`\n    <z-pagination\n      .label=${args.label}\n      .navArrows=${args.navArrows}\n      .totalPages=${args.totalPages}\n      .visiblePages=${args.visiblePages}\n      .skip=${args.skip}\n      .currentPage=${args.currentPage}\n      .goToPage=${args.goToPage}\n      .edges=${args.edges}\n      style=${styleMap({\n        \"--z-pagination-background-color\": args[\"--z-pagination-background-color\"],\n        \"--z-pagination-background-color-hover\": args[\"--z-pagination-background-color-hover\"],\n      })}\n    ></z-pagination>\n  `,\n} satisfies Meta<ZPaginationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPagination>;\n\nexport const VisiblePages = {\n  parameters: {\n    controls: {\n      exclude: [\"split\"],\n    },\n  },\n} satisfies Story;\n\n/**\n * > Note that enabling `split` will shut off `visiblePages` and `edges`.\n */\nexport const Split = {\n  args: {\n    split: 1,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"edges\", \"visiblePages\"],\n    },\n  },\n} satisfies Story;\n\nexport const Edges = {\n  args: {\n    edges: true,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"split\"],\n    },\n  },\n} satisfies Story;\n\nexport const Skip = {\n  args: {\n    skip: 10,\n  },\n} satisfies Story;\n"]}