{"version":3,"sources":["components/ads-search/ads-search.tsx","components/ads-search/ads-search.scss?tag=ads-search&encapsulation=shadow","components/core/global/pipeline.ts","components/core/utils/pipeline.ts","components/core/utils/components.ts","utils/imageHelper.tsx","utils/breakpointHelper.ts","utils/resizeHelper.ts","../node_modules/@fortawesome/pro-light-svg-icons/faCircleXmark.js","../node_modules/@fortawesome/pro-light-svg-icons/faTimesCircle.js","../node_modules/@fortawesome/pro-regular-svg-icons/faMagnifyingGlass.js","../node_modules/@fortawesome/pro-regular-svg-icons/faSearch.js"],"names":["AdsSearch","_suggestionsLimit","onInputClearHandler","evt","preventDefault","_searchValue","getSearchBox","focus","inputChange","emit","value","inputChangeHandler","inputClear","inputClearHandler","onInputChangeHandler","resetHighlightedSuggestion","target","onFocusHandler","suggestionBox","getSuggestionsBox","classList","contains","remove","onBlurHandler","relatedTarget","onSuggestionClickHandler","suggestionsData","activeSuggestionIndex","children","removeAttribute","add","onInputClickHandler","hasSearchButton","el","shadowRoot","onKeyUpHandler","length","key","toLowerCase","setActiveSuggestion","onSubmitHandler","submitEmptyResults","searchSubmit","searchSubmitHandler","stopPropagation","selectedItem","suggestionClickHandler","item","suggestionClick","link","window","location","assign","suggestionsBox","suggestionIndex","isNaN","oldActiveSuggestion","setAttribute","get","this","identifier","component","registerComponent","newValue","oldValue","Promise","resolve","querySelector","Pipeline.addComponent","searchValue","Pipeline.removeComponent","$searchIcon","data","iconSearchPath","height","iconSearchHeight","width","iconSearchWidth","searchInputClasses","disabled","push","searchInputAttributes","autocomplete","autofocus","autoFocus","onClick","onFocus","onBlur","onKeyUp","onInput","placeholder","maxlength","name","spellCheck","type","inputLabel","$searchInput","class","join","$searchButton","attributes","tabIndex","buttonLabel","$searchClear","iconTimesPath","iconTimesHeight","iconTimesWidth","$searchSuggestions","role","slice","map","index","onMouseOver","tabindex","desc","formClasses","hideClearButton","hostAttributes","onSubmit","pipeline","set","id","tagName","config","getBoolean","trackEvent","COMPONENT_REGISTER","componentId","environment","version","host","err","console","log","sendCustomEvent","addComponent","Pipeline.add","removeComponent","delete","Pipeline.remove","generateId","namespace","generateRandomString","Math","random","toString","substr","getClassFromSize","size","MEDIUM","SMALL","getClassFromLevel","level","PRIMARY","SECONDARY","TERTIARY","getMediaQueryBreakpointClassUp","bp","getMediaQueryBreakpointClassDown","showErrorMessage","message","ADS_CONSOLE_ERROR","warn","generateSVGImage","icon","className","xmlns","viewBox","d","MediaTypes","getBreakpointInPixels","breakpoint","parseInt","breakpoints","mediaQueryLists","addMatchMedia","mediaType","listenerFunction","foundMatchMedia","find","m","media","newMatchMedia","matchMedia","addEventListener","removeMatchMedia","removeEventListener","callbacks","onresize","cb","timeout","callback","setTimeout","duration","subscribeToWindowResize","timeoutDuration","unSubscribeToWindowResize","findIndex","clearTimeout","splice","Object","defineProperty","exports","aliases","svgPathData","prefix","iconName","definition","source","unicode"],"mappings":"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","file":"static/js/12.42eee4ae.chunk.js","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, State, VNode, Watch, h } from '@stencil/core';\n\nimport { height as iconSearchHeight, svgPathData as iconSearchPath, width as iconSearchWidth } from '@fortawesome/pro-regular-svg-icons/faSearch';\nimport { height as iconTimesHeight, svgPathData as iconTimesPath, width as iconTimesWidth } from '@fortawesome/pro-light-svg-icons/faTimesCircle';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Dictionary } from '../core/classes/Dictionary';\nimport {\n  InputChangeEvent,\n  InputChangeHandler,\n  InputClearEvent,\n  InputClearHandler,\n  SearchSubmitEvent,\n  SearchSubmitHandler,\n  SearchSuggestion,\n  SuggestionClickEvent,\n  SuggestionClickHandler,\n} from './ads-search.types';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { generateSVGImage, isNullOrUndefined, isNullOrUndefinedOrEmpty } from 'utils/index';\n\n/**\n * Search enables users to specify a word or a phrase to find particular relevant pieces of content without the use of navigation.\n * Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.\n * @tag `<ads-search>`\n * @example <ads-search has-search-button placeholder=\"Hello world\"></ads-search>\n */\n@Component({\n  tag: 'ads-search',\n  styleUrl: 'ads-search.scss',\n  shadow: true,\n})\nexport class AdsSearch implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  private _suggestionsLimit = 10;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-search'));\n    this.component = 'ads-search';\n    Dictionary.registerComponent(this);\n  }\n\n  @Element() private el: HTMLAdsSearchElement;\n\n  /**\n   * The search value the user types in is stored here\n   * @hidden\n   */\n  @State() _searchValue: string;\n\n  /**\n   * The current active suggestion index\n   * @hidden\n   */\n  @State() activeSuggestionIndex = 0;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Decides whether or not the search should be autofocused (optional)\n   * @default false\n   */\n  @Prop({ attribute: 'autofocus', reflect: true }) autoFocus = false;\n\n  /**\n   * The value for the aria-label of the search button, to describe the action (optional)\n   * @default \"Submit Search\"\n   */\n  @Prop({ reflect: true }) buttonLabel = Dictionary.get('Submit Search', 'SUBMIT_SEARCH');\n\n  /**\n   * Sets whether or not the search should be is disabled (optional)\n   * @default false\n   */\n  @Prop({ attribute: 'disabled', reflect: true }) disabled = false;\n\n  /**\n   * The value for the aria-label, to describe the purpose of the search input (optional)\n   * @default \"Search\"\n   */\n  @Prop({ reflect: true }) inputLabel = Dictionary.get('Search', 'SEARCH');\n\n  /**\n   * The placeholder for the search input box (optional)\n   * @default \"Search\"\n   */\n  @Prop({ attribute: 'placeholder', reflect: true }) placeholder = Dictionary.get('Search', 'SEARCH');\n\n  /**\n   * The maxlength property for search input (optional)\n   */\n  @Prop({ attribute: 'maxlength', reflect: true }) maxlength?: number;\n\n  /**\n   * The name property of the input field (optional)\n   */\n  @Prop({ attribute: 'name', reflect: true }) name?: string;\n\n  /**\n   * Whether or not empty results should be submitted (optional)\n   * @default true\n   */\n  @Prop({ reflect: true }) submitEmptyResults = true;\n\n  /**\n   * The value for the search input box (optional)\n   */\n  @Prop({ reflect: true }) searchValue?: string;\n\n  /**\n   * Decides whether or not the search should be styled for developer purposes (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) hasSearchButton = false;\n\n  /**\n   * Whether or not the clear button should be hidden (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) hideClearButton? = false;\n\n  /**\n   * Data to show in suggestions (optional)\n   */\n  @Prop() suggestionsData?: SearchSuggestion[];\n\n  /**\n   * Handles inputClear events (optional)\n   */\n  @Prop() inputClearHandler?: InputClearHandler;\n\n  /**\n   * Handles inputChange events (optional)\n   */\n  @Prop() inputChangeHandler?: InputChangeHandler;\n\n  /**\n   * Handles submit events (optional)\n   */\n  @Prop() searchSubmitHandler?: SearchSubmitHandler;\n\n  /**\n   * Handles suggestion click events (optional)\n   */\n  @Prop() suggestionClickHandler?: SuggestionClickHandler;\n\n  /**\n   * Emits 'inputClear' custom event\n   *\n   * Usage: `document.querySelector('ads-search').addEventListener('inputClear', function(evt) { });`\n   * @event\n   */\n  @Event({ bubbles: false }) inputClear: EventEmitter<InputClearEvent>;\n\n  /**\n   * Emits 'inputChange' custom event.<br/>\n   * Usage: `document.querySelector('ads-search').addEventListener('inputChange', function(evt) { });`\n   * @event\n   */\n  @Event({ bubbles: false }) inputChange: EventEmitter<InputChangeEvent>;\n\n  /**\n   * Emits the 'searchSubmit' custom event.<br/>\n   * Usage: `document.querySelector('ads-search').addEventListener('searchSubmit', function(evt) { });`\n   */\n  @Event({ bubbles: false }) searchSubmit: EventEmitter<SearchSubmitEvent>;\n\n  /**\n   * Emits 'suggestionClick' custom event.<br/>\n   * Usage: `document.querySelector('ads-search').addEventListener('suggestionClick', function(evt) { });`\n   * @event\n   */\n  @Event({ bubbles: false }) suggestionClick: EventEmitter<SuggestionClickEvent>;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-search'));\n  }\n\n  /**\n   * On searchValue prop change\n   * Change search value if differes from old value\n   * @param {string} newValue The new value\n   * @param {string} oldValue The old value\n   * @hidden\n   */\n  @Watch('searchValue')\n  onSearchValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue) {\n      this._searchValue = newValue;\n    }\n  }\n\n  /**\n   * Returns the current value of the search input\n   * @return {Promise<string>}  The search input\n   */\n  @Method()\n  value(): Promise<string> {\n    return Promise.resolve(this._searchValue);\n  }\n\n  /* EVENT HANDLERS */\n\n  /**\n   * Clear search data\n   * @param {Event} evt The event obj\n   * @return {void}\n   */\n  private onInputClearHandler = (evt: Event): void => {\n    evt.preventDefault();\n    this._searchValue = '';\n    this.getSearchBox().focus();\n    this.inputChange.emit({ evt, value: this._searchValue });\n    if (!isNullOrUndefined(this.inputChangeHandler)) {\n      this.inputChangeHandler({ evt, value: this._searchValue });\n    }\n    this.inputClear.emit({ evt });\n    if (!isNullOrUndefined(this.inputClearHandler)) {\n      this.inputClearHandler({ evt });\n    }\n  };\n\n  /**\n   * Handle input\n   * @param {Event} evt The evt obj\n   * @return {void}\n   */\n  private onInputChangeHandler = (evt: Event): void => {\n    this.resetHighlightedSuggestion();\n    this._searchValue = (evt.target as HTMLInputElement).value;\n    if (!isNullOrUndefined(this.inputChangeHandler)) {\n      this.inputChangeHandler({ evt, value: this._searchValue });\n    }\n    this.inputChange.emit({ evt, value: this._searchValue });\n  };\n\n  /**\n   * Handles suggestions display from searchbox onFocus event\n   * @return {void}\n   */\n  private onFocusHandler = (): void => {\n    const suggestionBox = this.getSuggestionsBox();\n    if (suggestionBox && suggestionBox.classList.contains('is-hidden')) {\n      suggestionBox.classList.remove('is-hidden');\n    }\n  };\n\n  /**\n   * Handles suggestions display from searchbox onBlur event\n   * @param {Event} evt The event obj\n   * @return {void}\n   */\n  private onBlurHandler = (evt: FocusEvent): void => {\n    const target = evt.relatedTarget as HTMLElement;\n    const suggestionBox = this.getSuggestionsBox();\n    if (target && target.classList.contains('c-search__suggestions__suggestion')) {\n      this.onSuggestionClickHandler(evt, this.suggestionsData[this.activeSuggestionIndex - 1]);\n    }\n\n    if (suggestionBox && !suggestionBox.classList.contains('is-hidden')) {\n      if (this.activeSuggestionIndex) {\n        suggestionBox.children[this.activeSuggestionIndex - 1].classList.remove('is-active');\n      }\n      suggestionBox.removeAttribute('aria-active-suggestion');\n      suggestionBox.classList.add('is-hidden');\n    }\n\n    this.onInputClickHandler();\n\n    if (!this.hasSearchButton) {\n      if (typeof target === 'object' && target !== null) {\n        if (this.el.shadowRoot.contains(target)) {\n          return;\n        }\n      }\n    }\n  };\n\n  /**\n   * Handles up/down arrow key events to navigate through suggestions\n   * @param {Event} evt The event obj\n   * @return {void}\n   */\n  private onKeyUpHandler = (evt: KeyboardEvent): void => {\n    if (this._searchValue && this.suggestionsData?.length > 0) {\n      switch (evt.key.toLowerCase()) {\n        case 'enter': // ENTER\n          // Go to highlighted suggestion otherwise enter the text\n          if (this.activeSuggestionIndex > 0) {\n            evt.preventDefault();\n            this.onSuggestionClickHandler(evt, this.suggestionsData[this.activeSuggestionIndex - 1]);\n          }\n          break;\n        case 'escape': // ESCAPE\n          evt.preventDefault();\n          this.onInputClickHandler();\n          this.onInputClearHandler(evt);\n          break;\n        case 'arrowup': // UP\n          evt.preventDefault();\n          this.setActiveSuggestion(this.activeSuggestionIndex - 1);\n          break;\n        case 'arrowdown': // DOWN\n          evt.preventDefault();\n          this.setActiveSuggestion(this.activeSuggestionIndex + 1);\n          break;\n        default:\n          break;\n      }\n    }\n  };\n\n  /**\n   * Reset the active highlighted suggestion\n   * @return {void}\n   */\n  private onInputClickHandler = (): void => {\n    this.resetHighlightedSuggestion();\n  };\n\n  /**\n   * Handles form submission\n   * @param  {Event}  evt The event obj\n   * @return {void}\n   */\n  private onSubmitHandler = (evt: Event): void => {\n    evt.preventDefault();\n\n    // Prevent the form from being submitted if no search value was entered\n    if (!this.submitEmptyResults && isNullOrUndefinedOrEmpty(this._searchValue)) {\n      evt.stopPropagation();\n      return;\n    }\n\n    // Dispatch the `searchSubmit` event\n    this.searchSubmit.emit({ evt, value: this._searchValue });\n\n    // Invoke the provided callback function, if any\n    if (this.searchSubmitHandler && typeof this.searchSubmitHandler === 'function') {\n      this.searchSubmitHandler({ evt, value: this._searchValue });\n    }\n  };\n\n  /**\n   * Handles clicking on a suggestion\n   * @param {Event} evt The event obj\n   * @param {SearchSuggestion} selectedItem The selected suggestion\n   * @return {void}\n   */\n  private onSuggestionClickHandler = (evt: Event, selectedItem: SearchSuggestion): void => {\n    if (!isNullOrUndefined(this.suggestionClickHandler)) {\n      this.suggestionClickHandler({ evt, item: selectedItem, value: this._searchValue });\n    }\n    this.suggestionClick.emit({ evt, item: selectedItem, value: this._searchValue });\n    if (!isNullOrUndefinedOrEmpty(selectedItem.link)) {\n      window.location.assign(selectedItem.link);\n    }\n  };\n\n  /**\n   * Reset the active highlighted suggestion, if there are suggestions\n   * @return {void}\n   */\n  private resetHighlightedSuggestion = (): void => {\n    const suggestionsBox = this.getSuggestionsBox();\n    if (!isNullOrUndefined(suggestionsBox)) {\n      this.getSuggestionsBox().classList.remove(`highlight-${this.activeSuggestionIndex}`);\n      if (this.activeSuggestionIndex) {\n        this.getSuggestionsBox().children[this.activeSuggestionIndex - 1].classList.remove('is-active');\n      }\n    }\n    this.activeSuggestionIndex = 0;\n  };\n\n  /**\n   * Move up or down in the suggestions dropdown\n   * @param {number} suggestionIndex The index of the selected suggestion\n   * @return {void}\n   */\n  private setActiveSuggestion = (suggestionIndex: number): void => {\n    if (!isNaN(suggestionIndex)) {\n      const oldActiveSuggestion = this.activeSuggestionIndex;\n\n      // Set new active suggestions\n      if (suggestionIndex > this.suggestionsData.length) {\n        this.activeSuggestionIndex = 1;\n      } else if (suggestionIndex < 1) {\n        this.activeSuggestionIndex = this.suggestionsData.length;\n      } else {\n        this.activeSuggestionIndex = suggestionIndex;\n      }\n\n      // Set active suggestion\n      this.getSuggestionsBox().children[this.activeSuggestionIndex - 1].classList.add('is-active');\n      if (oldActiveSuggestion) {\n        this.getSuggestionsBox().children[oldActiveSuggestion - 1].classList.remove('is-active');\n      }\n      this.getSuggestionsBox().setAttribute('aria-active-suggestion', `active-item-${this.activeSuggestionIndex}`);\n    }\n  };\n\n  private getSearchBox(): HTMLElement {\n    const searchBar = !isNullOrUndefined(this.el.shadowRoot) ? this.el.shadowRoot.querySelector('.c-search__bar') : this.el.children[0].children[0];\n    return searchBar.querySelector('.c-search__input');\n  }\n\n  private getSuggestionsBox(): HTMLElement {\n    const searchBar = !isNullOrUndefined(this.el.shadowRoot) ? this.el.shadowRoot.querySelector('.c-search__bar') : this.el.children[0].children[0];\n    return searchBar.querySelector('.c-search__suggestions');\n  }\n\n  protected componentWillLoad(): void {\n    Pipeline.addComponent(this.el);\n    this._searchValue = this.searchValue || this._searchValue;\n  }\n\n  protected componentDidLoad(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this.el.focus = () => {\n      this.getSearchBox().focus();\n    };\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): VNode {\n    // Icon\n    const $searchIcon = !this.hasSearchButton\n      ? generateSVGImage({ data: iconSearchPath, height: iconSearchHeight, width: iconSearchWidth }, 'c-search__icon')\n      : null;\n\n    // Input\n    const searchInputClasses = ['c-search__input'];\n    if (this.disabled) {\n      searchInputClasses.push('is-disabled');\n    }\n    if (this._searchValue && this.suggestionsData?.length) {\n      searchInputClasses.push('has-suggestions');\n    }\n    const searchInputAttributes = {\n      autocomplete: 'off',\n      autofocus: this.autoFocus,\n      disabled: this.disabled,\n      onClick: this.onInputClickHandler,\n      onFocus: this.onFocusHandler,\n      onBlur: this.onBlurHandler,\n      onKeyUp: this.onKeyUpHandler,\n      onInput: this.onInputChangeHandler,\n      placeholder: this.placeholder,\n      maxlength: this.maxlength,\n      name: this.name,\n      spellCheck: false,\n      type: 'search',\n      value: this._searchValue,\n      'aria-label': this.inputLabel,\n    };\n    const $searchInput = (<input class={searchInputClasses.join(' ')} {...searchInputAttributes} />) as HTMLElement;\n\n    // Button\n    let $searchButton = null;\n    if (this.hasSearchButton) {\n      const attributes: {\n        disabled: boolean;\n        tabIndex: number;\n        value: string;\n        'aria-label': string;\n        class?: string;\n      } = {\n        disabled: this.disabled,\n        tabIndex: 0,\n        value: Dictionary.get('Search', 'SEARCH'),\n        'aria-label': this.buttonLabel,\n      };\n      if (this.disabled) {\n        attributes['class'] = 'is-disabled';\n      }\n      $searchButton = (\n        <div class={`c-search__button`}>\n          <button type=\"submit\" {...attributes} data-track=\"true\" data-track-value={this.buttonLabel}>\n            {generateSVGImage({ data: iconSearchPath, height: iconSearchHeight, width: iconSearchWidth })}\n          </button>\n        </div>\n      ) as HTMLElement;\n    }\n\n    // Clear\n    const $searchClear = !isNullOrUndefinedOrEmpty(this._searchValue)\n      ? ((\n          <button\n            class=\"c-search__clear\"\n            type=\"button\"\n            data-track=\"true\"\n            data-track-value=\"Clear search\"\n            onClick={this.onInputClearHandler}\n            aria-label=\"Clear search\"\n          >\n            {generateSVGImage({ data: iconTimesPath, height: iconTimesHeight, width: iconTimesWidth })}\n          </button>\n        ) as HTMLElement)\n      : null;\n\n    // Suggestions\n    const $searchSuggestions =\n      !isNullOrUndefinedOrEmpty(this._searchValue) && this.suggestionsData?.length\n        ? [\n            <span class=\"c-search__suggestions-alert\" role=\"alert\">\n              {this.suggestionsData.length} results found, use arrow keys to navigate\n            </span>,\n            <div class=\"c-search__suggestions\">\n              {this.suggestionsData.slice(0, this._suggestionsLimit).map((item, index) => {\n                return (\n                  <span\n                    class=\"c-search__suggestions__suggestion\"\n                    // Binding the methods in the render is an anti-pattern and might cause performance issues\n                    onClick={(evt) => this.onSuggestionClickHandler(evt, item)}\n                    onMouseOver={() => this.setActiveSuggestion(index + 1)}\n                    tabindex=\"-1\"\n                  >\n                    <span class=\"link\">{item.name}</span>\n                    {!isNullOrUndefinedOrEmpty(item.desc) ? <p class=\"description\">{item.desc}</p> : null}\n                  </span>\n                ) as VNode;\n              })}\n            </div>,\n          ]\n        : null;\n\n    // Form\n    const formClasses = ['c-search'];\n    if (this.disabled) {\n      formClasses.push('is-disabled');\n    }\n    if (this.hasSearchButton) {\n      formClasses.push('has-button');\n    }\n    if (this.hideClearButton) {\n      formClasses.push('hide-clear-button');\n    }\n\n    const hostAttributes = {\n      'aria-disabled': this.disabled ? 'true' : null,\n    };\n\n    return (\n      <form class={formClasses.join(' ')} onSubmit={this.onSubmitHandler} role=\"search\">\n        <div class=\"c-search__bar\" {...hostAttributes}>\n          {$searchIcon}\n          {$searchInput}\n          {this.hideClearButton ? null : $searchClear}\n          {$searchSuggestions}\n        </div>\n        {$searchButton}\n      </form>\n    ) as VNode;\n  }\n}\n","@import 'core';\n\n/**\n * @prop --ads-search-background-color: Background color\n *\n * @prop --ads-search-border-bottom-color: Border color bottom\n * @prop --ads-search-border-color: Border color\n * @prop --ads-search-border-color-disabled: Disabled border color\n * @prop --ads-search-border-color-focus: Focused border color\n * @prop --ads-search-border-color-hover: Hovered border color\n *\n * @prop --ads-search-button-background-color: Button background color\n * @prop --ads-search-button-background-color-focus: Focused button background color\n * @prop --ads-search-button-background-color-hover: Hovered button background color\n *\n * @prop --ads-search-button-color: Button text color\n * @prop --ads-search-button-color-focus: Focused button text color\n * @prop --ads-search-button-color-hover: Hovered button text color\n *\n * @prop --ads-search-height: Height\n * @prop --ads-search-text-size: Text size\n *\n * @prop --ads-search-input-background-color: Input background color\n * @prop --ads-search-input-background-color-disabled: Disabled input background color\n *\n * @prop --ads-search-input-color: Input text color\n * @prop --ads-search-input-color-disabled: Disabled input text color\n * @prop --ads-search-input-color-focus: Focused input text color\n\n * @prop --ads-search-input-clear-color: Input clear icon color\n * @prop --ads-search-input-clear-color-focus: Focused input clear icon color\n * @prop --ads-search-input-clear-color-hover: Hovered input clear icon color\n *\n * @prop --ads-search-suggestions-background-color: Suggestions background color\n * @prop --ads-search-suggestions-background-color-active: Active suggestions background color\n *\n * @prop --ads-search-suggestions-border-color: Suggestions border color\n *\n * @prop --ads-search-suggestions-color: Suggestions text color\n * @prop --ads-search-suggestions-link-color: Suggestions link color\n */\n\n@mixin font-styles {\n  font-family: var(--ads-font-family);\n  font-size: var(--ads-search-font-size, $ads-search-font-size);\n}\n\n:host {\n  display: block;\n  height: var(--ads-search-height, $ads-search-height);\n  position: relative;\n  width: 100%;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-search-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-search-dark;\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-search-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-search-rtl;\n}\n\n.c-search {\n  background-color: var(--ads-search-background-color, $ads-search-background-color);\n  color: var(--ads-search-input-color, $ads-search-input-color);\n  display: flex;\n  font-family: var(--ads-font-family);\n  line-height: normal;\n  margin: 0;\n  padding: 0;\n\n  &:not(.is-disabled):focus-within,\n  &:not(.is-disabled):hover {\n    &.has-button .c-search__button button,\n    &.has-button .c-search__button button {\n      border-color: var(--ads-search-border-color-focus, $ads-search-border-color-focus);\n      color: var(--ads-search-button-color-focus, $ads-search-button-color-focus);\n      fill: var(--ads-search-button-color-focus, $ads-search-button-color-focus);\n    }\n\n    &.has-button .c-search__input,\n    &:not(.has-button) .c-search__input {\n      border-color: var(--ads-search-border-color-focus, $ads-search-border-color-focus);\n      color: var(--ads-search-input-color-focus, $ads-search-input-color-focus);\n    }\n\n    .c-search__icon {\n      fill: var(--ads-search-input-color-focus, $ads-search-input-color-focus);\n    }\n\n    .c-search__clear {\n      fill: var(--ads-search-input-clear-color-focus, $ads-search-input-clear-color-focus);\n    }\n  }\n\n  &:not(.is-disabled):not(.has-button):focus-within {\n    .c-search__icon {\n      display: none;\n    }\n\n    .c-search__input {\n      padding: var(--ads-search-input-padding-focus, $ads-search-input-padding-focus-ltr);\n    }\n  }\n\n  &.is-disabled {\n    cursor: not-allowed;\n\n    &.has-button,\n    .c-search__input {\n      background-color: var(--ads-search-input-background-color-disabled, $ads-search-input-background-color-disabled);\n      border-color: var(--ads-search-border-color-disabled, $ads-search-border-color-disabled);\n      color: var(--ads-search-input-color-disabled, $ads-search-input-color-disabled);\n    }\n\n    .c-search__icon {\n      fill: var(--ads-search-input-color-disabled, $ads-search-input-color-disabled);\n    }\n  }\n\n  &.has-button {\n    border-radius: 10px;\n  }\n\n  &__bar {\n    align-items: center;\n    display: flex;\n    flex-grow: 1;\n    position: relative;\n  }\n\n  &.has-button &__bar {\n    background-color: transparent;\n    border: 0;\n    color: var(--ads-search-button-color, $ads-search-button-color);\n  }\n\n  &__icon {\n    align-self: center;\n    color: var(--ads-search-input-color, $ads-search-input-color);\n    display: inline-flex;\n    fill: var(--ads-search-input-color, $ads-search-input-color);\n    height: 20px;\n    margin-left: 1rem;\n    margin-right: 1rem;\n    margin-top: -8px;\n    position: absolute;\n    top: 50%;\n    transition: background-position 0.125s ease-in-out, margin 0.125s ease-in-out, width 0.125s ease-in-out;\n    width: 20px;\n    z-index: 2;\n  }\n\n  &__input {\n    appearance: none;\n    -moz-appearance: none;\n    -webkit-appearance: none;\n    background-color: transparent;\n    border: 1px solid var(--ads-search-border-color, $ads-search-border-color);\n    border-radius: 0;\n    color: var(--ads-search-input-color, $ads-search-input-color);\n    flex-grow: 1;\n    font-family: inherit;\n    font-size: var(--ads-search-font-size, $ads-search-font-size);\n    height: var(--ads-search-height, $ads-search-height);\n    margin: 0;\n    outline: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n    z-index: $layer-1;\n\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n\n    &.is-disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n    }\n  }\n\n  &.has-button &__input {\n    background-color: var(--ads-search-input-background-color, $ads-search-input-background-color);\n    border-radius: var(--ads-search-input-border-radius, $ads-search-input-border-radius-ltr);\n    color: var(--ads-search-input-color, $ads-search-input-color);\n    padding: var(--ads-search-input-has-button-padding, $ads-search-input-has-button-padding-ltr);\n\n    &.is-disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &.has-button.hide-clear-button &__input {\n    padding: var(--ads-search-input-hide-clear-padding-focus, $ads-search-input-hide-clear-padding-focus-ltr);\n  }\n\n  &:not(.has-button) &__input {\n    border: 0;\n    border-bottom: 1px solid var(--ads-search-border-bottom-color, $ads-search-border-bottom-color);\n    padding: var(--ads-search-input-padding, $ads-search-input-padding-ltr);\n\n    &:focus {\n      padding: var(--ads-search-input-padding-focus, $ads-search-input-padding-focus-ltr);\n\n      & ~ .c-search__icon {\n        left: -45px;\n      }\n    }\n  }\n\n  &.hide-clear-button:not(.has-button) &__input {\n    padding: var(--ads-search-input-hide-clear-padding, $ads-search-input-hide-clear-padding-ltr);\n\n    &:focus {\n      padding: var(--ads-search-input-hide-clear-padding-focus, $ads-search-input-hide-clear-padding-focus-ltr);\n    }\n  }\n\n  &__clear {\n    align-items: center;\n    background-color: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    fill: var(--ads-search-input-clear-color, $ads-search-input-clear-color);\n    height: 30px;\n    padding: 0 5px;\n    position: absolute;\n    right: var(--ads-search-input-clear-position-right, $ads-search-input-clear-position-right-ltr);\n    left: var(--ads-search-input-clear-position-left, $ads-search-input-clear-position-left-ltr);\n    z-index: $layer-1;\n\n    &:focus,\n    &:hover {\n      fill: var(--ads-search-input-clear-color-hover, $ads-search-input-clear-color-hover) !important;\n    }\n\n    svg {\n      fill: inherit;\n      height: 20px;\n      width: 20px;\n    }\n  }\n\n  &__button {\n    flex-shrink: 0;\n    overflow: hidden;\n\n    button {\n      align-items: center;\n      background-color: var(--ads-search-button-background-color, $ads-search-button-background-color);\n      border-color: var(--ads-search-border-color, $ads-search-border-color);\n      border-radius: var(--ads-search-button-border-radius, $ads-search-button-border-radius-ltr);\n      border-style: solid;\n      border-width: var(--ads-search-button-border, $ads-search-button-border-ltr);\n      color: var(--ads-search-button-color, $ads-search-button-color);\n      cursor: pointer;\n      display: flex;\n      fill: var(--ads-search-button-color, $ads-search-button-color);\n      font-size: var(--ads-search-font-size, $ads-search-font-size);\n      font-weight: 400;\n      height: 100%;\n      line-height: 1;\n      margin: 0;\n      outline: none;\n      padding: 0 1rem;\n\n      &:not(.is-disabled):hover {\n        background-color: var(--ads-search-button-background-color-hover, $ads-search-button-background-color-hover);\n        border-color: var(--ads-search-border-color-hover, $ads-search-border-color-hover);\n        color: var(--ads-search-button-color-hover, $ads-search-button-color-hover) !important;\n        fill: var(--ads-search-button-color-hover, $ads-search-button-color-hover) !important;\n      }\n\n      &.is-disabled {\n        border-left: 1px solid var(--ads-search-border-color, $ads-search-border-color);\n        color: var(--ads-search-input-color-disabled-dark, $ads-search-input-color-disabled-dark);\n        cursor: not-allowed;\n      }\n\n      svg {\n        fill: inherit;\n        height: 20px;\n        width: 20px;\n      }\n    }\n  }\n\n  &__suggestions-alert {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  &__suggestions {\n    @include font-styles;\n    background-color: var(--ads-search-suggestions-background-color, $ads-search-suggestions-background-color);\n    border: 1px solid var(--ads-search-border-color-focus, $ads-search-border-color-focus);\n    border-top-width: 0;\n    left: 0;\n    overflow: hidden;\n    position: absolute;\n    right: 0;\n    top: var(--ads-search-height, $ads-search-height);\n    z-index: $layer-3;\n\n    &.is-hidden {\n      display: none !important;\n    }\n\n    &__suggestion {\n      border-bottom: 1px solid var(--ads-search-suggestions-border-color, $ads-search-suggestions-border-color);\n      cursor: pointer;\n      display: block;\n      min-height: 35px;\n      padding: 0.5rem 1rem;\n      text-decoration: none;\n      width: 100%;\n\n      .link {\n        @include ads-anchor;\n        color: var(--ads-search-suggestions-link-color, $ads-search-suggestions-link-color);\n        font-family: inherit;\n      }\n\n      &:hover,\n      &.is-active {\n        background-color: var(--ads-search-suggestions-background-color-active, $ads-search-suggestions-background-color-active);\n      }\n\n      .description {\n        color: var(--ads-search-suggestions-color, $ads-search-suggestions-color);\n        font-size: var(--ads-search-font-size, $ads-search-font-size);\n        margin: 3px;\n      }\n    }\n  }\n\n  &.has-button .c-search__suggestions {\n    border-radius: 5px 0 5px 5px;\n    border-top-width: 1px;\n    margin-top: 2px;\n  }\n}\n","import { EventTypes, environment, version } from './AppInsights/constants';\nimport { WindowGlobal } from '../types/globalTypes';\n\n/**\n * Send custom event to AppInsights\n * @param  {string} component   The reference to the component\n * @returns {void}\n * @hidden\n */\nconst sendCustomEvent = (component: HTMLElement): void => {\n  try {\n    (window as WindowGlobal)['AppInsights'].trackEvent(\n      {\n        name: EventTypes.COMPONENT_REGISTER,\n      },\n      {\n        component: component.tagName.toLowerCase(),\n        componentId: component.id,\n        environment,\n        version,\n        host: window.location.host,\n      }\n    );\n  } catch (err) {\n    // eslint-disable-next-line no-console\n    console.log('[APP INSIGHTS] Could not send event', err);\n  }\n};\n\n/**\n * Add the component to the pipeline and send component events to AppInsights\n * @param   {HTMLElement} component  The component element\n * @returns {void}\n * @hidden\n */\nexport function add(component: HTMLElement): void {\n  (window as WindowGlobal)['ArmDesignSystem'].pipeline.set(component.id, component.tagName.toLowerCase());\n\n  // Disable sending events to AppInsights during unit tests\n  if (!(window as WindowGlobal)['ArmDesignSystem'].config.getBoolean('_isTesting')) {\n    sendCustomEvent(component);\n  }\n}\n\n/**\n * Remove the component from the pipeline\n * @param   {HTMLElement} component  The component element\n * @returns {void}\n * @hidden\n */\nexport function remove(component: HTMLElement): void {\n  (window as WindowGlobal)['ArmDesignSystem'].pipeline.delete(component.id);\n}\n","import * as Pipeline from '../global/pipeline';\n\n/**\n * Add a component to the ADS pipeline\n * @param  {HTMLElement} component   The component element\n * @return {void}\n */\nexport const addComponent = (component: HTMLElement): void => {\n  Pipeline.add(component);\n};\n\n/**\n * Remove a component from the ADS pipeline\n * @param  {HTMLElement} component   The component element\n * @return {void}\n */\nexport const removeComponent = (component: HTMLElement): void => {\n  Pipeline.remove(component);\n};\n","import { Breakpoint, ButtonLevel, ButtonLevels, ButtonSize, ButtonSizes, WindowGlobal } from '../types/globalTypes';\nimport { EventTypes, environment, version } from '../global/AppInsights/constants';\n\nexport type ShadowRootLegacy = ShadowRoot & { tagName: string };\n\n/**\n * Generates a unique component ID\n * @param   {string}  namespace   The unique id's namespace (e.g. ads)\n * @returns {string}              A generated random id (e.g. ads-1234)\n */\nexport const generateId = (namespace = 'ads'): string => {\n  return `${namespace}-${generateRandomString()}`;\n};\n\n/**\n * Generates a randon string\n * @returns {string}              A generated random string\n */\nexport const generateRandomString = (): string => {\n  return Math.random().toString(36).substr(2, 16);\n};\n\n/**\n * Generates a size class based on a button size\n * @param {ButtonSize}  size    The size of the button (e.g. ButtonSizes.SMALL)\n * @returns {string}            The button size class (e.g. 'is-small')\n */\nexport const getClassFromSize = (size: ButtonSize): string => {\n  switch (size) {\n    case ButtonSizes.MEDIUM:\n      return 'is-medium';\n    case ButtonSizes.SMALL:\n      return 'is-small';\n    default:\n      return '';\n  }\n};\n\n/**\n * Generates a level class based on button a level\n * @param {ButtonLevel} level   The level of the button (e.g. ButtonLevels.PRIMARY)\n * @returns {string}            The button level class (e.g. 'is-primary')\n */\nexport const getClassFromLevel = (level: ButtonLevel): string => {\n  switch (level) {\n    case ButtonLevels.PRIMARY:\n      return 'is-primary';\n    case ButtonLevels.SECONDARY:\n      return 'is-secondary';\n    case ButtonLevels.TERTIARY:\n      return 'is-tertiary';\n    default:\n      return '';\n  }\n};\n\n/**\n * Given a breakpoint it will return the appropriate class for the media-queries (breakpoints-up).\n * @param {Breakpoint} bp The breakpoint.\n * @returns {string} The class.\n */\nexport const getMediaQueryBreakpointClassUp = (bp: Breakpoint): string => `${bp.toString()}-up`;\n\n/**\n * Given a breakpoint it will return the appropriate class for the media-queries (breakpoints-down).\n * @param {Breakpoint} bp The breakpoint.\n * @returns {string} The class.\n */\nexport const getMediaQueryBreakpointClassDown = (bp: Breakpoint): string => `${bp.toString()}-down`;\n\n/**\n * Display an ADS warning with the given message\n * @param {string}  message       The error message to show\n * @param {string}  component     The reference to the component\n * @returns {void}\n */\nexport const showErrorMessage = (message: string, component: HTMLElement): void => {\n  try {\n    (window as WindowGlobal)['AppInsights'].trackEvent(\n      {\n        name: EventTypes.ADS_CONSOLE_ERROR as string,\n      },\n      {\n        component: component.tagName.toLowerCase(),\n        componentId: component.id,\n        message: message,\n        environment,\n        version,\n        host: window.location.host,\n      }\n    );\n  } catch (err) {\n    // eslint-disable-next-line no-console\n    console.log('[APP INSIGHTS] Could not send console error', err);\n  }\n  // eslint-disable-next-line no-console\n  console.warn(`ADS-Warning: ${message}`);\n};\n","import { SVGIconData } from '../components/core/interfaces/Icon';\nimport { h } from '@stencil/core';\n\n/**\n * Generates an SVG image\n * @param   {IconData}       icon        The SVG image properties\n * @param   {string}            className   The SVG image class name\n * @returns {HTMLElement}                   The generated SVG image\n */\nexport const generateSVGImage = (icon: SVGIconData, className?: string): HTMLElement => {\n  return (\n    <svg class={className ? className : null} xmlns=\"http://www.w3.org/2000/svg\" viewBox={`0 0 ${icon.width} ${icon.height}`}>\n      <path d={icon.data} />\n    </svg>\n  ) as HTMLElement;\n};\n","import { Breakpoint } from '../components/core/types/globalTypes';\nimport { isNullOrUndefined } from './collection';\nimport config from './../styles/settings/configs/breakpoints-config.json';\n\n/**\n * Match media types\n */\nexport enum MediaTypes {\n  minWidth = 'min-width',\n  maxWidth = 'max-width',\n}\n\n/**\n * Returns the list all of breakpoint keys\n * @returns {Breakpoint[]} The list of breakpoints\n */\nexport const getBreakpoints = (): Breakpoint[] => Object.keys(config.breakpoints) as Breakpoint[];\n\n/**\n * Returns the breakpoint in pixels\n * @param {Breakpoint} breakpoint The breakpoint\n * @returns {number} The breakpoint value in pixels\n */\nexport const getBreakpointInPixels = (breakpoint: Breakpoint): number => parseInt(config.breakpoints[breakpoint], 10);\n\n/**\n * Returns the breakpoint key for given pixels\n * @param {number} pixels The pixels of the breakpoint\n * @returns {Breakpoint} The breakpoint key\n */\nexport const getBreakpointFromPixels = (pixels: number): Breakpoint =>\n  Object.keys(config.breakpoints)[\n    Object.values(config.breakpoints)\n      .map((bp) => parseInt(bp, 10))\n      .findIndex((bpPixels) => bpPixels === pixels)\n  ] as Breakpoint;\n\nconst mediaQueryLists: MediaQueryList[] = [];\n\n/**\n * Adds matchMedia to window with the given properties.\n * @param {MediaTypes} mediaType The type of media\n * @param {Sizes} breakpoint The media size\n * @param {Function} listenerFunction Callback function for the listener\n */\nexport const addMatchMedia = (\n  mediaType: MediaTypes,\n  breakpoint: Breakpoint,\n  listenerFunction: (this: MediaQueryList, ev: MediaQueryListEvent) => unknown\n): void => {\n  const foundMatchMedia = mediaQueryLists.find((m) => m.media === `(${mediaType}: ${config.breakpoints[breakpoint]})`);\n  if (!isNullOrUndefined(foundMatchMedia)) {\n    foundMatchMedia.addEventListener('change', listenerFunction);\n  } else {\n    const newMatchMedia = window.matchMedia(`(${mediaType}: ${config.breakpoints[breakpoint]})`);\n    mediaQueryLists.push(newMatchMedia);\n    newMatchMedia.addEventListener('change', listenerFunction);\n  }\n};\n\n/**\n * Removes matchMedia from window with the given properties.\n * @param {MediaTypes} mediaType The type of media\n * @param {Sizes} breakpoint The media size\n * @param {Function} listenerFunction Callback function to be removed from the listener\n */\nexport const removeMatchMedia = (\n  mediaType: MediaTypes,\n  breakpoint: Breakpoint,\n  listenerFunction: (this: MediaQueryList, ev: MediaQueryListEvent) => unknown\n): void => {\n  mediaQueryLists.find((m) => m.media === `(${mediaType}: ${config.breakpoints[breakpoint]})`)?.removeEventListener('change', listenerFunction);\n};\n\n/**\n * Matches the current window with the given media type and breakpoint\n * @param {MediaTypes} mediaType The media type\n * @param {Breakpoint} breakpoint The breakpoint\n * @returns {boolean} True if it matches, false otherwise\n */\nexport const mediaMatchingBreakpoint = (mediaType: MediaTypes, breakpoint: Breakpoint): boolean => {\n  const foundMatchMedia = mediaQueryLists.find((m) => m.media === `(${mediaType}: ${config.breakpoints[breakpoint]})`);\n  if (!isNullOrUndefined(foundMatchMedia)) {\n    return foundMatchMedia.matches;\n  }\n  const newMatchMedia = window.matchMedia(`(${mediaType}: ${config.breakpoints[breakpoint]})`);\n  mediaQueryLists.push(newMatchMedia);\n  return newMatchMedia.matches;\n};\n","import { isNullOrUndefined } from './collection';\n\ninterface ResizeCallback {\n  callback: () => void;\n  duration: number;\n  timeout?: NodeJS.Timeout;\n}\n\nconst defaultTimeout = 50;\n\nconst callbacks: ResizeCallback[] = [];\n\nwindow.onresize = () => {\n  callbacks.map((cb: ResizeCallback) => {\n    if (isNullOrUndefined(cb.timeout)) {\n      cb.callback();\n      cb.timeout = setTimeout(() => {\n        cb.timeout = null;\n      }, cb.duration);\n    }\n  });\n};\n\n/**\n * Subscribe to the resize listener\n * @param {function} callback The callback function to run on resize\n * @param {number} timeoutDuration The throttle timeout duration\n */\nexport const subscribeToWindowResize = (callback: () => void, timeoutDuration: number = defaultTimeout): void => {\n  callbacks.push({ callback, duration: timeoutDuration });\n};\n\n/**\n * Unsubscribe to the resize listener\n * @param {function} callback The callback function to unsubscribe\n */\nexport const unSubscribeToWindowResize = (callback: () => void): void => {\n  const index = callbacks.findIndex((cb: ResizeCallback) => cb.callback === callback);\n  if (index >= 0) {\n    if (!isNullOrUndefined(callbacks[index].timeout)) {\n      clearTimeout(callbacks[index].timeout);\n    }\n    callbacks.splice(index, 1);\n  }\n};\n","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'fal';\nvar iconName = 'circle-xmark';\nvar width = 512;\nvar height = 512;\nvar aliases = [61532,\"times-circle\",\"xmark-circle\"];\nvar unicode = 'f057';\nvar svgPathData = 'M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM180.7 180.7c-6.2 6.2-6.2 16.4 0 22.6L233.4 256l-52.7 52.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L256 278.6l52.7 52.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0z';\n\nexports.definition = {\n  prefix: prefix,\n  iconName: iconName,\n  icon: [\n    width,\n    height,\n    aliases,\n    unicode,\n    svgPathData\n  ]};\n\nexports.faCircleXmark = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar source = require('./faCircleXmark');\nexports.definition = {\n  prefix: source.prefix,\n  iconName: source.iconName,\n  icon: [\n    source.width,\n    source.height,\n    source.aliases,\n    source.unicode,\n    source.svgPathData\n  ]};\n\nexports.faTimesCircle = exports.definition;\nexports.prefix = source.prefix;\nexports.iconName = source.iconName;\nexports.width = source.width;\nexports.height = source.height;\nexports.ligatures = source.aliases;\nexports.unicode = source.unicode;\nexports.svgPathData = source.svgPathData;\nexports.aliases = source.aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'far';\nvar iconName = 'magnifying-glass';\nvar width = 512;\nvar height = 512;\nvar aliases = [128269,\"search\"];\nvar unicode = 'f002';\nvar svgPathData = 'M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z';\n\nexports.definition = {\n  prefix: prefix,\n  iconName: iconName,\n  icon: [\n    width,\n    height,\n    aliases,\n    unicode,\n    svgPathData\n  ]};\n\nexports.faMagnifyingGlass = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar source = require('./faMagnifyingGlass');\nexports.definition = {\n  prefix: source.prefix,\n  iconName: source.iconName,\n  icon: [\n    source.width,\n    source.height,\n    source.aliases,\n    source.unicode,\n    source.svgPathData\n  ]};\n\nexports.faSearch = exports.definition;\nexports.prefix = source.prefix;\nexports.iconName = source.iconName;\nexports.width = source.width;\nexports.height = source.height;\nexports.ligatures = source.aliases;\nexports.unicode = source.unicode;\nexports.svgPathData = source.svgPathData;\nexports.aliases = source.aliases;"],"sourceRoot":""}