@shoper/phoenix_design_system 1.5.3 → 1.5.5

package/build/cjs/external/lodash/isArguments.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isObjectLike = require('./isObjectLike.js');
+var _baseIsArguments = require('./_baseIsArguments.js');
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/** Built-in value references. */
+var propertyIsEnumerable = objectProto.propertyIsEnumerable;
+
+/**
+ * Checks if `value` is likely an `arguments` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
+ */
+var isArguments = _baseIsArguments['default'](function() { return arguments; }()) ? _baseIsArguments['default'] : function(value) {
+  return isObjectLike['default'](value) && hasOwnProperty.call(value, 'callee') &&
+    !propertyIsEnumerable.call(value, 'callee');
+};
+
+var isArguments_1 = isArguments;
+
+exports.default = isArguments_1;
+//# sourceMappingURL=isArguments.js.map

package/build/cjs/external/lodash/isArguments.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;"}

package/build/cjs/external/lodash/isArray.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+var isArray_1 = isArray;
+
+exports.default = isArray_1;
+//# sourceMappingURL=isArray.js.map

package/build/cjs/external/lodash/isArray.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;"}

package/build/cjs/external/lodash/isArrayLike.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isFunction = require('./isFunction.js');
+var isLength = require('./isLength.js');
+
+/**
+ * Checks if `value` is array-like. A value is considered array-like if it's
+ * not a function and has a `value.length` that's an integer greater than or
+ * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ * @example
+ *
+ * _.isArrayLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLike(document.body.children);
+ * // => true
+ *
+ * _.isArrayLike('abc');
+ * // => true
+ *
+ * _.isArrayLike(_.noop);
+ * // => false
+ */
+function isArrayLike(value) {
+  return value != null && isLength['default'](value.length) && !isFunction['default'](value);
+}
+
+var isArrayLike_1 = isArrayLike;
+
+exports.default = isArrayLike_1;
+//# sourceMappingURL=isArrayLike.js.map

package/build/cjs/external/lodash/isArrayLike.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;"}

package/build/cjs/external/lodash/isBuffer.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _commonjsHelpers = require('../../_virtual/_commonjsHelpers.js');
+var _root = require('./_root.js');
+var stubFalse = require('./stubFalse.js');
+
+var isBuffer_1 = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+/** Detect free variable `exports`. */
+var freeExports =  exports && !exports.nodeType && exports;
+
+/** Detect free variable `module`. */
+var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+/** Detect the popular CommonJS extension `module.exports`. */
+var moduleExports = freeModule && freeModule.exports === freeExports;
+
+/** Built-in value references. */
+var Buffer = moduleExports ? _root['default'].Buffer : undefined;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
+
+/**
+ * Checks if `value` is a buffer.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.3.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
+ * @example
+ *
+ * _.isBuffer(new Buffer(2));
+ * // => true
+ *
+ * _.isBuffer(new Uint8Array(2));
+ * // => false
+ */
+var isBuffer = nativeIsBuffer || stubFalse['default'];
+
+module.exports = isBuffer;
+});
+
+exports.default = isBuffer_1;
+//# sourceMappingURL=isBuffer.js.map

