@shoper/phoenix_design_system 1.4.3-9 → 1.5.0

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop.js

@@ -8,6 +8,7 @@ var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var backdrop_constants = require('./backdrop_constants.js');
+var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
 
 exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -22,16 +23,20 @@ exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLig
             }
         };
         this._show = () => {
-            this._backdropLayerCounter += 1;
-            this.visible = true;
+            this._transitionController.show(() => {
+                this._backdropLayerCounter += 1;
+                this.visible = true;
+            });
         };
         this._hide = () => {
-            this._backdropLayerCounter -= 1;
-            if (this._backdropLayerCounter > 0)
-                return;
-            if (this._backdropLayerCounter < 0)
-                this._backdropLayerCounter = 0;
-            this.visible = false;
+            this._transitionController.hide(() => {
+                this._backdropLayerCounter -= 1;
+                if (this._backdropLayerCounter > 0)
+                    return;
+                if (this._backdropLayerCounter < 0)
+                    this._backdropLayerCounter = 0;
+                this.visible = false;
+            });
         };
         this._dispatchBackdropClickedEvent = () => {
             const backdropClickedEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.clicked, {
@@ -43,6 +48,9 @@ exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLig
         document.addEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
         document.addEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
     }
+    connectedCallback() {
+        this._transitionController = new transition_controller.TransitionController(this, 'backdrop-opacity');
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop.js.map

@@ -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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/form/search/history/search_history_load_more_btn.js

@@ -6,6 +6,7 @@ var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
 var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
 var btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
+var visibility_controller = require('../../../../controllers/visibility_controller/visibility_controller.js');
 var search_constants = require('../search_constants.js');
 
 exports.HSearchHistoryLoadMoreBtn = class HSearchHistoryLoadMoreBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -17,6 +18,13 @@ exports.HSearchHistoryLoadMoreBtn = class HSearchHistoryLoadMoreBtn extends phoe
             }));
         };
         this._btnController = new btn_controller.BtnController(this, this._dispatchHistoryLoadMoreEvent);
