carbon-custom-elements/es/components/pagination/page-sizes-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/page-sizes-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ/E;;;;;GAKG;AACH,cACM,iBAAkB,SAAQ,sBAAsB;IAEpD,OAAO,CAAC,WAAW,CAAqB;IAExC;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IAEH,SAAS,SAAqB;IAE9B;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,MAAM;IAYN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"page-sizes-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, query, 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 page sizes.\n * @element bx-page-sizes-select\n * @slot label-text - The label text.\n * @fires bx-page-sizes-select-changed - The custom event fired after the page size is changed.\n */\n@customElement(`${prefix}-page-sizes-select`)\nclass BXPageSizesSelect extends FocusMixin(LitElement) {\n  @query('select')\n  private _selectNode!: HTMLSelectElement;\n\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 BXPageSizesSelect).eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n    this.value = value;\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for `<options>`.\n   * @param event The event.\n   */\n  private _handleSlotChange({ target }: Event) {\n    const { _selectNode: selectNode } = this;\n    while (selectNode.firstChild) {\n      selectNode.removeChild(selectNode.firstChild);\n    }\n    ((target as HTMLSlotElement).assignedNodes() as HTMLOptionElement[]).forEach(item => {\n      selectNode?.appendChild(item.cloneNode(true));\n    });\n  }\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = 'Items per page:';\n\n  /**\n   * The value, working as the current page size.\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 { labelText, value, _handleChange: handleChange, _handleSlotChange: handleSlotChange } = this;\n    return html`\n      <label for=\"select\" class=\"${prefix}--pagination__text\"><slot name=\"label-text\">${labelText}</slot></label>\n      <div class=\"${prefix}--select__item-count\">\n        <select id=\"select\" class=\"${prefix}--select-input\" .value=\"${value}\" @change=${handleChange}></select>\n        ${ChevronDown16({ class: `${prefix}--select__arrow` })}\n      </div>\n      <div hidden><slot @slotchange=\"${handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the page size is changed.\n   */\n  static get eventChange() {\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 BXPageSizesSelect;\n"]}