npm - @shoper/phoenix_design_system - Versions diffs - 1.18.12 → 1.18.14 - Mend

@shoper/phoenix_design_system 1.18.12 → 1.18.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED Viewed

@@ -18,6 +18,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
     constructor() {
         super();
         this.transitionName = 'accordion-toggle';
+        this.isDevAccordionHeightFixFlagEnabled = false;
         this._resizeDebounceTimer = null;
         this._mutationDebounceTimer = null;
         this._mutationObserver = null;
@@ -48,18 +49,23 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
                 window.clearTimeout(this._mutationDebounceTimer);
             }
             this._mutationDebounceTimer = window.setTimeout(() => {
-                requestAnimationFrame(() => {
-                    this.style.height = 'auto';
+                if (this.isDevAccordionHeightFixFlagEnabled) {
+                    this._forceHeightRecalculation();
+                }
+                else {
                     requestAnimationFrame(() => {
-                        this._setOriginalHeightValue();
-                        if (this.hidden) {
-                            this.style.height = '0px';
-                        }
-                        else {
-                            this.style.height = this._originalHeight;
-                        }
+                        this.style.height = 'auto';
+                        requestAnimationFrame(() => {
+                            this._setOriginalHeightValue();
+                            if (this.hidden) {
+                                this.style.height = '0px';
+                            }
+                            else {
+                                this.style.height = this._originalHeight;
+                            }
+                        });
                     });
-                });
+                }
             }, MUTATION_DEBOUNCE_MS);
         };
         this._setOriginalHeightValue = () => {
@@ -90,6 +96,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         };
         this.setAttribute('role', 'region');
         this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
+        this._boundHandleImageLoad = this._handleImageLoad.bind(this);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -98,6 +105,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         this._subscribeObserver();
         window.addEventListener('resize', this._handleResize, { passive: true });
         this.addEventListener('transitionend', this._boundHandleTransitionEnd);
+        if (this.isDevAccordionHeightFixFlagEnabled) {
+            this._setupImageLoadListeners();
+        }
     }
     firstUpdated(props) {
         super.firstUpdated(props);
@@ -113,6 +123,32 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         this._mutationObserver = new MutationObserver(this._handleMutation);
         this._mutationObserver.observe(this, { childList: true, subtree: true });
     }
+    _forceHeightRecalculation() {
+        requestAnimationFrame(() => {
+            this.style.height = 'auto';
+            requestAnimationFrame(() => {
+                this._setOriginalHeightValue();
+                if (this.hidden) {
+                    this.style.height = '0px';
+                }
+                else {
+                    this.style.height = this._originalHeight;
+                }
+            });
+        });
+    }
+    _setupImageLoadListeners() {
+        const images = this.querySelectorAll('img');
+        images.forEach((img) => {
+            if (!img.complete) {
+                img.addEventListener('load', this._boundHandleImageLoad, { once: true });
+                img.addEventListener('error', this._boundHandleImageLoad, { once: true });
+            }
+        });
+    }
+    _handleImageLoad() {
+        this._forceHeightRecalculation();
+    }
     _setHeight(height) {
         this.style.height = height;
     }
