@shoper/phoenix_design_system 1.4.3 → 1.5.1-0

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 {
+    constructor() {
+        super();
+        this._dispatchHistoryLoadMoreEvent = (ev) => {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, {
+                bubbles: true
+            }));
+        };
+        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();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchHistoryLoadMoreEvent);
+    }
+};
+exports.HSearchHistoryLoadMoreBtn = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.historyLoadMoreButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchHistoryLoadMoreBtn);
+//# sourceMappingURL=search_history_load_more_btn.js.map

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

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

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+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 btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
+var search_constants = require('../search_constants.js');
+
+exports.HSearchHistoryRemoveBtn = class HSearchHistoryRemoveBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchHistoryRemoveEvent = (ev) => {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.removeHistoryItem, {
+                bubbles: true,
+                detail: {
+                    id: this.historyItemId
+                }
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchHistoryRemoveEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchHistoryRemoveEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'item-id' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchHistoryRemoveBtn.prototype, "historyItemId", void 0);
+exports.HSearchHistoryRemoveBtn = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.historyRemoveButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchHistoryRemoveBtn);
+//# sourceMappingURL=search_history_remove_btn.js.map

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

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

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+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 btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
+var search_constants = require('../search_constants.js');
+
+exports.HSearchHistorySelectBtn = class HSearchHistorySelectBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchHistorySelectEvent = () => {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+                bubbles: true,
+                detail: {
+                    searchPhrase: this.historyLabel
+                }
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchHistorySelectEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(search_constants.SEARCH_NATIVE_EVENT_NAMES.click, this._dispatchHistorySelectEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'item-label' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSearchHistorySelectBtn.prototype, "historyLabel", void 0);
+exports.HSearchHistorySelectBtn = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.historySelectButton),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSearchHistorySelectBtn);
+//# sourceMappingURL=search_history_select_btn.js.map

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

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

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

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 search_constants = require('../search_constants.js');
+var when = require('../../../../../../../external/lit/external/lit-html/directives/when.js');
+var repeat = require('../../../../../../../external/lit/external/lit-html/directives/repeat.js');
+
+exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.producerListHtml = () => {
+            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 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">
+                                        <span class="search__result_match">${producer.name}</span>e
+                                    </h5>
+                                </div>
+                                <div class="search__result-note"></div></div
+                        ></a>
+                    </li>`)}
+            </ul>
+        </div>`;
+        };
+    }
+    render() {
+        return when.when(this.producers && this.producers.length !== 0, this.producerListHtml, () => lit.nothing);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Object, reflect: true }),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearchProducerContent.prototype, "producers", void 0);
+exports.HSearchProducerContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProducerContent)
+], exports.HSearchProducerContent);
+//# sourceMappingURL=search_producer_content.js.map

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

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

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

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 search_constants = require('../search_constants.js');
+var when = require('../../../../../../../external/lit/external/lit-html/directives/when.js');
+var repeat = require('../../../../../../../external/lit/external/lit-html/directives/repeat.js');
+
+exports.HSearchProductContent = class HSearchProductContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.getProductListHtml = () => {
+            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 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-title">
+                                    <h5 class="search__result-title-item">${product.name}</h5>
+                                </div>
+                                <div class="search__result-note">
+                                    <span class="search__result-note-item search__result-item_active">${product.price}</span>
+                                </div>
+                            </div></a
+                        >
+                    </li>`)}
+            </ul>
+
+            <div class="search__section-footer">
+                <button @click="${this.handleGoToProductsFor}" class="search__section-btn-load-more" type="button">
+                    Przejdź do produktów dla: teraz
+                </button>
+            </div>
+        </div>`;
+        };
+    }
+    handleGoToProductsFor(ev) {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+            bubbles: true,
+            detail: {
+                searchPhrase: ev.target.textContent
+            }
+        }));
+    }
+    render() {
+        return when.when(this.products && this.products.length !== 0, this.getProductListHtml, () => lit.nothing);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Object, reflect: true }),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearchProductContent.prototype, "products", void 0);
+exports.HSearchProductContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchProductContent)
+], exports.HSearchProductContent);
+//# sourceMappingURL=search_product_content.js.map

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

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

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

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 search_constants = require('../search_constants.js');
+var when = require('../../../../../../../external/lit/external/lit-html/directives/when.js');
+var repeat = require('../../../../../../../external/lit/external/lit-html/directives/repeat.js');
+
+exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.suggestions = [];
+        this.getSuggestionListHtml = () => {
+            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">
+                                    <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">
+                                    <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)}
+            </ul>
+        </div>`;
+        };
+        this.shouldShowSuggestionContent = () => (this.suggestions && this.suggestions.length !== 0) || (this.categories && this.categories.length !== 0);
+    }
+    handleSuggestion(ev) {
+        const element = ev.target;
+        const listElement = element.closest('li');
+        if (listElement) {
+            this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, {
+                bubbles: true,
+                detail: {
+                    searchPhrase: listElement.dataset.suggestedValue
+                }
+            }));
+        }
+    }
+    render() {
+        return when.when(this.shouldShowSuggestionContent(), this.getSuggestionListHtml, () => lit.nothing);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Object, reflect: true }),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Object, reflect: true }),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearchSuggestionContent.prototype, "categories", void 0);
+exports.HSearchSuggestionContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.searchSuggestionContent)
+], exports.HSearchSuggestionContent);
+//# sourceMappingURL=search_suggestion_content.js.map

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

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

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

@@ -0,0 +1,191 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 observer = require('../../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
+var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../../core/context/context_provider_controller.js');
+var search_constants = require('./search_constants.js');
+var when = require('../../../../../../external/lit/external/lit-html/directives/when.js');
+
+exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._shouldShowHistory = false;
+        this._shouldShowResults = false;
+        this._searchHistory = [];
+        this._historyLimitedContent = [];
+        this._historyContext = new behavior_subject.BehaviorSubject({
+            showLoadMore: false
+        });
+        this._getSearchPhrase = (target) => {
+            const isSearchInput = target instanceof HTMLInputElement && target.type === 'search';
+            if (!isSearchInput) {
+                throw new Error('Search input not found. Search phrase action.');
+            }
+            return target.value;
+        };
+        this._hideSuggesterOnClickOutside = (ev) => {
+            const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
+            if (outsideClick) {
+                this._hideHistorySuggestionsAndResults();
+            }
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._setupContext();
+        try {
+            this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+            this._searchContext$ = await this._searchContextConsumer.consumeAsync('searchContext');
+            this._searchContextObserver = new observer.Observer((searchData) => {
+                this._searchResults = searchData.results;
+                this._searchHistory = searchData.history;
+                this._historyContext.notify({ showLoadMore: this._searchHistory.length > search_constants.SEARCH_CONFIGURATION.historyContentLimit });
+                this._historyLimitedContent = this._searchHistory.slice(0, search_constants.SEARCH_CONFIGURATION.historyContentLimit);
+                if (this._searchHistory.length === 0) {
+                    this._hideHistorySuggestionsAndResults();
+                }
+            });
+            this._searchContext$.subscribe(this._searchContextObserver);
+        }
+        catch (_a) {
+            console.error('Search context is not provided');
+        }
+        this._setupListeners();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._hideSuggesterOnClickOutside);
+    }
+    _setupContext() {
+        this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
+        this._historyContextProvider.provide(search_constants.SEARCH_CONTEXT_NAMES.historyContext, this._historyContext);
+    }
+    _setupListeners() {
+        const input = this.querySelector('input[type="search"]');
+        if (!input) {
+            throw new Error('Search input not found');
+        }
+        input.addEventListener('focusin', (ev) => {
+            const $searchInput = this._getSearchPhrase(ev.target);
+            this._displaySuggester($searchInput);
+        });
+        input.addEventListener('keyup', (ev) => {
+            const $searchInput = this._getSearchPhrase(ev.target);
+            this._displaySuggester($searchInput);
+            this._updateSearchPhrase($searchInput);
+        });
+        input.addEventListener('search', (ev) => {
+            const $searchInput = this._getSearchPhrase(ev.target);
+            if ($searchInput === '') {
+                this._displaySuggester($searchInput);
+            }
+            else {
+                this._updateSearchPhrase($searchInput);
+            }
+        });
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => {
+            this._displaySuggester('');
+            this._updateSearchPhrase('');
+        });
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
+            const updatedInput = this.querySelector('input[type="search"]');
+            if (!updatedInput) {
+                throw new Error('Search input not found');
+            }
+            this._displaySuggester('');
+            this._submitSearchPhrase(updatedInput.value);
+        });
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
+            const contentLength = this._searchHistory.length;
+            const limitedContentLength = this._historyLimitedContent.length;
+            if (limitedContentLength < contentLength) {
+                this._historyLimitedContent = this._searchHistory.slice(0, limitedContentLength + search_constants.SEARCH_CONFIGURATION.historyContentLimit);
+            }
+            this._historyContext.notify({ showLoadMore: this._historyLimitedContent.length < contentLength });
+        });
+        document.addEventListener('click', this._hideSuggesterOnClickOutside);
+    }
+    _updateSearchPhrase(searchPhrase) {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, {
+            detail: {
+                searchPhrase
+            },
+            bubbles: true
+        }));
+    }
+    _submitSearchPhrase(searchPhrase) {
+        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+            detail: {
+                searchPhrase
+            },
+            bubbles: true
+        }));
+    }
+    _displaySuggester(searchPhrase) {
+        if (searchPhrase === '' && this._searchHistory.length !== 0) {
+            this._displayHistorySuggestions();
+        }
+        if (searchPhrase === '' && this._searchHistory.length === 0) {
+            this._hideHistorySuggestionsAndResults();
+        }
+        if (searchPhrase !== '') {
+            this._displayResults();
+        }
+    }
+    _displayHistorySuggestions() {
+        this._shouldShowHistory = true;
+        this._shouldShowResults = false;
+    }
+    _displayResults() {
+        this._shouldShowHistory = false;
+        this._shouldShowResults = true;
+    }
+    _hideHistorySuggestionsAndResults() {
+        this._shouldShowHistory = false;
+        this._shouldShowResults = false;
+    }
+    render() {
+        return lit.html `
+            ${when.when(this._shouldShowHistory, () => {
+            return lit.html `<h-search-history .history="${this._historyLimitedContent}"></h-search-history>`;
+        })}
+            ${when.when(this._shouldShowResults, () => lit.html `<h-search-results .results="${this._searchResults}"></h-search-results>`)}
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSearch.prototype, "_shouldShowHistory", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSearch.prototype, "_shouldShowResults", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSearch.prototype, "_searchResults", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearch.prototype, "_searchHistory", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSearch.prototype, "_historyLimitedContent", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", behavior_subject.BehaviorSubject)
+], exports.HSearch.prototype, "_historyContext", void 0);
+exports.HSearch = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.search)
+], exports.HSearch);
+//# sourceMappingURL=search.js.map

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

