carbon-custom-elements/es/components/search/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/search/search.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAKxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAGvE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,yBAAyB,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI9F;;;;GAIG;AACH,cACM,QAAS,SAAQ,aAAsB;IAC3C;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAgBpC;;OAEG;IAEH,wBAAwB,SAAM;IAE9B;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;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;IAIhB,MAAM;IAkDN;;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, 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, 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 { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { INPUT_SIZE } from '../input/input';\nimport styles from './search.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as SEARCH_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * Search box.\n * @element bx-search\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  }\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 = FORM_ELEMENT_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({ mode: 'open', delegatesFocus: true });\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        class: `${prefix}--search-magnifier`,\n        role: 'img',\n      })}\n      <label for=\"input\" class=\"${prefix}--label\">\n        <slot>${labelText}</slot>\n      </label>\n      <input\n        id=\"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      />\n      <button\n        class=\"${clearClasses}\"\n        @click=\"${handleClearInputButtonClick}\"\n        type=\"button\"\n        aria-label=\"${closeButtonAssistiveText}\"\n      >\n        ${(size === INPUT_SIZE.SMALL ? Close16 : Close20)({\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"]}