+        this._visibilityController = new visibility_controller.VisibilityController(this);
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+    show() {
+        this._visibilityController.show();
     }
     connectedCallback() {
         super.connectedCallback();

package/build/cjs/packages/phoenix/src/components/form/search/history/search_history_load_more_btn.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;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;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;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;"}

package/build/cjs/packages/phoenix/src/components/form/search/history/search_history_select_btn.js

@@ -13,7 +13,6 @@ exports.HSearchHistorySelectBtn = class HSearchHistorySelectBtn extends phoenix_
     constructor() {
         super();
         this._dispatchHistorySelectEvent = () => {
-            console.log(this.historyLabel, 'this.historyLabel');
             this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
                 bubbles: true,
                 detail: {

package/build/cjs/packages/phoenix/src/components/form/search/history/search_history_select_btn.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;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;"}

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

@@ -15,17 +15,17 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
     constructor() {
         super(...arguments);
         this.producerListHtml = () => {
-            return lit.html `<div class="search__section" data-search-section-type="4" data-search-section-name="producers">
+            return lit.html `<div class="search__section">
             <h3 class="search__section-head search__section-head_sticky search__section-head_line">Producenci</h3>
             <ul class="search__list">
                 ${repeat.repeat(this.producers, (producer) => lit.html `<li class="search__list-item">
-                        <a data-search-result-type="Vendor" href="${producer.url}" class="search__result-link js__search-result-link">
+                        <a href="${producer.url}" class="search__result-link">
                             <div class="search__result-icon  none">${producer.img}</div>
                             <div class="search__result-content">
                                 <div class="search__result-note"></div>
                                 <div class="search__result-title">
                                     <h5 class="search__result-title-item search__result_bold">
-                                        Aqua <span class="search__result_match">${producer.name}</span>e
+                                        <span class="search__result_match">${producer.name}</span>e
                                     </h5>
                                 </div>
                                 <div class="search__result-note"></div></div

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

@@ -15,17 +15,16 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
     constructor() {
         super(...arguments);
         this.getProductListHtml = () => {
-            return lit.html `<div class="search__section" data-search-section-type="3" data-search-section-name="products">
+            return lit.html `<div class="search__section">
             <h3 class="search__section-head search__section-head_sticky search__section-head_line">Wyniki dla: teraz</h3>
 
             <ul>
                 ${repeat.repeat(this.products, (product) => lit.html `<li class="search__list-item">
-                        <a data-search-result-type="Product" href="${product.url}" class="search__result-link js__search-result-link"
+                        <a href="${product.url}" class="search__result-link"
                             ><div class="search__result-icon ">
                                 <img src="${product.img}" alt="product image" />
                             </div>
                             <div class="search__result-content">
-                                <div class="search__result-note"></div>
                                 <div class="search__result-title">
                                     <h5 class="search__result-title-item">${product.name}</h5>
                                 </div>
@@ -38,7 +37,7 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
             </ul>
 
             <div class="search__section-footer">
-                <button @click="${this.handleGoToProductsFor}" class="js__search__btn-load-more search__section-btn-load-more" type="button">
+                <button @click="${this.handleGoToProductsFor}" class="search__section-btn-load-more" type="button">
                     Przejdź do produktów dla: teraz
                 </button>
             </div>
@@ -46,11 +45,14 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
         };
     }
     handleGoToProductsFor(ev) {
-        console.log(ev.target.textContent, `CLICK ON the przejdz do produktów dla: `);
-        // TODO: Create CustomEvent to handle it in search.ts
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+            bubbles: true,
+            detail: {
+                searchPhrase: ev.target.textContent
+            }
+        }));
     }
     render() {
-        console.log(this.products, 'this.products {AWEL');
         return when.when(this.products && this.products.length !== 0, this.getProductListHtml, () => lit.nothing);
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA,mBAAmB,wEAAgF;AACnG,qBAAqB,0EAAkF;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA,mBAAmB,wEAAgF;AACnG,qBAAqB,0EAAkF;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -16,23 +16,18 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
         super(...arguments);
         this.suggestions = [];
         this.getSuggestionListHtml = () => {
-            return lit.html `<div class="search__section  none" data-search-section-type="2" data-search-section-name="suggestions">
+            return lit.html `<div class="search__section  none">
             <h3 class="search__section-head search__section-head_sticky search__section-head_line">Sugestie</h3>
             <ul class="search__list">
-                ${when.when(this.suggestions, () => lit.html `${repeat.repeat(this.suggestions, (suggestion) => lit.html `<li @click=${this.handleSuggestion} class="search__list-item" data-suggested-value="${suggestion}">
-                                    <span class="js__search-suggest-item">${suggestion}</span>
-                                    <span
-                                        role="button"
-                                        aria-label="copy suggestion"
-                                        class="js__search-btn-copy search__list-item-action-btn search__icon_main-color icon icon-arrow-skew"
+                ${when.when(this.suggestions, () => lit.html `${repeat.repeat(this.suggestions, (suggestion) => lit.html `<li @click=${this.handleSuggestion} class="search__list-item">
+                                    <span>${suggestion}</span>
+                                    <span role="button" aria-label="copy suggestion" class="search__icon_main-color icon icon-arrow-skew"
                                         >LOOK</span
                                     >
                                 </li>`)}`, () => lit.nothing)}
-                ${when.when(this.categories, () => lit.html `${repeat.repeat(this.categories, (category) => lit.html `<li class="search__list-item search__result_bold" data-search-suggest-value="${category.name}">
-                                    <a class="js__search-result-link" data-search-result-type="Category" href="${category.url}"
-                                        ><span class="js__search-suggest-item search__result_bold"
-                                            ><span class="search__result_match">${category.name}</span></span
-                                        >
+                ${when.when(this.categories, () => lit.html `${repeat.repeat(this.categories, (category) => lit.html `<li class="search__list-item search__result_bold">
+                                    <a class="search__result-link" href="${category.url}"
+                                        ><span class="search__result_bold"><span class="search__result_match">${category.name}</span></span>
                                         <span class="search__result-category-title">kategoria</span></a
                                     >
                                 </li>`)}`, () => lit.nothing)}

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA,mBAAmB,wEAAgF;AACnG,qBAAqB,0EAAkF;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA,mBAAmB,wEAAgF;AACnG,qBAAqB,0EAAkF;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -31,7 +31,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             }
             return target.value;
         };
-        this._documentListenerHandler = (ev) => {
+        this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
             if (outsideClick) {
                 this._hideHistorySuggestionsAndResults();
@@ -62,11 +62,11 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('click', this._documentListenerHandler);
+        document.removeEventListener('click', this._hideSuggesterOnClickOutside);
     }
     _setupContext() {
         this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
-        this._historyContextProvider.provide('historyContext', this._historyContext);
+        this._historyContextProvider.provide(search_constants.SEARCH_CONTEXT_NAMES.historyContext, this._historyContext);
     }
     _setupListeners() {
         const input = this.querySelector('input[type="search"]');
@@ -111,7 +111,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             }
             this._historyContext.notify({ showLoadMore: this._historyLimitedContent.length < contentLength });
         });
-        document.addEventListener('click', this._documentListenerHandler);
+        document.addEventListener('click', this._hideSuggesterOnClickOutside);
     }
     _updateSearchPhrase(searchPhrase) {
         this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, {

package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js

@@ -39,6 +39,9 @@ const SEARCH_CLASS_NAMES = {
     resultsListContainer: 'search__results-list-container',
     resultsPortalContainer: 'search__results-portal-container'
 };
+const SEARCH_CONTEXT_NAMES = {
+    historyContext: 'historyContext'
+};
 const SEARCH_PORTAL_DESTINATIONS = {
     historyContent: 'search.historyContent',
     resultsContent: 'search.resultsContent'
@@ -46,6 +49,9 @@ const SEARCH_PORTAL_DESTINATIONS = {
 const SEARCH_SLOT_NAMES = {
     clearButton: 'search.clear.button'
 };
+/**
+ * TODO: Should be moved the config object injected to component
+ */
 const SEARCH_CONFIGURATION = {
     historyContentLimit: 3
 };
@@ -53,6 +59,7 @@ const SEARCH_CONFIGURATION = {
 exports.SEARCH_CLASS_NAMES = SEARCH_CLASS_NAMES;
 exports.SEARCH_COMPONENT_NAMES = SEARCH_COMPONENT_NAMES;
 exports.SEARCH_CONFIGURATION = SEARCH_CONFIGURATION;
+exports.SEARCH_CONTEXT_NAMES = SEARCH_CONTEXT_NAMES;
 exports.SEARCH_CUSTOM_EVENT_NAMES = SEARCH_CUSTOM_EVENT_NAMES;
 exports.SEARCH_NATIVE_EVENT_NAMES = SEARCH_NATIVE_EVENT_NAMES;
 exports.SEARCH_PORTAL_DESTINATIONS = SEARCH_PORTAL_DESTINATIONS;

package/build/cjs/packages/phoenix/src/components/form/search/search_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_history.js

@@ -27,7 +27,7 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
             this._historyContextObserver = new observer.Observer((searchData) => {
                 this.requestUpdate();
                 const button = this.buttonRef.value;
-                button.style.display = searchData.showLoadMore ? 'block' : 'none';
+                searchData.showLoadMore ? button.show() : button.hide();
             });
             this._historyContext$.subscribe(this._historyContextObserver);
         }

package/build/cjs/packages/phoenix/src/components/form/search/search_results.js

@@ -10,15 +10,6 @@ var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_el
 var search_constants = require('./search_constants.js');
 
 exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.results = {
-            suggestions: [],
-            products: [],
-            producers: [],
-            categories: []
-        };
-    }
     render() {
         if (this.results)
             return lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.resultsListContainer}">
@@ -26,12 +17,12 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
                     <div>
                         <h3 class="search__section-head search__section-head_sticky search__section-head_line">Results</h3>
 
-                        <h-search-suggestion-content .suggestions="${this.results.suggestions}" .categories="${this.results.categories}">
+                        <h-search-suggestion-content .suggestions="${this.results.suggestions}" .categories="${this.results.categories.list}">
                         </h-search-suggestion-content>
 
-                        <h-search-product-content .products="${this.results.products}"></h-search-product-content>
+                        <h-search-product-content .products="${this.results.products.list}"></h-search-product-content>
 
-                        <h-search-producer-content .products="${this.results.producers}"></h-search-producer-content>
+                        <h-search-producer-content .producers="${this.results.producers.list}"></h-search-producer-content>
                     </div>
                 </h-portal>
 

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

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/icon/icon.js

@@ -20,6 +20,7 @@ exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixL
         this.filled = false;
         this.clickable = false;
         this.noStroke = false;
+        this.cssClasses = '';
         this._srcObserverCallback = (src) => {
             if (src)
                 this.requestUpdate();
@@ -45,7 +46,7 @@ exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixL
         if (!HIcon_1.src.getValue())
             return null;
         return lit.html `
-            <svg class="${this._cssClasses}">
+            <svg class="${this._cssClasses} ${this.cssClasses}">
                 <use xlink:href="${namespaced_attribure_directive.namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src.getValue()}#${this.iconName}`)}"></use>
             </svg>
         `;
@@ -72,6 +73,10 @@ tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HIcon.prototype, "noStroke", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'css-classes' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HIcon.prototype, "cssClasses", void 0);
 exports.HIcon = HIcon_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-icon'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/icon/icon.js.map

@@ -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,oBAAoB,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA,oBAAoB,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal.js

@@ -125,6 +125,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     async open() {
         return new Promise((resolve) => {
             var _a;
+            this[modal_constants.MODAL_OPENED_PROP] = true;
             (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
             window.requestAnimationFrame(() => {
                 setTimeout(() => {
@@ -134,7 +135,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
                 const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
                 setTimeout(() => {
                     var _a;
-                    this[modal_constants.MODAL_OPENED_PROP] = true;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
                     resolve();
                 }, transitionDuration);

package/build/cjs/packages/phoenix/src/index.js

@@ -95,13 +95,13 @@ var button_stepper = require('./components/form/input_stepper/button_stepper.js'
 var search_constants = require('./components/form/search/search_constants.js');
 var search = require('./components/form/search/search.js');
 var search_input = require('./components/form/search/search_input.js');
+var search_history_load_more_btn = require('./components/form/search/history/search_history_load_more_btn.js');
 var search_history = require('./components/form/search/search_history.js');
 var search_results = require('./components/form/search/search_results.js');
 var search_submit_btn = require('./components/form/search/buttons/search_submit_btn.js');
 var search_clear_btn = require('./components/form/search/buttons/search_clear_btn.js');
 var search_history_remove_btn = require('./components/form/search/history/search_history_remove_btn.js');
 var search_history_select_btn = require('./components/form/search/history/search_history_select_btn.js');
-var search_history_load_more_btn = require('./components/form/search/history/search_history_load_more_btn.js');
 var search_suggestion_content = require('./components/form/search/results/search_suggestion_content.js');
 var search_product_content = require('./components/form/search/results/search_product_content.js');
 var search_producer_content = require('./components/form/search/results/search_producer_content.js');
@@ -559,6 +559,7 @@ Object.defineProperty(exports, 'HButtonStepper', {
 exports.SEARCH_CLASS_NAMES = search_constants.SEARCH_CLASS_NAMES;
 exports.SEARCH_COMPONENT_NAMES = search_constants.SEARCH_COMPONENT_NAMES;
 exports.SEARCH_CONFIGURATION = search_constants.SEARCH_CONFIGURATION;
+exports.SEARCH_CONTEXT_NAMES = search_constants.SEARCH_CONTEXT_NAMES;
 exports.SEARCH_CUSTOM_EVENT_NAMES = search_constants.SEARCH_CUSTOM_EVENT_NAMES;
 exports.SEARCH_NATIVE_EVENT_NAMES = search_constants.SEARCH_NATIVE_EVENT_NAMES;
 exports.SEARCH_PORTAL_DESTINATIONS = search_constants.SEARCH_PORTAL_DESTINATIONS;
@@ -575,6 +576,12 @@ Object.defineProperty(exports, 'HSearchInput', {
 		return search_input.HSearchInput;
 	}
 });
+Object.defineProperty(exports, 'HSearchHistoryLoadMoreBtn', {
+	enumerable: true,
+	get: function () {
+		return search_history_load_more_btn.HSearchHistoryLoadMoreBtn;
+	}
+});
 Object.defineProperty(exports, 'HSearchHistory', {
 	enumerable: true,
 	get: function () {
@@ -611,12 +618,6 @@ Object.defineProperty(exports, 'HSearchHistorySelectBtn', {
 		return search_history_select_btn.HSearchHistorySelectBtn;
 	}
 });
-Object.defineProperty(exports, 'HSearchHistoryLoadMoreBtn', {
-	enumerable: true,
-	get: function () {
-		return search_history_load_more_btn.HSearchHistoryLoadMoreBtn;
-	}
-});
 Object.defineProperty(exports, 'HSearchSuggestionContent', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/backdrop/backdrop.d.ts

@@ -3,7 +3,9 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 export declare class HBackdrop extends PhoenixLightLitElement {
     visible: boolean;
     private _backdropLayerCounter;
+    private _transitionController;
     constructor();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private _appendBackdrop;
     private _show;

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

@@ -4,6 +4,7 @@ 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';
 import { BACKDROP_NAME, BACKDROP_EVENTS, BACKDROP_CSS_CLASS } from './backdrop_constants.js';
+import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
 
 let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
     constructor() {
@@ -18,16 +19,20 @@ let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
             }
         };
         this._show = () => {
-            this._backdropLayerCounter += 1;
-            this.visible = true;
+            this._transitionController.show(() => {
+                this._backdropLayerCounter += 1;
+                this.visible = true;
+            });
         };
         this._hide = () => {
-            this._backdropLayerCounter -= 1;
-            if (this._backdropLayerCounter > 0)
-                return;
-            if (this._backdropLayerCounter < 0)
-                this._backdropLayerCounter = 0;
-            this.visible = false;
+            this._transitionController.hide(() => {
+                this._backdropLayerCounter -= 1;
+                if (this._backdropLayerCounter > 0)
+                    return;
+                if (this._backdropLayerCounter < 0)
+                    this._backdropLayerCounter = 0;
+                this.visible = false;
+            });
         };
         this._dispatchBackdropClickedEvent = () => {
             const backdropClickedEvent = new CustomEvent(BACKDROP_EVENTS.clicked, {
@@ -39,6 +44,9 @@ let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
         document.addEventListener(BACKDROP_EVENTS.show, this._show);
         document.addEventListener(BACKDROP_EVENTS.hide, this._hide);
     }
+    connectedCallback() {
+        this._transitionController = new TransitionController(this, 'backdrop-opacity');
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener(BACKDROP_EVENTS.show, this._show);

package/build/esm/packages/phoenix/src/components/backdrop/backdrop.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;"}
+{"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;"}

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

@@ -1,7 +1,10 @@
 import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HSearchHistoryLoadMoreBtn extends PhoenixLightLitElement {
     private _btnController;
+    private _visibilityController;
     constructor();
+    hide(): void;
+    show(): void;
     connectedCallback(): void;
     private _dispatchHistoryLoadMoreEvent;
 }

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

@@ -2,6 +2,7 @@ import { __decorate, __metadata } from '../../../../../../../external/tslib/tsli
 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 { VisibilityController } from '../../../../controllers/visibility_controller/visibility_controller.js';
 import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_NATIVE_EVENT_NAMES, SEARCH_COMPONENT_NAMES } from '../search_constants.js';
 
 let HSearchHistoryLoadMoreBtn = class HSearchHistoryLoadMoreBtn extends PhoenixLightLitElement {
@@ -13,6 +14,13 @@ let HSearchHistoryLoadMoreBtn = class HSearchHistoryLoadMoreBtn extends PhoenixL
             }));
         };
         this._btnController = new BtnController(this, this._dispatchHistoryLoadMoreEvent);
+        this._visibilityController = new VisibilityController(this);
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+    show() {
+        this._visibilityController.show();
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/history/search_history_select_btn.js

@@ -9,7 +9,6 @@ let HSearchHistorySelectBtn = class HSearchHistorySelectBtn extends PhoenixLight
     constructor() {
         super();
         this._dispatchHistorySelectEvent = () => {
-            console.log(this.historyLabel, 'this.historyLabel');
             this.dispatchEvent(new CustomEvent(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
                 bubbles: true,
                 detail: {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/results/search_producer_content.js

@@ -11,17 +11,17 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
     constructor() {
         super(...arguments);
         this.producerListHtml = () => {
-            return html `<div class="search__section" data-search-section-type="4" data-search-section-name="producers">
+            return html `<div class="search__section">
             <h3 class="search__section-head search__section-head_sticky search__section-head_line">Producenci</h3>
             <ul class="search__list">
                 ${c(this.producers, (producer) => html `<li class="search__list-item">
-                        <a data-search-result-type="Vendor" href="${producer.url}" class="search__result-link js__search-result-link">
+                        <a href="${producer.url}" class="search__result-link">
                             <div class="search__result-icon  none">${producer.img}</div>
                             <div class="search__result-content">
                                 <div class="search__result-note"></div>
                                 <div class="search__result-title">
                                     <h5 class="search__result-title-item search__result_bold">
-                                        Aqua <span class="search__result_match">${producer.name}</span>e
+                                        <span class="search__result_match">${producer.name}</span>e
                                     </h5>
                                 </div>
                                 <div class="search__result-note"></div></div