carbon-custom-elements/es/components/data-table/table-row.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-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMxE;;;;;;GAMG;AACH,cACM,UAAW,SAAQ,eAAsB;IAC7C;;;OAGG;IACH,OAAO,CAAC,6BAA6B;IAgBrC;;OAEG;IACH,SAAS,CAAC,iBAAiB;IAwB3B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,IAAI,UAAS;IAEb;;;;OAIG;IAEH,GAAG,UAAS;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;;OAGG;IAEH,aAAa,SAAM;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB,iBAAiB;IAOjB,MAAM;IAMN;;;OAGG;IACH,MAAM,KAAK,0BAA0B,WAEpC;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,UAAU,CAAC","file":"table-row.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 FocusMixin from '../../globals/mixins/focus';\nimport styles from './data-table.scss';\n\nconst { prefix } = settings;\n\n/**\n * Data table row.\n * @element bx-table-row\n * @fires bx-table-row-change-selection\n *   The custom event fired before this row is selected/unselected upon a user gesture.\n *   Cancellation of this event stops the user-initiated change in selection.\n */\n@customElement(`${prefix}-table-row`)\nclass BXTableRow extends FocusMixin(LitElement) {\n  /**\n   * Handles `click` event on the check box.\n   * @param event The event.\n   */\n  private _handleClickSelectionCheckbox(event: Event) {\n    const selected = (event.target as HTMLInputElement).checked;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        selected,\n      },\n    };\n    const constructor = this.constructor as typeof BXTableRow;\n    if (this.dispatchEvent(new CustomEvent(constructor.eventBeforeChangeSelection, init))) {\n      this.selected = selected;\n    }\n  }\n\n  /**\n   * @returns The first set of table cells.\n   */\n  protected _renderFirstCells() {\n    const { disabled, selected, selectionLabel, selectionName, selectionValue } = this;\n    // Using `@click` instead of `@change` to support `.preventDefault()`\n    return !selectionName\n      ? undefined\n      : html`\n          <div class=\"${prefix}--table-column-checkbox\">\n            ${html`\n              <input\n                id=\"selection\"\n                class=\"${prefix}--checkbox\"\n                type=\"checkbox\"\n                value=\"${selectionValue}\"\n                name=\"${selectionName}\"\n                ?disabled=\"${disabled}\"\n                .checked=${selected}\n                @click=${this._handleClickSelectionCheckbox}\n              />\n              <label for=\"selection\" class=\"${prefix}--checkbox-label\" aria-label=\"${selectionLabel}\"></label>\n            `}\n          </div>\n        `;\n  }\n\n  /**\n   * `true` if this table row should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this table row is placed at an even position in parent `<bx-table-body>`.\n   * `<bx-table-body>` sets this property, _only_ in zebra stripe mode.\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  even = false;\n\n  /**\n   * `true` if this table row is placed at an odd position in parent `<bx-table-body>`.\n   * `<bx-table-body>` sets this property, _only_ in zebra stripe mode.\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  odd = false;\n\n  /**\n   * `true` if this table row should be selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The `aria-label` attribute for the `<label>` for selection.\n   */\n  @property({ attribute: 'selection-label' })\n  selectionLabel = '';\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this table row will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * The `value` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-value' })\n  selectionValue = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'row');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    return html`\n      ${this._renderFirstCells()}<slot></slot>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this row is selected/unselected upon a user gesture.\n   * Cancellation of this event stops the user-initiated change in selection.\n   */\n  static get eventBeforeChangeSelection() {\n    return `${prefix}-table-row-change-selection`;\n  }\n\n  /**\n   * The CSS selector to find the table.\n   */\n  static get selectorTable() {\n    return `${prefix}-table`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTableRow;\n"]}