{"version":3,"file":"pagination.BsMHysiS.js","sources":["../../../../../packages/web-components/src/lib/components/pagination/pagination.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { PdsElement } from '../PdsElement';\nimport styles from './pagination.scss?inline';\nimport '@principal/design-system-icons-web/chevrons-left';\nimport '@principal/design-system-icons-web/chevron-left';\nimport '@principal/design-system-icons-web/chevrons-right';\nimport '@principal/design-system-icons-web/chevron-right';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport '../pagination-item/pagination-item';\n\n/**\n * @summary This component renders a pagination control\n *\n * @slot default Required: Holds pds-pagination-item components\n *\n * @fires pds-pagination-click A custom event dispatched on click with the following event detail summary messages:\n *\n * **fly-first** - a click registered on the 'fly to first page' control;\n * **step-backward** - a click registered on the 'step backward' control;\n * **step-forward** - a click registered on the 'step forward' control;\n * **fly-last** - a click registered on the 'fly to last page' control\n */\n@customElement('pds-pagination', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsPagination extends PdsElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.initLocalization();\n  }\n\n  /**\n   * Style variant\n   * - **default** renders the default pagination\n   * - **arrows** renders only arrows for pagination navigation, should only be used when horizontal space is extremely limited\n   * - **no-arrows** renders pagination navigation without arrows, should only be used when there are only two or three pages of data\n   */\n  @property({ type: String })\n  variant: 'default' | 'arrows' | 'no-arrows' = 'default';\n\n  /**\n   * Backward controls disabled\n   */\n  @property({ type: Boolean })\n  backwardDisabled: boolean = false;\n\n  /**\n   * Forward controls disabled\n   */\n  @property({ type: Boolean })\n  forwardDisabled: boolean = false;\n\n  /**\n   * Hides the fly to first and fly to last buttons, should only be true if a technical limitation prevents their use\n   */\n  @property({ type: Boolean })\n  hideFlyers: boolean = false;\n\n  /**\n   * ARIA label string that describes pagination control for screen reader users\n   */\n  @property()\n  ariaLabel: string;\n\n  /**\n   * If page navigation should be the result of the interaction, supply a url for the href for going to the first item\n   */\n  @property({ type: String })\n  flyFirsthref: string;\n\n  /**\n   * If page navigation should be the result of the interaction, supply a url for the href for going to the next item\n   */\n  @property({ type: String })\n  stepForwardhref: string;\n\n  /**\n   * If page navigation should be the result of the interaction, supply a url for the href for going to the last item\n   */\n  @property({ type: String })\n  flyLasthref: string;\n\n  /**\n   * If page navigation should be the result of the interaction, supply a url for the href for going to the previous item\n   */\n  @property()\n  stepBackwardhref: string;\n\n  /**\n   * @internal\n   */\n  @queryAssignedElements({ slot: undefined, selector: 'pds-pagination-item' })\n  paginationItems: HTMLElement[];\n\n  handleClick(e: Event) {\n    const receivedEvent = e.target as Element;\n    const buttonElement = receivedEvent.closest('.pds-c-pagination__button');\n    const detailSummaryMessage = buttonElement?.classList\n      .toString()\n      .split('--')\n      .pop();\n    const customEvent = new CustomEvent('pds-pagination-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        summary: detailSummaryMessage,\n      },\n    });\n\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * @internal\n   * provides the arrow markup for the backward arrows\n   */\n  private backArrowMarkup() {\n    return html`${this.hideFlyers\n        ? ''\n        : html`<div class=\"${this.classEl('li')}\" role=\"listitem\">\n            <button\n              class=\"${this.classEl('button')} ${this.classMod('fly-first')}\"\n              @click=${this.handleClick}\n              aria-label=\"${this.translateText('go-to-first-page')}\"\n              ?disabled=${this.backwardDisabled}\n            >\n              <pds-icon-chevrons-left></pds-icon-chevrons-left>\n            </button>\n          </div>`}\n      <div class=\"${this.classEl('li')}\" role=\"listitem\">\n        <button\n          class=\"${this.classEl('button')} ${this.classMod('step-backward')}\"\n          @click=${this.handleClick}\n          aria-label=\"${this.translateText('go-to-previous-page')}\"\n          ?disabled=${this.backwardDisabled}\n        >\n          <pds-icon-chevron-left></pds-icon-chevron-left>\n        </button>\n      </div>`;\n  }\n\n  /**\n   * @internal\n   * provides the arrow markup for the backward arrows\n   */\n  private backArrowMarkupAnchor() {\n    return html`${this.hideFlyers\n        ? ''\n        : html`<div class=\"${this.classEl('li')}\" role=\"listitem\">\n            <a\n              class=\"${this.classEl('button')} ${this.classMod('fly-first')}\"\n              @click=${this.handleClick}\n              aria-label=\"${this.translateText('go-to-first-page')}\"\n              ?disabled=${this.backwardDisabled}\n              href=${this.backwardDisabled ? nothing : this.flyFirsthref}\n            >\n              <pds-icon-chevrons-left></pds-icon-chevrons-left>\n            </a>\n          </div>`}\n      <div class=\"${this.classEl('li')}\" role=\"listitem\">\n        <a\n          class=\"${this.classEl('button')} ${this.classMod('step-backward')}\"\n          @click=${this.handleClick}\n          aria-label=\"${this.translateText('go-to-previous-page')}\"\n          ?disabled=${this.backwardDisabled}\n          href=${this.backwardDisabled ? nothing : this.stepBackwardhref}\n        >\n          <pds-icon-chevron-left></pds-icon-chevron-left>\n        </a>\n      </div>`;\n  }\n\n  /**\n   * @internal\n   * provides the arrow markup for the forward arrows\n   */\n  private forwardArrowMarkup() {\n    return html`<div class=\"${this.classEl('li')}\" role=\"listitem\">\n        <button\n          class=\"${this.classEl('button')} ${this.classMod('step-forward')}\"\n          @click=${this.handleClick}\n          aria-label=\"${this.translateText('go-to-next-page')}\"\n          ?disabled=${this.forwardDisabled}\n        >\n          <pds-icon-chevron-right></pds-icon-chevron-right>\n        </button>\n      </div>\n      ${this.hideFlyers\n        ? ''\n        : html`<div class=\"${this.classEl('li')}\" role=\"listitem\">\n            <button\n              class=\"${this.classEl('button')} ${this.classMod('fly-last')}\"\n              @click=${this.handleClick}\n              aria-label=\"${this.translateText('go-to-last-page')}\"\n              ?disabled=${this.forwardDisabled}\n            >\n              <pds-icon-chevrons-right></pds-icon-chevrons-right>\n            </button>\n          </div>`}`;\n  }\n\n  /**\n   * @internal\n   * provides the arrow markup for the forward arrows\n   */\n  private forwardArrowMarkupAnchor() {\n    return html`<div class=\"${this.classEl('li')}\" role=\"listitem\">\n        <a\n          class=\"${this.classEl('button')} ${this.classMod('step-forward')}\"\n          @click=${this.handleClick}\n          aria-label=\"${this.translateText('go-to-next-page')}\"\n          ?disabled=${this.forwardDisabled}\n          href=${this.forwardDisabled ? nothing : this.stepForwardhref}\n        >\n          <pds-icon-chevron-right></pds-icon-chevron-right>\n        </a>\n      </div>\n      ${this.hideFlyers\n        ? ''\n        : html`<div class=\"${this.classEl('li')}\" role=\"listitem\">\n            <a\n              class=\"${this.classEl('button')} ${this.classMod('fly-last')}\"\n              @click=${this.handleClick}\n              aria-label=\"${this.translateText('go-to-last-page')}\"\n              ?disabled=${this.forwardDisabled}\n              href=${this.forwardDisabled ? nothing : this.flyLasthref}\n            >\n              <pds-icon-chevrons-right></pds-icon-chevrons-right>\n            </a>\n          </div>`}`;\n  }\n\n  /**\n   * @internal\n   * pushes properties down to subcomponent pagination items\n   */\n  addPropertiesToPaginationItems() {\n    const noArrowsVariantWithMoreThanOnePage =\n      this.variant === 'no-arrows' &&\n      this.paginationItems &&\n      this.paginationItems.length > 1;\n    const noArrowsVariantWithOnlyOnePage =\n      this.variant === 'no-arrows' &&\n      this.paginationItems &&\n      this.paginationItems.length === 1;\n\n    if (noArrowsVariantWithMoreThanOnePage) {\n      this.paginationItems.forEach((paginationItem, index, array) => {\n        const isFirstPaginationItem = index === 0;\n        const isLastPaginationItem = index === array.length - 1;\n\n        if (isFirstPaginationItem) {\n          paginationItem.setAttribute('variant', 'no-arrows-first');\n        } else if (isLastPaginationItem) {\n          paginationItem.setAttribute('variant', 'no-arrows-last');\n        }\n      });\n    } else if (noArrowsVariantWithOnlyOnePage) {\n      this.paginationItems[0].setAttribute('variant', 'no-arrows-one-item');\n    }\n\n    if (this.hideFlyers) {\n      this.paginationItems.forEach((paginationItem) => {\n        paginationItem.setAttribute('hideFlyers', '');\n      });\n    }\n  }\n\n  /**\n   * @internal\n   *\n   * Remove slot in the shadow if variant is 'arrows'\n   */\n  protected override firstUpdated() {\n    super.firstUpdated();\n\n    if (this.variant === 'arrows' && this.shadowRoot) {\n      const slot = this.shadowRoot.querySelector('slot');\n      slot?.remove();\n    }\n\n    this.addPropertiesToPaginationItems();\n  }\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.variant]: !!this.variant,\n      hideFlyers: this.hideFlyers,\n    };\n  }\n\n  /**\n   * @internal\n   * If the user passes in a custom aria-label, that will be populated.\n   * If not, the label will be automated and language localized.\n   */\n  getAriaLabel() {\n    if (!this.ariaLabel) {\n      const localizedAriaLabel = this.translateText('pagination');\n      return localizedAriaLabel;\n    }\n    return this.ariaLabel;\n  }\n\n  render() {\n    return html`<nav class=${this.getClass()} aria-label=${this.getAriaLabel()}>\n      <div class=\"${this.classEl('list')}\" role=\"list\">\n        ${this.variant === 'no-arrows' || this.stepBackwardhref === undefined\n          ? nothing\n          : this.backArrowMarkupAnchor()}\n        ${this.variant === 'no-arrows' || this.stepBackwardhref !== undefined\n          ? nothing\n          : this.backArrowMarkup()}\n        <slot @slotchange=${this.addPropertiesToPaginationItems}></slot>\n        ${this.variant === 'no-arrows' || this.stepForwardhref === undefined\n          ? nothing\n          : this.forwardArrowMarkupAnchor()}\n        ${this.variant === 'no-arrows' || this.stepForwardhref !== undefined\n          ? nothing\n          : this.forwardArrowMarkup()}\n      </div>\n    </nav>`;\n  }\n}\n"],"names":["PdsPagination","PdsElement","e","buttonElement","detailSummaryMessage","customEvent","html","nothing","noArrowsVariantWithMoreThanOnePage","noArrowsVariantWithOnlyOnePage","paginationItem","index","array","isFirstPaginationItem","isLastPaginationItem","slot","__decorateClass","property","queryAssignedElements","customElement","styles"],"mappings":"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"}