@shoper/phoenix_design_system 1.11.11-0 → 1.11.11-10

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

@@ -11,19 +11,15 @@ import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior
 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 { when as n } from '../../../../../../external/lit/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';
+import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SCROLL_DIRECTIONS, SEARCH_CONFIGURATION, SEARCH_COMPONENT_NAMES, 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._searchContentContainerId = v4();
         this._searchResultsRef = createRef();
         this._searchHistoryRef = createRef();
-        this._searchMessageRef = createRef();
         this._shouldShowHistory = false;
         this._shouldShowResults = false;
         this._shouldShowMessage = false;
@@ -33,220 +29,84 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this._historyContext = new BehaviorSubject({
             showLoadMore: false
         });
-        this._activeItemId = `${this._id}-1`;
+        this._activeItemId = -1;
         this._translations = {};
-        this._containerRole = 'grid';
         this._bindKeys = (ev) => {
+            var _a;
             switch (ev.key) {
                 case 'ArrowDown':
                     ev.preventDefault();
-                    this._handleForwardListFocus();
+                    this._focusOutsideActiveItemsForward();
+                    this._scroll(SCROLL_DIRECTIONS.down);
                     break;
                 case 'ArrowUp':
                     ev.preventDefault();
-                    this._handleBackwardListFocus();
-                    break;
-                case 'ArrowLeft':
-                    if (this._containerRole === 'grid') {
-                        ev.preventDefault();
-                        this._handleBackwardGridFocus();
-                    }
-                    if (this._containerRole === 'listbox')
-                        this._handleMoveToInputFieldOnArrowLeft();
-                    break;
-                case 'ArrowRight':
-                    ev.preventDefault();
-                    if (this._containerRole === 'grid')
-                        this._handleForwardGridFocus();
-                    if (this._containerRole === 'listbox')
-                        this._handleFocusOnInputWithMarkerEnd();
+                    this._focusOutsideActiveItemsBackward();
+                    this._scroll(SCROLL_DIRECTIONS.up);
                     break;
                 case 'Enter':
                     ev.preventDefault();
-                    if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
+                    if (this._activeItemId === -1 || !this._shouldShowResults)
                         return;
                     this._handleChooseSearchItem();
                     break;
                 case 'Escape':
                     ev.preventDefault();
-                    if (this._shouldShowHistory || this._shouldShowHistory || this._shouldShowResults) {
-                        this._inputField.focus();
-                        this._resetSearchView();
-                    }
-                    else {
-                        this._inputField.value = '';
-                    }
-                    break;
-                case 'End':
-                    ev.preventDefault();
-                    this._handleFocusOnInputWithMarkerEnd();
-                    break;
-                case 'Home':
-                    ev.preventDefault();
-                    this._handleFocusOnInputWithMarkerStart();
+                    this._inputField.blur();
+                    this._resetSearchView();
                     break;
                 case 'Tab':
-                    const isFocusedOnSearchInput = document.activeElement === this._inputField;
-                    if (ev.shiftKey && !isFocusedOnSearchInput) {
-                        this._focusOnPreviousElementBeforeSearchInput(ev);
-                        return;
-                    }
+                    const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
                     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();
                         document.removeEventListener('keyup', this._bindKeys);
-                        this._focusOnNextElementAfterSearchInput(ev);
                     }
                     break;
-                default:
-                    const isAWriteableCharacter = ev.key.length === 1;
-                    if (isAWriteableCharacter)
-                        this._handleWriteableCharacter(ev);
-                    break;
             }
         };