package/build/cjs/{packages/phoenix/src/components/form/search/search_results.js.map → external/lodash/isBuffer.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;"}
+{"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;"}

package/build/cjs/external/lodash/isEqual.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _baseIsEqual = require('./_baseIsEqual.js');
+
+/**
+ * Performs a deep comparison between two values to determine if they are
+ * equivalent.
+ *
+ * **Note:** This method supports comparing arrays, array buffers, booleans,
+ * date objects, error objects, maps, numbers, `Object` objects, regexes,
+ * sets, strings, symbols, and typed arrays. `Object` objects are compared
+ * by their own, not inherited, enumerable properties. Functions and DOM
+ * nodes are compared by strict equality, i.e. `===`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ * var other = { 'a': 1 };
+ *
+ * _.isEqual(object, other);
+ * // => true
+ *
+ * object === other;
+ * // => false
+ */
+function isEqual(value, other) {
+  return _baseIsEqual['default'](value, other);
+}
+
+var isEqual_1 = isEqual;
+
+exports.default = isEqual_1;
+//# sourceMappingURL=isEqual.js.map

package/build/cjs/external/lodash/isEqual.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;"}

package/build/cjs/external/lodash/isFunction.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isObject = require('./isObject.js');
+var _baseGetTag = require('./_baseGetTag.js');
+
+/** `Object#toString` result references. */
+var asyncTag = '[object AsyncFunction]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    proxyTag = '[object Proxy]';
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  if (!isObject['default'](value)) {
+    return false;
+  }
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 9 which returns 'object' for typed arrays and other constructors.
+  var tag = _baseGetTag['default'](value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+
+var isFunction_1 = isFunction;
+
+exports.default = isFunction_1;
+//# sourceMappingURL=isFunction.js.map

package/build/cjs/external/lodash/isFunction.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;"}

package/build/cjs/external/lodash/isLength.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/** Used as references for various `Number` constants. */
+var MAX_SAFE_INTEGER = 9007199254740991;
+
+/**
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This method is loosely based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+ * @example
+ *
+ * _.isLength(3);
+ * // => true
+ *
+ * _.isLength(Number.MIN_VALUE);
+ * // => false
+ *
+ * _.isLength(Infinity);
+ * // => false
+ *
+ * _.isLength('3');
+ * // => false
+ */
+function isLength(value) {
+  return typeof value == 'number' &&
+    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+
+var isLength_1 = isLength;
+
+exports.default = isLength_1;
+//# sourceMappingURL=isLength.js.map

package/build/cjs/external/lodash/isLength.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;"}

package/build/cjs/external/lodash/isTypedArray.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _baseIsTypedArray = require('./_baseIsTypedArray.js');
+var _baseUnary = require('./_baseUnary.js');
+var _nodeUtil = require('./_nodeUtil.js');
+
+/* Node.js helper references. */
+var nodeIsTypedArray = _nodeUtil['default'] && _nodeUtil['default'].isTypedArray;
+
+/**
+ * Checks if `value` is classified as a typed array.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+ * @example
+ *
+ * _.isTypedArray(new Uint8Array);
+ * // => true
+ *
+ * _.isTypedArray([]);
+ * // => false
+ */
+var isTypedArray = nodeIsTypedArray ? _baseUnary['default'](nodeIsTypedArray) : _baseIsTypedArray['default'];
+
+var isTypedArray_1 = isTypedArray;
+
+exports.default = isTypedArray_1;
+//# sourceMappingURL=isTypedArray.js.map

package/build/cjs/external/lodash/isTypedArray.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;"}

package/build/cjs/external/lodash/keys.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _arrayLikeKeys = require('./_arrayLikeKeys.js');
+var _baseKeys = require('./_baseKeys.js');
+var isArrayLike = require('./isArrayLike.js');
+
+/**
+ * Creates an array of the own enumerable property names of `object`.
+ *
+ * **Note:** Non-object values are coerced to objects. See the
+ * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
+ * for more details.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names.
+ * @example
+ *
+ * function Foo() {
+ *   this.a = 1;
+ *   this.b = 2;
+ * }
+ *
+ * Foo.prototype.c = 3;
+ *
+ * _.keys(new Foo);
+ * // => ['a', 'b'] (iteration order is not guaranteed)
+ *
+ * _.keys('hi');
+ * // => ['0', '1']
+ */
+function keys(object) {
+  return isArrayLike['default'](object) ? _arrayLikeKeys['default'](object) : _baseKeys['default'](object);
+}
+
+var keys_1 = keys;
+
+exports.default = keys_1;
+//# sourceMappingURL=keys.js.map

package/build/cjs/external/lodash/keys.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;"}

package/build/cjs/external/lodash/stubArray.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * This method returns a new empty array.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.13.0
+ * @category Util
+ * @returns {Array} Returns the new empty array.
+ * @example
+ *
+ * var arrays = _.times(2, _.stubArray);
+ *
+ * console.log(arrays);
+ * // => [[], []]
+ *
+ * console.log(arrays[0] === arrays[1]);
+ * // => false
+ */
+function stubArray() {
+  return [];
+}
+
+var stubArray_1 = stubArray;
+
+exports.default = stubArray_1;
+//# sourceMappingURL=stubArray.js.map

package/build/cjs/external/lodash/stubArray.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;"}

package/build/cjs/external/lodash/stubFalse.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * This method returns `false`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.13.0
+ * @category Util
+ * @returns {boolean} Returns `false`.
+ * @example
+ *
+ * _.times(2, _.stubFalse);
+ * // => [false, false]
+ */
+function stubFalse() {
+  return false;
+}
+
+var stubFalse_1 = stubFalse;
+
+exports.default = stubFalse_1;
+//# sourceMappingURL=stubFalse.js.map

package/build/cjs/external/lodash/stubFalse.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;"}

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

@@ -11,29 +11,26 @@ 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');
+var search_constants = require('./search_constants.js');
 
 exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._shouldShowHistory = false;
         this._shouldShowResults = false;
+        this._shouldShowMessage = false;
         this._searchHistory = [];
+        this._searchPhrase = '';
         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._translations = {};
         this._hideSuggesterOnClickOutside = (ev) => {
             const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
             if (outsideClick) {
+                this._shouldShowMessage = false;
                 this._hideHistorySuggestionsAndResults();
             }
         };
@@ -43,15 +40,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._setupContext();
         try {
             this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
-            this._searchContext$ = await this._searchContextConsumer.consumeAsync('searchContext');
+            this._searchContext$ = await this._searchContextConsumer.consumeAsync(search_constants.SEARCH_CONTEXT_NAMES.searchContext);
             this._searchContextObserver = new observer.Observer((searchData) => {
                 this._searchResults = searchData.results;
                 this._searchHistory = searchData.history;
+                this._translations = searchData.translations;
+                this._searchPhrase = searchData.searchPhrase;
                 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);
         }
@@ -69,39 +65,26 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         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);
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusinInput, (ev) => {
+            this._displaySuggester(ev.detail.searchPhrase);
         });
-        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.keyupInput, (ev) => {
+            const shouldShowMessage = ev.detail.searchPhrase !== '';
+            this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
         });
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchInput, (ev) => this._updateSearchView(ev.detail.searchPhrase, false));
+        this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => this._updateSearchView('', false));
         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);
