carbon-custom-elements/es/components/data-table/table-toolbar-search.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-toolbar-search.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,QAAQ,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKxC;;;;GAIG;AACH,cACM,oBAAqB,SAAQ,yBAA2B;IAE5D,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;YACW,0BAA0B;IAOxC;;OAEG;IAGH,OAAO,CAAC,cAAc;IAItB;;;OAGG;IAGH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,aAAoB;IAExB,gBAAgB;IAIhB,iBAAiB;IAOjB,MAAM;IAYN;;OAEG;IACH,MAAM,KAAK,UAAU,WAGpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC","file":"table-toolbar-search.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { INPUT_SIZE } from '../input/input';\nimport BXSearch from '../search/search';\nimport styles from './data-table.scss';\n\nconst { prefix } = settings;\n\n/**\n * Table toolbar search.\n * @element bx-table-toolbar-search\n * @fires bx-search-input - The custom event fired after the search content is changed upon a user gesture.\n */\n@customElement(`${prefix}-table-toolbar-search`)\nclass BXTableToolbarSearch extends HostListenerMixin(BXSearch) {\n  @query('input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles user-initiated gestures for expanding the search box.\n   */\n  private async _handleUserInitiatedExpand() {\n    this.expanded = true;\n    await this.updateComplete;\n    const { _inputNode: inputNode } = this;\n    inputNode?.focus();\n  }\n\n  /**\n   * Handles `focus` event handler on this element.\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusIn() {\n    this._handleUserInitiatedExpand();\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node) && !this.value) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * Handles `click` event handler on the search box.\n   */\n  private _handleSearchClick() {\n    this._handleUserInitiatedExpand();\n  }\n\n  /**\n   * `true` if the search box should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * The search box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.SMALL;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'search');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const result = super.render();\n    const { expanded, size, _handleSearchClick: handleSearchClick } = this;\n    const classes = classMap({\n      [`${prefix}--search`]: true,\n      [`${prefix}--search--${size}`]: size,\n    });\n    return html`\n      <div class=\"${classes}\" tabindex=\"${expanded ? '-1' : '0'}\" @click=\"${handleSearchClick}\">${result}</div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the search content is changed upon a user gesture.\n   */\n  static get eventInput() {\n    // The code uses on in `<bx-search>`, but definition is done also here for React event generation\n    return `${prefix}-search-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTableToolbarSearch;\n"]}