-        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();
-            document.removeEventListener('keyup', this._bindKeys);
-            UiDomUtils.getPreviousFocusableElement(this._inputField).focus();
-        };
-        this._focusOnNextElementAfterSearchInput = async (ev) => {
-            ev.preventDefault();
-            UiDomUtils.getNextFocusableElement(this._inputField).focus();
-        };
-        this._preventScrollingOnSearchContentBrowsing = (ev) => {
+        this._focusOutsideActiveItemsForward = () => {
             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 containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            const $searchItemsContainer = containers.find(container => container && !UiDomUtils.isElementEmpty(container));
-            if (!$searchItemsContainer)
-                return;
-            const isActiveElementAGridSearchItem = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id')) === null || _b === void 0 ? void 0 : _b.includes('grid');
-            const $listSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
-                const searchItemId = $el.getAttribute('data-search-item-id');
-                const isListSearchItem = !!searchItemId && !searchItemId.includes('grid');
-                const isGridSearchItem = !!searchItemId && searchItemId.includes('grid');
-                return isActiveElementAGridSearchItem ? isGridSearchItem : isListSearchItem;
-            });
-            this._handleForwardFocus($listSearchItems);
-        };
-        this._handleForwardGridFocus = () => {
-            const containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            const $searchItemsContainer = containers.find(container => container && !UiDomUtils.isElementEmpty(container));
+            const $activeElement = document.activeElement;
+            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
             if (!$searchItemsContainer)
                 return;
-            const $gridSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+            const $searchItems = 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._handleMoveToInputFieldOnArrowLeft = () => {
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            if (isFocusedOnSearchInput)
-                return;
-            this._inputField.focus();
-            const currentPosition = this._inputField.selectionStart || 0;
-            const newPosition = Math.max(currentPosition - 1, 0);
-            this._inputField.setSelectionRange(newPosition, newPosition);
-        };
-        this._handleBackwardListFocus = () => {
-            var _a, _b;
-            const containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            const $searchItemsContainer = containers.find(container => container && !UiDomUtils.isElementEmpty(container));
-            if (!$searchItemsContainer)
-                return;
-            const isActiveElementAGridSearchItem = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-search-item-id')) === null || _b === void 0 ? void 0 : _b.includes('grid');
-            const $listSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
-                const searchItemId = $el.getAttribute('data-search-item-id');
-                const isListSearchItem = !!searchItemId && !searchItemId.includes('grid');
-                const isGridSearchItem = !!searchItemId && searchItemId.includes('grid');
-                return isActiveElementAGridSearchItem ? isGridSearchItem : isListSearchItem;
-            });
-            this._handleBackwardFocus($listSearchItems);
+            this._activeItemId = (_a = Number($nextSearchItemElement.getAttribute('data-search-item-id'))) !== null && _a !== void 0 ? _a : -1;
         };
-        this._handleBackwardGridFocus = () => {
-            const containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            const $searchItemsContainer = containers.find(container => container && !UiDomUtils.isElementEmpty(container));
+        this._focusOutsideActiveItemsBackward = () => {
+            var _a;
+            const $activeElement = document.activeElement;
+            const $searchItemsContainer = this._searchHistoryRef.value || this._searchResultsRef.value;
             if (!$searchItemsContainer)
                 return;
-            const $gridSearchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
+            const $searchItems = UiDomUtils.getFocusableElements($searchItemsContainer).filter(($el) => {
                 return !!$el.getAttribute('data-search-item-id');
             });
-            this._handleBackwardFocus($gridSearchItems);
-        };
-        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._handleFocusOnInputWithMarkerEnd = () => {
-            const isFocusedOnSearchInput = document.activeElement === this._inputField;
-            if (isFocusedOnSearchInput)
-                return;
-            this._inputField.focus();
-            const endPosition = this._inputField.value.length;
-            this._inputField.setSelectionRange(endPosition, endPosition);
-        };
-        this._handleFocusOnInputWithMarkerStart = () => {
-            this._inputField.focus();
-            this._inputField.setSelectionRange(0, 0);
+            this._activeItemId = (_a = Number($previousSearchItemElement.getAttribute('data-search-item-id'))) !== null && _a !== void 0 ? _a : -1;
         };
-        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) {
-                this._inputField.value = `${this._inputField.value}${ev.key}`;
+        this._getSearchItemsCount = () => {
+            if (this._shouldShowHistory)
+                return this._historyLimitedContent.length;
+            let searchItemsCount = this._searchResults.products.length +
+                this._searchResults.categories.length +
+                this._searchResults.suggestions.length +
+                this._searchResults.producers.length;
+            if (this._searchResults.products.length && this._searchResults.suggestions.length) {
+                searchItemsCount += 1;
             }
+            return searchItemsCount;
         };
         this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
@@ -261,12 +121,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 ? this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened)
                 : this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
         };
