@carbon/web-components 2.52.0 → 2.53.0

package/es/components/pagination-nav/pagination-nav.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import "../icon-button/index.js";
-import { PAGINATION_NAV_SIZE, PAGINATION_TOOLTIP_ALIGNMENT, PAGINATION_TOOLTIP_POSITION } from "./defs.js";
+import "./defs.js";
 import pagination_nav_default$1 from "./pagination-nav.scss.js";
 import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -19,7 +19,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import OverflowMenuHorizontal16 from "@carbon/icons/es/overflow-menu--horizontal/16.js";
 import CaretLeft16 from "@carbon/icons/es/caret--left/16.js";
 import CaretRight16 from "@carbon/icons/es/caret--right/16.js";
-
 //#region src/components/pagination-nav/pagination-nav.ts
 /**
 *
@@ -69,9 +68,9 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
 		this.loop = false;
 		this.page = 0;
 		this.totalItems = 1;
-		this.size = PAGINATION_NAV_SIZE.LARGE;
-		this.tooltipAlignment = PAGINATION_TOOLTIP_ALIGNMENT.CENTER;
-		this.tooltipPosition = PAGINATION_TOOLTIP_POSITION.BOTTOM;
+		this.size = "lg";
+		this.tooltipAlignment = "center";
+		this.tooltipPosition = "bottom";
 		this.translateWithId = defaultTranslateWithId;
 	}
 	_calculateCuts(page, totalItems, itemsDisplayedOnPage, splitPoint = null) {
@@ -148,17 +147,17 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
 		const { translateWithId: t } = this;
 		const itemLabel = t("carbon.pagination-nav.item");
 		return html`
-      <li class="${prefix}--pagination-nav__list-item">
+      <li class="${"cds"}--pagination-nav__list-item">
         <button
           class=${classMap({
-			[`${prefix}--pagination-nav__page`]: true,
-			[`${prefix}--pagination-nav__page--active`]: isActive
+			[`cds--pagination-nav__page`]: true,
+			[`cds--pagination-nav__page--active`]: isActive
 		})}
           type="button"
           @click=${() => this._setIndex(itemPage)}
           data-page="${itemPage + 1}"
           aria-current=${ifDefined(isActive ? "page" : void 0)}>
-          <span class="${prefix}--pagination-nav__accessibility-label">
+          <span class="${"cds"}--pagination-nav__accessibility-label">
             ${isActive ? `${t("carbon.pagination-nav.active")}, ${itemLabel}` : itemLabel}
           </span>
           ${itemPage + 1}
@@ -173,10 +172,10 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
 	_renderPaginationOverflow(fromIndex, count) {
 		const { translateWithId: t } = this;
 		if (count > 1) return html`
-        <li class="${prefix}--pagination-nav__list-item">
-          <div class="${prefix}--pagination-nav__select">
+        <li class="${"cds"}--pagination-nav__list-item">
+          <div class="${"cds"}--pagination-nav__select">
             <select
-              class="${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select"
+              class="${"cds"}--pagination-nav__page ${"cds"}--pagination-nav__page--select"
               aria-label="Select ${t("carbon.pagination-nav.item")} number"
               ?disabled="${this.disableOverflow}"
               @change=${(e) => {
@@ -195,8 +194,8 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
                   </option>
                 `)}
             </select>
-            <div class="${prefix}--pagination-nav__select-icon-wrapper">
-              ${iconLoader(OverflowMenuHorizontal16, { class: `${prefix}--pagination-nav__select-icon` })}
+            <div class="${"cds"}--pagination-nav__select-icon-wrapper">
+              ${iconLoader(OverflowMenuHorizontal16, { class: `cds--pagination-nav__select-icon` })}
             </div>
           </div>
         </li>
@@ -212,11 +211,11 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
 		const align = tooltipAlignment === "center" ? tooltipPosition : `${tooltipPosition}-${tooltipAlignment}`;
 		return html`
       <nav class="${classMap({
-			[`${prefix}--pagination-nav`]: true,
-			[`${prefix}--layout--size-${size}`]: size
+			[`cds--pagination-nav`]: true,
+			[`cds--layout--size-${size}`]: size
 		})}" aria-label="pagination">
-        <ul class="${prefix}--pagination-nav__list">
-          <li class="${prefix}--pagination-nav__list-item">
+        <ul class="${"cds"}--pagination-nav__list">
+          <li class="${"cds"}--pagination-nav__list-item">
             <cds-icon-button
               kind="ghost"
               align="${align}"
@@ -235,7 +234,7 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
           ${Array.from({ length: this.totalItems }).map((_, i) => i).slice(startOffset + this.cuts.front, (1 + this.cuts.back) * -1).map((item) => this._renderPaginationItem(item, this.page === item))}
           ${this._renderPaginationOverflow(this.totalItems - this.cuts.back - 1, this.cuts.back)}
           ${this.totalItems > 1 ? this._renderPaginationItem(this.totalItems - 1, this.page === this.totalItems - 1) : ""}
-          <li class="${prefix}--pagination-nav__list-item">
+          <li class="${"cds"}--pagination-nav__list-item">
             <cds-icon-button
               kind="ghost"
               align="${align}"
@@ -252,7 +251,7 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
         <div
           aria-live="polite"
           aria-atomic="true"
-          class="${prefix}--pagination-nav__accessibility-label">
+          class="${"cds"}--pagination-nav__accessibility-label">
           ${`${t("carbon.pagination-nav.item")} ${this.page + 1} ${t("carbon.pagination-nav.of")} ${this.totalItems}`}
         </div>
       </nav>
@@ -270,10 +269,10 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
 		if (changedProperties.has("totalItems") || changedProperties.has("itemsShown") || changedProperties.has("size")) {
 			let numberOfPages;
 			switch (this.size) {
-				case PAGINATION_NAV_SIZE.MEDIUM:
+				case "md":
 					numberOfPages = this.itemsShown === 4 ? this.itemsShown : 5;
 					break;
-				case PAGINATION_NAV_SIZE.SMALL:
+				case "sm":
 					numberOfPages = Math.min(Math.max(4, this.itemsShown), 7);
 					break;
 				default:
@@ -292,7 +291,7 @@ let CDSPaginationNav = class CDSPaginationNav extends LitElement {
 		}
 	}
 	static get eventChange() {
-		return `${prefix}-page-changed`;
+		return `cds-page-changed`;
 	}
 	static {
 		this.styles = pagination_nav_default$1;
@@ -335,9 +334,9 @@ __decorate([property({
 	type: Boolean
 })], CDSPaginationNav.prototype, "disableOverflow", void 0);
 __decorate([property({ attribute: false })], CDSPaginationNav.prototype, "translateWithId", void 0);
-CDSPaginationNav = __decorate([carbonElement(`${prefix}-pagination-nav`)], CDSPaginationNav);
+CDSPaginationNav = __decorate([carbonElement(`cds-pagination-nav`)], CDSPaginationNav);
 var pagination_nav_default = CDSPaginationNav;
-
 //#endregion
 export { pagination_nav_default as default };
+
 //# sourceMappingURL=pagination-nav.js.map

package/es/components/pagination-nav/pagination-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-nav.js","names":["OverflowMenu","styles","customElement"],"sources":["../../../src/components/pagination-nav/pagination-nav.ts"],"sourcesContent":["/**\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './pagination-nav.scss?lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport OverflowMenu from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport '../icon-button';\nimport {\n  PAGINATION_NAV_SIZE,\n  PAGINATION_TOOLTIP_ALIGNMENT,\n  PAGINATION_TOOLTIP_POSITION,\n} from './defs';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * Translation IDs and default translations\n */\nconst translationIds = {\n  'carbon.pagination-nav.next': 'carbon.pagination-nav.next',\n  'carbon.pagination-nav.previous': 'carbon.pagination-nav.previous',\n  'carbon.pagination-nav.item': 'carbon.pagination-nav.item',\n  'carbon.pagination-nav.active': 'carbon.pagination-nav.active',\n  'carbon.pagination-nav.of': 'carbon.pagination-nav.of',\n} as const;\n\ntype TranslationKey = keyof typeof translationIds;\n\nconst defaultTranslations: Record<TranslationKey, string> = {\n  [translationIds['carbon.pagination-nav.next']]: 'Next',\n  [translationIds['carbon.pagination-nav.previous']]: 'Previous',\n  [translationIds['carbon.pagination-nav.item']]: 'Page',\n  [translationIds['carbon.pagination-nav.active']]: 'Active',\n  [translationIds['carbon.pagination-nav.of']]: 'of',\n};\n\n/**\n * Default translation function\n */\nconst defaultTranslateWithId = (messageId: TranslationKey): string => {\n  return defaultTranslations[messageId];\n};\n\n/**\n * Pagination Navigation.\n *\n * @element cds-pagination-nav\n * @fires cds-page-changed - The custom event fired when the the page has been changed.\n */\n@customElement(`${prefix}-pagination-nav`)\nclass CDSPaginationNav extends LitElement {\n  /**\n   * Internal state for items displayed on page\n   */\n  @state()\n  private itemsDisplayedOnPage!: number;\n\n  /**\n   * Internal state for cuts\n   */\n  @state()\n  private cuts = { front: 0, back: 0 };\n\n  /**\n   * Internal state for previous page\n   */\n  @state()\n  private prevPage: number | null = null;\n\n  /**\n   * The number of items to be shown (minimum of 4 unless props.items < 4).\n   */\n  @property({ attribute: 'items-shown', reflect: true, type: Number })\n  itemsShown = 10;\n\n  /**\n   * Whether user should be able to loop through the items when reaching first / last.\n   */\n  @property({ attribute: 'loop', type: Boolean })\n  loop = false;\n\n  /**\n   * The index of current page.\n   */\n  @property({ attribute: 'page', reflect: true, type: Number })\n  page = 0;\n\n  /**\n   * The total number of items.\n   */\n  @property({ attribute: 'total-items', reflect: true, type: Number })\n  totalItems = 1;\n\n  /**\n   * Specify the size of the PaginationNav.\n   */\n  @property({ reflect: true })\n  size = PAGINATION_NAV_SIZE.LARGE;\n\n  /**\n   * Specify the alignment of the tooltip for the icon-only next/prev buttons.\n   * Can be one of: start, center, or end.\n   */\n  @property({ attribute: 'tooltip-alignment', reflect: true })\n  tooltipAlignment = PAGINATION_TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the position of the tooltip for the icon-only next/prev buttons.\n   * Can be one of: top, right, bottom, or left.\n   */\n  @property({ attribute: 'tooltip-position', reflect: true })\n  tooltipPosition = PAGINATION_TOOLTIP_POSITION.BOTTOM;\n\n  /**\n   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.\n   * Set this to true if you are having performance problems with large data sets.\n   */\n  @property({ attribute: 'disable-overflow', reflect: true, type: Boolean })\n  disableOverflow?: boolean;\n\n  /**\n   * Translates component strings using your i18n tool.\n   */\n  @property({ attribute: false })\n  translateWithId: (messageId: TranslationKey) => string =\n    defaultTranslateWithId;\n\n  private _calculateCuts(\n    page: number,\n    totalItems: number,\n    itemsDisplayedOnPage: number,\n    splitPoint: number | null = null\n  ) {\n    if (itemsDisplayedOnPage >= totalItems) {\n      return { front: 0, back: 0 };\n    }\n\n    const split = splitPoint || Math.ceil(itemsDisplayedOnPage / 2) - 1;\n\n    let frontHidden = page + 1 - split;\n    let backHidden = totalItems - page - (itemsDisplayedOnPage - split) + 1;\n\n    if (frontHidden <= 1) {\n      backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n      frontHidden = 0;\n    }\n\n    if (backHidden <= 1) {\n      frontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n      backHidden = 0;\n    }\n\n    return { front: frontHidden, back: backHidden };\n  }\n\n  private _pageWouldBeHidden(page: number) {\n    const startOffset = this.itemsDisplayedOnPage <= 4 && this.page > 1 ? 0 : 1;\n\n    const wouldBeHiddenInFront =\n      (page >= startOffset && page <= this.cuts.front) || page === 0;\n    const wouldBeHiddenInBack =\n      page >= this.totalItems - this.cuts.back - 1 &&\n      page <= this.totalItems - 2;\n\n    return wouldBeHiddenInFront || wouldBeHiddenInBack;\n  }\n\n  /**\n   * Sets the current page to a specified index.\n   */\n  private _setIndex(index: number) {\n    if (index >= 0 && index < this.totalItems) {\n      this.page = index;\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSPaginationNav).eventChange,\n          {\n            bubbles: true,\n            composed: true,\n            detail: {\n              page: index,\n            },\n          }\n        )\n      );\n    }\n  }\n\n  /**\n   * Reduce current page by one, but no lower than 0.\n   */\n  private _decrementIndex() {\n    const { loop, page, totalItems } = this;\n    const wouldLoop = page - 1 < 0;\n\n    if (loop) {\n      this.page = wouldLoop ? totalItems - 1 : page - 1;\n    } else {\n      this.page = Math.max(this.page - 1, 0);\n    }\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSPaginationNav).eventChange,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            page: this.page,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * Increase current page by one, but no higher than (this.totalItems - 1).\n   */\n  private _incrementIndex() {\n    const { loop, page, totalItems } = this;\n    const wouldLoop = page + 1 >= totalItems;\n\n    if (loop) {\n      this.page = wouldLoop ? 0 : page + 1;\n    } else {\n      this.page = Math.min(this.page + 1, this.totalItems - 1);\n    }\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSPaginationNav).eventChange,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            page: this.page,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * Renders a single pagination item & button.\n   */\n  private _renderPaginationItem(itemPage: number, isActive = false) {\n    const { translateWithId: t } = this;\n    const itemLabel = t('carbon.pagination-nav.item');\n    const classes = {\n      [`${prefix}--pagination-nav__page`]: true,\n      [`${prefix}--pagination-nav__page--active`]: isActive,\n    };\n\n    return html`\n      <li class=\"${prefix}--pagination-nav__list-item\">\n        <button\n          class=${classMap(classes)}\n          type=\"button\"\n          @click=${() => this._setIndex(itemPage)}\n          data-page=\"${itemPage + 1}\"\n          aria-current=${ifDefined(isActive ? 'page' : undefined)}>\n          <span class=\"${prefix}--pagination-nav__accessibility-label\">\n            ${isActive\n              ? `${t('carbon.pagination-nav.active')}, ${itemLabel}`\n              : itemLabel}\n          </span>\n          ${itemPage + 1}\n        </button>\n      </li>\n    `;\n  }\n\n  /**\n   * Renders overflow items in a select list.\n   *\n   */\n  private _renderPaginationOverflow(fromIndex: number, count: number) {\n    const { translateWithId: t } = this;\n\n    if (count > 1) {\n      return html`\n        <li class=\"${prefix}--pagination-nav__list-item\">\n          <div class=\"${prefix}--pagination-nav__select\">\n            <select\n              class=\"${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select\"\n              aria-label=\"Select ${t('carbon.pagination-nav.item')} number\"\n              ?disabled=\"${this.disableOverflow}\"\n              @change=${(e: Event) => {\n                const target = e.target as HTMLSelectElement;\n                const index = Number(target.value);\n                this._setIndex(index);\n                (e.target as HTMLSelectElement).value = '';\n              }}>\n              <option value=\"\" hidden></option>\n              ${Array.from({ length: count }).map(\n                (_, i) => html`\n                  <option\n                    value=\"${fromIndex + i}\"\n                    data-page=\"${fromIndex + i + 1}\"\n                    key=\"overflow-${fromIndex + i}\">\n                    ${fromIndex + i + 1}\n                  </option>\n                `\n              )}\n            </select>\n            <div class=\"${prefix}--pagination-nav__select-icon-wrapper\">\n              ${iconLoader(OverflowMenu, {\n                class: `${prefix}--pagination-nav__select-icon`,\n              })}\n            </div>\n          </div>\n        </li>\n      `;\n    } else if (count === 1) {\n      return this._renderPaginationItem(fromIndex);\n    } else {\n      return html``;\n    }\n  }\n\n  render() {\n    const {\n      loop,\n      page,\n      totalItems,\n      _incrementIndex: incrementIndex,\n      _decrementIndex: decrementIndex,\n      translateWithId: t,\n      size,\n      tooltipAlignment,\n      tooltipPosition,\n    } = this;\n    const backwardButtonDisabled = !loop && page <= 0;\n    const forwardButtonDisabled = !loop && page >= totalItems - 1;\n\n    const startOffset = this.itemsDisplayedOnPage <= 4 && this.page > 1 ? 0 : 1;\n\n    const align =\n      tooltipAlignment === 'center'\n        ? tooltipPosition\n        : `${tooltipPosition}-${tooltipAlignment}`;\n\n    const navClasses = classMap({\n      [`${prefix}--pagination-nav`]: true,\n      [`${prefix}--layout--size-${size}`]: size,\n    });\n\n    return html`\n      <nav class=\"${navClasses}\" aria-label=\"pagination\">\n        <ul class=\"${prefix}--pagination-nav__list\">\n          <li class=\"${prefix}--pagination-nav__list-item\">\n            <cds-icon-button\n              kind=\"ghost\"\n              align=\"${align}\"\n              size=\"${size}\"\n              ?disabled=${backwardButtonDisabled}\n              @click=${decrementIndex}>\n              <span slot=\"tooltip-content\"\n                >${this.translateWithId('carbon.pagination-nav.previous')}</span\n              >\n              ${iconLoader(CaretLeft16, { slot: 'icon' })}\n            </cds-icon-button>\n          </li>\n\n          ${\n            // render first item if at least 5 items can be displayed or\n            // 4 items can be displayed and the current page is either 0 or 1\n            this.itemsDisplayedOnPage >= 5 ||\n            (this.itemsDisplayedOnPage <= 4 && this.page <= 1)\n              ? this._renderPaginationItem(0, this.page === 0)\n              : ''\n          }\n          ${\n            /* render first overflow */\n            this._renderPaginationOverflow(startOffset, this.cuts.front)\n          }\n          ${\n            // render items between overflows\n            Array.from({ length: this.totalItems })\n              .map((_, i) => i)\n              .slice(startOffset + this.cuts.front, (1 + this.cuts.back) * -1)\n              .map((item) =>\n                this._renderPaginationItem(item, this.page === item)\n              )\n          }\n          ${\n            /* render second overflow */\n            this._renderPaginationOverflow(\n              this.totalItems - this.cuts.back - 1,\n              this.cuts.back\n            )\n          }\n          ${\n            // render last item unless there is only one in total\n            this.totalItems > 1\n              ? this._renderPaginationItem(\n                  this.totalItems - 1,\n                  this.page === this.totalItems - 1\n                )\n              : ''\n          }\n          <li class=\"${prefix}--pagination-nav__list-item\">\n            <cds-icon-button\n              kind=\"ghost\"\n              align=\"${align}\"\n              size=\"${size}\"\n              ?disabled=${forwardButtonDisabled}\n              @click=${incrementIndex}>\n              <span slot=\"tooltip-content\"\n                >${this.translateWithId('carbon.pagination-nav.next')}</span\n              >\n              ${iconLoader(CaretRight16, { slot: 'icon' })}\n            </cds-icon-button>\n          </li>\n        </ul>\n        <div\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"${prefix}--pagination-nav__accessibility-label\">\n          ${`${t('carbon.pagination-nav.item')} ${\n            this.page + 1\n          } ${t('carbon.pagination-nav.of')} ${this.totalItems}`}\n        </div>\n      </nav>\n    `;\n  }\n\n  shouldUpdate(changedProperties) {\n    // Prevent setting \"page\" outside bounds of available pages.\n    if (changedProperties.has('totalItems') || changedProperties.has('page')) {\n      if (this.page > this.totalItems) {\n        this.page = this.totalItems - 1;\n      }\n      if (this.page < 0) {\n        this.page = 0;\n      }\n    }\n\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('page')) {\n      this.prevPage = changedProperties.get('page');\n    }\n\n    if (\n      changedProperties.has('totalItems') ||\n      changedProperties.has('itemsShown') ||\n      changedProperties.has('size')\n    ) {\n      let numberOfPages: number;\n\n      switch (this.size) {\n        case PAGINATION_NAV_SIZE.MEDIUM:\n          numberOfPages = this.itemsShown === 4 ? this.itemsShown : 5;\n          break;\n\n        case PAGINATION_NAV_SIZE.SMALL:\n          numberOfPages = Math.min(Math.max(4, this.itemsShown), 7);\n          break;\n\n        default:\n          numberOfPages = 4;\n          break;\n      }\n\n      this.itemsDisplayedOnPage = Math.max(\n        this.itemsShown >= 4 ? this.itemsShown : numberOfPages,\n        4\n      );\n\n      this.cuts = this._calculateCuts(\n        this.page,\n        this.totalItems,\n        this.itemsDisplayedOnPage\n      );\n    }\n\n    if (changedProperties.has('page') && this._pageWouldBeHidden(this.page)) {\n      const delta = this.page - (this.prevPage || 0);\n\n      if (delta > 0) {\n        const splitPoint = this.itemsDisplayedOnPage - 3;\n        this.cuts = this._calculateCuts(\n          this.page,\n          this.totalItems,\n          this.itemsDisplayedOnPage,\n          splitPoint\n        );\n      } else {\n        const splitPoint = this.itemsDisplayedOnPage > 4 ? 2 : 1;\n        this.cuts = this._calculateCuts(\n          this.page,\n          this.totalItems,\n          this.itemsDisplayedOnPage,\n          splitPoint\n        );\n      }\n    }\n  }\n\n  static get eventChange() {\n    return `${prefix}-page-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPaginationNav;\n"],"mappings":"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"}
+{"version":3,"file":"pagination-nav.js","names":["OverflowMenu","styles","customElement"],"sources":["../../../src/components/pagination-nav/pagination-nav.ts"],"sourcesContent":["/**\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './pagination-nav.scss?lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport OverflowMenu from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport '../icon-button';\nimport {\n  PAGINATION_NAV_SIZE,\n  PAGINATION_TOOLTIP_ALIGNMENT,\n  PAGINATION_TOOLTIP_POSITION,\n} from './defs';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * Translation IDs and default translations\n */\nconst translationIds = {\n  'carbon.pagination-nav.next': 'carbon.pagination-nav.next',\n  'carbon.pagination-nav.previous': 'carbon.pagination-nav.previous',\n  'carbon.pagination-nav.item': 'carbon.pagination-nav.item',\n  'carbon.pagination-nav.active': 'carbon.pagination-nav.active',\n  'carbon.pagination-nav.of': 'carbon.pagination-nav.of',\n} as const;\n\ntype TranslationKey = keyof typeof translationIds;\n\nconst defaultTranslations: Record<TranslationKey, string> = {\n  [translationIds['carbon.pagination-nav.next']]: 'Next',\n  [translationIds['carbon.pagination-nav.previous']]: 'Previous',\n  [translationIds['carbon.pagination-nav.item']]: 'Page',\n  [translationIds['carbon.pagination-nav.active']]: 'Active',\n  [translationIds['carbon.pagination-nav.of']]: 'of',\n};\n\n/**\n * Default translation function\n */\nconst defaultTranslateWithId = (messageId: TranslationKey): string => {\n  return defaultTranslations[messageId];\n};\n\n/**\n * Pagination Navigation.\n *\n * @element cds-pagination-nav\n * @fires cds-page-changed - The custom event fired when the the page has been changed.\n */\n@customElement(`${prefix}-pagination-nav`)\nclass CDSPaginationNav extends LitElement {\n  /**\n   * Internal state for items displayed on page\n   */\n  @state()\n  private itemsDisplayedOnPage!: number;\n\n  /**\n   * Internal state for cuts\n   */\n  @state()\n  private cuts = { front: 0, back: 0 };\n\n  /**\n   * Internal state for previous page\n   */\n  @state()\n  private prevPage: number | null = null;\n\n  /**\n   * The number of items to be shown (minimum of 4 unless props.items < 4).\n   */\n  @property({ attribute: 'items-shown', reflect: true, type: Number })\n  itemsShown = 10;\n\n  /**\n   * Whether user should be able to loop through the items when reaching first / last.\n   */\n  @property({ attribute: 'loop', type: Boolean })\n  loop = false;\n\n  /**\n   * The index of current page.\n   */\n  @property({ attribute: 'page', reflect: true, type: Number })\n  page = 0;\n\n  /**\n   * The total number of items.\n   */\n  @property({ attribute: 'total-items', reflect: true, type: Number })\n  totalItems = 1;\n\n  /**\n   * Specify the size of the PaginationNav.\n   */\n  @property({ reflect: true })\n  size = PAGINATION_NAV_SIZE.LARGE;\n\n  /**\n   * Specify the alignment of the tooltip for the icon-only next/prev buttons.\n   * Can be one of: start, center, or end.\n   */\n  @property({ attribute: 'tooltip-alignment', reflect: true })\n  tooltipAlignment = PAGINATION_TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the position of the tooltip for the icon-only next/prev buttons.\n   * Can be one of: top, right, bottom, or left.\n   */\n  @property({ attribute: 'tooltip-position', reflect: true })\n  tooltipPosition = PAGINATION_TOOLTIP_POSITION.BOTTOM;\n\n  /**\n   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.\n   * Set this to true if you are having performance problems with large data sets.\n   */\n  @property({ attribute: 'disable-overflow', reflect: true, type: Boolean })\n  disableOverflow?: boolean;\n\n  /**\n   * Translates component strings using your i18n tool.\n   */\n  @property({ attribute: false })\n  translateWithId: (messageId: TranslationKey) => string =\n    defaultTranslateWithId;\n\n  private _calculateCuts(\n    page: number,\n    totalItems: number,\n    itemsDisplayedOnPage: number,\n    splitPoint: number | null = null\n  ) {\n    if (itemsDisplayedOnPage >= totalItems) {\n      return { front: 0, back: 0 };\n    }\n\n    const split = splitPoint || Math.ceil(itemsDisplayedOnPage / 2) - 1;\n\n    let frontHidden = page + 1 - split;\n    let backHidden = totalItems - page - (itemsDisplayedOnPage - split) + 1;\n\n    if (frontHidden <= 1) {\n      backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n      frontHidden = 0;\n    }\n\n    if (backHidden <= 1) {\n      frontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n      backHidden = 0;\n    }\n\n    return { front: frontHidden, back: backHidden };\n  }\n\n  private _pageWouldBeHidden(page: number) {\n    const startOffset = this.itemsDisplayedOnPage <= 4 && this.page > 1 ? 0 : 1;\n\n    const wouldBeHiddenInFront =\n      (page >= startOffset && page <= this.cuts.front) || page === 0;\n    const wouldBeHiddenInBack =\n      page >= this.totalItems - this.cuts.back - 1 &&\n      page <= this.totalItems - 2;\n\n    return wouldBeHiddenInFront || wouldBeHiddenInBack;\n  }\n\n  /**\n   * Sets the current page to a specified index.\n   */\n  private _setIndex(index: number) {\n    if (index >= 0 && index < this.totalItems) {\n      this.page = index;\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSPaginationNav).eventChange,\n          {\n            bubbles: true,\n            composed: true,\n            detail: {\n              page: index,\n            },\n          }\n        )\n      );\n    }\n  }\n\n  /**\n   * Reduce current page by one, but no lower than 0.\n   */\n  private _decrementIndex() {\n    const { loop, page, totalItems } = this;\n    const wouldLoop = page - 1 < 0;\n\n    if (loop) {\n      this.page = wouldLoop ? totalItems - 1 : page - 1;\n    } else {\n      this.page = Math.max(this.page - 1, 0);\n    }\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSPaginationNav).eventChange,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            page: this.page,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * Increase current page by one, but no higher than (this.totalItems - 1).\n   */\n  private _incrementIndex() {\n    const { loop, page, totalItems } = this;\n    const wouldLoop = page + 1 >= totalItems;\n\n    if (loop) {\n      this.page = wouldLoop ? 0 : page + 1;\n    } else {\n      this.page = Math.min(this.page + 1, this.totalItems - 1);\n    }\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSPaginationNav).eventChange,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            page: this.page,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * Renders a single pagination item & button.\n   */\n  private _renderPaginationItem(itemPage: number, isActive = false) {\n    const { translateWithId: t } = this;\n    const itemLabel = t('carbon.pagination-nav.item');\n    const classes = {\n      [`${prefix}--pagination-nav__page`]: true,\n      [`${prefix}--pagination-nav__page--active`]: isActive,\n    };\n\n    return html`\n      <li class=\"${prefix}--pagination-nav__list-item\">\n        <button\n          class=${classMap(classes)}\n          type=\"button\"\n          @click=${() => this._setIndex(itemPage)}\n          data-page=\"${itemPage + 1}\"\n          aria-current=${ifDefined(isActive ? 'page' : undefined)}>\n          <span class=\"${prefix}--pagination-nav__accessibility-label\">\n            ${isActive\n              ? `${t('carbon.pagination-nav.active')}, ${itemLabel}`\n              : itemLabel}\n          </span>\n          ${itemPage + 1}\n        </button>\n      </li>\n    `;\n  }\n\n  /**\n   * Renders overflow items in a select list.\n   *\n   */\n  private _renderPaginationOverflow(fromIndex: number, count: number) {\n    const { translateWithId: t } = this;\n\n    if (count > 1) {\n      return html`\n        <li class=\"${prefix}--pagination-nav__list-item\">\n          <div class=\"${prefix}--pagination-nav__select\">\n            <select\n              class=\"${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select\"\n              aria-label=\"Select ${t('carbon.pagination-nav.item')} number\"\n              ?disabled=\"${this.disableOverflow}\"\n              @change=${(e: Event) => {\n                const target = e.target as HTMLSelectElement;\n                const index = Number(target.value);\n                this._setIndex(index);\n                (e.target as HTMLSelectElement).value = '';\n              }}>\n              <option value=\"\" hidden></option>\n              ${Array.from({ length: count }).map(\n                (_, i) => html`\n                  <option\n                    value=\"${fromIndex + i}\"\n                    data-page=\"${fromIndex + i + 1}\"\n                    key=\"overflow-${fromIndex + i}\">\n                    ${fromIndex + i + 1}\n                  </option>\n                `\n              )}\n            </select>\n            <div class=\"${prefix}--pagination-nav__select-icon-wrapper\">\n              ${iconLoader(OverflowMenu, {\n                class: `${prefix}--pagination-nav__select-icon`,\n              })}\n            </div>\n          </div>\n        </li>\n      `;\n    } else if (count === 1) {\n      return this._renderPaginationItem(fromIndex);\n    } else {\n      return html``;\n    }\n  }\n\n  render() {\n    const {\n      loop,\n      page,\n      totalItems,\n      _incrementIndex: incrementIndex,\n      _decrementIndex: decrementIndex,\n      translateWithId: t,\n      size,\n      tooltipAlignment,\n      tooltipPosition,\n    } = this;\n    const backwardButtonDisabled = !loop && page <= 0;\n    const forwardButtonDisabled = !loop && page >= totalItems - 1;\n\n    const startOffset = this.itemsDisplayedOnPage <= 4 && this.page > 1 ? 0 : 1;\n\n    const align =\n      tooltipAlignment === 'center'\n        ? tooltipPosition\n        : `${tooltipPosition}-${tooltipAlignment}`;\n\n    const navClasses = classMap({\n      [`${prefix}--pagination-nav`]: true,\n      [`${prefix}--layout--size-${size}`]: size,\n    });\n\n    return html`\n      <nav class=\"${navClasses}\" aria-label=\"pagination\">\n        <ul class=\"${prefix}--pagination-nav__list\">\n          <li class=\"${prefix}--pagination-nav__list-item\">\n            <cds-icon-button\n              kind=\"ghost\"\n              align=\"${align}\"\n              size=\"${size}\"\n              ?disabled=${backwardButtonDisabled}\n              @click=${decrementIndex}>\n              <span slot=\"tooltip-content\"\n                >${this.translateWithId('carbon.pagination-nav.previous')}</span\n              >\n              ${iconLoader(CaretLeft16, { slot: 'icon' })}\n            </cds-icon-button>\n          </li>\n\n          ${\n            // render first item if at least 5 items can be displayed or\n            // 4 items can be displayed and the current page is either 0 or 1\n            this.itemsDisplayedOnPage >= 5 ||\n            (this.itemsDisplayedOnPage <= 4 && this.page <= 1)\n              ? this._renderPaginationItem(0, this.page === 0)\n              : ''\n          }\n          ${\n            /* render first overflow */\n            this._renderPaginationOverflow(startOffset, this.cuts.front)\n          }\n          ${\n            // render items between overflows\n            Array.from({ length: this.totalItems })\n              .map((_, i) => i)\n              .slice(startOffset + this.cuts.front, (1 + this.cuts.back) * -1)\n              .map((item) =>\n                this._renderPaginationItem(item, this.page === item)\n              )\n          }\n          ${\n            /* render second overflow */\n            this._renderPaginationOverflow(\n              this.totalItems - this.cuts.back - 1,\n              this.cuts.back\n            )\n          }\n          ${\n            // render last item unless there is only one in total\n            this.totalItems > 1\n              ? this._renderPaginationItem(\n                  this.totalItems - 1,\n                  this.page === this.totalItems - 1\n                )\n              : ''\n          }\n          <li class=\"${prefix}--pagination-nav__list-item\">\n            <cds-icon-button\n              kind=\"ghost\"\n              align=\"${align}\"\n              size=\"${size}\"\n              ?disabled=${forwardButtonDisabled}\n              @click=${incrementIndex}>\n              <span slot=\"tooltip-content\"\n                >${this.translateWithId('carbon.pagination-nav.next')}</span\n              >\n              ${iconLoader(CaretRight16, { slot: 'icon' })}\n            </cds-icon-button>\n          </li>\n        </ul>\n        <div\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          class=\"${prefix}--pagination-nav__accessibility-label\">\n          ${`${t('carbon.pagination-nav.item')} ${\n            this.page + 1\n          } ${t('carbon.pagination-nav.of')} ${this.totalItems}`}\n        </div>\n      </nav>\n    `;\n  }\n\n  shouldUpdate(changedProperties) {\n    // Prevent setting \"page\" outside bounds of available pages.\n    if (changedProperties.has('totalItems') || changedProperties.has('page')) {\n      if (this.page > this.totalItems) {\n        this.page = this.totalItems - 1;\n      }\n      if (this.page < 0) {\n        this.page = 0;\n      }\n    }\n\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('page')) {\n      this.prevPage = changedProperties.get('page');\n    }\n\n    if (\n      changedProperties.has('totalItems') ||\n      changedProperties.has('itemsShown') ||\n      changedProperties.has('size')\n    ) {\n      let numberOfPages: number;\n\n      switch (this.size) {\n        case PAGINATION_NAV_SIZE.MEDIUM:\n          numberOfPages = this.itemsShown === 4 ? this.itemsShown : 5;\n          break;\n\n        case PAGINATION_NAV_SIZE.SMALL:\n          numberOfPages = Math.min(Math.max(4, this.itemsShown), 7);\n          break;\n\n        default:\n          numberOfPages = 4;\n          break;\n      }\n\n      this.itemsDisplayedOnPage = Math.max(\n        this.itemsShown >= 4 ? this.itemsShown : numberOfPages,\n        4\n      );\n\n      this.cuts = this._calculateCuts(\n        this.page,\n        this.totalItems,\n        this.itemsDisplayedOnPage\n      );\n    }\n\n    if (changedProperties.has('page') && this._pageWouldBeHidden(this.page)) {\n      const delta = this.page - (this.prevPage || 0);\n\n      if (delta > 0) {\n        const splitPoint = this.itemsDisplayedOnPage - 3;\n        this.cuts = this._calculateCuts(\n          this.page,\n          this.totalItems,\n          this.itemsDisplayedOnPage,\n          splitPoint\n        );\n      } else {\n        const splitPoint = this.itemsDisplayedOnPage > 4 ? 2 : 1;\n        this.cuts = this._calculateCuts(\n          this.page,\n          this.totalItems,\n          this.itemsDisplayedOnPage,\n          splitPoint\n        );\n      }\n    }\n  }\n\n  static get eventChange() {\n    return `${prefix}-page-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPaginationNav;\n"],"mappings":"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"}