carbon-custom-elements/es/components/data-table/table-header-cell.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/data-table/table-header-cell.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAQxE;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,wBAAwB,6BAA6B;IACrD,yBAAyB,8BAA8B;IACvD,yBAAyB,8BAA8B;IACvD,0BAA0B,+BAA+B;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;CAa7B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF;;;;;;GAMG;AACH,cACM,iBAAkB,SAAQ,sBAAsB;IACpD;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;OAGG;IAEH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC,gBAAgB;IAIhB,iBAAiB;IAOjB,MAAM;IAuBN;;;OAGG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED,MAAM,CAAC,MAAM,MAAU;IAEvB;;OAEG;IACH,MAAM,CAAC,iBAAiB;;;;;MAAqB;CAC9C;AAED,eAAe,iBAAiB,CAAC","file":"table-header-cell.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 settings from 'carbon-components/es/globals/js/settings';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport Arrows16 from '@carbon/icons/lib/arrows/16';\nimport ArrowDown16 from '@carbon/icons/lib/arrow--down/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './data-table.scss';\n\nconst { prefix } = settings;\n\n/**\n * Table sort state.\n */\nexport enum TABLE_SORT_DIRECTION {\n  /**\n   * Not sorted.\n   */\n  NONE = 'none',\n\n  /**\n   * Sorted ascendingly.\n   */\n  ASCENDING = 'ascending',\n\n  /**\n   * Sorted descendingly.\n   */\n  DESCENDING = 'descending',\n}\n\n/**\n * Table sort cycle.\n */\nexport enum TABLE_SORT_CYCLE {\n  BI_STATES_FROM_ASCENDING = 'bi-states-from-ascending',\n  BI_STATES_FROM_DESCENDING = 'bi-states-from-descending',\n  TRI_STATES_FROM_ASCENDING = 'tri-states-from-ascending',\n  TRI_STATES_FROM_DESCENDING = 'tri-states-from-descending',\n}\n\n/**\n * Mapping of table sort cycles to table sort states.\n */\nexport const TABLE_SORT_CYCLES = {\n  [TABLE_SORT_CYCLE.BI_STATES_FROM_ASCENDING]: [TABLE_SORT_DIRECTION.ASCENDING, TABLE_SORT_DIRECTION.DESCENDING],\n  [TABLE_SORT_CYCLE.BI_STATES_FROM_DESCENDING]: [TABLE_SORT_DIRECTION.DESCENDING, TABLE_SORT_DIRECTION.ASCENDING],\n  [TABLE_SORT_CYCLE.TRI_STATES_FROM_ASCENDING]: [\n    TABLE_SORT_DIRECTION.NONE,\n    TABLE_SORT_DIRECTION.ASCENDING,\n    TABLE_SORT_DIRECTION.DESCENDING,\n  ],\n  [TABLE_SORT_CYCLE.TRI_STATES_FROM_DESCENDING]: [\n    TABLE_SORT_DIRECTION.NONE,\n    TABLE_SORT_DIRECTION.DESCENDING,\n    TABLE_SORT_DIRECTION.ASCENDING,\n  ],\n};\n\n/**\n * Data table header cell.\n * @element bx-table-header-cell\n * @fires bx-table-header-cell-sort\n *   The custom event fired before a new sort direction is set upon a user gesture.\n *   Cancellation of this event stops the user-initiated change in sort direction.\n */\n@customElement(`${prefix}-table-header-cell`)\nclass BXTableHeaderCell extends FocusMixin(LitElement) {\n  /**\n   * Handles `click` event on the sort button.\n   * @param event The event.\n   */\n  private _handleClickSortButton() {\n    const nextSortDirection = this._getNextSort();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        oldSortDirection: this.sortDirection,\n        sortDirection: nextSortDirection,\n      },\n    };\n    const constructor = this.constructor as typeof BXTableHeaderCell;\n    if (this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init))) {\n      this.sortActive = true;\n      this.sortDirection = nextSortDirection;\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   * @param event The event.\n   */\n  private _handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  /**\n   * @returns The next sort direction.\n   */\n  private _getNextSort() {\n    const { sortCycle = TABLE_SORT_CYCLE.TRI_STATES_FROM_ASCENDING, sortDirection } = this;\n    if (!sortDirection) {\n      throw new TypeError(\n        'Table sort direction is not defined. ' +\n          'Likely that `_getNextSort()` is called with non-sorted table column, which should not happen in regular condition.'\n      );\n    }\n    const directions = (this.constructor as typeof BXTableHeaderCell).TABLE_SORT_CYCLES[sortCycle];\n    const index = directions.indexOf(sortDirection as TABLE_SORT_DIRECTION);\n    if (index < 0) {\n      if (sortDirection === TABLE_SORT_DIRECTION.NONE) {\n        // If the current sort direction is `none` in bi-state sort cycle, returns the first one in the cycle\n        return directions[0];\n      }\n      throw new RangeError(`The given sort state (${sortDirection}) is not found in the given table sort cycle: ${sortCycle}`);\n    }\n    return directions[(index + 1) % directions.length];\n  }\n\n  /**\n   * `true` if this table header cell is of a primary sorting column.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sort-active' })\n  sortActive = false;\n\n  /**\n   * The table sort cycle in use.\n   */\n  @property({ reflect: true, attribute: 'sort-cycle' })\n  sortCycle?: TABLE_SORT_CYCLE;\n\n  /**\n   * The table sort direction.\n   * If present, this table header cell will have a sorting UI.\n   */\n  @property({ reflect: true, attribute: 'sort-direction' })\n  sortDirection?: TABLE_SORT_DIRECTION;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'columnheader');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const { sortDirection } = this;\n    if (sortDirection) {\n      const sortIcon =\n        sortDirection === TABLE_SORT_DIRECTION.NONE\n          ? Arrows16({\n              class: `${prefix}--table-sort__icon-unsorted`,\n            })\n          : ArrowDown16({\n              class: `${prefix}--table-sort__icon`,\n            });\n      return html`\n        <button class=\"${prefix}--table-sort\" title=\"${this.textContent}\" @click=${this._handleClickSortButton}>\n          <span class=\"${prefix}--table-header-label\"><slot @slotchange=${this._handleSlotChange}></slot></span>\n          ${sortIcon}\n        </button>\n      `;\n    }\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before a new sort direction is set upon a user gesture.\n   * Cancellation of this event stops the user-initiated change in sort direction.\n   */\n  static get eventBeforeSort() {\n    return `${prefix}-table-header-cell-sort`;\n  }\n\n  static styles = styles;\n\n  /**\n   * Mapping of table sort cycles to table sort states.\n   */\n  static TABLE_SORT_CYCLES = TABLE_SORT_CYCLES;\n}\n\nexport default BXTableHeaderCell;\n"]}