-        this._preventSubmitOnSearchClear = (ev) => {
-            const $searchClear = this.querySelector(SEARCH_COMPONENT_NAMES.clearButton);
-            if (ev.key === 'Enter' && ev.target === $searchClear) {
-                ev.preventDefault();
-            }
-        };
     }
     async connectedCallback() {
         super.connectedCallback();
@@ -305,9 +159,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('click', this._hideSuggesterOnClickOutside);
-        document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
         window.removeEventListener('resize', this._switchTypeOfSearchView);
-        this._searchForm.removeEventListener('keydown', this._preventSubmitOnSearchClear);
     }
     _setupContext() {
         this._historyContextProvider = new ContextProviderController(this);
@@ -316,11 +168,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     _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;
@@ -344,7 +193,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
             this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
             document.addEventListener('keyup', this._bindKeys);
-            document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
         });
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
             const shouldShowMessage = ev.detail.searchPhrase !== '';
@@ -355,7 +203,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             this._updateSearchView('', false);
         });
         this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
-            if (this._activeItemId !== `${this._id}-1`)
+            if (this._activeItemId !== -1)
                 return;
             if (this._inputField.value === '') {
                 this._updateSearchView(this._inputField.value, true);
@@ -379,12 +227,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         });
         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._activeItemId = -1;
         this._displaySuggester(searchPhrase);
         if (!shouldUpdateSearchPhrase)
             return;
@@ -422,36 +268,42 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
         this._shouldShowHistory = shouldShowHistory;
         this._shouldShowResults = shouldShowResults;
-        this._toggleSearchInputAttributes(shouldShowHistory, shouldShowResults);
-        this._toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults);
+        this._toggleSearchInputAria(shouldShowHistory, shouldShowResults);
     }
-    _toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
+    _toggleSearchInputAria(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) {
+        if (shouldShowHistory)
             $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
-            $input.setAttribute('aria-haspopup', 'grid');
-        }
-        if (shouldShowResults) {
+        if (shouldShowResults)
             $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
-            this._inputField.removeAttribute('aria-haspopup');
-        }
     }
