carbon-custom-elements/es/components/pagination/pages-select.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/pages-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQxE;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;;OAGG;IAEH,eAAe;;iBAA0E;IAEzF;;OAEG;IAEH,sBAAsB;;iBAA6D;IAEnF;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,MAAM;IAwBN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"pages-select.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 { html, property, customElement, LitElement } from 'lit-element';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './pagination.scss';\n\nconst { prefix } = settings;\n\n/**\n * The select box for the current page.\n * @element bx-pages-select\n * @fires bx-pages-select-changed - The custom event fired after the page is changed.\n */\n@customElement(`${prefix}-pages-select`)\nclass BXPagesSelect extends FocusMixin(LitElement) {\n  /**\n   * Handles `change` event on the `<select>` to select page size.\n   */\n  private _handleChange({ target }: Event) {\n    const value = Number((target as HTMLSelectElement).value);\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXPagesSelect).eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n    this.value = value;\n  }\n\n  /**\n   * The formatter for the assistive text for screen readers to announce.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatLabelText = ({ count }) => `Page number, of ${count} page${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatSupplementalText = ({ count }) => `of ${count} page${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The number of total pages.\n   */\n  @property({ type: Number })\n  total!: number;\n\n  /**\n   * The value, working as the current page, index that starts with zero.\n   */\n  @property({ type: Number })\n  value!: number;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  render() {\n    const { formatLabelText, formatSupplementalText, total, value, _handleChange: handleChange } = this;\n    // `<option ?selected=\"${index === value}\">` is a workaround for:\n    // https://github.com/Polymer/lit-html/issues/1052\n    return html`\n      <div class=\"${prefix}--select__page-number\">\n        <label for=\"select\" class=\"${prefix}--label ${prefix}--visually-hidden\">\n          ${formatLabelText({ count: total })}\n        </label>\n        <select class=\"${prefix}--select-input\" .value=\"${value}\" @change=\"${handleChange}\">\n          ${Array.from(new Array(total)).map(\n            (_item, index) => html`\n              <option value=${index} ?selected=\"${index === value}\">${index + 1}</option>\n            `\n          )}\n        </select>\n        ${ChevronDown16({ class: `${prefix}--select__arrow` })}\n      </div>\n      <span class=\"${prefix}--pagination__text\">\n        ${formatSupplementalText({ count: total })}\n      </span>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the page is changed.\n   */\n  static get eventChange() {\n    return `${prefix}-pages-select-changed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXPagesSelect;\n"]}