voa-ds-core 1.0.3

package/dist/collection/components/voa-pagination/voa-pagination-item.css

@@ -0,0 +1,34 @@
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.base-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  min-width: 32px;
+  /* Structural minimums */
+  height: 32px;
+}
+
+:host([type="ellipsis"]) .content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/collection/components/voa-pagination/voa-pagination-item.js

@@ -0,0 +1,137 @@
+import { h, Host } from "@stencil/core";
+export class VoaPaginationItem {
+    constructor() {
+        /**
+         * The type of item to render.
+         * - page: A standard page number
+         * - ellipsis: The "..." separator
+         * - prev/next: Navigation arrows
+         */
+        this.type = 'page';
+        /**
+         * Is this the current active page?
+         */
+        this.active = false;
+        /**
+         * Is this item disabled?
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (!this.disabled && this.type !== 'ellipsis') {
+                this.itemClick.emit();
+            }
+        };
+    }
+    renderIcon() {
+        if (this.type === 'prev') {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "15 18 9 12 15 6" })));
+        }
+        if (this.type === 'next') {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "9 18 15 12 9 6" })));
+        }
+        return null;
+    }
+    render() {
+        // Ellipsis are not interactive
+        if (this.type === 'ellipsis') {
+            return (h(Host, { "aria-hidden": "true" }, h("div", { part: "content", class: "content" }, "...")));
+        }
+        return (h(Host, { onClick: this.handleClick, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("button", { type: "button", part: "base", class: "base-button", disabled: this.disabled, tabIndex: this.disabled ? -1 : 0 }, h("span", { part: "content", class: "content" }, (this.type === 'prev' || this.type === 'next') ? (h("span", { part: "icon", class: "icon-wrapper" }, this.renderIcon())) : (h("slot", null))))));
+    }
+    static get is() { return "voa-pagination-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-pagination-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-pagination-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'page' | 'ellipsis' | 'prev' | 'next'",
+                    "resolved": "\"ellipsis\" | \"next\" | \"page\" | \"prev\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of item to render.\r\n- page: A standard page number\r\n- ellipsis: The \"...\" separator\r\n- prev/next: Navigation arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'page'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is this the current active page?"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is this item disabled?"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-pagination-item.js.map

package/dist/collection/components/voa-pagination/voa-pagination-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-pagination-item.js","sourceRoot":"","sources":["../../../src/components/voa-pagination/voa-pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,iBAAiB;IAL9B;QAQE;;;;;WAKG;QACsB,SAAI,GAA0C,MAAM,CAAC;QAE9E;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QAEjD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAI3C,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC/C,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;KAwDH;IAtDS,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,CACL,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO;gBACxH,gBAAU,MAAM,EAAC,iBAAiB,GAAY,CAC1C,CACP,CAAC;QACJ,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,CACL,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO;gBACxH,gBAAU,MAAM,EAAC,gBAAgB,GAAY,CACzC,CACP,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,+BAA+B;QAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,OAAO,CACL,EAAC,IAAI,mBAAa,MAAM;gBACtB,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,UAAU,CACxC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,WAAW,kBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAEjD,cACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAEhC,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,IACjC,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAChD,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnC,IAAI,CAAC,UAAU,EAAE,CACb,CACR,CAAC,CAAC,CAAC,CACF,eAAQ,CACT,CACI,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-pagination-item',\r\n  styleUrl: 'voa-pagination-item.css',\r\n  shadow: true,\r\n})\r\nexport class VoaPaginationItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The type of item to render.\r\n   * - page: A standard page number\r\n   * - ellipsis: The \"...\" separator\r\n   * - prev/next: Navigation arrows\r\n   */\r\n  @Prop({ reflect: true }) type: 'page' | 'ellipsis' | 'prev' | 'next' = 'page';\r\n\r\n  /**\r\n   * Is this the current active page?\r\n   */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  /**\r\n   * Is this item disabled?\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  @Event() itemClick: EventEmitter<void>;\r\n\r\n  private handleClick = () => {\r\n    if (!this.disabled && this.type !== 'ellipsis') {\r\n      this.itemClick.emit();\r\n    }\r\n  };\r\n\r\n  private renderIcon() {\r\n    if (this.type === 'prev') {\r\n      return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"15 18 9 12 15 6\"></polyline>\r\n        </svg>\r\n      );\r\n    }\r\n    if (this.type === 'next') {\r\n      return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n        </svg>\r\n      );\r\n    }\r\n    return null;\r\n  }\r\n\r\n  render() {\r\n    // Ellipsis are not interactive\r\n    if (this.type === 'ellipsis') {\r\n      return (\r\n        <Host aria-hidden=\"true\">\r\n          <div part=\"content\" class=\"content\">...</div>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        aria-current={this.active ? 'page' : undefined}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          part=\"base\"\r\n          class=\"base-button\"\r\n          disabled={this.disabled}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n        >\r\n          <span part=\"content\" class=\"content\">\r\n            {(this.type === 'prev' || this.type === 'next') ? (\r\n              <span part=\"icon\" class=\"icon-wrapper\">\r\n                {this.renderIcon()}\r\n              </span>\r\n            ) : (\r\n              <slot />\r\n            )}\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-pagination/voa-pagination.css

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.pagination-list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 4px;
+  /* Default gap, can be overridden externally */
+}
+
+li {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}

package/dist/collection/components/voa-pagination/voa-pagination.js

@@ -0,0 +1,174 @@
+import { h, Host } from "@stencil/core";
+export class VoaPagination {
+    constructor() {
+        this.currentPage = 1;
+        this.totalPages = 1;
+        /**
+         * How many siblings to show around the current page.
+         * E.g., siblingCount=1 means: ... 4 [5] 6 ...
+         */
+        this.siblingCount = 1;
+        this.internalPage = 1;
+    }
+    handlePageChange(val) {
+        this.internalPage = val;
+    }
+    componentWillLoad() {
+        this.internalPage = this.currentPage;
+    }
+    onPageClick(page) {
+        if (page < 1 || page > this.totalPages || page === this.internalPage)
+            return;
+        this.internalPage = page;
+        this.voaPageChange.emit(this.internalPage);
+    }
+    /**
+     * THE ALGORITHM:
+     * Generates the range of numbers to display.
+     */
+    getPaginationRange() {
+        const totalPageNumbers = this.siblingCount + 5; // sibling + first + last + current + 2*dots
+        // Case 1: Total pages is small, show everything
+        if (totalPageNumbers >= this.totalPages) {
+            return Array.from({ length: this.totalPages }, (_, i) => i + 1);
+        }
+        const leftSiblingIndex = Math.max(this.internalPage - this.siblingCount, 1);
+        const rightSiblingIndex = Math.min(this.internalPage + this.siblingCount, this.totalPages);
+        const shouldShowLeftDots = leftSiblingIndex > 2;
+        const shouldShowRightDots = rightSiblingIndex < this.totalPages - 2;
+        const firstPageIndex = 1;
+        const lastPageIndex = this.totalPages;
+        // Case 2: No left dots, but right dots shown
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            let leftItemCount = 3 + 2 * this.siblingCount;
+            let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+            return [...leftRange, '...', lastPageIndex];
+        }
+        // Case 3: No right dots, but left dots shown
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            let rightItemCount = 3 + 2 * this.siblingCount;
+            let rightRange = Array.from({ length: rightItemCount }, (_, i) => lastPageIndex - rightItemCount + i + 1);
+            return [firstPageIndex, '...', ...rightRange];
+        }
+        // Case 4: Both dots shown
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            let middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);
+            return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];
+        }
+    }
+    render() {
+        const paginationRange = this.getPaginationRange();
+        return (h(Host, { key: '87acc93be81f1e8446f923d569ede98b506d39f0' }, h("nav", { key: 'bb98a635c41d184a29bd796a63268db9819b46d3', role: "navigation", "aria-label": "Pagination" }, h("ul", { key: 'd9457fab43c97763bf2d9252f2d3b5660bf9a6eb', class: "pagination-list" }, h("li", { key: '549e36d444315203c43952d7d7ae2bedf985a697' }, h("voa-pagination-item", { key: '5d0c111b0d1e1fab9b803a5d32e1995c6954515c', type: "prev", disabled: this.internalPage === 1, onItemClick: () => this.onPageClick(this.internalPage - 1) })), paginationRange.map((pageNumber, index) => {
+            if (pageNumber === '...') {
+                return (h("li", { key: `dots-${index}` }, h("voa-pagination-item", { type: "ellipsis" })));
+            }
+            return (h("li", { key: pageNumber }, h("voa-pagination-item", { active: pageNumber === this.internalPage, onItemClick: () => this.onPageClick(pageNumber) }, pageNumber)));
+        }), h("li", { key: '7592d17b5d2ec1697377bd5d545162f2446a3828' }, h("voa-pagination-item", { key: 'b4961409192136247c6d62b59b093e5719f925a0', type: "next", disabled: this.internalPage === this.totalPages, onItemClick: () => this.onPageClick(this.internalPage + 1) }))))));
+    }
+    static get is() { return "voa-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "siblingCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many siblings to show around the current page.\r\nE.g., siblingCount=1 means: ... 4 [5] 6 ..."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sibling-count",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalPage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaPageChange",
+                "name": "voaPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "handlePageChange"
+            }];
+    }
+}
+//# sourceMappingURL=voa-pagination.js.map

