carbon-custom-elements/es/components/data-table/table-expand-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-expand-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,UAAU,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMrC;;;GAGG;AACH,cACM,gBAAiB,SAAQ,qBAA6B;IAC1D;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;;OAGG;IAIH,OAAO,CAAC,mBAAmB;IAQ3B;;;OAGG;IACH,OAAO,CAAC,iCAAiC;IAezC,SAAS,CAAC,iBAAiB;IAY3B;;OAEG;IAEH,QAAQ,UAAS;IAEjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;;OAGG;IACH,MAAM,KAAK,wBAAwB,WAElC;IAED;;OAEG;IACH,MAAM,KAAK,kBAAkB,WAE5B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"table-expand-row.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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 } from 'lit-element';\nimport ChevronRight16 from '@carbon/icons/lib/chevron--right/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport BXTableRow from './table-row';\nimport BXTableExpandedRow from './table-expanded-row';\nimport styles from './data-table.scss';\n\nconst { prefix } = settings;\n\n/**\n * The expando row in table row.\n * @element bx-table-expand-row\n */\n@customElement(`${prefix}-table-expand-row`)\nclass BXTableExpandRow extends HostListenerMixin(BXTableRow) {\n  /**\n   * Handles `click` event on the expando button.\n   */\n  private _handleClickExpando() {\n    this._handleUserInitiatedToggleExpando();\n  }\n\n  /**\n   * Handles `mouseover`/`mouseout` event handler on this element.\n   * @param event The event.\n   */\n  @HostListener('mouseover')\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseOverOut(event: MouseEvent) {\n    const { selectorExpandedRow } = this.constructor as typeof BXTableExpandRow;\n    const { nextElementSibling } = this;\n    if (nextElementSibling?.matches(selectorExpandedRow)) {\n      (nextElementSibling as BXTableExpandedRow).highlighted = event.type === 'mouseover';\n    }\n  }\n\n  /**\n   * Handles user-initiated toggle request of the expando button in this table row.\n   * @param expanded The new expanded state.\n   */\n  private _handleUserInitiatedToggleExpando(expanded = !this.expanded) {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    if (this.dispatchEvent(new CustomEvent((this.constructor as typeof BXTableExpandRow).eventBeforeExpandoToggle, init))) {\n      this.expanded = expanded;\n      this.dispatchEvent(new CustomEvent((this.constructor as typeof BXTableExpandRow).eventExpandoToggle, init));\n    }\n  }\n\n  protected _renderFirstCells() {\n    const { _handleClickExpando: handleClickExpando } = this;\n    return html`\n      <div class=\"${prefix}--table-expand\">\n        <button class=\"${prefix}--table-expand__button\" @click=\"${handleClickExpando}\">\n          ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}\n        </button>\n      </div>\n      ${super._renderFirstCells()}\n    `;\n  }\n\n  /**\n   * `true` if the table row should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorExpandedRow } = this.constructor as typeof BXTableExpandRow;\n      const { expanded, nextElementSibling } = this;\n      if (nextElementSibling?.matches(selectorExpandedRow)) {\n        (nextElementSibling as BXTableExpandedRow).expanded = expanded;\n      }\n    }\n  }\n\n  /**\n   * A selector that will return the corresponding expanded row.\n   */\n  static get selectorExpandedRow() {\n    return `${prefix}-table-expanded-row`;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling the expanded state.\n   */\n  static get eventBeforeExpandoToggle() {\n    return `${prefix}-table-row-expando-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after the expanded state this row is toggled upon a user gesture.\n   */\n  static get eventExpandoToggle() {\n    return `${prefix}-table-row-expando-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTableExpandRow;\n"]}