@shoper/phoenix_design_system 1.18.1 → 1.18.2-0

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

@@ -13,6 +13,7 @@ import { ContextProviderController } from '../../../core/context/context_provide
 import { BREAKPOINTS } from '../../../global_constants.js';
 import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
 import { MODAL_EVENTS } from '../../modal/modal_constants.js';
+import { SHEET_EVENTS } from '../../sheet/sheet_constants.js';
 import { when as n } from '../../../../../../external/lit-html/directives/when.js';
 import { DEFAULT_VIEW, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CONFIGURATION, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
 
@@ -20,6 +21,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.view = DEFAULT_VIEW;
+        this.isFlagEnabled = false;
+        this.displayMode = 'dropdown';
         this._id = v4();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
         this._searchContentContainerId = v4();
@@ -40,7 +43,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this._translations = {};
         this._containerRole = 'grid';
         this._bindKeys = (ev) => {
-            if (this.popup) {
+            if (this.isFlagEnabled) {
+                if (this.displayMode !== 'dropdown') {
+                    this._bindOverlayKeys(ev);
+                }
+            }
+            else if (this.popup) {
                 this._bindPopupKeys(ev);
             }
             else {
@@ -125,6 +133,28 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                     break;
             }
         };
+        this._bindOverlayKeys = (ev) => {
+            var _a;
+            switch (ev.key) {
+                case 'Enter':
+                    ev.preventDefault();
+                    const $searchItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('[data-search-item-id]');
+                    if (!$searchItem)
+                        return;
+                    this._handleChooseSearchItem();
+                    break;
+                case 'Escape':
+                    ev.preventDefault();
+                    const eventName = this.displayMode === 'popup' ? MODAL_EVENTS.close : SHEET_EVENTS.close;
+                    this.emitCustomEvent(eventName);
+                    const $search = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
+                    const $searchOpener = $search && $search.querySelector('[aria-haspopup="dialog"]');
+                    $searchOpener === null || $searchOpener === void 0 ? void 0 : $searchOpener.focus();
+                    this._shouldShowMessage = false;
+                    this._hideHistorySuggestionsAndResults();
+                    break;
+            }
+        };
         this._handleSearchTabNavigation = (ev) => {
             if (ev.key !== 'Tab')
                 return;
@@ -284,18 +314,34 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             this._resetSearchView();
         };
         this._switchTypeOfSearchView = () => {
-            if (!this._isSuggesterLayerVisible() && !this.popup)
+            var _a;
+            if (this.isFlagEnabled) {
+                if (!this._isSuggesterLayerVisible() && this.displayMode === 'dropdown')
+                    return;
+            }
+            else if (!this._isSuggesterLayerVisible() && !this.popup)
                 return;
+            const shouldOpenMobileView = this.isFlagEnabled ? this.displayMode === 'dropdown' : !this.popup;
             if (window.innerWidth > BREAKPOINTS.sm) {
                 const hasBeenOpened = this.classList.contains(SEARCH_CLASS_NAMES.mobileOpened);
                 this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
-                if (hasBeenOpened && this.popup) {
+                const isOverlay = this.isFlagEnabled ? this.displayMode !== 'dropdown' : this.popup;
+                if (hasBeenOpened && isOverlay) {
                     const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
-                    const $searchModal = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('h-modal');
-                    $searchModal === null || $searchModal === void 0 ? void 0 : $searchModal.open();
+                    if (this.isFlagEnabled) {
+                        const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
+                        const $overlay = this.querySelector(`[hidden][id="${searchOverlayTriggerName}"]`);
+                        if (!searchOverlayTriggerName || !$overlay)
+                            return;
+                        $overlay === null || $overlay === void 0 ? void 0 : $overlay.open();
+                    }
+                    else {
+                        const $searchModal = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('h-modal');
+                        $searchModal === null || $searchModal === void 0 ? void 0 : $searchModal.open();
+                    }
                 }
             }
-            else if (!this.popup) {
+            else if (shouldOpenMobileView) {
                 this._openMobileView();
             }
         };
@@ -411,7 +457,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
             searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(SEARCH_CLASS_NAMES.outline);
             const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
             this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
-            if (!this.popup) {
+            const shouldShowDropdown = this.isFlagEnabled ? this.displayMode === 'dropdown' : !this.popup;
+            if (shouldShowDropdown) {
                 document.addEventListener('keyup', this._handleSearchTabNavigation);
             }
             document.body.addEventListener('keydown', this._bindKeys);
@@ -529,7 +576,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         }
     }
     _handleChooseSearchItem() {
-        const $activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
+        const $activeSearchItem = this.isFlagEnabled ? (this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement) : this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
         if (!$activeSearchItem)
             return;
         const $linkElement = $activeSearchItem.querySelector('a');
@@ -547,7 +594,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
         this._setActiveItemId(`${this._id}-1`);
         const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
         searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
-        if (!this.popup)
+        const shouldHideHistorySuggestionsAndResults = this.isFlagEnabled ? this.displayMode === 'dropdown' : !this.popup;
+        if (shouldHideHistorySuggestionsAndResults)
             this._hideHistorySuggestionsAndResults();
         this._removeSearchKeyboardNavigation();
     }
@@ -624,6 +672,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
                                     active-item-id="${this._activeItemId}"
                                     search-id="${this._id}"
                                     module-instance-id="${this.moduleInstanceId}"
+                                    is-flag-enabled="${this.isFlagEnabled}"
                                 ></h-search-results>`)}
                     </div>
                 `, () => html `
@@ -648,10 +697,18 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HSearch.prototype, "locale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearch.prototype, "isFlagEnabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'popup' }),
     __metadata("design:type", Boolean)
 ], HSearch.prototype, "popup", void 0);
+__decorate([
+    property({ type: String, attribute: 'display-mode' }),
+    __metadata("design:type", String)
+], HSearch.prototype, "displayMode", void 0);
 __decorate([
     property({ type: String, attribute: 'module-instance-id' }),
     __metadata("design:type", String)

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;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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_types.d.ts

@@ -92,3 +92,4 @@ export declare type TSearchFocusInEventDetail = {
     searchPhrase: string;
     relatedTarget: EventTarget | null;
 };
+export declare type TSearchDisplayMode = 'dropdown' | 'popup' | 'sidebar';

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

@@ -1,9 +1,12 @@
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
 export declare class HSearchInput extends PhoenixLightLitElement {
     input: HTMLInputElement | null;
     moduleInstanceId: string;
+    isFlagEnabled: boolean;
     private _isSearchPhraseCleared;
     connectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
     private _setupInitialValue;
     private _deserializeInputPhrase;
     private _setupListeners;

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

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+import 'lit';
 import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
@@ -8,6 +9,7 @@ import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES }
 let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.isFlagEnabled = false;
         this._isSearchPhraseCleared = false;
         this._setupAttributes = () => {
             var _a, _b, _c, _d;
@@ -28,10 +30,18 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
         if (!this.input) {
             throw new Error('Search input not found');
         }
-        this._setupInitialValue();
+        if (!this.isFlagEnabled) {
+            this._setupInitialValue();
+        }
         this._setupListeners();
         this._setupAttributes();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this.isFlagEnabled) {
+            this._setupInitialValue();
+        }
+    }
     _setupInitialValue() {
         const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
         const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
@@ -127,6 +137,10 @@ __decorate([
     property({ type: String, attribute: 'module-instance-id' }),
     __metadata("design:type", String)
 ], HSearchInput.prototype, "moduleInstanceId", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearchInput.prototype, "isFlagEnabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Boolean)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_producer_content.d.ts

@@ -9,6 +9,7 @@ export declare class HSearchProducerContent extends PhoenixLightLitElement {
     translations: Record<string, string>;
     searchPhrase: string;
     producerAriaLabel?: string;
+    isFlagEnabled: boolean;
     private _getMatchedPhrase;
     protected render(): TemplateResult;
 }

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

@@ -13,6 +13,7 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
         this.initialItemIds = {};
         this.translations = {};
         this.searchPhrase = '';
+        this.isFlagEnabled = false;
     }
     _getMatchedPhrase(phrase) {
         return phrase.toLowerCase().startsWith(this.searchPhrase)
@@ -33,7 +34,7 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
                 : ''}"
                         data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
                         aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
-                        tabindex="0"
+                        tabindex=${this.isFlagEnabled ? (this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined) : 0}
                         role="option"
                     >
                         <a
@@ -78,6 +79,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HSearchProducerContent.prototype, "producerAriaLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearchProducerContent.prototype, "isFlagEnabled", void 0);
 HSearchProducerContent = __decorate([
     phoenixCustomElement(SEARCH_COMPONENT_NAMES.searchProducerContent)
 ], HSearchProducerContent);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_product_content.d.ts

@@ -9,6 +9,7 @@ export declare class HSearchProductContent extends PhoenixLightLitElement {
     initialItemIds: Record<string, number>;
     translations: Record<string, string>;
     productAriaLabel?: string;
+    isFlagEnabled: boolean;
     getProductRateHtml: (productRate: number) => TemplateResult;
     private _getShortenProductName;
     private _getPercentPromotion;

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

@@ -12,6 +12,7 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
         super(...arguments);
         this.initialItemIds = {};
         this.translations = {};
+        this.isFlagEnabled = false;
         this.getProductRateHtml = (productRate) => {
             return html `
             <div class="${SEARCH_CLASS_NAMES.starScore}">
@@ -46,7 +47,7 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
                 : ''}"
                         data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
                         aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
-                        tabindex="0"
+                        tabindex=${this.isFlagEnabled ? (this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined) : 0}
                         role="option"
                     >
                         <a
@@ -115,6 +116,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HSearchProductContent.prototype, "productAriaLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearchProductContent.prototype, "isFlagEnabled", void 0);
 HSearchProductContent = __decorate([
     phoenixCustomElement(SEARCH_COMPONENT_NAMES.searchProductContent)
 ], HSearchProductContent);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_results.d.ts

@@ -13,6 +13,7 @@ export declare class HSearchResults extends PhoenixLightLitElement {
     searchId: string;
     translations: Record<string, string>;
     moduleInstanceId: string;
+    isFlagEnabled: boolean;
     private _productPage;
     private _getInitialItemsIds;
     private _isProductInTheCategory;

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

@@ -15,6 +15,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
         this._goToProductsForButtonId = v4();
         this.searchPhrase = '';
         this.translations = {};
+        this.isFlagEnabled = false;
         this._productPage = 1;
         this._getInitialItemsIds = () => {
             const suggestionInCategoryInitialItemId = this.results.suggestions.length;
@@ -73,6 +74,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                         view="${this.view}"
                         module-instance-id="${this.moduleInstanceId}"
                         .suggestionAriaLabel=${this.settings.suggesterItemAriaLabel}
+                        is-flag-enabled="${this.isFlagEnabled}"
                     >
                     </h-search-suggestion-content>`)}
                 ${n((_c = this.results.products) === null || _c === void 0 ? void 0 : _c.length, () => html `
@@ -85,6 +87,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                                 .initialItemIds="${this._getInitialItemsIds()}"
                                 .translations="${this.translations}"
                                 .productAriaLabel=${this.settings.suggesterProductItemAriaLabel}
+                                is-flag-enabled="${this.isFlagEnabled}"
                             ></h-search-product-content>
 
                             ${n(this.settings.isLoadingMoreSearchResultsEnabled, () => n(this._areMoreProductsAvailable(), () => html `<button
@@ -115,6 +118,7 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
                             .translations="${this.translations}"
                             search-phrase="${this.searchPhrase}"
                             .producerAriaLabel=${this.settings.suggesterProducerItemAriaLabel}
+                            is-flag-enabled="${this.isFlagEnabled}"
                         ></h-search-producer-content>`)}
             `;
         });
@@ -156,6 +160,10 @@ __decorate([
     property({ type: String, attribute: 'module-instance-id' }),
     __metadata("design:type", String)
 ], HSearchResults.prototype, "moduleInstanceId", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearchResults.prototype, "isFlagEnabled", void 0);
 __decorate([
     state(),
     __metadata("design:type", Number)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_suggestion_content.d.ts

@@ -14,6 +14,7 @@ export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
     suggestionAriaLabel?: string;
     private _searchPhrase;
     private _suggestionsData;
+    isFlagEnabled: boolean;
     connectedCallback(): Promise<void>;
     private _setupSuggestionData;
     private _handleSuggestion;

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

@@ -16,6 +16,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
         this.translations = {};
         this._searchPhrase = '';
         this._suggestionsData = [];
+        this.isFlagEnabled = false;
         this._updateSearchPhrase = (ev, suggestion) => {
             ev.stopPropagation();
             this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.updateSearchPhrase, suggestion);
@@ -111,7 +112,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
                                 aria-label="${this.suggestionAriaLabel ?
             `${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
             ''}"
-                                tabindex="0"
+                                tabindex=${this.isFlagEnabled ? (this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined) : 0}
                                 role="option"
                             >
                                 ${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
@@ -174,6 +175,10 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], HSearchSuggestionContent.prototype, "_suggestionsData", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSearchSuggestionContent.prototype, "isFlagEnabled", void 0);
 HSearchSuggestionContent = __decorate([
     phoenixCustomElement(SEARCH_COMPONENT_NAMES.searchSuggestionContent)
 ], HSearchSuggestionContent);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/scroller/scroller-pause.js

@@ -1,28 +1,30 @@
-import { __decorate, __metadata } from "tslib";
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
-import { SCROLLER_CLASS_NAME, SCROLLER_EVENTS } from './scroller_constants';
-let HScrollerPause = class HScrollerPause extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this._dispatchScrollerEvent = () => {
-            this.dispatchEvent(new CustomEvent(SCROLLER_EVENTS.pause, {
-                bubbles: true
-            }));
-        };
-        this.slot = this.hasAttribute('slot') ? this.slot : 'pause';
-        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
-        this._btnController = new BtnController(this, this._dispatchScrollerEvent);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener(SCROLLER_EVENTS.click, this._dispatchScrollerEvent);
-    }
-};
-HScrollerPause = __decorate([
-    phoenixCustomElement('h-scroller-pause'),
-    __metadata("design:paramtypes", [])
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
+import { SCROLLER_EVENTS, SCROLLER_CLASS_NAME } from './scroller_constants.js';
+
+let HScrollerPause = class HScrollerPause extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchScrollerEvent = () => {
+            this.dispatchEvent(new CustomEvent(SCROLLER_EVENTS.pause, {
+                bubbles: true
+            }));
+        };
+        this.slot = this.hasAttribute('slot') ? this.slot : 'pause';
+        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
+        this._btnController = new BtnController(this, this._dispatchScrollerEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(SCROLLER_EVENTS.click, this._dispatchScrollerEvent);
+    }
+};
+HScrollerPause = __decorate([
+    phoenixCustomElement('h-scroller-pause'),
+    __metadata("design:paramtypes", [])
 ], HScrollerPause);
+
 export { HScrollerPause };
-//# sourceMappingURL=scroller-pause.js.map
+//# sourceMappingURL=scroller-pause.js.map

package/build/esm/packages/phoenix/src/components/scroller/scroller-pause.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroller-pause.js","sourceRoot":"","sources":["../../../../../../../src/components/scroller/scroller-pause.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5E,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAGtD;QACI,KAAK,EAAE,CAAC;QAcJ,2BAAsB,GAAG,GAAS,EAAE;YACxC,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,eAAe,CAAC,KAAK,EAAE;gBACnC,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;QACN,CAAC,CAAC;QAlBE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5D,IAAI,CAAC,SAAS,GAAG,GAAG,mBAAmB,CAAC,qBAAqB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;QAElF,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC/E,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC9E,CAAC;CASJ,CAAA;AAzBY,cAAc;IAD1B,oBAAoB,CAAC,kBAAkB,CAAC;;GAC5B,cAAc,CAyB1B;SAzBY,cAAc"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/scroller/scroller-play.js

@@ -1,28 +1,30 @@
-import { __decorate, __metadata } from "tslib";
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
-import { SCROLLER_CLASS_NAME, SCROLLER_EVENTS } from './scroller_constants';
-let HScrollerPlay = class HScrollerPlay extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this._dispatchScrollerEvent = () => {
-            this.dispatchEvent(new CustomEvent(SCROLLER_EVENTS.play, {
-                bubbles: true
-            }));
-        };
-        this.slot = this.hasAttribute('slot') ? this.slot : 'play';
-        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPlay} ${this.className}`;
-        this._btnController = new BtnController(this, this._dispatchScrollerEvent);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener(SCROLLER_EVENTS.click, this._dispatchScrollerEvent);
-    }
-};
-HScrollerPlay = __decorate([
-    phoenixCustomElement('h-scroller-play'),
-    __metadata("design:paramtypes", [])
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
+import { SCROLLER_EVENTS, SCROLLER_CLASS_NAME } from './scroller_constants.js';
+
+let HScrollerPlay = class HScrollerPlay extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchScrollerEvent = () => {
+            this.dispatchEvent(new CustomEvent(SCROLLER_EVENTS.play, {
+                bubbles: true
+            }));
+        };
+        this.slot = this.hasAttribute('slot') ? this.slot : 'play';
+        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPlay} ${this.className}`;
+        this._btnController = new BtnController(this, this._dispatchScrollerEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(SCROLLER_EVENTS.click, this._dispatchScrollerEvent);
+    }
+};
+HScrollerPlay = __decorate([
+    phoenixCustomElement('h-scroller-play'),
+    __metadata("design:paramtypes", [])
 ], HScrollerPlay);
+
 export { HScrollerPlay };
-//# sourceMappingURL=scroller-play.js.map
+//# sourceMappingURL=scroller-play.js.map

package/build/esm/packages/phoenix/src/components/scroller/scroller-play.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroller-play.js","sourceRoot":"","sources":["../../../../../../../src/components/scroller/scroller-play.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5E,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,sBAAsB;IAGrD;QACI,KAAK,EAAE,CAAC;QAcJ,2BAAsB,GAAG,GAAS,EAAE;YACxC,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,eAAe,CAAC,IAAI,EAAE;gBAClC,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;QACN,CAAC,CAAC;QAlBE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3D,IAAI,CAAC,SAAS,GAAG,GAAG,mBAAmB,CAAC,oBAAoB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjF,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC/E,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC9E,CAAC;CASJ,CAAA;AAzBY,aAAa;IADzB,oBAAoB,CAAC,iBAAiB,CAAC;;GAC3B,aAAa,CAyBzB;SAzBY,aAAa"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/scroller/scroller_constants.js

@@ -6,7 +6,11 @@ const SCROLLER_EVENTS = {
 const SCROLLER_CONTROLS_NAMES = {
     scrollerControlsPlay: 'h-scroller-play',
     scrollerControlsPause: 'h-scroller-pause'
+};
+const SCROLLER_CLASS_NAME = {
+    scrollerControlsPlay: 'scroller__controls_play',
+    scrollerControlsPause: 'scroller__controls_pause'
 };
 
-export { SCROLLER_CONTROLS_NAMES, SCROLLER_EVENTS };
+export { SCROLLER_CLASS_NAME, SCROLLER_CONTROLS_NAMES, SCROLLER_EVENTS };
 //# sourceMappingURL=scroller_constants.js.map

package/build/esm/packages/phoenix/src/components/scroller/scroller_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/sheet/sheet.js

@@ -195,7 +195,9 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
         });
     }
     _dispatchSheetOpenedEvent() {
-        this.emitCustomEvent(SHEET_EVENTS.opened);
+        this.emitCustomEvent(SHEET_EVENTS.opened, {
+            detail: this
+        });
         this._backdropController.show();
         this._addInertToBodyChildrenElements();
     }

package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}