package/dist/collection/components/voa-pagination/voa-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-pagination.js","sourceRoot":"","sources":["../../../src/components/voa-pagination/voa-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Host, State, Watch } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-pagination\",\r\n  styleUrl: \"voa-pagination.css\",\r\n  shadow: true,\r\n})\r\nexport class VoaPagination {\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalPages: number = 1;\r\n\r\n  /**\r\n   * How many siblings to show around the current page.\r\n   * E.g., siblingCount=1 means: ... 4 [5] 6 ...\r\n   */\r\n  @Prop() siblingCount: number = 1;\r\n\r\n  @Event() voaPageChange: EventEmitter<number>;\r\n\r\n  @State() internalPage: number = 1;\r\n\r\n  @Watch('currentPage')\r\n  handlePageChange(val: number) {\r\n    this.internalPage = val;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalPage = this.currentPage;\r\n  }\r\n\r\n  private onPageClick(page: number) {\r\n    if (page < 1 || page > this.totalPages || page === this.internalPage) return;\r\n    this.internalPage = page;\r\n    this.voaPageChange.emit(this.internalPage);\r\n  }\r\n\r\n  /**\r\n   * THE ALGORITHM:\r\n   * Generates the range of numbers to display.\r\n   */\r\n  private getPaginationRange() {\r\n    const totalPageNumbers = this.siblingCount + 5; // sibling + first + last + current + 2*dots\r\n\r\n    // Case 1: Total pages is small, show everything\r\n    if (totalPageNumbers >= this.totalPages) {\r\n      return Array.from({ length: this.totalPages }, (_, i) => i + 1);\r\n    }\r\n\r\n    const leftSiblingIndex = Math.max(this.internalPage - this.siblingCount, 1);\r\n    const rightSiblingIndex = Math.min(this.internalPage + this.siblingCount, this.totalPages);\r\n\r\n    const shouldShowLeftDots = leftSiblingIndex > 2;\r\n    const shouldShowRightDots = rightSiblingIndex < this.totalPages - 2;\r\n\r\n    const firstPageIndex = 1;\r\n    const lastPageIndex = this.totalPages;\r\n\r\n    // Case 2: No left dots, but right dots shown\r\n    if (!shouldShowLeftDots && shouldShowRightDots) {\r\n      let leftItemCount = 3 + 2 * this.siblingCount;\r\n      let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);\r\n      return [...leftRange, '...', lastPageIndex];\r\n    }\r\n\r\n    // Case 3: No right dots, but left dots shown\r\n    if (shouldShowLeftDots && !shouldShowRightDots) {\r\n      let rightItemCount = 3 + 2 * this.siblingCount;\r\n      let rightRange = Array.from({ length: rightItemCount }, (_, i) => lastPageIndex - rightItemCount + i + 1);\r\n      return [firstPageIndex, '...', ...rightRange];\r\n    }\r\n\r\n    // Case 4: Both dots shown\r\n    if (shouldShowLeftDots && shouldShowRightDots) {\r\n      let middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);\r\n      return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const paginationRange = this.getPaginationRange();\r\n\r\n    return (\r\n      <Host>\r\n        <nav role=\"navigation\" aria-label=\"Pagination\">\r\n          <ul class=\"pagination-list\">\r\n\r\n            {/* Previous Button */}\r\n            <li>\r\n              <voa-pagination-item\r\n                type=\"prev\"\r\n                disabled={this.internalPage === 1}\r\n                onItemClick={() => this.onPageClick(this.internalPage - 1)}\r\n              />\r\n            </li>\r\n\r\n            {/* Page Numbers */}\r\n            {paginationRange.map((pageNumber, index) => {\r\n              if (pageNumber === '...') {\r\n                return (\r\n                  <li key={`dots-${index}`}>\r\n                    <voa-pagination-item type=\"ellipsis\" />\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              return (\r\n                <li key={pageNumber}>\r\n                  <voa-pagination-item\r\n                    active={pageNumber === this.internalPage}\r\n                    onItemClick={() => this.onPageClick(pageNumber as number)}\r\n                  >\r\n                    {pageNumber}\r\n                  </voa-pagination-item>\r\n                </li>\r\n              );\r\n            })}\r\n\r\n            {/* Next Button */}\r\n            <li>\r\n              <voa-pagination-item\r\n                type=\"next\"\r\n                disabled={this.internalPage === this.totalPages}\r\n                onItemClick={() => this.onPageClick(this.internalPage + 1)}\r\n              />\r\n            </li>\r\n\r\n          </ul>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-pagination/voa-pagination.stories.js