@@ -125,6 +161,13 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
         super.disconnectedCallback();
         (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
         (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        if (this.isDevAccordionHeightFixFlagEnabled) {
+            const images = this.querySelectorAll('img');
+            images.forEach((img) => {
+                img.removeEventListener('load', this._boundHandleImageLoad);
+                img.removeEventListener('error', this._boundHandleImageLoad);
+            });
+        }
         window.removeEventListener('resize', this._handleResize);
         this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
         if (this._resizeDebounceTimer !== null) {
@@ -139,6 +182,10 @@ tslib_es6.__decorate([
     decorators.property(),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HAccordionContent.prototype, "transitionName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HAccordionContent.prototype, "isDevAccordionHeightFixFlagEnabled", void 0);
 exports.HAccordionContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/search/search.js CHANGED Viewed

@@ -25,7 +25,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     constructor() {
         super(...arguments);
         this.view = search_constants.DEFAULT_VIEW;
+        this.isSearchIconFixEnabled = false;
         this.displayMode = 'dropdown';
+        this._togglerElement = null;
         this._id = v4['default']();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
         this._searchContentContainerId = v4['default']();
@@ -170,8 +172,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         };
         this._preventScrollingOnSearchContentBrowsing = (ev) => {
             var _a;
-            const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
-            const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
+            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();
@@ -244,12 +246,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             this._handleBackwardFocus($gridSearchItems);
         };
         this._findSearchItemsContainer = () => {
-            const containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            return containers.find(container => container && !utilities.UiDomUtils.isElementEmpty(container));
+            const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
+            return containers.find((container) => container && !utilities.UiDomUtils.isElementEmpty(container));
         };
         this._handleBackwardFocus = ($searchItems) => {
             var _a;
@@ -346,6 +344,21 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                 (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
             }
         };
+        this._handleOpenSearch = () => {
+            this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+            const shouldShowMessage = this._searchPhrase !== '';
+            this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
+            const $searchInput = this.querySelector(`
+            ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
+        `);
+            $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
+        };
+        this._handleOpenSearchWithKeyboard = (ev) => {
+            if (ev.code !== 'Enter')
+                return;
+            ev.preventDefault();
+            this._handleOpenSearch();
+        };
     }
     async connectedCallback() {
         super.connectedCallback();
@@ -381,7 +394,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
         this._setupInitialSearchPhrase();
         this._setupListeners();
-        this._setupAriaAttributes();
+        this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
     }
     disconnectedCallback() {
         var _a;
@@ -391,6 +404,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
         window.removeEventListener('resize', this._switchTypeOfSearchView);
         (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
+        if (this.isSearchIconFixEnabled)
+            this._teardownToggler();
     }
     _setupContext() {
         this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -548,7 +563,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         }
     }
     _handleChooseSearchItem($el) {
-        const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
+        const $activeSearchItem = this.displayMode === 'dropdown'
+            ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
+            : document.activeElement;
         if (!$activeSearchItem)
             return;
         const $linkElement = $activeSearchItem.querySelector('a');
@@ -573,49 +590,39 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     _submitSearchPhrase(searchPhrase) {
         this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
     }
-    _handleOpenSearch() {
-        this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
-        const shouldShowMessage = this._searchPhrase !== '';
-        this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
-        const $searchInput = this.querySelector(`
-            ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
-        `);
-        $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
+    _setupToggler() {
+        this._togglerElement = this.querySelector('.js-search-toggler');
+        if (!this._togglerElement)
+            return;
+        this._togglerElement.addEventListener('click', this._handleOpenSearch);
+        this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
     }
-    _handleOpenSearchWithKeyboard(ev) {
-        if (ev.code !== 'Enter')
+    _teardownToggler() {
+        if (!this._togglerElement)
             return;
-        ev.preventDefault();
-        this._handleOpenSearch();
+        this._togglerElement.removeEventListener('click', this._handleOpenSearch);
+        this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
     }
     render() {
         super.render();
         return lit.html `
-            <div
-                class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
-                tabindex="0"
-                aria-haspopup="dialog"
-                @click=${this._handleOpenSearch}
-                @keyup=${this._handleOpenSearchWithKeyboard}
-            >
-                ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
-                        <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
-                            ${this._translations.openSearchButtonAriaLabel}
-                        </span>
-                    `)}
-                <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
-                <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
-                    ${this._translations.search}
-                </div>
-            </div>
+            ${when.when(!this.isSearchIconFixEnabled, () => lit.html ` <div
+                    class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
+                    tabindex="0"
+                    aria-haspopup="dialog"
+                    @click=${this._handleOpenSearch}
+                    @keyup=${this._handleOpenSearchWithKeyboard}
+                >
+                    ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
+                            <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
+                                ${this._translations.openSearchButtonAriaLabel}
+                            </span>
+                        `)}
+                    <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
+                    <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
+                </div>`)}
             ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
-                    <div
-                        class="${search_constants.SEARCH_CLASS_NAMES.container}"
-                        id="${this._searchContentContainerId}"
-                        role="${this._containerRole}"
-                    >
+                    <div class="${search_constants.SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
                         ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
                                 ${ref_js.ref(this._searchMessageRef)}
                                 .history="${this._historyLimitedContent}"
@@ -645,8 +652,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                                     module-instance-id="${this.moduleInstanceId}"
                                 ></h-search-results>`)}
                     </div>
-                `, () => lit.html `
-                <div
+                `, () => lit.html ` <div
                     class="${search_constants.SEARCH_CLASS_NAMES.container}"
                     id="${this._searchContentContainerId}"
                     role="${this._containerRole}"
@@ -667,6 +673,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSearch.prototype, "locale", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSearch.prototype, "isSearchIconFixEnabled", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'display-mode' }),
     tslib_es6.__metadata("design:type", String)

package/build/cjs/packages/phoenix/src/components/form/search/search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/accordion/accordion_content.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 import { PropertyValues } from 'lit';
 export declare class HAccordionContent extends PhoenixLightLitElement {
     transitionName: string;
+    isDevAccordionHeightFixFlagEnabled: boolean;
     private _transitionController;
     private _contextConsumer;
     private _accordionGroupProps;
@@ -11,6 +12,7 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
     private _mutationDebounceTimer;
     private _mutationObserver;
     private _boundHandleTransitionEnd;
+    private _boundHandleImageLoad;
     constructor();
     connectedCallback(): void;
     firstUpdated(props: PropertyValues): void;
@@ -18,6 +20,9 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
     private _setStylingOptions;
     private _subscribeObserver;
     private _handleMutation;
+    private _forceHeightRecalculation;
+    private _setupImageLoadListeners;
+    private _handleImageLoad;
     private _setOriginalHeightValue;
     private _expand;
     private _handleTransitionEnd;

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED Viewed

@@ -14,6 +14,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
     constructor() {
         super();
         this.transitionName = 'accordion-toggle';
+        this.isDevAccordionHeightFixFlagEnabled = false;
         this._resizeDebounceTimer = null;
         this._mutationDebounceTimer = null;
         this._mutationObserver = null;
@@ -44,18 +45,23 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
                 window.clearTimeout(this._mutationDebounceTimer);
             }
             this._mutationDebounceTimer = window.setTimeout(() => {
-                requestAnimationFrame(() => {
-                    this.style.height = 'auto';
+                if (this.isDevAccordionHeightFixFlagEnabled) {
+                    this._forceHeightRecalculation();
+                }
+                else {
                     requestAnimationFrame(() => {
-                        this._setOriginalHeightValue();
-                        if (this.hidden) {
-                            this.style.height = '0px';
-                        }
-                        else {
-                            this.style.height = this._originalHeight;
-                        }
+                        this.style.height = 'auto';
+                        requestAnimationFrame(() => {
+                            this._setOriginalHeightValue();
+                            if (this.hidden) {
+                                this.style.height = '0px';
+                            }
+                            else {
+                                this.style.height = this._originalHeight;
+                            }
+                        });
                     });
-                });
+                }
             }, MUTATION_DEBOUNCE_MS);
         };
         this._setOriginalHeightValue = () => {
@@ -86,6 +92,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         };
         this.setAttribute('role', 'region');
         this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
+        this._boundHandleImageLoad = this._handleImageLoad.bind(this);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -94,6 +101,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         this._subscribeObserver();
         window.addEventListener('resize', this._handleResize, { passive: true });
         this.addEventListener('transitionend', this._boundHandleTransitionEnd);
+        if (this.isDevAccordionHeightFixFlagEnabled) {
+            this._setupImageLoadListeners();
+        }
     }
     firstUpdated(props) {
         super.firstUpdated(props);
@@ -109,6 +119,32 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         this._mutationObserver = new MutationObserver(this._handleMutation);
         this._mutationObserver.observe(this, { childList: true, subtree: true });
     }
+    _forceHeightRecalculation() {
+        requestAnimationFrame(() => {
+            this.style.height = 'auto';
+            requestAnimationFrame(() => {
+                this._setOriginalHeightValue();
+                if (this.hidden) {
+                    this.style.height = '0px';
+                }
+                else {
+                    this.style.height = this._originalHeight;
+                }
+            });
+        });
+    }
+    _setupImageLoadListeners() {
+        const images = this.querySelectorAll('img');
+        images.forEach((img) => {
+            if (!img.complete) {
+                img.addEventListener('load', this._boundHandleImageLoad, { once: true });
+                img.addEventListener('error', this._boundHandleImageLoad, { once: true });
+            }
+        });
+    }
+    _handleImageLoad() {
+        this._forceHeightRecalculation();
+    }
     _setHeight(height) {
         this.style.height = height;
     }
@@ -121,6 +157,13 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
         super.disconnectedCallback();
         (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
         (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        if (this.isDevAccordionHeightFixFlagEnabled) {
+            const images = this.querySelectorAll('img');
+            images.forEach((img) => {
+                img.removeEventListener('load', this._boundHandleImageLoad);
+                img.removeEventListener('error', this._boundHandleImageLoad);
+            });
+        }
         window.removeEventListener('resize', this._handleResize);
         this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
         if (this._resizeDebounceTimer !== null) {
@@ -135,6 +178,10 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], HAccordionContent.prototype, "transitionName", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
+    __metadata("design:type", Boolean)
+], HAccordionContent.prototype, "isDevAccordionHeightFixFlagEnabled", void 0);
 HAccordionContent = __decorate([
     phoenixCustomElement('h-accordion-content'),
     __metadata("design:paramtypes", [])

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export declare class HSearch extends PhoenixLightLitElement {
     settings: TSearchSettings;
     view: string;
     locale: string;
+    isSearchIconFixEnabled: boolean;
     displayMode: TSearchDisplayMode;
     moduleInstanceId: string;
     private _historyContextProvider;
@@ -14,6 +15,7 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _searchInput;
     private _inputField;
     private _searchForm;
+    private _togglerElement;
     private _id;
     private _openSearchButtonAriaLabelId;
     private _searchContentContainerId;
@@ -80,5 +82,7 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _setupAriaAttributes;
     private _handleOpenSearch;
     private _handleOpenSearchWithKeyboard;
+    private _setupToggler;
+    private _teardownToggler;
     protected render(): TemplateResult;
 }

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

@@ -21,7 +21,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.view = DEFAULT_VIEW;
+        this.isSearchIconFixEnabled = false;
         this.displayMode = 'dropdown';
+        this._togglerElement = null;
         this._id = v4();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
         this._searchContentContainerId = v4();
@@ -166,8 +168,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         };
         this._preventScrollingOnSearchContentBrowsing = (ev) => {
             var _a;
-            const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
-            const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
+            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();
@@ -240,12 +242,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             this._handleBackwardFocus($gridSearchItems);
         };
         this._findSearchItemsContainer = () => {
-            const containers = [
-                this._searchHistoryRef.value,
-                this._searchResultsRef.value,
-                this._searchMessageRef.value
-            ];
-            return containers.find(container => container && !UiDomUtils.isElementEmpty(container));
+            const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
+            return containers.find((container) => container && !UiDomUtils.isElementEmpty(container));
         };
         this._handleBackwardFocus = ($searchItems) => {
             var _a;
@@ -342,6 +340,21 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                 (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
             }
         };
+        this._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();
+        };
+        this._handleOpenSearchWithKeyboard = (ev) => {
+            if (ev.code !== 'Enter')
+                return;
+            ev.preventDefault();
+            this._handleOpenSearch();
+        };
     }
     async connectedCallback() {
         super.connectedCallback();
@@ -377,7 +390,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
         this._setupInitialSearchPhrase();
         this._setupListeners();
-        this._setupAriaAttributes();
+        this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
     }
     disconnectedCallback() {
         var _a;
@@ -387,6 +400,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
         window.removeEventListener('resize', this._switchTypeOfSearchView);
         (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
+        if (this.isSearchIconFixEnabled)
+            this._teardownToggler();
     }
     _setupContext() {
         this._historyContextProvider = new ContextProviderController(this);
@@ -544,7 +559,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         }
     }
     _handleChooseSearchItem($el) {
-        const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
+        const $activeSearchItem = this.displayMode === 'dropdown'
+            ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
+            : document.activeElement;
         if (!$activeSearchItem)
             return;
         const $linkElement = $activeSearchItem.querySelector('a');
@@ -569,49 +586,39 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     _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();
+    _setupToggler() {
+        this._togglerElement = this.querySelector('.js-search-toggler');
+        if (!this._togglerElement)
+            return;
+        this._togglerElement.addEventListener('click', this._handleOpenSearch);
+        this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
     }
-    _handleOpenSearchWithKeyboard(ev) {
-        if (ev.code !== 'Enter')
+    _teardownToggler() {
+        if (!this._togglerElement)
             return;
-        ev.preventDefault();
-        this._handleOpenSearch();
+        this._togglerElement.removeEventListener('click', this._handleOpenSearch);
+        this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
     }
     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"
-                tabindex="0"
-                aria-haspopup="dialog"
-                @click=${this._handleOpenSearch}
-                @keyup=${this._handleOpenSearchWithKeyboard}
-            >
-                ${n(this._translations.openSearchButtonAriaLabel, () => html `
-                        <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
-                            ${this._translations.openSearchButtonAriaLabel}
-                        </span>
-                    `)}
-                <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
-                <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
-                    ${this._translations.search}
-                </div>
-            </div>
+            ${n(!this.isSearchIconFixEnabled, () => html ` <div
+                    class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
+                    tabindex="0"
+                    aria-haspopup="dialog"
+                    @click=${this._handleOpenSearch}
+                    @keyup=${this._handleOpenSearchWithKeyboard}
+                >
+                    ${n(this._translations.openSearchButtonAriaLabel, () => html `
+                            <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
+                                ${this._translations.openSearchButtonAriaLabel}
+                            </span>
+                        `)}
+                    <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
+                    <div ${ref(this._openSearchButtonLabelRef)} 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}"
-                    >
+                    <div class="${SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
                         ${n(this._shouldShowMessage, () => html `<h-search-message
                                 ${ref(this._searchMessageRef)}
                                 .history="${this._historyLimitedContent}"
@@ -641,8 +648,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                                     module-instance-id="${this.moduleInstanceId}"
                                 ></h-search-results>`)}
                     </div>
-                `, () => html `
-                <div
+                `, () => html ` <div
                     class="${SEARCH_CLASS_NAMES.container}"
                     id="${this._searchContentContainerId}"
                     role="${this._containerRole}"
@@ -663,6 +669,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HSearch.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "isSearchIconFixEnabled", void 0);
 __decorate([
     property({ type: String, attribute: 'display-mode' }),
     __metadata("design:type", String)

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

	@@ -1 +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;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.18.12",
+  "version": "1.18.14",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",