@shoper/phoenix_design_system 1.18.1 → 1.18.2

package/build/esm/packages/phoenix/src/components/form/search/search.js

@@ -1,576 +1,583 @@
-import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { __decorate, __metadata } from "tslib";
 import { html } from 'lit';
 import { property, state } from 'lit/decorators';
+import { when } from 'lit/directives/when.js';
+import { BehaviorSubject } from '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
+import { Observer } from '@phoenixRoot/core/classes/observer/observer';
+import { ContextConsumerController } from '@phoenixRoot/core/context/context_consumer_controller';
+import { ContextProviderController } from '@phoenixRoot/core/context/context_provider_controller';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from '@phoenixRoot/components/form/search/search_constants';
+import { ICONS_SIZES } from '@phoenixRoot/components/icon/icon_constants';
+import { BREAKPOINTS } from '@phoenixRoot/global_constants';
+import './subcomponents/input/search_input';
+import { createRef, ref } from 'lit/directives/ref.js';
+import './subcomponents/results/search_results';
 import { UiDomUtils } from '@dreamcommerce/utilities';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { ICONS_SIZES } from '../../icon/icon_constants.js';
-import { Observer } from '../../../core/classes/observer/observer.js';
-import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
-import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior_subject.js';
-import { createRef, ref } from 'lit-html/directives/ref.js';
-import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
-import { BREAKPOINTS } from '../../../global_constants.js';
-import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
-import { MODAL_EVENTS } from '../../modal/modal_constants.js';
-import { when as n } from '../../../../../../external/lit-html/directives/when.js';
-import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
-
-let HSearch = class HSearch extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.view = DEFAULT_VIEW;
-        this._id = v4();
-        this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
-        this._searchContentContainerId = v4();
-        this._searchResultsRef = createRef();
-        this._searchHistoryRef = createRef();
-        this._searchMessageRef = createRef();
-        this._openSearchButtonLabelRef = createRef();
-        this._shouldShowHistory = false;
-        this._shouldShowResults = false;
-        this._shouldShowMessage = false;
-        this._searchHistory = [];
-        this._searchPhrase = '';
-        this._historyLimitedContent = [];
-        this._historyContext = new BehaviorSubject({
-            showLoadMore: false
-        });
-        this._activeItemId = `${this._id}-1`;
-        this._translations = {};
-        this._containerRole = 'grid';
-        this._bindKeys = (ev) => {
-            if (this.popup) {
-                this._bindPopupKeys(ev);
-            }
-            else {
-                this._bindDropdownKeys(ev);
-            }
-        };
-        this._bindDropdownKeys = (ev) => {
-            switch (ev.key) {
-                case 'ArrowDown':
-                    ev.preventDefault();
-                    this._handleForwardListFocus();
-                    break;
-                case 'ArrowUp':
-                    this._handleBackwardListFocus(ev);
-                    break;
-                case 'ArrowLeft':
-                    if (this._containerRole === 'grid') {
-                        ev.preventDefault();
-                        this._handleBackwardGridFocus();
-                    }
-                    if (this._containerRole === 'listbox')
-                        this._handleMoveToInputField();
-                    break;
-                case 'ArrowRight':
-                    if (this._containerRole === 'grid') {
-                        ev.preventDefault();
-                        this._handleForwardGridFocus();
-                    }
-                    if (this._containerRole === 'listbox')
-                        this._handleMoveToInputField();
-                    break;
-                case 'Enter':
-                    ev.preventDefault();
-                    if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
-                        return;
-                    this._handleChooseSearchItem();
-                    break;
-                case 'Escape':
-                    ev.preventDefault();
-                    if (this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults) {
-                        this._inputField.focus();
-                        this._shouldShowMessage = false;
-                        this._hideHistorySuggestionsAndResults();
-                    }
-                    else {
-                        this._inputField.value = '';
-                    }
-                    break;
-                case 'End':
-                    ev.preventDefault();
-                    this._handleFocusOnInputWithCaretEnd();
-                    break;
-                case 'Home':
-                    ev.preventDefault();
-                    this._handleFocusOnInputWithCaretStart();
-                    break;
-                case 'Backspace':
-                    this._handleMoveToInputField();
-                    break;
-                case 'Tab':
-                    const isFocusedOnSearchInput = document.activeElement === this._inputField;
-                    if (!isFocusedOnSearchInput)
-                        ev.preventDefault();
-                    break;
-                default:
-                    const isAWriteableCharacter = ev.key.length === 1;
-                    if (isAWriteableCharacter)
-                        this._handleWriteableCharacter(ev);
-                    break;
-            }
-        };
-        this._bindPopupKeys = (ev) => {
-            switch (ev.key) {
-                case 'Escape':
-                    ev.preventDefault();
-                    this.emitCustomEvent(MODAL_EVENTS.close);
-                    const $search = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
-                    const $searchOpener = $search && $search.querySelector('[aria-haspopup="dialog"]');
-                    $searchOpener === null || $searchOpener === void 0 ? void 0 : $searchOpener.focus();
-                    this._shouldShowMessage = false;
-                    this._hideHistorySuggestionsAndResults();
-                    break;
-            }
-        };
-        this._handleSearchTabNavigation = (ev) => {
-            if (ev.key !== 'Tab')
-                return;
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            if (ev.shiftKey && !isFocusedOnSearchInput) {
-                this._focusOnPreviousElementBeforeSearchInput(ev);
-                return;
-            }
-            if (!isFocusedOnSearchInput) {
-                const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
-                searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
-                this._resetSearchView();
-                this._removeSearchKeyboardNavigation();
-                this._focusOnNextElementAfterSearchInput(ev);
-            }
-        };
-        this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
-            ev.preventDefault();
-            const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
-            searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
-            this._resetSearchView();
-            this._removeSearchKeyboardNavigation();
-            UiDomUtils.getPreviousFocusableElement(this._inputField).focus();
-        };
-        this._focusOnNextElementAfterSearchInput = async (ev) => {
-            ev.preventDefault();
-            UiDomUtils.getNextFocusableElement(this._inputField).focus();
-        };
-        this._preventScrollingOnSearchContentBrowsing = (ev) => {
-            var _a;
-            const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
-            const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
-            const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
-            if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
-                ev.preventDefault();
-            }
-        };
-        this._handleForwardListFocus = () => {
-            var _a, _b;
-            const $searchItemsContainer = this._findSearchItemsContainer();
-            if (!$searchItemsContainer)
-                return;
-            const isActiveElementASearchItem = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id'));
-            const isActiveElementAGridSearchItem = isActiveElementASearchItem && !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-search-grid-item'));
-            const $listSearchItems = this._findListSearchItems($searchItemsContainer, isActiveElementAGridSearchItem);
-            this._handleForwardFocus($listSearchItems);
-        };
-        this._handleForwardGridFocus = () => {
-            const $searchItemsContainer = this._findSearchItemsContainer();
-            if (!$searchItemsContainer)
-                return;
-            const $gridSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
-                return !!$el.getAttribute('data-search-item-id');
-            });
-            this._handleForwardFocus($gridSearchItems);
-        };
-        this._handleForwardFocus = ($searchItems) => {
-            var _a;
-            const $activeElement = document.activeElement;
-            const indexOfCurrentElement = $searchItems.indexOf($activeElement);
-            const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
-            const $nextSearchItemElement = $searchItems[indexOfNextElement];
-            $nextSearchItemElement.focus();
-            this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
-        };
-        this._handleMoveToInputField = () => {
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            if (isFocusedOnSearchInput)
-                return;
-            this._inputField.focus();
-        };
-        this._handleBackwardListFocus = (ev) => {
-            var _a, _b;
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            const hasPopup = this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults;
-            if (isFocusedOnSearchInput || !hasPopup)
-                return;
-            ev.preventDefault();
-            const $searchItemsContainer = this._findSearchItemsContainer();
-            if (!$searchItemsContainer)
-                return;
-            const isActiveElementASearchItem = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id'));
-            const isActiveElementAGridSearchItem = isActiveElementASearchItem && !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-search-grid-item'));
-            const $listSearchItems = this._findListSearchItems($searchItemsContainer, isActiveElementAGridSearchItem);
-            this._handleBackwardFocus($listSearchItems);
-        };
-        this._findListSearchItems = ($searchItemsContainer, shouldFindGridList) => {
-            return UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
-                const searchItemId = $el.getAttribute('data-search-item-id');
-                const isListSearchItem = !!searchItemId && !$el.getAttribute('data-search-grid-item');
-                const isGridSearchItem = !!searchItemId && $el.getAttribute('data-search-grid-item');
-                return shouldFindGridList ? isGridSearchItem : isListSearchItem;
-            });
-        };
-        this._handleBackwardGridFocus = () => {
-            const $searchItemsContainer = this._findSearchItemsContainer();
-            if (!$searchItemsContainer)
-                return;
-            const $gridSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
-                return !!$el.getAttribute('data-search-item-id');
-            });
-            this._handleBackwardFocus($gridSearchItems);
-        };
-        this._findSearchItemsContainer = () => {
-            const containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            return containers.find(container => container && !UiDomUtils.isElementEmpty(container));
-        };
-        this._handleBackwardFocus = ($searchItems) => {
-            var _a;
-            const $activeElement = document.activeElement;
-            const indexOfCurrentElement = $searchItems.indexOf($activeElement);
-            const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
-            const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
-            $previousSearchItemElement.focus();
-            this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
-        };
-        this._setActiveItemId = (newActiveItemId) => {
-            this._activeItemId = newActiveItemId;
-            if (document.activeElement !== this._inputField) {
-                this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
-            }
-        };
-        this._removeSearchKeyboardNavigation = () => {
-            document.body.removeEventListener('keydown', this._bindKeys);
-            document.removeEventListener('keyup', this._handleSearchTabNavigation);
-        };
-        this._handleFocusOnInputWithCaretEnd = () => {
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            if (isFocusedOnSearchInput)
-                return;
-            this._inputField.focus();
-            const endPosition = this._inputField.value.length;
-            this._inputField.setSelectionRange(endPosition, endPosition);
-        };
-        this._handleFocusOnInputWithCaretStart = () => {
-            this._inputField.focus();
-            this._inputField.setSelectionRange(0, 0);
-        };
-        this._handleWriteableCharacter = (ev) => {
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            if (isFocusedOnSearchInput)
-                return;
-            this._inputField.focus();
-            const isAPrintableCharacter = ev.key.match(/\P{C}/u);
-            if (ev.key.length !== 1 || !isAPrintableCharacter) {
-                ev.preventDefault();
-            }
-        };
-        this._hideSuggesterOnClickOutside = (ev) => {
-            const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
-            if (!outsideClick)
-                return;
-            this._resetSearchView();
-        };
-        this._switchTypeOfSearchView = () => {
-            if (!this._isSuggesterLayerVisible() && !this.popup)
-                return;
-            if (window.innerWidth > BREAKPOINTS.sm) {
-                const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
-                this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
-                if (hasBeenOpened && this.popup) {
-                    const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
-                    const $searchModal = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('h-modal');
-                    $searchModal === null || $searchModal === void 0 ? void 0 : $searchModal.open();
-                }
-            }
-            else if (!this.popup) {
-                this._openMobileView();
-            }
-        };
-        this._openMobileView = () => {
-            this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
-        };
-        this._isSuggesterLayerVisible = () => {
-            var _a;
-            return ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.isSearchSuggestLayerEnabled) && (this._shouldShowHistory || this._shouldShowResults || this._shouldShowMessage);
-        };
-        this._preventSubmitOnSearchClear = (ev) => {
-            const $searchClear = this.querySelector(SEARCH_COMPONENT_NAMES.clearButton);
-            if (ev.key === 'Enter' && ev.target === $searchClear) {
-                ev.preventDefault();
-            }
-        };
-        this._resetSearchOnFocusOutside = (ev) => {
-            const $target = ev.target;
-            const isContainedWithinSearch = this === $target || this.contains($target);
-            if (!isContainedWithinSearch) {
-                this._resetSearchView();
-                this._removeSearchKeyboardNavigation();
-                document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
-            }
-        };
-        this._setupAriaAttributes = () => {
-            var _a;
-            if (this._translations.openSearchButtonAriaLabel) {
-                (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
-            }
-        };
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        this._setupContext();
-        try {
-            this._searchContextConsumer = new ContextConsumerController(this);
-            this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
-            const ariaTranslations = {
-                historyGuideAriaLabel: this.settings.historyGuideAriaLabel,
-                suggesterGuideAriaLabel: this.settings.suggesterGuideAriaLabel,
-                historyItemAriaLabel: this.settings.historyItemAriaLabel,
-                suggesterItemAriaLabel: this.settings.suggesterItemAriaLabel,
-                suggesterProductItemAriaLabel: this.settings.suggesterProductItemAriaLabel,
-                suggesterProducerItemAriaLabel: this.settings.suggesterProducerItemAriaLabel,
-                openSearchButtonAriaLabel: this.settings.openSearchButtonAriaLabel
-            };
-            this._searchContextObserver = new Observer((searchData) => {
-                this._searchResults = searchData.results;
-                this._searchHistory = searchData.history;
-                this._translations = {
-                    ...searchData.translations,
-                    ...ariaTranslations
-                };
-                this._searchPhrase = searchData.searchPhrase;
-                this._historyContext.notify({ showLoadMore: this._searchHistory.length > SEARCH_CONFIGURATION.historyContentLimit });
-                this._historyLimitedContent = this._searchHistory.slice(0, SEARCH_CONFIGURATION.historyContentLimit);
-            });
-            this._searchContext$.subscribe(this._searchContextObserver);
-        }
-        catch (_a) {
-            console.error('Search context is not provided');
-        }
-        this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
-        this._setupInitialSearchPhrase();
-        this._setupListeners();
-        this._setupAriaAttributes();
-    }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        document.removeEventListener('click', this._hideSuggesterOnClickOutside);
-        document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
-        document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
-        window.removeEventListener('resize', this._switchTypeOfSearchView);
-        (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
-    }
-    _setupContext() {
-        this._historyContextProvider = new ContextProviderController(this);
-        this._historyContextProvider.provide(SEARCH_CONTEXT_NAMES.historyContext, this._historyContext);
-    }
-    _setupInitialSearchPhrase() {
-        var _a;
-        const searchInput = this.querySelector('input[type="search"]');
-        const searchForm = this.closest('form');
-        if (searchInput)
-            this._inputField = searchInput;
-        if (searchForm)
-            this._searchForm = searchForm;
-        if (!((_a = this._inputField) === null || _a === void 0 ? void 0 : _a.value))
-            return;
-        this._searchPhrase = this._inputField.value;
-        this._updateSearchPhrase(this._inputField.value);
-    }
-    _updateSearchPhrase(searchPhrase) {
-        this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
-    }
-    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
-        this.emitCustomEvent(eventName, {
-            detail: {
-                searchPhrase,
-                moduleInstanceId: this.moduleInstanceId
-            }
-        });
-    }
-    _setupListeners() {
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.focusin, (ev) => {
-            var _a, _b, _c;
-            const $target = (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.relatedTarget;
-            if ($target === null || $target === void 0 ? void 0 : $target.closest(`[id="${this._searchContentContainerId}"]`))
-                return;
-            const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
-            searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(SEARCH_CLASS_NAMES.outline);
-            const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
-            this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
-            if (!this.popup) {
-                document.addEventListener('keyup', this._handleSearchTabNavigation);
-            }
-            document.body.addEventListener('keydown', this._bindKeys);
-            document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
-            document.addEventListener('focusin', this._resetSearchOnFocusOutside);
-            document.body.addEventListener('searchOpenMobileView', this._openMobileView);
-        });
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
-            const shouldShowMessage = ev.detail.searchPhrase !== '';
-            this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
-        });
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.search, (ev) => this._updateSearchView(ev.detail.searchPhrase, false));
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.clear, (ev) => {
-            ev.stopImmediatePropagation();
-            this._inputField.value = '';
-            this._updateSearchView('', false);
-        });
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
-            if (this._activeItemId !== `${this._id}-1`)
-                return;
-            if (this._inputField.value === '') {
-                this._updateSearchView(this._inputField.value, true);
-            }
-            else {
-                this._resetSearchView();
-            }
-            this._submitSearchPhrase(this._inputField.value);
-        });
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
-            this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
-            this._resetSearchView();
-        });
-        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
-            const contentLength = this._searchHistory.length;
-            const limitedContentLength = this._historyLimitedContent.length;
-            if (limitedContentLength < contentLength) {
-                this._historyLimitedContent = this._searchHistory.slice(0, limitedContentLength + SEARCH_CONFIGURATION.historyContentLimit);
-            }
-            this._historyContext.notify({ showLoadMore: this._historyLimitedContent.length < contentLength });
-        });
-        document.addEventListener('click', this._hideSuggesterOnClickOutside);
-        window.addEventListener('resize', this._switchTypeOfSearchView);
-        this._searchForm.addEventListener('keydown', this._preventSubmitOnSearchClear);
-    }
-    _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
-        this._shouldShowMessage = shouldShowMessage;
-        this._setActiveItemId(`${this._id}-1`);
-        this._inputField.setAttribute('aria-activedescendant', '');
-        this._displaySuggester(searchPhrase);
-        if (!shouldUpdateSearchPhrase)
-            return;
-        this._updateSearchPhrase(searchPhrase);
-    }
-    _displaySuggester(searchPhrase) {
-        if (searchPhrase === '' && this._searchHistory.length !== 0) {
-            this._displayHistorySuggestions();
-        }
-        if (searchPhrase === '' && this._searchHistory.length === 0) {
-            this._hideHistorySuggestionsAndResults();
-        }
-        if (searchPhrase !== '') {
-            this._displayResults();
-        }
-    }
-    _displayHistorySuggestions() {
-        this._handleToggleHistoryAndResults({
-            shouldShowHistory: true,
-            shouldShowResults: false
-        });
-    }
-    _hideHistorySuggestionsAndResults() {
-        this._handleToggleHistoryAndResults({
-            shouldShowHistory: false,
-            shouldShowResults: false
-        });
-    }
-    _displayResults() {
-        this._handleToggleHistoryAndResults({
-            shouldShowHistory: false,
-            shouldShowResults: true
-        });
-    }
-    _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
-        this._shouldShowHistory = shouldShowHistory;
-        this._shouldShowResults = shouldShowResults;
-        this._toggleSearchInputAttributes(shouldShowHistory, shouldShowResults);
-        this._toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults);
-    }
-    _toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
-        var _a;
-        const $input = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.input;
-        if (!$input)
-            return;
-        if (!shouldShowHistory && !shouldShowResults) {
-            $input.removeAttribute('aria-label');
-            $input.setAttribute('aria-activedescendant', '');
-            return;
-        }
-        $input.setAttribute('aria-expanded', 'true');
-        if (shouldShowHistory) {
-            $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
-            $input.setAttribute('aria-haspopup', 'grid');
-        }
-        if (shouldShowResults) {
-            $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
-            this._inputField.removeAttribute('aria-haspopup');
-        }
-    }
-    _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
-        if (shouldShowHistory) {
-            this._containerRole = 'grid';
-        }
-        if (shouldShowResults) {
-            this._containerRole = 'listbox';
-        }
-    }
-    _handleChooseSearchItem() {
-        const $activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
-        if (!$activeSearchItem)
-            return;
-        const $linkElement = $activeSearchItem.querySelector('a');
-        const $suggestedElement = $linkElement || $activeSearchItem;
-        const $elementToClick = $activeSearchItem.dataset.suggestedValue ? $suggestedElement : $linkElement;
-        if (!$elementToClick) {
-            $activeSearchItem.click();
-        }
-        else {
-            $elementToClick.click();
-        }
-    }
-    _resetSearchView() {
-        this._shouldShowMessage = false;
-        this._setActiveItemId(`${this._id}-1`);
-        const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
-        searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
-        if (!this.popup)
-            this._hideHistorySuggestionsAndResults();
-        this._removeSearchKeyboardNavigation();
-    }
-    _submitSearchPhrase(searchPhrase) {
-        this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
-    }
-    _handleOpenSearch() {
-        this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
-        const shouldShowMessage = this._searchPhrase !== '';
-        this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
+import './subcomponents/history/search_history';
+import { v4 as uuidv4 } from 'uuid';
+import './subcomponents/buttons/search_clear';
+import './subcomponents/message/search_message';
+import '@phoenixRoot/components/modal/modal';
+import { MODAL_EVENTS } from '@phoenixRoot/components/modal/modal_constants';
+let HSearch = class HSearch extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.view = DEFAULT_VIEW;
+        this._id = uuidv4();
+        this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
+        this._searchContentContainerId = uuidv4();
+        this._searchResultsRef = createRef();
+        this._searchHistoryRef = createRef();
+        this._searchMessageRef = createRef();
+        this._openSearchButtonLabelRef = createRef();
+        this._shouldShowHistory = false;
+        this._shouldShowResults = false;
+        this._shouldShowMessage = false;
+        this._searchHistory = [];
+        this._searchPhrase = '';
+        this._historyLimitedContent = [];
+        this._historyContext = new BehaviorSubject({
+            showLoadMore: false
+        });
+        this._activeItemId = `${this._id}-1`;
+        this._translations = {};
+        this._containerRole = 'grid';
+        this._bindKeys = (ev) => {
+            if (this.popup) {
+                this._bindPopupKeys(ev);
+            }
+            else {
+                this._bindDropdownKeys(ev);
+            }
+        };
+        this._bindDropdownKeys = (ev) => {
+            switch (ev.key) {
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    this._handleForwardListFocus();
+                    break;
+                case 'ArrowUp':
+                    this._handleBackwardListFocus(ev);
+                    break;
+                case 'ArrowLeft':
+                    if (this._containerRole === 'grid') {
+                        ev.preventDefault();
+                        this._handleBackwardGridFocus();
+                    }
+                    if (this._containerRole === 'listbox')
+                        this._handleMoveToInputField();
+                    break;
+                case 'ArrowRight':
+                    if (this._containerRole === 'grid') {
+                        ev.preventDefault();
+                        this._handleForwardGridFocus();
+                    }
+                    if (this._containerRole === 'listbox')
+                        this._handleMoveToInputField();
+                    break;
+                case 'Enter':
+                    ev.preventDefault();
+                    if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
+                        return;
+                    this._handleChooseSearchItem();
+                    break;
+                case 'Escape':
+                    ev.preventDefault();
+                    if (this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults) {
+                        this._inputField.focus();
+                        this._shouldShowMessage = false;
+                        this._hideHistorySuggestionsAndResults();
+                    }
+                    else {
+                        this._inputField.value = '';
+                    }
+                    break;
+                case 'End':
+                    ev.preventDefault();
+                    this._handleFocusOnInputWithCaretEnd();
+                    break;
+                case 'Home':
+                    ev.preventDefault();
+                    this._handleFocusOnInputWithCaretStart();
+                    break;
+                case 'Backspace':
+                    this._handleMoveToInputField();
+                    break;
+                case 'Tab':
+                    const isFocusedOnSearchInput = document.activeElement === this._inputField;
+                    if (!isFocusedOnSearchInput)
+                        ev.preventDefault();
+                    break;
+                default:
+                    const isAWriteableCharacter = ev.key.length === 1;
+                    if (isAWriteableCharacter)
+                        this._handleWriteableCharacter(ev);
+                    break;
+            }
+        };
+        this._bindPopupKeys = (ev) => {
+            switch (ev.key) {
+                case 'Escape':
+                    ev.preventDefault();
+                    this.emitCustomEvent(MODAL_EVENTS.close);
+                    const $search = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
+                    const $searchOpener = $search && $search.querySelector('[aria-haspopup="dialog"]');
+                    $searchOpener === null || $searchOpener === void 0 ? void 0 : $searchOpener.focus();
+                    this._shouldShowMessage = false;
+                    this._hideHistorySuggestionsAndResults();
+                    break;
+                default:
+                    break;
+            }
+        };
+        this._handleSearchTabNavigation = (ev) => {
+            if (ev.key !== 'Tab')
+                return;
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (ev.shiftKey && !isFocusedOnSearchInput) {
+                this._focusOnPreviousElementBeforeSearchInput(ev);
+                return;
+            }
+            if (!isFocusedOnSearchInput) {
+                const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
+                searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
+                this._resetSearchView();
+                this._removeSearchKeyboardNavigation();
+                this._focusOnNextElementAfterSearchInput(ev);
+            }
+        };
+        this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
+            ev.preventDefault();
+            const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
+            searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
+            this._resetSearchView();
+            this._removeSearchKeyboardNavigation();
+            UiDomUtils.getPreviousFocusableElement(this._inputField).focus();
+        };
+        this._focusOnNextElementAfterSearchInput = async (ev) => {
+            ev.preventDefault();
+            UiDomUtils.getNextFocusableElement(this._inputField).focus();
+        };
+        this._preventScrollingOnSearchContentBrowsing = (ev) => {
+            var _a;
+            const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
+            const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
+            const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
+            if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
+                ev.preventDefault();
+            }
+        };
+        this._handleForwardListFocus = () => {
+            var _a, _b;
+            const $searchItemsContainer = this._findSearchItemsContainer();
+            if (!$searchItemsContainer)
+                return;
+            const isActiveElementASearchItem = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id'));
+            const isActiveElementAGridSearchItem = isActiveElementASearchItem && !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-search-grid-item'));
+            const $listSearchItems = this._findListSearchItems($searchItemsContainer, isActiveElementAGridSearchItem);
+            this._handleForwardFocus($listSearchItems);
+        };
+        this._handleForwardGridFocus = () => {
+            const $searchItemsContainer = this._findSearchItemsContainer();
+            if (!$searchItemsContainer)
+                return;
+            const $gridSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                return !!$el.getAttribute('data-search-item-id');
+            });
+            this._handleForwardFocus($gridSearchItems);
+        };
+        this._handleForwardFocus = ($searchItems) => {
+            var _a;
+            const $activeElement = document.activeElement;
+            const indexOfCurrentElement = $searchItems.indexOf($activeElement);
+            const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
+            const $nextSearchItemElement = $searchItems[indexOfNextElement];
+            $nextSearchItemElement.focus();
+            this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
+        };
+        this._handleMoveToInputField = () => {
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (isFocusedOnSearchInput)
+                return;
+            this._inputField.focus();
+        };
+        this._handleBackwardListFocus = (ev) => {
+            var _a, _b;
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            const hasPopup = this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults;
+            if (isFocusedOnSearchInput || !hasPopup)
+                return;
+            ev.preventDefault();
+            const $searchItemsContainer = this._findSearchItemsContainer();
+            if (!$searchItemsContainer)
+                return;
+            const isActiveElementASearchItem = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id'));
+            const isActiveElementAGridSearchItem = isActiveElementASearchItem && !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-search-grid-item'));
+            const $listSearchItems = this._findListSearchItems($searchItemsContainer, isActiveElementAGridSearchItem);
+            this._handleBackwardFocus($listSearchItems);
+        };
+        this._findListSearchItems = ($searchItemsContainer, shouldFindGridList) => {
+            return UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                const searchItemId = $el.getAttribute('data-search-item-id');
+                const isListSearchItem = !!searchItemId && !$el.getAttribute('data-search-grid-item');
+                const isGridSearchItem = !!searchItemId && $el.getAttribute('data-search-grid-item');
+                return shouldFindGridList ? isGridSearchItem : isListSearchItem;
+            });
+        };
+        this._handleBackwardGridFocus = () => {
+            const $searchItemsContainer = this._findSearchItemsContainer();
+            if (!$searchItemsContainer)
+                return;
+            const $gridSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+                return !!$el.getAttribute('data-search-item-id');
+            });
+            this._handleBackwardFocus($gridSearchItems);
+        };
+        this._findSearchItemsContainer = () => {
+            const containers = [
+                this._searchHistoryRef.value,
+                this._searchResultsRef.value,
+                this._searchMessageRef.value
+            ];
+            return containers.find(container => container && !UiDomUtils.isElementEmpty(container));
+        };
+        this._handleBackwardFocus = ($searchItems) => {
+            var _a;
+            const $activeElement = document.activeElement;
+            const indexOfCurrentElement = $searchItems.indexOf($activeElement);
+            const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
+            const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
+            $previousSearchItemElement.focus();
+            this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
+        };
+        this._setActiveItemId = (newActiveItemId) => {
+            this._activeItemId = newActiveItemId;
+            if (document.activeElement !== this._inputField) {
+                this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
+            }
+        };
+        this._removeSearchKeyboardNavigation = () => {
+            document.body.removeEventListener('keydown', this._bindKeys);
+            document.removeEventListener('keyup', this._handleSearchTabNavigation);
+        };
+        this._handleFocusOnInputWithCaretEnd = () => {
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (isFocusedOnSearchInput)
+                return;
+            this._inputField.focus();
+            const endPosition = this._inputField.value.length;
+            this._inputField.setSelectionRange(endPosition, endPosition);
+        };
+        this._handleFocusOnInputWithCaretStart = () => {
+            this._inputField.focus();
+            this._inputField.setSelectionRange(0, 0);
+        };
+        this._handleWriteableCharacter = (ev) => {
+            const isFocusedOnSearchInput = document.activeElement === this._inputField;
+            if (isFocusedOnSearchInput)
+                return;
+            this._inputField.focus();
+            const isAPrintableCharacter = ev.key.match(/\P{C}/u);
+            if (ev.key.length !== 1 || !isAPrintableCharacter) {
+                ev.preventDefault();
+            }
+        };
+        this._hideSuggesterOnClickOutside = (ev) => {
+            const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
+            if (!outsideClick)
+                return;
+            this._resetSearchView();
+        };
+        this._switchTypeOfSearchView = () => {
+            if (!this._isSuggesterLayerVisible() && !this.popup)
+                return;
+            if (window.innerWidth > BREAKPOINTS.sm) {
+                const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
+                this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
+                if (hasBeenOpened && this.popup) {
+                    const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
+                    const $searchModal = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('h-modal');
+                    $searchModal === null || $searchModal === void 0 ? void 0 : $searchModal.open();
+                }
+            }
+            else if (!this.popup) {
+                this._openMobileView();
+            }
+        };
+        this._openMobileView = () => {
+            this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
+        };
+        this._isSuggesterLayerVisible = () => {
+            var _a;
+            return ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.isSearchSuggestLayerEnabled) && (this._shouldShowHistory || this._shouldShowResults || this._shouldShowMessage);
+        };
+        this._preventSubmitOnSearchClear = (ev) => {
+            const $searchClear = this.querySelector(SEARCH_COMPONENT_NAMES.clearButton);
+            if (ev.key === 'Enter' && ev.target === $searchClear) {
+                ev.preventDefault();
+            }
+        };
+        this._resetSearchOnFocusOutside = (ev) => {
+            const $target = ev.target;
+            const isContainedWithinSearch = this === $target || this.contains($target);
+            if (!isContainedWithinSearch) {
+                this._resetSearchView();
+                this._removeSearchKeyboardNavigation();
+                document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
+            }
+        };
+        this._setupAriaAttributes = () => {
+            var _a;
+            if (this._translations.openSearchButtonAriaLabel) {
+                (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
+            }
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._setupContext();
+        try {
+            this._searchContextConsumer = new ContextConsumerController(this);
+            this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
+            const ariaTranslations = {
+                historyGuideAriaLabel: this.settings.historyGuideAriaLabel,
+                suggesterGuideAriaLabel: this.settings.suggesterGuideAriaLabel,
+                historyItemAriaLabel: this.settings.historyItemAriaLabel,
+                suggesterItemAriaLabel: this.settings.suggesterItemAriaLabel,
+                suggesterProductItemAriaLabel: this.settings.suggesterProductItemAriaLabel,
+                suggesterProducerItemAriaLabel: this.settings.suggesterProducerItemAriaLabel,
+                openSearchButtonAriaLabel: this.settings.openSearchButtonAriaLabel
+            };
+            this._searchContextObserver = new Observer((searchData) => {
+                this._searchResults = searchData.results;
+                this._searchHistory = searchData.history;
+                this._translations = {
+                    ...searchData.translations,
+                    ...ariaTranslations
+                };
+                this._searchPhrase = searchData.searchPhrase;
+                this._historyContext.notify({ showLoadMore: this._searchHistory.length > SEARCH_CONFIGURATION.historyContentLimit });
+                this._historyLimitedContent = this._searchHistory.slice(0, SEARCH_CONFIGURATION.historyContentLimit);
+            });
+            this._searchContext$.subscribe(this._searchContextObserver);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+        this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
+        this._setupInitialSearchPhrase();
+        this._setupListeners();
+        this._setupAriaAttributes();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._hideSuggesterOnClickOutside);
+        document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
+        document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
+        window.removeEventListener('resize', this._switchTypeOfSearchView);
+        (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
+    }
+    _setupContext() {
+        this._historyContextProvider = new ContextProviderController(this);
+        this._historyContextProvider.provide(SEARCH_CONTEXT_NAMES.historyContext, this._historyContext);
+    }
+    _setupInitialSearchPhrase() {
+        var _a;
+        const searchInput = this.querySelector('input[type="search"]');
+        const searchForm = this.closest('form');
+        if (searchInput)
+            this._inputField = searchInput;
+        if (searchForm)
+            this._searchForm = searchForm;
+        if (!((_a = this._inputField) === null || _a === void 0 ? void 0 : _a.value))
+            return;
+        this._searchPhrase = this._inputField.value;
+        this._updateSearchPhrase(this._inputField.value);
+    }
+    _updateSearchPhrase(searchPhrase) {
+        this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
+    }
+    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
+        this.emitCustomEvent(eventName, {
+            detail: {
+                searchPhrase,
+                moduleInstanceId: this.moduleInstanceId
+            }
+        });
+    }
+    _setupListeners() {
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.focusin, (ev) => {
+            var _a, _b, _c;
+            const $target = (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.relatedTarget;
+            if ($target === null || $target === void 0 ? void 0 : $target.closest(`[id="${this._searchContentContainerId}"]`))
+                return;
+            const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
+            searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(SEARCH_CLASS_NAMES.outline);
+            const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
+            this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
+            if (!this.popup) {
+                document.addEventListener('keyup', this._handleSearchTabNavigation);
+            }
+            document.body.addEventListener('keydown', this._bindKeys);
+            document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
+            document.addEventListener('focusin', this._resetSearchOnFocusOutside);
+            document.body.addEventListener('searchOpenMobileView', this._openMobileView);
+        });
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
+            const shouldShowMessage = ev.detail.searchPhrase !== '';
+            this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
+        });
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.search, (ev) => this._updateSearchView(ev.detail.searchPhrase, false));
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.clear, (ev) => {
+            ev.stopImmediatePropagation();
+            this._inputField.value = '';
+            this._updateSearchView('', false);
+        });
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
+            if (this._activeItemId !== `${this._id}-1`)
+                return;
+            if (this._inputField.value === '') {
+                this._updateSearchView(this._inputField.value, true);
+            }
+            else {
+                this._resetSearchView();
+            }
+            this._submitSearchPhrase(this._inputField.value);
+        });
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
+            this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
+            this._resetSearchView();
+        });
+        this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
+            const contentLength = this._searchHistory.length;
+            const limitedContentLength = this._historyLimitedContent.length;
+            if (limitedContentLength < contentLength) {
+                this._historyLimitedContent = this._searchHistory.slice(0, limitedContentLength + SEARCH_CONFIGURATION.historyContentLimit);
+            }
+            this._historyContext.notify({ showLoadMore: this._historyLimitedContent.length < contentLength });
+        });
+        document.addEventListener('click', this._hideSuggesterOnClickOutside);
+        window.addEventListener('resize', this._switchTypeOfSearchView);
+        this._searchForm.addEventListener('keydown', this._preventSubmitOnSearchClear);
+    }
+    _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
+        this._shouldShowMessage = shouldShowMessage;
+        this._setActiveItemId(`${this._id}-1`);
+        this._inputField.setAttribute('aria-activedescendant', '');
+        this._displaySuggester(searchPhrase);
+        if (!shouldUpdateSearchPhrase)
+            return;
+        this._updateSearchPhrase(searchPhrase);
+    }
+    _displaySuggester(searchPhrase) {
+        if (searchPhrase === '' && this._searchHistory.length !== 0) {
+            this._displayHistorySuggestions();
+        }
+        if (searchPhrase === '' && this._searchHistory.length === 0) {
+            this._hideHistorySuggestionsAndResults();
+        }
+        if (searchPhrase !== '') {
+            this._displayResults();
+        }
+    }
+    _displayHistorySuggestions() {
+        this._handleToggleHistoryAndResults({
+            shouldShowHistory: true,
+            shouldShowResults: false
+        });
+    }
+    _hideHistorySuggestionsAndResults() {
+        this._handleToggleHistoryAndResults({
+            shouldShowHistory: false,
+            shouldShowResults: false
+        });
+    }
+    _displayResults() {
+        this._handleToggleHistoryAndResults({
+            shouldShowHistory: false,
+            shouldShowResults: true
+        });
+    }
+    _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
+        this._shouldShowHistory = shouldShowHistory;
+        this._shouldShowResults = shouldShowResults;
+        this._toggleSearchInputAttributes(shouldShowHistory, shouldShowResults);
+        this._toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults);
+    }
+    _toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
+        var _a;
+        const $input = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.input;
+        if (!$input)
+            return;
+        if (!shouldShowHistory && !shouldShowResults) {
+            $input.removeAttribute('aria-label');
+            $input.setAttribute('aria-activedescendant', '');
+            return;
+        }
+        $input.setAttribute('aria-expanded', 'true');
+        if (shouldShowHistory) {
+            $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
+            $input.setAttribute('aria-haspopup', 'grid');
+        }
+        if (shouldShowResults) {
+            $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
+            this._inputField.removeAttribute('aria-haspopup');
+        }
+    }
+    _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
+        if (shouldShowHistory) {
+            this._containerRole = 'grid';
+        }
+        if (shouldShowResults) {
+            this._containerRole = 'listbox';
+        }
+    }
+    _handleChooseSearchItem() {
+        const $activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
+        if (!$activeSearchItem)
+            return;
+        const $linkElement = $activeSearchItem.querySelector('a');
+        const $suggestedElement = $linkElement || $activeSearchItem;
+        const $elementToClick = $activeSearchItem.dataset.suggestedValue ? $suggestedElement : $linkElement;
+        if (!$elementToClick) {
+            $activeSearchItem.click();
+        }
+        else {
+            $elementToClick.click();
+        }
+    }
+    _resetSearchView() {
+        this._shouldShowMessage = false;
+        this._setActiveItemId(`${this._id}-1`);
+        const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
+        searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
+        if (!this.popup)
+            this._hideHistorySuggestionsAndResults();
+        this._removeSearchKeyboardNavigation();
+    }
+    _submitSearchPhrase(searchPhrase) {
+        this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
+    }
+    _handleOpenSearch() {
+        this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
+        const shouldShowMessage = this._searchPhrase !== '';
+        this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
         const $searchInput = this.querySelector(`
             ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
-        `);
-        $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
-    }
-    _handleOpenSearchWithKeyboard(ev) {
-        if (ev.code !== 'Enter')
-            return;
-        ev.preventDefault();
-        this._handleOpenSearch();
-    }
-    render() {
-        super.render();
+        `);
+        $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
+    }
+    _handleOpenSearchWithKeyboard(ev) {
+        if (ev.code !== 'Enter')
+            return;
+        ev.preventDefault();
+        this._handleOpenSearch();
+    }
+    render() {
+        super.render();
         return html `
             <div
                 class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
@@ -579,7 +586,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 @click=${this._handleOpenSearch}
                 @keyup=${this._handleOpenSearchWithKeyboard}
             >
-                ${n(this._translations.openSearchButtonAriaLabel, () => html `
+                ${when(this._translations.openSearchButtonAriaLabel, () => html `
                         <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
                             ${this._translations.openSearchButtonAriaLabel}
                         </span>
@@ -591,13 +598,13 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             </div>
             
 
-            ${n(this._isSuggesterLayerVisible(), () => html `
+            ${when(this._isSuggesterLayerVisible(), () => html `
                     <div
                         class="${SEARCH_CLASS_NAMES.container}"
                         id="${this._searchContentContainerId}"
                         role="${this._containerRole}"
                     >
-                        ${n(this._shouldShowMessage, () => html `<h-search-message
+                        ${when(this._shouldShowMessage, () => html `<h-search-message
                                 ${ref(this._searchMessageRef)}
                                 .history="${this._historyLimitedContent}"
                                 .results="${this._searchResults}"
@@ -605,7 +612,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                                 search-phrase="${this._searchPhrase}"
                                 module-instance-id="${this.moduleInstanceId}"
                             ></h-search-message>`)}
-                        ${n(this._shouldShowHistory, () => html `<h-search-history
+                        ${when(this._shouldShowHistory, () => html `<h-search-history
                                     ${ref(this._searchHistoryRef)}
                                     .history="${this._historyLimitedContent}"
                                     .translations="${this._translations}"
@@ -613,7 +620,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                                     search-id="${this._id}"
                                     module-instance-id="${this.moduleInstanceId}"
                                 ></h-search-history>`)}
-                        ${n(this._shouldShowResults, () => html `<h-search-results
+                        ${when(this._shouldShowResults, () => html `<h-search-results
                                     ${ref(this._searchResultsRef)}
                                     .results="${this._searchResults}"
                                     search-phrase="${this._searchPhrase}"
@@ -633,76 +640,75 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                     role="${this._containerRole}"
                     hidden
                 ></div>`)}
-        `;
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], HSearch.prototype, "settings", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HSearch.prototype, "view", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HSearch.prototype, "locale", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'popup' }),
-    __metadata("design:type", Boolean)
-], HSearch.prototype, "popup", void 0);
-__decorate([
-    property({ type: String, attribute: 'module-instance-id' }),
-    __metadata("design:type", String)
-], HSearch.prototype, "moduleInstanceId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], HSearch.prototype, "_shouldShowHistory", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], HSearch.prototype, "_shouldShowResults", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], HSearch.prototype, "_shouldShowMessage", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HSearch.prototype, "_searchResults", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], HSearch.prototype, "_searchHistory", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], HSearch.prototype, "_searchPhrase", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], HSearch.prototype, "_historyLimitedContent", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", BehaviorSubject)
-], HSearch.prototype, "_historyContext", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], HSearch.prototype, "_activeItemId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HSearch.prototype, "_translations", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], HSearch.prototype, "_containerRole", void 0);
-HSearch = __decorate([
-    phoenixCustomElement(SEARCH_COMPONENT_NAMES.search)
+        `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], HSearch.prototype, "settings", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSearch.prototype, "view", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSearch.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'popup' }),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "popup", void 0);
+__decorate([
+    property({ type: String, attribute: 'module-instance-id' }),
+    __metadata("design:type", String)
+], HSearch.prototype, "moduleInstanceId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "_shouldShowHistory", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "_shouldShowResults", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "_shouldShowMessage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSearch.prototype, "_searchResults", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HSearch.prototype, "_searchHistory", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSearch.prototype, "_searchPhrase", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HSearch.prototype, "_historyLimitedContent", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", BehaviorSubject)
+], HSearch.prototype, "_historyContext", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSearch.prototype, "_activeItemId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSearch.prototype, "_translations", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSearch.prototype, "_containerRole", void 0);
+HSearch = __decorate([
+    phoenixCustomElement(SEARCH_COMPONENT_NAMES.search)
 ], HSearch);
-
 export { HSearch };
-//# sourceMappingURL=search.js.map
+//# sourceMappingURL=search.js.map