{"version":3,"sources":["components/search/search.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAOxE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAG7C,OAAO,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI/B;;;;;;;;;GASG;AACH,cACM,QAAS,SAAQ,aAAsB;IAC3C;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAoBpC;;OAEG;IAEH,wBAAwB,SAAM;IAE9B;;OAEG;IAEH,WAAW,sBAA+B;IAE1C;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAM;IAEX,gBAAgB;IAOhB,MAAM;IAoDN;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,QAAQ,CAAC","file":"search.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2021\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, customElement, LitElement } from 'lit-element';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Search16 from '@carbon/icons/lib/search/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { INPUT_SIZE } from '../input/input';\nimport { SEARCH_COLOR_SCHEME } from './defs';\nimport styles from './search.scss';\n\nexport { SEARCH_COLOR_SCHEME };\n\nconst { prefix } = settings;\n\n/**\n * Search box.\n * @element bx-search\n * @csspart search-icon The search icon.\n * @csspart label-text The label text.\n * @csspart input The input box.\n * @csspart close-button The close button.\n * @csspart close-icon The close icon.\n * @fires bx-search-input - The custom event fired after the search content is changed upon a user gesture.\n */\n@customElement(`${prefix}-search`)\nclass BXSearch extends FocusMixin(LitElement) {\n  /**\n   * Handles `input` event on the `<input>` in the shadow DOM.\n   */\n  private _handleInput(event: Event) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXSearch).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value,\n        },\n      })\n    );\n    this.value = value;\n  }\n\n  /**\n   * Handles `click` event on the button to clear search box content.\n   */\n  private _handleClearInputButtonClick() {\n    if (this.value) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof BXSearch).eventInput, {\n          bubbles: true,\n          composed: true,\n          cancelable: false,\n          detail: {\n            value: '',\n          },\n        })\n      );\n      this.value = '';\n\n      // set focus on back to input once search is cleared\n      const input = this.shadowRoot!.querySelector('input');\n      (input as HTMLElement).focus();\n    }\n  }\n\n  /**\n   * The assistive text for the close button.\n   */\n  @property({ attribute: 'close-button-assistive-text' })\n  closeButtonAssistiveText = '';\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = SEARCH_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if the search box should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * The form name.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The placeholder text.\n   */\n  @property()\n  placeholder = '';\n\n  /**\n   * The search box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.REGULAR;\n\n  /**\n   * The `<input>` name.\n   */\n  @property()\n  type = '';\n\n  /**\n   * The value.\n   */\n  @property({ type: String })\n  value = '';\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus: Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537,\n    });\n  }\n\n  render() {\n    const {\n      closeButtonAssistiveText,\n      disabled,\n      labelText,\n      name,\n      placeholder,\n      size,\n      type,\n      value = '',\n      _handleInput: handleInput,\n      _handleClearInputButtonClick: handleClearInputButtonClick,\n    } = this;\n    const clearClasses = classMap({\n      [`${prefix}--search-close`]: true,\n      [`${prefix}--search-close--hidden`]: !this.value,\n    });\n    return html`\n      ${Search16({\n        part: 'search-icon',\n        class: `${prefix}--search-magnifier-icon`,\n        role: 'img',\n      })}\n      <label for=\"input\" part=\"label-text\" class=\"${prefix}--label\">\n        <slot>${labelText}</slot>\n      </label>\n      <input\n        id=\"input\"\n        part=\"input\"\n        type=\"${ifNonEmpty(type)}\"\n        class=\"${prefix}--search-input\"\n        ?disabled=\"${disabled}\"\n        name=\"${ifNonEmpty(name)}\"\n        placeholder=\"${ifNonEmpty(placeholder)}\"\n        role=\"searchbox\"\n        .value=\"${value}\"\n        @input=\"${handleInput}\" />\n      <button\n        part=\"close-button\"\n        class=\"${clearClasses}\"\n        @click=\"${handleClearInputButtonClick}\"\n        type=\"button\"\n        aria-label=\"${closeButtonAssistiveText}\">\n        ${(size === INPUT_SIZE.SMALL ? Close16 : Close20)({\n          part: 'close-icon',\n          'aria-label': closeButtonAssistiveText,\n          role: 'img',\n        })}\n      </button>\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    return `${prefix}-search-input`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSearch;\n"]}