@@ -0,0 +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,mBAAmB,qEAA6E;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;"}

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

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SEARCH_COMPONENT_NAMES = {
+    search: 'h-search',
+    searchInput: 'h-search-input',
+    clearButton: 'h-search-clear-btn',
+    submitButton: 'h-search-submit-btn',
+    searchResults: 'h-search-results',
+    searchHistory: 'h-search-history',
+    historyRemoveButton: 'h-search-history-remove',
+    historySelectButton: 'h-search-history-select',
+    historyLoadMoreButton: 'h-search-history-load-more',
+    searchSuggestionContent: 'h-search-suggestion-content',
+    searchProductContent: 'h-search-product-content',
+    searchProducerContent: 'h-search-producer-content'
+};
+const SEARCH_CUSTOM_EVENT_NAMES = {
+    searchPhraseUpdated: 'search.external.searchPhraseUpdated',
+    searchPhraseSubmitted: 'search.external.searchPhraseSubmitted',
+    removeHistoryItem: 'search.external.removeHistoryItem',
+    onHistory: 'search.removeHistoryItem',
+    loadMoreHistoryItems: 'search.loadMoreHistoryItems',
+    clear: 'search.clearSearchPhrase',
+    submit: 'search.submitSearchPhrase'
+};
+const SEARCH_NATIVE_EVENT_NAMES = {
+    click: 'click'
+};
+const SEARCH_CLASS_NAMES = {
+    inputSearch: 'search__input_search',
+    historyContainer: 'search__history-list-container',
+    historyContainerHeadline: 'search__history-list-container_headline',
+    historyContainerList: 'search__history-list-container_list-items',
+    historyContainerItem: 'search__history-list-container_item',
+    historyContainerLoadMore: 'search__history-list-container_load-more',
+    historyPortalContainer: 'search__history-portal-container',
+    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'
+};
+const SEARCH_SLOT_NAMES = {
+    clearButton: 'search.clear.button'
+};
+/**
+ * TODO: Should be moved the config object injected to component
+ */
+const SEARCH_CONFIGURATION = {
+    historyContentLimit: 3
+};
+
+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;
+exports.SEARCH_SLOT_NAMES = SEARCH_SLOT_NAMES;
+//# sourceMappingURL=search_constants.js.map

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

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