carbon-custom-elements/es/components/structured-list/structured-list-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/structured-list/structured-list-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8E7E;;OAEG;;;;;;;;;AAlBL;;;GAGG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkC;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAkD;IAE9E;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IAGH,OAAO,CAAC,YAAY,CAQlB;IAEF;;OAEG;IAGH,OAAO,CAAC,cAAc,CAYpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,aAAa,SAAM;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,kBAAkB,SAAM;IAExB,iBAAiB;IAcjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,KAAA;IAgBzB,MAAM;IA2BN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"structured-list-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 { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, { NAVIGATION_DIRECTION, ManagedRadioButtonDelegate } from '../../globals/internal/radio-group-manager';\nimport styles from './structured-list.scss';\n\nconst { prefix } = settings;\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for structured list row.\n */\nclass StructuredListRowRadioButtonDelegate implements ManagedRadioButtonDelegate {\n  /**\n   * The structured list row to target.\n   */\n  private _row: BXStructuredListRow;\n\n  constructor(row: BXStructuredListRow) {\n    this._row = row;\n  }\n\n  get checked() {\n    return this._row.selected;\n  }\n\n  set checked(checked) {\n    this._row.selected = checked;\n    this._row.tabIndex = checked ? 0 : -1;\n  }\n\n  get tabIndex() {\n    return this._row.tabIndex;\n  }\n\n  set tabIndex(tabIndex) {\n    this._row.tabIndex = tabIndex;\n  }\n\n  get name() {\n    return this._row.selectionName;\n  }\n\n  compareDocumentPosition(other: StructuredListRowRadioButtonDelegate) {\n    return this._row.compareDocumentPosition(other._row);\n  }\n\n  focus() {\n    this._row.focus();\n  }\n}\n\n/**\n * Structured list row.\n * @element bx-structured-list-row\n */\n@customElement(`${prefix}-structured-list-row`)\nclass BXStructuredListRow extends HostListenerMixin(LitElement) {\n  /**\n   * The radio group manager associated with the radio button.\n   */\n  private _manager: RadioGroupManager | null = null;\n\n  /**\n   * The interface for `RadioGroupManager` for structured list row.\n   */\n  private _radioButtonDelegate = new StructuredListRowRadioButtonDelegate(this);\n\n  /**\n   * The hidden radio button.\n   */\n  @query('#input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    const { _inputNode: inputNode } = this;\n    if (inputNode) {\n      this.selected = true;\n      if (this._manager) {\n        this._manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { _inputNode: inputNode } = this;\n    const manager = this._manager;\n    if (inputNode && manager) {\n      const navigationDirection = navigationDirectionForKey[event.key];\n      if (navigationDirection) {\n        manager.select(manager.navigate(this._radioButtonDelegate, navigationDirection));\n      }\n      if (event.key === ' ' || event.key === 'Enter') {\n        manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * `true` if this structured list row should be selectable and selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list 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  /**\n   * The content to put into the `<title>` attribute of the selection icon.\n   */\n  @property({ attribute: 'selection-icon-title' })\n  selectionIconTitle = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'row');\n    }\n    super.connectedCallback();\n    if (!this._manager) {\n      this._manager = RadioGroupManager.get(this.getRootNode({ composed: true }) as Document);\n      const { selectionName } = this;\n      if (selectionName) {\n        this._manager?.add(this._radioButtonDelegate);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._manager) {\n      this._manager.delete(this._radioButtonDelegate);\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { _manager: manager, selectionName } = this;\n    if (changedProperties.has('selectionName')) {\n      if (manager) {\n        manager.delete(this._radioButtonDelegate, changedProperties.get('selectionName'));\n        if (selectionName) {\n          manager.add(this._radioButtonDelegate);\n        }\n      }\n      this.setAttribute(\n        'tabindex',\n        !selectionName || !manager || !manager.shouldBeFocusable(this._radioButtonDelegate) ? '-1' : '0'\n      );\n    }\n  }\n\n  render() {\n    const { selected, selectionName, selectionValue, selectionIconTitle } = this;\n    if (selectionName) {\n      // \"Selected\" style with `.bx--structured-list-td` does not work somehow - Need investigation\n      return html`\n        <slot></slot>\n        <input\n          id=\"input\"\n          type=\"radio\"\n          class=\"${prefix}--structured-list-input\"\n          .checked=${selected}\n          name=${selectionName}\n          value=${ifDefined(selectionValue)}\n        />\n        <div class=\"${prefix}--structured-list-td ${prefix}--structured-list-cell\">\n          ${CheckmarkFilled16({\n            class: `${prefix}--structured-list-svg`,\n            title: selectionIconTitle,\n          })}\n        </div>\n      `;\n    }\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXStructuredListRow;\n"]}