-    _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
-        if (shouldShowHistory) {
-            this._containerRole = 'grid';
+    _scroll(direction) {
+        const searchContainer = this.querySelector(`.${SEARCH_CLASS_NAMES.container}`);
+        const maxScrollTop = searchContainer.scrollHeight - searchContainer.clientHeight;
+        const activeItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
+        const activeItemHeight = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect().height) || 0;
+        let top;
+        if (direction === SCROLL_DIRECTIONS.up) {
+            top = searchContainer.scrollTop == 0 ? 0 : searchContainer.scrollTop + 30 - activeItemHeight;
+        }
+        else {
+            top = searchContainer.scrollTop == maxScrollTop ? maxScrollTop : activeItemHeight + searchContainer.scrollTop - 30;
         }
-        if (shouldShowResults) {
-            this._containerRole = 'listbox';
+        if (this._activeItemId === this._getSearchItemsCount() - 1) {
+            top = maxScrollTop;
         }
+        if (this._activeItemId === 0) {
+            top = 0;
+        }
+        searchContainer === null || searchContainer === void 0 ? void 0 : searchContainer.scrollTo({ top, behavior: 'smooth' });
     }
     _handleChooseSearchItem() {
         const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
@@ -462,7 +314,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     }
     _resetSearchView() {
         this._shouldShowMessage = false;
-        this._setActiveItemId(`${this._id}-1`);
+        this._activeItemId = -1;
         const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
         searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
         this._hideHistorySuggestionsAndResults();
@@ -501,48 +353,33 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 <div class="labeled-icon__signature">${this._translations.search}</div>
             </div>
 
-            ${n(this._isSuggesterLayerVisible(), () => html `
-                    <div
-                        class="${SEARCH_CLASS_NAMES.container}"
-                        id="${this._searchContentContainerId}"
-                        role="${this._containerRole}"
-                    >
-                        ${n(this._shouldShowMessage, () => html `<h-search-message
-                                ${ref(this._searchMessageRef)}
+            ${n(this._isSuggesterLayerVisible(), () => html `<div class="${SEARCH_CLASS_NAMES.container}">
+                    ${n(this._shouldShowMessage, () => html `<h-search-message
+                            .history="${this._historyLimitedContent}"
+                            .results="${this._searchResults}"
+                            .translations="${this._translations}"
+                            search-phrase="${this._searchPhrase}"
+                            module-instance-id="${this.moduleInstanceId}"
+                        ></h-search-message>`)}
+                    ${n(this._shouldShowHistory, () => html `<h-search-history
+                                ${ref(this._searchHistoryRef)}
                                 .history="${this._historyLimitedContent}"
-                                .results="${this._searchResults}"
                                 .translations="${this._translations}"
+                                active-item-id="${this._activeItemId}"
+                                module-instance-id="${this.moduleInstanceId}"
+                            ></h-search-history>`)}
+                    ${n(this._shouldShowResults, () => html `<h-search-results
+                                ${ref(this._searchResultsRef)}
+                                .results="${this._searchResults}"
                                 search-phrase="${this._searchPhrase}"
+                                .settings="${this.settings}"
+                                locale="${this.locale}"
+                                view="${this.view}"
+                                .translations="${this._translations}"
+                                active-item-id="${this._activeItemId}"
                                 module-instance-id="${this.moduleInstanceId}"
-                            ></h-search-message>`)}
-                        ${n(this._shouldShowHistory, () => html `<h-search-history
-                                    ${ref(this._searchHistoryRef)}
-                                    .history="${this._historyLimitedContent}"
-                                    .translations="${this._translations}"
-                                    active-item-id="${this._activeItemId}"
-                                    search-id="${this._id}"
-                                    module-instance-id="${this.moduleInstanceId}"
-                                ></h-search-history>`)}
-                        ${n(this._shouldShowResults, () => html `<h-search-results
-                                    ${ref(this._searchResultsRef)}
-                                    .results="${this._searchResults}"
-                                    search-phrase="${this._searchPhrase}"
-                                    .settings="${this.settings}"
-                                    locale="${this.locale}"
-                                    view="${this.view}"
-                                    .translations="${this._translations}"
-                                    active-item-id="${this._activeItemId}"
-                                    search-id="${this._id}"
-                                    module-instance-id="${this.moduleInstanceId}"
-                                ></h-search-results>`)}
-                    </div>
-                `, () => html `
-                <div
-                    class="${SEARCH_CLASS_NAMES.container}"
-                    id="${this._searchContentContainerId}"
-                    role="${this._containerRole}"
-                    hidden
-                ></div>`)}
+                            ></h-search-results>`)}
+                </div>`)}
         `;
     }
 };
@@ -596,16 +433,12 @@ __decorate([
 ], HSearch.prototype, "_historyContext", void 0);
 __decorate([
     state(),
-    __metadata("design:type", String)
+    __metadata("design:type", Number)
 ], 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);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.d.ts

@@ -1,4 +1,4 @@
-import { PropertyValues, TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HSearchClear extends PhoenixLightLitElement {
     private _btnController;
@@ -10,7 +10,6 @@ export declare class HSearchClear extends PhoenixLightLitElement {
     private _searchContextObserver;
     constructor();
     connectedCallback(): void;
-    protected updated(_changedProperties: PropertyValues): void;
     private _dispatchClearEvent;
     private _searchContextSetup;
     protected render(): TemplateResult;

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

@@ -28,11 +28,6 @@ let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
         this._searchContextSetup();
         this.addEventListener('click', this._dispatchClearEvent);
     }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        const newTabIndex = this._shouldShow ? '0' : '-1';
-        this.setAttribute('tabindex', newTabIndex);
-    }
     async _searchContextSetup() {
         try {
             this._searchContextConsumer = new ContextConsumerController(this);

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.d.ts

@@ -8,9 +8,9 @@ export declare class HSearchHistory extends PhoenixLightLitElement {
     private _historyContext$;
     private _historyContextObserver;
     buttonRef: Ref<HSearchHistoryLoadMore>;
+    private _loadMoreButtonId;
     history: TSearchHistoryItem[];
-    activeItemId: string;
-    searchId: string;
+    activeItemId: number;
     translations: Record<string, string>;
     moduleInstanceId: string;
     connectedCallback(): Promise<void>;

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

@@ -7,6 +7,7 @@ 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 { createRef, ref } from 'lit-html/directives/ref.js';
+import v4 from '../../../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { when as n } from '../../../../../../../../external/lit/external/lit-html/directives/when.js';
 import { SEARCH_CONTEXT_NAMES, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
 import { repeat as c } from '../../../../../../../../external/lit/external/lit-html/directives/repeat.js';
@@ -15,6 +16,7 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.buttonRef = createRef();
+        this._loadMoreButtonId = v4();
         this.history = [];
         this.translations = {};
     }
@@ -41,33 +43,23 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
         return n((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => html `<h3 class="${SEARCH_CLASS_NAMES.headline}">${this.translations.searchHistory}</h3>
 
                 <ul>
-                    ${c(this.history, (historyElement, index) => html `
-                        <li
-                            class="
-                                ${SEARCH_CLASS_NAMES.item}
-                                ${`${this.searchId}${index}` === this.activeItemId ? SEARCH_CLASS_NAMES.itemActive : ''}
-                            "
-                            role="row"
+                    ${c(this.history, (historyElement, index) => html ` <li
+                            class="${SEARCH_CLASS_NAMES.item} ${index === this.activeItemId ? SEARCH_CLASS_NAMES.itemActive : ''}"
                         >
                             <h-search-history-select
                                 item-label="${historyElement.label}"
                                 class="${SEARCH_CLASS_NAMES.historySelect}"
                                 data-suggested-value="${historyElement.label}"
-                                data-search-item-id="${this.searchId}${index}"
+                                data-search-item-id="${index}"
                                 module-instance-id="${this.moduleInstanceId}"
                                 aria-label=${this.translations.historyAriaLabel ? `${this.translations.historyAriaLabel} ${historyElement.label}` : undefined}
-                                role="gridcell"
                             >
                                 <h-icon icon-name="icon-clock"></h-icon>
 
                                 <span class="${SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
                             </h-search-history-select>
 
-                            <h-search-history-remove
-                                data-search-item-id="${this.searchId}${index}-grid"
-                                item-id="${historyElement.id}"
-                                role="gridcell"
-                            >
+                            <h-search-history-remove item-id="${historyElement.id}">
                                 <h-icon
                                     icon-name="icon-x"
                                     clickable=${true}
@@ -80,7 +72,7 @@ let HSearchHistory = class HSearchHistory extends PhoenixLightLitElement {
 
                 <h-search-history-load-more
                     class="${SEARCH_CLASS_NAMES.historyLoadMore}"
-                    data-search-item-id="${this.searchId}-loadmore"
+                    data-search-item-id="${this._loadMoreButtonId}"
                     ${ref(this.buttonRef)}
                 >
                     ${this.translations.loadMore}
@@ -92,13 +84,9 @@ __decorate([
     __metadata("design:type", Array)
 ], HSearchHistory.prototype, "history", void 0);
 __decorate([
-    property({ type: String, attribute: 'active-item-id' }),
-    __metadata("design:type", String)
+    property({ type: Number, attribute: 'active-item-id' }),
+    __metadata("design:type", Number)
 ], HSearchHistory.prototype, "activeItemId", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-id' }),
-    __metadata("design:type", String)
-], HSearchHistory.prototype, "searchId", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,2EAAmF;AAC7G;AACA,4BAA4B,6EAAqF;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts

@@ -7,5 +7,4 @@ export declare class HSearchInput extends PhoenixLightLitElement {
     private _setupInitialValue;
     private _deserializeInputPhrase;
     private _setupListeners;
-    private _setupAttributes;
 }