@shoper/phoenix_design_system 1.17.10-3 → 1.17.10-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +24 -6
- package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -1
- package/build/esm/packages/phoenix/src/components/form/search/search.js +24 -6
- package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/package.json +1 -1
|
@@ -23,6 +23,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
23
23
|
constructor() {
|
|
24
24
|
super(...arguments);
|
|
25
25
|
this.view = search_constants.DEFAULT_VIEW;
|
|
26
|
+
this._shouldRenderAsPopup = false;
|
|
26
27
|
this._id = v4['default']();
|
|
27
28
|
this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
|
|
28
29
|
this._searchContentContainerId = v4['default']();
|
|
@@ -272,6 +273,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
272
273
|
? this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened)
|
|
273
274
|
: this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
|
|
274
275
|
};
|
|
276
|
+
this._updateShouldRenderAsPopup = () => {
|
|
277
|
+
if (window.innerWidth > global_constants.BREAKPOINTS.sm && this.popup) {
|
|
278
|
+
this._shouldRenderAsPopup = true;
|
|
279
|
+
}
|
|
280
|
+
else {
|
|
281
|
+
this._shouldRenderAsPopup = false;
|
|
282
|
+
}
|
|
283
|
+
};
|
|
275
284
|
this._preventSubmitOnSearchClear = (ev) => {
|
|
276
285
|
const $searchClear = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.clearButton);
|
|
277
286
|
if (ev.key === 'Enter' && ev.target === $searchClear) {
|
|
@@ -296,6 +305,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
296
305
|
}
|
|
297
306
|
async connectedCallback() {
|
|
298
307
|
super.connectedCallback();
|
|
308
|
+
if (window.innerWidth > global_constants.BREAKPOINTS.sm && this.popup) {
|
|
309
|
+
this._shouldRenderAsPopup = this.popup;
|
|
310
|
+
}
|
|
299
311
|
this._setupContext();
|
|
300
312
|
try {
|
|
301
313
|
this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
|
|
@@ -329,7 +341,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
329
341
|
this._setupInitialSearchPhrase();
|
|
330
342
|
this._setupListeners();
|
|
331
343
|
this._setupAriaAttributes();
|
|
332
|
-
if (this.
|
|
344
|
+
if (this._shouldRenderAsPopup) {
|
|
333
345
|
this._shouldShowHistory = true;
|
|
334
346
|
}
|
|
335
347
|
}
|
|
@@ -340,6 +352,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
340
352
|
document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
|
|
341
353
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
342
354
|
window.removeEventListener('resize', this._switchTypeOfSearchView);
|
|
355
|
+
window.removeEventListener('resize', this._updateShouldRenderAsPopup);
|
|
343
356
|
(_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
|
|
344
357
|
}
|
|
345
358
|
_setupContext() {
|
|
@@ -380,7 +393,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
380
393
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(search_constants.SEARCH_CLASS_NAMES.outline);
|
|
381
394
|
const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
|
|
382
395
|
this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
|
|
383
|
-
if (!this.
|
|
396
|
+
if (!this._shouldRenderAsPopup) {
|
|
384
397
|
document.addEventListener('keydown', this._bindKeys);
|
|
385
398
|
document.addEventListener('keyup', this._handleSearchTabNavigation);
|
|
386
399
|
}
|
|
@@ -420,6 +433,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
420
433
|
});
|
|
421
434
|
document.addEventListener('click', this._hideSuggesterOnClickOutside);
|
|
422
435
|
window.addEventListener('resize', this._switchTypeOfSearchView);
|
|
436
|
+
window.addEventListener('resize', this._updateShouldRenderAsPopup);
|
|
423
437
|
this._searchForm.addEventListener('keydown', this._preventSubmitOnSearchClear);
|
|
424
438
|
}
|
|
425
439
|
_updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
|
|
@@ -513,7 +527,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
513
527
|
this._setActiveItemId(`${this._id}-1`);
|
|
514
528
|
const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
|
|
515
529
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
|
|
516
|
-
if (!this.
|
|
530
|
+
if (!this._shouldRenderAsPopup)
|
|
517
531
|
this._hideHistorySuggestionsAndResults();
|
|
518
532
|
this._removeSearchKeyboardNavigation();
|
|
519
533
|
}
|
|
@@ -541,7 +555,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
541
555
|
render() {
|
|
542
556
|
super.render();
|
|
543
557
|
return lit.html `
|
|
544
|
-
${when.when(this.
|
|
558
|
+
${when.when(this._shouldRenderAsPopup, () => lit.nothing, () => lit.html `
|
|
545
559
|
<div
|
|
546
560
|
class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon"
|
|
547
561
|
tabindex="0"
|
|
@@ -620,12 +634,16 @@ tslib_es6.__decorate([
|
|
|
620
634
|
], exports.HSearch.prototype, "locale", void 0);
|
|
621
635
|
tslib_es6.__decorate([
|
|
622
636
|
decorators.property({ type: Boolean, attribute: 'popup' }),
|
|
623
|
-
tslib_es6.__metadata("design:type",
|
|
624
|
-
], exports.HSearch.prototype, "
|
|
637
|
+
tslib_es6.__metadata("design:type", Boolean)
|
|
638
|
+
], exports.HSearch.prototype, "popup", void 0);
|
|
625
639
|
tslib_es6.__decorate([
|
|
626
640
|
decorators.property({ type: String, attribute: 'module-instance-id' }),
|
|
627
641
|
tslib_es6.__metadata("design:type", String)
|
|
628
642
|
], exports.HSearch.prototype, "moduleInstanceId", void 0);
|
|
643
|
+
tslib_es6.__decorate([
|
|
644
|
+
decorators.state(),
|
|
645
|
+
tslib_es6.__metadata("design:type", Object)
|
|
646
|
+
], exports.HSearch.prototype, "_shouldRenderAsPopup", void 0);
|
|
629
647
|
tslib_es6.__decorate([
|
|
630
648
|
decorators.state(),
|
|
631
649
|
tslib_es6.__metadata("design:type", Boolean)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -5,8 +5,9 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
5
5
|
settings: TSearchSettings;
|
|
6
6
|
view: string;
|
|
7
7
|
locale: string;
|
|
8
|
-
|
|
8
|
+
popup: boolean;
|
|
9
9
|
moduleInstanceId: string;
|
|
10
|
+
private _shouldRenderAsPopup;
|
|
10
11
|
private _historyContextProvider;
|
|
11
12
|
private _searchContextConsumer;
|
|
12
13
|
private _searchContext$;
|
|
@@ -72,6 +73,7 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
72
73
|
private _hideSuggesterOnClickOutside;
|
|
73
74
|
private _switchTypeOfSearchView;
|
|
74
75
|
private _isSuggesterLayerVisible;
|
|
76
|
+
private _updateShouldRenderAsPopup;
|
|
75
77
|
private _preventSubmitOnSearchClear;
|
|
76
78
|
private _resetSearchOnFocusOutside;
|
|
77
79
|
private _setupAriaAttributes;
|
|
@@ -19,6 +19,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
21
|
this.view = DEFAULT_VIEW;
|
|
22
|
+
this._shouldRenderAsPopup = false;
|
|
22
23
|
this._id = v4();
|
|
23
24
|
this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
|
|
24
25
|
this._searchContentContainerId = v4();
|
|
@@ -268,6 +269,14 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
268
269
|
? this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened)
|
|
269
270
|
: this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
270
271
|
};
|
|
272
|
+
this._updateShouldRenderAsPopup = () => {
|
|
273
|
+
if (window.innerWidth > BREAKPOINTS.sm && this.popup) {
|
|
274
|
+
this._shouldRenderAsPopup = true;
|
|
275
|
+
}
|
|
276
|
+
else {
|
|
277
|
+
this._shouldRenderAsPopup = false;
|
|
278
|
+
}
|
|
279
|
+
};
|
|
271
280
|
this._preventSubmitOnSearchClear = (ev) => {
|
|
272
281
|
const $searchClear = this.querySelector(SEARCH_COMPONENT_NAMES.clearButton);
|
|
273
282
|
if (ev.key === 'Enter' && ev.target === $searchClear) {
|
|
@@ -292,6 +301,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
292
301
|
}
|
|
293
302
|
async connectedCallback() {
|
|
294
303
|
super.connectedCallback();
|
|
304
|
+
if (window.innerWidth > BREAKPOINTS.sm && this.popup) {
|
|
305
|
+
this._shouldRenderAsPopup = this.popup;
|
|
306
|
+
}
|
|
295
307
|
this._setupContext();
|
|
296
308
|
try {
|
|
297
309
|
this._searchContextConsumer = new ContextConsumerController(this);
|
|
@@ -325,7 +337,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
325
337
|
this._setupInitialSearchPhrase();
|
|
326
338
|
this._setupListeners();
|
|
327
339
|
this._setupAriaAttributes();
|
|
328
|
-
if (this.
|
|
340
|
+
if (this._shouldRenderAsPopup) {
|
|
329
341
|
this._shouldShowHistory = true;
|
|
330
342
|
}
|
|
331
343
|
}
|
|
@@ -336,6 +348,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
336
348
|
document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
|
|
337
349
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
338
350
|
window.removeEventListener('resize', this._switchTypeOfSearchView);
|
|
351
|
+
window.removeEventListener('resize', this._updateShouldRenderAsPopup);
|
|
339
352
|
(_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
|
|
340
353
|
}
|
|
341
354
|
_setupContext() {
|
|
@@ -376,7 +389,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
376
389
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(SEARCH_CLASS_NAMES.outline);
|
|
377
390
|
const shouldShowMessage = ((_b = ev.detail) === null || _b === void 0 ? void 0 : _b.searchPhrase) !== '';
|
|
378
391
|
this._updateSearchView(((_c = ev.detail) === null || _c === void 0 ? void 0 : _c.searchPhrase) || '', shouldShowMessage, false);
|
|
379
|
-
if (!this.
|
|
392
|
+
if (!this._shouldRenderAsPopup) {
|
|
380
393
|
document.addEventListener('keydown', this._bindKeys);
|
|
381
394
|
document.addEventListener('keyup', this._handleSearchTabNavigation);
|
|
382
395
|
}
|
|
@@ -416,6 +429,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
416
429
|
});
|
|
417
430
|
document.addEventListener('click', this._hideSuggesterOnClickOutside);
|
|
418
431
|
window.addEventListener('resize', this._switchTypeOfSearchView);
|
|
432
|
+
window.addEventListener('resize', this._updateShouldRenderAsPopup);
|
|
419
433
|
this._searchForm.addEventListener('keydown', this._preventSubmitOnSearchClear);
|
|
420
434
|
}
|
|
421
435
|
_updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
|
|
@@ -509,7 +523,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
509
523
|
this._setActiveItemId(`${this._id}-1`);
|
|
510
524
|
const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
|
|
511
525
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
|
|
512
|
-
if (!this.
|
|
526
|
+
if (!this._shouldRenderAsPopup)
|
|
513
527
|
this._hideHistorySuggestionsAndResults();
|
|
514
528
|
this._removeSearchKeyboardNavigation();
|
|
515
529
|
}
|
|
@@ -537,7 +551,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
537
551
|
render() {
|
|
538
552
|
super.render();
|
|
539
553
|
return html `
|
|
540
|
-
${n(this.
|
|
554
|
+
${n(this._shouldRenderAsPopup, () => nothing, () => html `
|
|
541
555
|
<div
|
|
542
556
|
class="${SEARCH_CLASS_NAMES.icon} labeled-icon"
|
|
543
557
|
tabindex="0"
|
|
@@ -616,12 +630,16 @@ __decorate([
|
|
|
616
630
|
], HSearch.prototype, "locale", void 0);
|
|
617
631
|
__decorate([
|
|
618
632
|
property({ type: Boolean, attribute: 'popup' }),
|
|
619
|
-
__metadata("design:type",
|
|
620
|
-
], HSearch.prototype, "
|
|
633
|
+
__metadata("design:type", Boolean)
|
|
634
|
+
], HSearch.prototype, "popup", void 0);
|
|
621
635
|
__decorate([
|
|
622
636
|
property({ type: String, attribute: 'module-instance-id' }),
|
|
623
637
|
__metadata("design:type", String)
|
|
624
638
|
], HSearch.prototype, "moduleInstanceId", void 0);
|
|
639
|
+
__decorate([
|
|
640
|
+
state(),
|
|
641
|
+
__metadata("design:type", Object)
|
|
642
|
+
], HSearch.prototype, "_shouldRenderAsPopup", void 0);
|
|
625
643
|
__decorate([
|
|
626
644
|
state(),
|
|
627
645
|
__metadata("design:type", Boolean)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|