carbon-custom-elements/es/components/pagination/pagination.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/pagination/pagination.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcxE;;;;;;;GAOG;AACH,cACM,YAAa,SAAQ,iBAAsB;IAC/C;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAuB;IAE/C;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;OAGG;IACH,OAAO,CAAC,+BAA+B;IAavC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;OAEG;IAEH,gCAAgC;;;;iBAAyF;IAEzH;;OAEG;IAEH,kCAAkC;;;iBAAiF;IAEnH;;OAEG;IAEH,UAAU,EAAG,OAAO,CAAC;IAErB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAe;IAE7B;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,iBAAiB,EAAG,MAAM,CAAC;IAE3B;;OAEG;IAEH,cAAc,SAAmB;IAEjC;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,iBAAiB;IAQjB,oBAAoB;IAUpB,OAAO,CAAC,iBAAiB,KAAA;IAsBzB,MAAM;IAqDN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;OAEG;IACH,MAAM,KAAK,kBAAkB,WAE5B;IAED;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"pagination.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport CaretLeft24 from '@carbon/icons/lib/caret--left/24';\nimport CaretRight24 from '@carbon/icons/lib/caret--right/24';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport BXPagesSelect from './pages-select';\nimport BXPageSizesSelect from './page-sizes-select';\nimport styles from './pagination.scss';\n\nconst { prefix } = settings;\n\n/**\n * Pagination UI.\n * @element bx-pagination\n * @slot page-sizes-select - Where to put in the `<page-sizes-select>`.\n * @fires bx-pages-select-changed - The custom event fired after the current page is changed from `<bx-pages-select>`.\n * @fires bx-page-sizes-select-changed\n *   The custom event fired after the number of rows per page is changed from `<bx-page-sizes-select>`.\n */\n@customElement(`${prefix}-pagination`)\nclass BXPagination extends FocusMixin(LitElement) {\n  /**\n   * The handle for the listener of `${prefix}-pages-select-changed` event.\n   */\n  private _hChangePage: Handle | null = null;\n\n  /**\n   * The handle for the listener of `${prefix}-page-sizes-select-changed` event.\n   */\n  private _hChangePageSize: Handle | null = null;\n\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatusText() {\n    const { atLastPage, start, pageSize, total, formatStatusWithDeterminateTotal, formatStatusWithIndeterminateTotal } = this;\n    // * Regular: `1-10 of 100 items`\n    // * Indeterminate total: `Item 1-10` (`Item 11-` at the last page)\n    const end = atLastPage ? undefined : Math.min(start + pageSize, total == null ? Infinity : total);\n    const format = total == null ? formatStatusWithIndeterminateTotal : formatStatusWithDeterminateTotal;\n    // `start`/`end` properties starts with zero, whereas we want to show number starting with 1\n    return format({ start: start + 1, end, count: total });\n  }\n\n  /**\n   * Handles user-initiated change in the row number the current page starts with.\n   * @param start The new current row number, index that starts with zero.\n   */\n  private _handleUserInitiatedChangeStart(start: number) {\n    this.start = start;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXPagination).eventChangeCurrent, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          start,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `click` event on the previous button.\n   */\n  private _handleClickPrevButton() {\n    const { start: oldStart, pageSize } = this;\n    const newStart = Math.max(oldStart - pageSize, 0);\n    if (newStart !== oldStart) {\n      this._handleUserInitiatedChangeStart(newStart);\n    }\n  }\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { start: oldStart, pageSize, total } = this;\n    const newStart = oldStart + pageSize;\n    if (newStart < (total == null ? Infinity : total)) {\n      this._handleUserInitiatedChangeStart(newStart);\n    }\n  }\n\n  /**\n   * Handles user-initiated change in current page.\n   * @param event The event.\n   */\n  private _handleChangePage({ detail }: CustomEvent) {\n    const { value } = detail;\n    const { pageSize } = this;\n    this._handleUserInitiatedChangeStart(value * pageSize);\n  }\n\n  /**\n   * Handles user-initiated change in number of rows per page.\n   * @param event The event.\n   */\n  private _handleChangePageSize({ detail }: CustomEvent) {\n    this.pageSize = detail.value;\n  }\n\n  /**\n   * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatusWithDeterminateTotal = ({ start, end, count }) => `${start}–${end} of ${count} item${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatusWithIndeterminateTotal = ({ start, end }) => (end == null ? `Item ${start}–` : `Item ${start}–${end}`);\n\n  /**\n   * `true` to explicitly state that user is at the last page.\n   */\n  @property({ type: Boolean, attribute: 'at-last-page' })\n  atLastPage!: boolean;\n\n  /**\n   * `true` if the pagination UI should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'next-button-text' })\n  nextButtonText = 'Next page';\n\n  /**\n   * Number of items per page.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  /**\n   * The label text for the UI to select page size.\n   */\n  @property({ attribute: 'page-size-label-text' })\n  pageSizeLabelText!: string;\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'prev-button-text' })\n  prevButtonText = 'Previous page';\n\n  /**\n   * The row number where current page start with, index that starts with zero.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  /**\n   * The number of total items.\n   */\n  @property({ type: Number })\n  total!: number;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Manually hooks the event listeners on the host element to make the event names configurable\n    const { eventChangePage, eventChangePageSize } = this.constructor as typeof BXPagination;\n    this._hChangePage = on(this, eventChangePage, this._handleChangePage as EventListener);\n    this._hChangePageSize = on(this, eventChangePageSize, this._handleChangePageSize as EventListener);\n  }\n\n  disconnectedCallback() {\n    if (this._hChangePageSize) {\n      this._hChangePageSize = this._hChangePageSize.release();\n    }\n    if (this._hChangePage) {\n      this._hChangePage = this._hChangePage.release();\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { pageSize } = this;\n    const { selectorPageSizesSelect, selectorPagesSelect } = this.constructor as typeof BXPagination;\n    if (changedProperties.has('pageSize')) {\n      forEach(this.querySelectorAll(selectorPageSizesSelect), elem => {\n        (elem as BXPageSizesSelect).value = pageSize;\n      });\n    }\n    if (changedProperties.has('pageSize') || changedProperties.has('start')) {\n      const { start } = this;\n      forEach(this.querySelectorAll(selectorPagesSelect), elem => {\n        (elem as BXPagesSelect).value = Math.floor(start / pageSize);\n      });\n    }\n    if (changedProperties.has('pageSize') || changedProperties.has('total')) {\n      const { total } = this;\n      forEach(this.querySelectorAll(selectorPagesSelect), elem => {\n        (elem as BXPagesSelect).total = Math.ceil(total / pageSize);\n      });\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      nextButtonText,\n      prevButtonText,\n      pageSize,\n      start,\n      total,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleClickNextButton: handleClickNextButton,\n    } = this;\n    const { atLastPage = start + pageSize >= total } = this;\n    const prevButtonDisabled = disabled || start === 0;\n    const nextButtonDisabled = disabled || atLastPage;\n    const prevButtonClasses = classMap({\n      [`${prefix}--pagination__button`]: true,\n      [`${prefix}--pagination__button--backward`]: true,\n      [`${prefix}--pagination__button--no-index`]: prevButtonDisabled,\n    });\n    const nextButtonClasses = classMap({\n      [`${prefix}--pagination__button`]: true,\n      [`${prefix}--pagination__button--forward`]: true,\n      [`${prefix}--pagination__button--no-index`]: nextButtonDisabled,\n    });\n    return html`\n      <div class=\"${prefix}--pagination__left\">\n        <slot name=\"page-sizes-select\"></slot>\n        <div class=\"${prefix}-ce--pagination__divider\"></div>\n        <span class=\"${prefix}--pagination__text\">${this._renderStatusText()}</span>\n      </div>\n      <div class=\"${prefix}-ce--pagination__divider\"></div>\n      <div class=\"${prefix}--pagination__right\">\n        <slot></slot>\n        <button\n          ?disabled=\"${prevButtonDisabled}\"\n          class=\"${prevButtonClasses}\"\n          title=\"${prevButtonText}\"\n          @click=\"${handleClickPrevButton}\"\n        >\n          ${CaretLeft24()}\n        </button>\n        <button\n          ?disabled=\"${nextButtonDisabled}\"\n          class=\"${nextButtonClasses}\"\n          title=\"${nextButtonText}\"\n          @click=\"${handleClickNextButton}\"\n        >\n          ${CaretRight24()}\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the select box for the current page.\n   */\n  static get selectorPagesSelect() {\n    return `${prefix}-pages-select`;\n  }\n\n  /**\n   * A selector that will return the select box for page sizes.\n   */\n  static get selectorPageSizesSelect() {\n    return `${prefix}-page-sizes-select`;\n  }\n\n  /**\n   * The name of the custom event fired after the current row number is changed.\n   */\n  static get eventChangeCurrent() {\n    return `${prefix}-pagination-changed-current`;\n  }\n\n  /**\n   * The name of the custom event fired after the current page is changed from `<bx-pages-select>`.\n   */\n  static get eventChangePage() {\n    return `${prefix}-pages-select-changed`;\n  }\n\n  /**\n   * The name of the custom event fired after the number of rows per page is changed from `<bx-page-sizes-select>`.\n   */\n  static get eventChangePageSize() {\n    return `${prefix}-page-sizes-select-changed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXPagination;\n"]}