@@ -0,0 +1,257 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-pagination.external.css";
+const meta = {
+    title: "Componentes/Navegação/Pagination",
+    component: 'voa-pagination',
+    tags: ['autodocs'],
+    argTypes: {
+        currentPage: { control: 'number' },
+        totalPages: { control: 'number' },
+        siblingCount: { control: 'number' },
+    },
+    args: {
+        currentPage: 1,
+        totalPages: 20,
+        siblingCount: 1
+    }
+};
+export default meta;
+export const Default = {
+    render: (args) => html `
+    <voa-pagination
+      .currentPage=${args.currentPage}
+      .totalPages=${args.totalPages}
+      .siblingCount=${args.siblingCount}
+      @voaPageChange=${(e) => console.log('Page:', e.detail)}
+    ></voa-pagination>
+  `
+};
+export const SmallRange = {
+    args: {
+        totalPages: 5,
+        currentPage: 1
+    }
+};
+export const MiddleRange = {
+    args: {
+        totalPages: 20,
+        currentPage: 10
+    }
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Uso do Componente
+
+Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+
+### HTML (Web Components)
+
+\`\`\`html
+<!-- Paginação básica -->
+<voa-pagination 
+  current-page="1"
+  total-pages="20"
+  sibling-count="1"
+  onvoaPageChange={(e) => console.log('Page:', e.detail)}
+></voa-pagination>
+
+<!-- Paginação com página atual no meio -->
+<voa-pagination 
+  current-page="10"
+  total-pages="20"
+  sibling-count="1"
+></voa-pagination>
+
+<!-- Paginação pequena -->
+<voa-pagination 
+  current-page="1"
+  total-pages="5"
+  sibling-count="1"
+></voa-pagination>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaPagination } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handlePageChange = (e: CustomEvent<number>) => {
+    setCurrentPage(e.detail);
+    console.log('Page:', e.detail);
+  };
+
+  return (
+    <>
+      {/* Paginação básica */}
+      <VoaPagination
+        currentPage={currentPage}
+        totalPages={20}
+        siblingCount={1}
+        onVoaPageChange={handlePageChange}
+      />
+
+      {/* Paginação com página atual no meio */}
+      <VoaPagination
+        currentPage={10}
+        totalPages={20}
+        siblingCount={1}
+        onVoaPageChange={handlePageChange}
+      />
+
+      {/* Paginação pequena */}
+      <VoaPagination
+        currentPage={currentPage}
+        totalPages={5}
+        siblingCount={1}
+        onVoaPageChange={handlePageChange}
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaPagination } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Paginação básica -->
+    <voa-pagination
+      [currentPage]="currentPage"
+      [totalPages]="20"
+      [siblingCount]="1"
+      (voaPageChange)="handlePageChange($event)"
+    ></voa-pagination>
+
+    <!-- Paginação com página atual no meio -->
+    <voa-pagination
+      [currentPage]="10"
+      [totalPages]="20"
+      [siblingCount]="1"
+      (voaPageChange)="handlePageChange($event)"
+    ></voa-pagination>
+
+    <!-- Paginação pequena -->
+    <voa-pagination
+      [currentPage]="currentPage"
+      [totalPages]="5"
+      [siblingCount]="1"
+      (voaPageChange)="handlePageChange($event)"
+    ></voa-pagination>
+  \`
+})
+export class ExampleComponent {
+  currentPage = 1;
+
+  handlePageChange(event: CustomEvent<number>) {
+    this.currentPage = event.detail;
+    console.log('Page:', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Paginação básica -->
+    <VoaPagination
+      :current-page="currentPage"
+      :total-pages="20"
+      :sibling-count="1"
+      @voaPageChange="handlePageChange"
+    />
+
+    <!-- Paginação com página atual no meio -->
+    <VoaPagination
+      :current-page="10"
+      :total-pages="20"
+      :sibling-count="1"
+      @voaPageChange="handlePageChange"
+    />
+
+    <!-- Paginação pequena -->
+    <VoaPagination
+      :current-page="currentPage"
+      :total-pages="5"
+      :sibling-count="1"
+      @voaPageChange="handlePageChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaPagination } from '@voa-ds/vue';
+
+const currentPage = ref(1);
+
+const handlePageChange = (event: CustomEvent<number>) => {
+  currentPage.value = event.detail;
+  console.log('Page:', event.detail);
+};
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `
+            }
+        }
+    },
+    render: () => html `
+    <div style="padding: 2rem; max-width: 100%;">
+      <h2 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;">Uso do Componente</h2>
+      <p style="margin-bottom: 2rem; color: #666;">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplo Interativo</h3>
+      <voa-pagination
+        .currentPage=${1}
+        .totalPages=${20}
+        .siblingCount=${1}
+        style="margin-bottom: 2rem;"
+      ></voa-pagination>
+      <div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;">
+        <p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>
+        <p style="margin: 0; color: #666; font-size: 0.9rem;">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href="?path=/docs/components-voapagination--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-pagination.stories.js.map

package/dist/collection/components/voa-pagination/voa-pagination.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/voa-pagination/voa-pagination.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,kDAAkD,CAAC;AAE1D,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,UAAU,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KACpC;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,CAAC;KAChB;CACa,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAa;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;qBAEH,IAAI,CAAC,WAAW;oBACjB,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;uBAChB,CAAC,CAAc,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC;;GAEtE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAa;IAClC,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAa;IACnC,IAAI,EAAE;QACJ,UAAU,EAAE,EAAE;QACd,WAAW,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,+CAA+C;AAC/C,6BAA6B;AAC7B,+CAA+C;AAE/C,MAAM,CAAC,MAAM,KAAK,GAAa;IAC7B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA2LN;aACF;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;uBAMG,CAAC;sBACF,EAAE;wBACA,CAAC;;;;;;;;GAQtB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-pagination.external.css';\r\n\r\nconst meta = {\r\n  title: \"Componentes/Navegação/Pagination\",\r\n  component: 'voa-pagination',\r\n  tags: ['autodocs'],\r\n  argTypes: {\r\n    currentPage: { control: 'number' },\r\n    totalPages: { control: 'number' },\r\n    siblingCount: { control: 'number' },\r\n  },\r\n  args: {\r\n    currentPage: 1,\r\n    totalPages: 20,\r\n    siblingCount: 1\r\n  }\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nexport const Default: StoryObj = {\r\n  render: (args) => html`\r\n    <voa-pagination\r\n      .currentPage=${args.currentPage}\r\n      .totalPages=${args.totalPages}\r\n      .siblingCount=${args.siblingCount}\r\n      @voaPageChange=${(e: CustomEvent) => console.log('Page:', e.detail)}\r\n    ></voa-pagination>\r\n  `\r\n};\r\n\r\nexport const SmallRange: StoryObj = {\r\n  args: {\r\n    totalPages: 5,\r\n    currentPage: 1\r\n  }\r\n};\r\n\r\nexport const MiddleRange: StoryObj = {\r\n  args: {\r\n    totalPages: 20,\r\n    currentPage: 10\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: StoryObj = {\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Paginação básica -->\r\n<voa-pagination \r\n  current-page=\"1\"\r\n  total-pages=\"20\"\r\n  sibling-count=\"1\"\r\n  onvoaPageChange={(e) => console.log('Page:', e.detail)}\r\n></voa-pagination>\r\n\r\n<!-- Paginação com página atual no meio -->\r\n<voa-pagination \r\n  current-page=\"10\"\r\n  total-pages=\"20\"\r\n  sibling-count=\"1\"\r\n></voa-pagination>\r\n\r\n<!-- Paginação pequena -->\r\n<voa-pagination \r\n  current-page=\"1\"\r\n  total-pages=\"5\"\r\n  sibling-count=\"1\"\r\n></voa-pagination>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaPagination } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n\r\n  const handlePageChange = (e: CustomEvent<number>) => {\r\n    setCurrentPage(e.detail);\r\n    console.log('Page:', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Paginação básica */}\r\n      <VoaPagination\r\n        currentPage={currentPage}\r\n        totalPages={20}\r\n        siblingCount={1}\r\n        onVoaPageChange={handlePageChange}\r\n      />\r\n\r\n      {/* Paginação com página atual no meio */}\r\n      <VoaPagination\r\n        currentPage={10}\r\n        totalPages={20}\r\n        siblingCount={1}\r\n        onVoaPageChange={handlePageChange}\r\n      />\r\n\r\n      {/* Paginação pequena */}\r\n      <VoaPagination\r\n        currentPage={currentPage}\r\n        totalPages={5}\r\n        siblingCount={1}\r\n        onVoaPageChange={handlePageChange}\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaPagination } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Paginação básica -->\r\n    <voa-pagination\r\n      [currentPage]=\"currentPage\"\r\n      [totalPages]=\"20\"\r\n      [siblingCount]=\"1\"\r\n      (voaPageChange)=\"handlePageChange($event)\"\r\n    ></voa-pagination>\r\n\r\n    <!-- Paginação com página atual no meio -->\r\n    <voa-pagination\r\n      [currentPage]=\"10\"\r\n      [totalPages]=\"20\"\r\n      [siblingCount]=\"1\"\r\n      (voaPageChange)=\"handlePageChange($event)\"\r\n    ></voa-pagination>\r\n\r\n    <!-- Paginação pequena -->\r\n    <voa-pagination\r\n      [currentPage]=\"currentPage\"\r\n      [totalPages]=\"5\"\r\n      [siblingCount]=\"1\"\r\n      (voaPageChange)=\"handlePageChange($event)\"\r\n    ></voa-pagination>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  currentPage = 1;\r\n\r\n  handlePageChange(event: CustomEvent<number>) {\r\n    this.currentPage = event.detail;\r\n    console.log('Page:', event.detail);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Paginação básica -->\r\n    <VoaPagination\r\n      :current-page=\"currentPage\"\r\n      :total-pages=\"20\"\r\n      :sibling-count=\"1\"\r\n      @voaPageChange=\"handlePageChange\"\r\n    />\r\n\r\n    <!-- Paginação com página atual no meio -->\r\n    <VoaPagination\r\n      :current-page=\"10\"\r\n      :total-pages=\"20\"\r\n      :sibling-count=\"1\"\r\n      @voaPageChange=\"handlePageChange\"\r\n    />\r\n\r\n    <!-- Paginação pequena -->\r\n    <VoaPagination\r\n      :current-page=\"currentPage\"\r\n      :total-pages=\"5\"\r\n      :sibling-count=\"1\"\r\n      @voaPageChange=\"handlePageChange\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaPagination } from '@voa-ds/vue';\r\n\r\nconst currentPage = ref(1);\r\n\r\nconst handlePageChange = (event: CustomEvent<number>) => {\r\n  currentPage.value = event.detail;\r\n  console.log('Page:', event.detail);\r\n};\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: () => html`\r\n    <div style=\"padding: 2rem; max-width: 100%;\">\r\n      <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n      <voa-pagination\r\n        .currentPage=${1}\r\n        .totalPages=${20}\r\n        .siblingCount=${1}\r\n        style=\"margin-bottom: 2rem;\"\r\n      ></voa-pagination>\r\n      <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n        <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n        <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href=\"?path=/docs/components-voapagination--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n      </div>\r\n    </div>\r\n  `\r\n};\r\n"]}