@govtechsg/sgds-web-component 3.15.1-rc.3 → 3.16.0

package/components/Pagination/sgds-pagination.d.ts

@@ -3,14 +3,11 @@ import SgdsElement from "../../base/sgds-element";
 import SgdsButton from "../Button/sgds-button";
 import SgdsIcon from "../Icon/sgds-icon";
 import SgdsIconButton from "../IconButton/sgds-icon-button";
-import type { ISgdsPaginationPageChangeEventDetail } from "./types";
-export type { ISgdsPaginationPageChangeEventDetail };
 export type Navigation = "button" | "icon-button";
 /**
  * @summary The Pagination component enables the user to select a specific page from a range of pages
  *
  * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.
- * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change
  *
  **/
 export declare class SgdsPagination extends SgdsElement {

package/components/Pagination/sgds-pagination.js

@@ -12,7 +12,6 @@ import css_248z from './pagination.js';
  * @summary The Pagination component enables the user to select a specific page from a range of pages
  *
  * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.
- * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change
  *
  **/
 class SgdsPagination extends SgdsElement {

package/components/Pagination/sgds-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-pagination.js","sources":["../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"./types\";\nexport type { ISgdsPaginationPageChangeEventDetail };\n\nexport type Navigation = \"button\" | \"icon-button\";\n\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n * @eventDetail {ISgdsPaginationPageChangeEventDetail} sgds-page-change\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit<ISgdsPaginationPageChangeEventDetail>(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n          >${this.pages.length}</span\n        >\n      </li>\n    `;\n  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":";;;;;;;;;;AAaA;;;;;;AAMI;AACE,MAAO,cAAe,SAAQ,WAAW,CAAA;AAA/C,IAAA,WAAA,GAAA;;;QAU8B,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC;;QAGf,IAAW,CAAA,WAAA,GAAG,CAAC,CAAC;;QAGhB,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAoD,SAAS,CAAC;;QAGrE,IAAU,CAAA,UAAA,GAAe,aAAa,CAAC;;QAGvC,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;AAErD;;AAEG;QACc,IAAM,CAAA,MAAA,GAAc,CAAC,CAAC;QAwJ/B,IAAe,CAAA,eAAA,GAAG,IAAI,CAAA,CAAA;;;GAG7B,CAAC;QAEM,IAAoB,CAAA,oBAAA,GAAG,MAAK;YAClC,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;YAE3D,MAAM,QAAQ,GAAG,2BAA2B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YAC7G,IAAI,QAAQ,EAAE;AACZ,gBAAA,OAAO,IAAI,CAAC;aACb;AAED,YAAA,OAAO,IAAI,CAAA,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,eAAe,CAAA;;KAE1D,CAAC;AACJ,SAAC,CAAC;QA0DM,IAAa,CAAA,aAAA,GAAG,CAAC,SAA0B,EAAE,YAAqC,EAAE,UAAmB,KAAI;YACjH,MAAM,IAAI,GAAG,IAAI,CAAA,CAAA;AACR,WAAA,EAAA,IAAI,CAAC,IAAI,CAAA;aACT,SAAS,KAAK,MAAM,GAAG,YAAY,GAAG,aAAa,CAAA;aACnD,SAAS,KAAK,MAAM,GAAG,UAAU,GAAG,WAAW,CAAA;kBAC1C,CAAC;AACf,YAAA,OAAO,IAAI,CAAA,CAAA;;;oBAGK,SAAS,KAAK,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAC/C,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACP,eAAA,EAAA,UAAU,GAAG,SAAS,GAAG,YAAY,CAAA;oBAClC,UAAU,CAAA;;AAEnB,SAAA,EAAA,IAAI,GAAG,SAAS,CAAA;;KAEtB,CAAC;AACJ,SAAC,CAAC;KAsDH;;IAvSC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAuC,kBAAkB,EAAE,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACnH;;;AAGG;QACH,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;AAC1B,YAAA,QAAQ,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;SAC1B;AACD;;AAEG;AACH,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE;AAC7C,YAAA,QAAQ,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;SAC1B;AACD;;AAEG;AACH,QAAA,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;AACxB,YAAA,QAAQ,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;SAC1B;aAAM;AACL,YAAA,QAAQ,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;SAC1B;KACF;AAEO,IAAA,gBAAgB,CAAC,KAAiB,EAAA;AACxC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEzC,IAAI,SAAS,EAAE;YACb,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,YAAA,IAAI,WAAW,KAAK,IAAI,CAAC,WAAW,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;aAChC;SACF;KACF;IAEO,iBAAiB,GAAA;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;KACzC;IAEO,iBAAiB,GAAA;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;KACzC;AAED,IAAA,IAAY,KAAK,GAAA;QACf,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE;AACxE,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACf;AACD,QAAA,OAAO,KAAK,CAAC;KACd;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAE,MAAc,EAAE,MAAe,EAAE,YAAsB,EAAA;AAClG,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,QAAQ,MAAM;AACZ,gBAAA,KAAK,YAAY;AACf,oBAAA,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;oBAC1B,MAAM;AACR,gBAAA,KAAK,iBAAiB;oBACpB,IAAI,YAAY,EAAE;wBAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;yBAAM;wBACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;oBACD,MAAM;aACT;SACF;KACF;IAEO,gBAAgB,GAAA;AACtB,QAAA,OAAO,IAAI,CAAA,CAAA;AACC,cAAA,EAAA,CAAC,CAAqB,kBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAA;;;;uBAIrD,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,CAAsB,oBAAA,CAAA,GAAG,cAAc,CAAA;0BAC7D,IAAI,CAAC,WAAW,KAAK,CAAC,CAAA;;AAE7B,iBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACnB,mBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC,CAAA;;;;KAI7E,CAAC;KACH;IAEO,kBAAkB,GAAA;QACxB,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC3C,YAAA,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACrB;AAED,QAAA,OAAO,WAAW,CAAC;KACpB;IAEO,eAAe,GAAA;QACrB,MAAM,WAAW,GAAG,EAAE,CAAC;QACvB,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAC1B,QAAA,IAAI,OAAe,CAAC;AAEpB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACrB,YAAA,iBAAiB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SACpE;AAED,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACrB,YAAA,iBAAiB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACnE,YAAA,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;gBACtD,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;aACrD;SACF;AAED,QAAA,IAAI,iBAAiB,IAAI,CAAC,EAAE;YAC1B,iBAAiB,GAAG,CAAC,CAAC;SACvB;QAED,OAAO,GAAG,iBAAiB,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAE9C,IAAI,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAChC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;SACjC;AAED,QAAA,KAAK,IAAI,CAAC,GAAG,iBAAiB,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE;AACjD,YAAA,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACrB;AACD,QAAA,OAAO,WAAW,CAAC;KACpB;AAEO,IAAA,gBAAgB,CAAC,WAAqB,EAAA;QAC5C,OAAO,WAAW,CAAC,GAAG,CACpB,MAAM,IAAI,IAAI,CAAA,CAAA;AACF,gBAAA,EAAA,MAAM,CAAqB,kBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA;;;;;AAK/D,uBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,MAAM,GAAG,CAAsB,mBAAA,EAAA,MAAM,EAAE,GAAG,CAAA,WAAA,EAAc,MAAM,CAAE,CAAA,CAAA;4BAClF,IAAI,CAAC,WAAW,KAAK,MAAM,CAAA;AAClC,mBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACnB,qBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,CAAA;eAC1E,MAAM,CAAA;;;AAGd,MAAA,CAAA,CACF,CAAC;KACH;IAsBO,mBAAmB,GAAA;QACzB,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;AAC1B,YAAA,OAAO,IAAI,CAAC;SACb;AACD,QAAA,IACE,CAAC,oBAAoB;AACrB,YAAA,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;AAChC,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,EAClD;AACA,YAAA,OAAO,IAAI,CAAC;SACb;AACD,QAAA,OAAO,IAAI,CAAA,CAAA;;AAE6B,0CAAA,EAAA,IAAI,CAAC,eAAe,CAAA;;KAE3D,CAAC;KACH;IAEO,eAAe,GAAA;AACrB,QAAA,OAAO,IAAI,CAAA,CAAA;gBACC,IAAI,CAAC,KAAK,CAAC,MAAM,qBAAqB,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA;;;;AAIrF,qBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;AACjD,cAAE,CAAsB,mBAAA,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAE,CAAA;AAC3C,cAAE,CAAc,WAAA,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAE,CAAA,CAAA;AACrB,wBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;;AAE7C,iBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACnB,mBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;aACrF,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;;;KAGzB,CAAC;KACH;IAEO,sBAAsB,CAC5B,cAA+B,EAC/B,YAAyC,EAAA;AAEzC,QAAA,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;AACjG,QAAA,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC;AACvD,QAAA,MAAM,UAAU,GAAG,cAAc,KAAK,MAAM,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAEjG,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;AAChC,YAAA,OAAO,IAAI,CAAA,CAAG,EAAA,IAAI,CAAC,aAAa,CAAC,cAAc,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,CAAC;SAC9E;AACD,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,aAAa,EAAE;AACrC,YAAA,OAAO,IAAI,CAAA,CAAG,EAAA,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,CAAC;SAC/E;AAED,QAAA,OAAO,IAAI,CAAA,CAAG,EAAA,OAAO,EAAE,CAAC;KACzB;AAqBO,IAAA,cAAc,CAAC,SAA0B,EAAE,YAAqC,EAAE,UAAmB,EAAA;AAC3G,QAAA,OAAO,IAAI,CAAA,CAAA;;;oBAGK,SAAS,KAAK,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAC/C,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACP,eAAA,EAAA,UAAU,GAAG,SAAS,GAAG,YAAY,CAAA;oBAClC,UAAU,CAAA;;eAEf,SAAS,KAAK,MAAM,GAAG,YAAY,GAAG,aAAa,CAAA;;KAE7D,CAAC;KACH;IACO,4BAA4B,GAAA;AAClC,QAAA,OAAO,IAAI,CAAA,CAAA;QACP,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAA;AAClB,+CAAA,EAAA,IAAI,CAAC,WAAW,CAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;QACjF,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAA;KAC9D,CAAC;KACH;IAEO,wBAAwB,GAAA;AAC9B,QAAA,OAAO,IAAI,CAAA,CAAA;AACP,MAAA,EAAA,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,gBAAgB,EAAE,CAAA;AACtF,MAAA,EAAA,IAAI,CAAC,oBAAoB,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAA;AAC1G,MAAA,EAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACzD,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAA;KAC9D,CAAC;KACH;IAEO,uBAAuB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAA,CAAI,CAAA,EAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,GAAG,CAAC;KACpE;IAEO,uBAAuB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAA,CAAA;QACP,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAA;QAC3D,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAA;KAC9D,CAAC;KACH;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACxC,UAAA,EAAA,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,IAAI,CAAC,4BAA4B,EAAE,GAAG,OAAO,CAAA;AAC9E,UAAA,EAAA,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,IAAI,CAAC,wBAAwB,EAAE,GAAG,OAAO,CAAA;AACtE,UAAA,EAAA,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,IAAI,CAAC,uBAAuB,EAAE,GAAG,OAAO,CAAA;AACpE,UAAA,EAAA,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,IAAI,CAAC,uBAAuB,EAAE,GAAG,OAAO,CAAA;;;KAG3E,CAAC;KACH;;AAvUM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,CAA1C,CAA4C;AACzD;AACO,cAAA,CAAA,YAAY,GAAG;AACpB,IAAA,kBAAkB,EAAE,cAAc;AAClC,IAAA,aAAa,EAAE,UAAU;AACzB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAJkB,CAIjB;AAG0B,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAgB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAsE,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrE,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAwC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA0B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKpC,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA+B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIvC,UAAA,CAAA;IADC,KAAK,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC;AAwBrD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-pagination.js","sources":["../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n          >${this.pages.length}</span\n        >\n      </li>\n    `;\n  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        tone=\"neutral\"\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}