{"version":3,"sources":["src/components/ads-search/ads-search.scss?tag=ads-search&encapsulation=shadow","src/components/ads-search/ads-search.tsx"],"names":["adsSearchCss","AdsSearch","[object Object]","hostRef","this","_suggestionsLimit","activeSuggestionIndex","autoFocus","buttonLabel","Dictionary","get","disabled","inputLabel","placeholder","submitEmptyResults","hasSearchButton","hideClearButton","onInputClearHandler","evt","preventDefault","_searchValue","getSearchBox","focus","inputChange","emit","value","isNullOrUndefined","inputChangeHandler","inputClear","inputClearHandler","onInputChangeHandler","resetHighlightedSuggestion","target","onFocusHandler","suggestionBox","getSuggestionsBox","classList","contains","remove","onBlurHandler","relatedTarget","onSuggestionClickHandler","suggestionsData","children","removeAttribute","add","onInputClickHandler","el","shadowRoot","onKeyUpHandler","_a","length","key","toLowerCase","setActiveSuggestion","onSubmitHandler","isNullOrUndefinedOrEmpty","stopPropagation","searchSubmit","searchSubmitHandler","selectedItem","suggestionClickHandler","item","suggestionClick","link","window","location","assign","suggestionsBox","suggestionIndex","isNaN","oldActiveSuggestion","setAttribute","identifier","generateId","component","registerComponent","newValue","oldValue","Promise","resolve","searchBar","querySelector","Pipeline.addComponent","searchValue","Pipeline.removeComponent","$searchIcon","generateSVGImage","data","iconSearchPath","height","iconSearchHeight","width","iconSearchWidth","searchInputClasses","push","searchInputAttributes","autocomplete","autofocus","onClick","onFocus","onBlur","onKeyUp","onInput","maxlength","name","spellCheck","type","aria-label","$searchInput","h","Object","class","join","$searchButton","attributes","tabIndex","$searchClear","iconTimesPath","iconTimesHeight","iconTimesWidth","$searchSuggestions","_b","role","slice","map","index","onMouseOver","tabindex","desc","formClasses","hostAttributes","aria-disabled","onSubmit"],"mappings":"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","sourcesContent":["@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 { 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 ``\n * @example \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;\n\n /**\n * Emits 'inputChange' custom event.
\n * Usage: `document.querySelector('ads-search').addEventListener('inputChange', function(evt) { });`\n * @event\n */\n @Event({ bubbles: false }) inputChange: EventEmitter;\n\n /**\n * Emits the 'searchSubmit' custom event.
\n * Usage: `document.querySelector('ads-search').addEventListener('searchSubmit', function(evt) { });`\n */\n @Event({ bubbles: false }) searchSubmit: EventEmitter;\n\n /**\n * Emits 'suggestionClick' custom event.
\n * Usage: `document.querySelector('ads-search').addEventListener('suggestionClick', function(evt) { });`\n * @event\n */\n @Event({ bubbles: false }) suggestionClick: EventEmitter;\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} The search input\n */\n @Method()\n value(): Promise {\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 = () 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
\n \n
\n ) as HTMLElement;\n }\n\n // Clear\n const $searchClear = !isNullOrUndefinedOrEmpty(this._searchValue)\n ? ((\n \n ) as HTMLElement)\n : null;\n\n // Suggestions\n const $searchSuggestions =\n !isNullOrUndefinedOrEmpty(this._searchValue) && this.suggestionsData?.length\n ? [\n \n {this.suggestionsData.length} results found, use arrow keys to navigate\n ,\n
\n {this.suggestionsData.slice(0, this._suggestionsLimit).map((item, index) => {\n return (\n this.onSuggestionClickHandler(evt, item)}\n onMouseOver={() => this.setActiveSuggestion(index + 1)}\n tabindex=\"-1\"\n >\n {item.name}\n {!isNullOrUndefinedOrEmpty(item.desc) ?

{item.desc}

: null}\n \n ) as VNode;\n })}\n
,\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
\n
\n {$searchIcon}\n {$searchInput}\n {this.hideClearButton ? null : $searchClear}\n {$searchSuggestions}\n
\n {$searchButton}\n
\n ) as VNode;\n }\n}\n"]}