+            if (updatedInput.value === '') {
+                this._updateSearchView(updatedInput.value, true);
+            }
+            else {
+                this._resetSearchViewAndSubmitSearchPhrase(updatedInput.value);
+            }
         });
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
             const contentLength = this._searchHistory.length;
@@ -113,16 +96,24 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         });
         document.addEventListener('click', this._hideSuggesterOnClickOutside);
     }
+    _updateSearchView(searchPhrase, shouldShowMessage) {
+        this._shouldShowMessage = shouldShowMessage;
+        this._displaySuggester(searchPhrase);
+        this._updateSearchPhrase(searchPhrase);
+    }
+    _resetSearchViewAndSubmitSearchPhrase(searchPhrase) {
+        this._shouldShowMessage = false;
+        this._hideHistorySuggestionsAndResults();
+        this._submitSearchPhrase(searchPhrase);
+    }
     _updateSearchPhrase(searchPhrase) {
-        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, {
-            detail: {
-                searchPhrase
-            },
-            bubbles: true
-        }));
+        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
     }
     _submitSearchPhrase(searchPhrase) {
-        this.dispatchEvent(new CustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, {
+        this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
+    }
+    _dispatchEventWithSearchPhrase(eventName, searchPhrase) {
+        this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
                 searchPhrase
             },
@@ -154,10 +145,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
     }
     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>`)}
+            ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
+                    .history="${this._historyLimitedContent}"
+                    .results="${this._searchResults}"
+                    .translations="${this._translations}"
+                    search-phrase="${this._searchPhrase}"
+                ></h-search-message>`)}
+            ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history .history="${this._historyLimitedContent}" .translations="${this._translations}"></h-search-history>`)}
+            ${when.when(this._shouldShowResults, () => lit.html `<h-search-results .results="${this._searchResults}" .translations="${this._translations}"></h-search-results>`)}
         `;
     }
 };
@@ -169,6 +164,10 @@ 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", Boolean)
+], exports.HSearch.prototype, "_shouldShowMessage", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)
@@ -177,6 +176,10 @@ 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", String)
+], exports.HSearch.prototype, "_searchPhrase", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Array)

package/build/cjs/packages/phoenix/src/components/form/search/search.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,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;"}
+{"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,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;AACA;AACA;AACA;AACA;"}