@shoper/phoenix_design_system 1.18.27-9 → 1.18.28-0
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 +9 -53
- package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js +1 -3
- package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +3 -35
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +22 -51
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +10 -8
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +0 -3
- package/build/esm/packages/phoenix/src/components/form/search/search.js +9 -53
- package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search_constants.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/form/search/search_constants.js +1 -3
- package/build/esm/packages/phoenix/src/components/form/search/search_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.d.ts +0 -4
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +4 -36
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +0 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +22 -51
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +10 -8
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,6 @@ var decorators = require('lit/decorators');
|
|
|
8
8
|
var utilities = require('@dreamcommerce/utilities');
|
|
9
9
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
10
10
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
11
|
-
var icon_constants = require('../../icon/icon_constants.js');
|
|
12
11
|
var observer = require('../../../core/classes/observer/observer.js');
|
|
13
12
|
var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
|
|
14
13
|
var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
|
|
@@ -25,8 +24,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
25
24
|
constructor() {
|
|
26
25
|
super(...arguments);
|
|
27
26
|
this.view = search_constants.DEFAULT_VIEW;
|
|
28
|
-
this.isSearchIconFixEnabled = false;
|
|
29
|
-
this.isSearchUxFixesFlagEnabled = false;
|
|
30
27
|
this.displayMode = 'dropdown';
|
|
31
28
|
this._togglerElement = null;
|
|
32
29
|
this._id = v4['default']();
|
|
@@ -51,24 +48,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
51
48
|
this._handleSubmitForm = () => {
|
|
52
49
|
if (this._activeItemId !== `${this._id}-1`)
|
|
53
50
|
return;
|
|
54
|
-
const inputFieldValue = this.
|
|
51
|
+
const inputFieldValue = this._inputField.value.trim();
|
|
55
52
|
if (inputFieldValue === '') {
|
|
56
53
|
this._updateSearchView(this._inputField.value, true);
|
|
57
|
-
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
if (!this.isSearchUxFixesFlagEnabled)
|
|
62
|
-
this._resetSearchView();
|
|
63
|
-
}
|
|
64
|
-
if (this.isSearchUxFixesFlagEnabled) {
|
|
65
|
-
const normalizedPhrase = this._inputField.value.trim().replace(/\s+/g, ' ');
|
|
66
|
-
this._inputField.value = normalizedPhrase;
|
|
67
|
-
this._submitSearchPhrase(normalizedPhrase);
|
|
68
|
-
}
|
|
69
|
-
else {
|
|
70
|
-
this._submitSearchPhrase(this._inputField.value);
|
|
54
|
+
return;
|
|
71
55
|
}
|
|
56
|
+
const normalizedPhrase = this._inputField.value.trim().replace(/\s+/g, ' ');
|
|
57
|
+
this._inputField.value = normalizedPhrase;
|
|
58
|
+
this._submitSearchPhrase(normalizedPhrase);
|
|
72
59
|
};
|
|
73
60
|
this._bindKeys = (ev) => {
|
|
74
61
|
if (this.displayMode !== 'dropdown') {
|
|
@@ -318,7 +305,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
318
305
|
if (!outsideClick)
|
|
319
306
|
return;
|
|
320
307
|
this._resetSearchView();
|
|
321
|
-
this.
|
|
308
|
+
this._removeSearchKeyboardNavigation();
|
|
322
309
|
};
|
|
323
310
|
this._switchTypeOfSearchView = () => {
|
|
324
311
|
var _a;
|
|
@@ -362,12 +349,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
362
349
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
363
350
|
}
|
|
364
351
|
};
|
|
365
|
-
this._setupAriaAttributes = () => {
|
|
366
|
-
var _a;
|
|
367
|
-
if (this._translations.openSearchButtonAriaLabel) {
|
|
368
|
-
(_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
|
|
369
|
-
}
|
|
370
|
-
};
|
|
371
352
|
this._handleOpenSearch = () => {
|
|
372
353
|
this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
|
|
373
354
|
const shouldShowMessage = this._searchPhrase !== '';
|
|
@@ -418,7 +399,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
418
399
|
this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
|
|
419
400
|
this._setupInitialSearchPhrase();
|
|
420
401
|
this._setupListeners();
|
|
421
|
-
this.
|
|
402
|
+
this._setupToggler();
|
|
422
403
|
}
|
|
423
404
|
disconnectedCallback() {
|
|
424
405
|
var _a;
|
|
@@ -428,8 +409,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
428
409
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
429
410
|
window.removeEventListener('resize', this._switchTypeOfSearchView);
|
|
430
411
|
(_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
|
|
431
|
-
|
|
432
|
-
this._teardownToggler();
|
|
412
|
+
this._teardownToggler();
|
|
433
413
|
}
|
|
434
414
|
_setupContext() {
|
|
435
415
|
this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
|
|
@@ -491,7 +471,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
491
471
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.close, () => {
|
|
492
472
|
this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
|
|
493
473
|
this._resetSearchView();
|
|
494
|
-
this.
|
|
474
|
+
this._removeSearchKeyboardNavigation();
|
|
495
475
|
});
|
|
496
476
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
|
|
497
477
|
const contentLength = this._searchHistory.length;
|
|
@@ -600,7 +580,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
600
580
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
|
|
601
581
|
if (this.displayMode === 'dropdown')
|
|
602
582
|
this._hideHistorySuggestionsAndResults();
|
|
603
|
-
!this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
|
|
604
583
|
}
|
|
605
584
|
_submitSearchPhrase(searchPhrase) {
|
|
606
585
|
this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
|
|
@@ -621,21 +600,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
621
600
|
render() {
|
|
622
601
|
super.render();
|
|
623
602
|
return lit.html `
|
|
624
|
-
${when.when(!this.isSearchIconFixEnabled, () => lit.html ` <div
|
|
625
|
-
class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
|
|
626
|
-
tabindex="0"
|
|
627
|
-
aria-haspopup="dialog"
|
|
628
|
-
@click=${this._handleOpenSearch}
|
|
629
|
-
@keyup=${this._handleOpenSearchWithKeyboard}
|
|
630
|
-
>
|
|
631
|
-
${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
|
|
632
|
-
<span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
|
|
633
|
-
${this._translations.openSearchButtonAriaLabel}
|
|
634
|
-
</span>
|
|
635
|
-
`)}
|
|
636
|
-
<h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
|
|
637
|
-
<div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
|
|
638
|
-
</div>`)}
|
|
639
603
|
${when.when(this._isSuggesterLayerVisible(), () => lit.html `
|
|
640
604
|
<div class="${search_constants.SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
|
|
641
605
|
${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
|
|
@@ -688,14 +652,6 @@ tslib_es6.__decorate([
|
|
|
688
652
|
decorators.property({ type: String }),
|
|
689
653
|
tslib_es6.__metadata("design:type", String)
|
|
690
654
|
], exports.HSearch.prototype, "locale", void 0);
|
|
691
|
-
tslib_es6.__decorate([
|
|
692
|
-
decorators.property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
|
|
693
|
-
tslib_es6.__metadata("design:type", Boolean)
|
|
694
|
-
], exports.HSearch.prototype, "isSearchIconFixEnabled", void 0);
|
|
695
|
-
tslib_es6.__decorate([
|
|
696
|
-
decorators.property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
|
|
697
|
-
tslib_es6.__metadata("design:type", Boolean)
|
|
698
|
-
], exports.HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
|
|
699
655
|
tslib_es6.__decorate([
|
|
700
656
|
decorators.property({ type: String, attribute: 'display-mode' }),
|
|
701
657
|
tslib_es6.__metadata("design:type", String)
|
|
@@ -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
|
|
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,iBAAiB,wDAA4D;AAC7E;AACA;AACA,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -70,9 +70,7 @@ const SEARCH_CLASS_NAMES = {
|
|
|
70
70
|
messageText: `${baseSearchCssClass}__message-text`,
|
|
71
71
|
loader: 'loader',
|
|
72
72
|
loaderSpinner: 'loader__spinner',
|
|
73
|
-
loaderSpinnerXs: 'loader__spinner_xs'
|
|
74
|
-
clear: `${baseSearchCssClass}__clear`,
|
|
75
|
-
clearHidden: `${baseSearchCssClass}__clear_hidden`
|
|
73
|
+
loaderSpinnerXs: 'loader__spinner_xs'
|
|
76
74
|
};
|
|
77
75
|
const SEARCH_CONTEXT_NAMES = {
|
|
78
76
|
historyContext: 'historyContext',
|
|
@@ -1 +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;
|
|
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;"}
|
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js
CHANGED
|
@@ -16,23 +16,10 @@ var search_constants = require('../../search_constants.js');
|
|
|
16
16
|
exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
17
17
|
constructor() {
|
|
18
18
|
super();
|
|
19
|
-
this.isSearchClearFixFlagEnabled = false;
|
|
20
19
|
this._shouldShow = false;
|
|
21
20
|
this._isRequestPending = false;
|
|
22
|
-
this._$searchInput = null;
|
|
23
21
|
this._handleClearButtonOnPhraseEnter = (ev) => {
|
|
24
|
-
this.
|
|
25
|
-
};
|
|
26
|
-
this._updateClearButtonVisibility = (searchPhrase) => {
|
|
27
|
-
this._shouldShow = searchPhrase !== '';
|
|
28
|
-
};
|
|
29
|
-
this._handleSearchClear = () => {
|
|
30
|
-
var _a;
|
|
31
|
-
this._dispatchClearEvent();
|
|
32
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
33
|
-
this._updateClearButtonVisibility('');
|
|
34
|
-
(_a = this._$searchInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
35
|
-
}
|
|
22
|
+
this._shouldShow = ev.detail.searchPhrase !== '';
|
|
36
23
|
};
|
|
37
24
|
this._dispatchClearEvent = () => {
|
|
38
25
|
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, {
|
|
@@ -41,40 +28,25 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
|
|
|
41
28
|
}
|
|
42
29
|
});
|
|
43
30
|
};
|
|
44
|
-
this._btnController = new btn_controller.BtnController(this, this.
|
|
31
|
+
this._btnController = new btn_controller.BtnController(this, this._dispatchClearEvent);
|
|
45
32
|
}
|
|
46
33
|
connectedCallback() {
|
|
47
|
-
var _a, _b, _c;
|
|
48
34
|
super.connectedCallback();
|
|
49
35
|
this._searchContextSetup();
|
|
50
|
-
|
|
51
|
-
this._$searchInput = (_a = $search === null || $search === void 0 ? void 0 : $search.querySelector('input[type="search"]')) !== null && _a !== void 0 ? _a : null;
|
|
52
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
53
|
-
this._updateClearButtonVisibility((_c = (_b = this._$searchInput) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '');
|
|
54
|
-
}
|
|
55
|
-
this.addEventListener('click', this._handleSearchClear);
|
|
36
|
+
this.addEventListener('click', this._dispatchClearEvent);
|
|
56
37
|
document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, this._handleClearButtonOnPhraseEnter);
|
|
57
38
|
}
|
|
58
39
|
updated(_changedProperties) {
|
|
59
|
-
var _a, _b;
|
|
60
40
|
super.updated(_changedProperties);
|
|
61
41
|
if (this._shouldShow) {
|
|
62
42
|
this.setAttribute('tabindex', '0');
|
|
63
43
|
this.removeAttribute('aria-hidden');
|
|
64
44
|
this.setAttribute('role', 'button');
|
|
65
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
66
|
-
this.classList.remove(search_constants.SEARCH_CLASS_NAMES.clearHidden);
|
|
67
|
-
(_a = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.clear}`)) === null || _a === void 0 ? void 0 : _a.classList.remove(search_constants.SEARCH_CLASS_NAMES.clearHidden);
|
|
68
|
-
}
|
|
69
45
|
}
|
|
70
46
|
else {
|
|
71
47
|
this.setAttribute('tabindex', '-1');
|
|
72
48
|
this.setAttribute('aria-hidden', 'true');
|
|
73
49
|
this.removeAttribute('role');
|
|
74
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
75
|
-
this.classList.add(search_constants.SEARCH_CLASS_NAMES.clearHidden);
|
|
76
|
-
(_b = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.clear}`)) === null || _b === void 0 ? void 0 : _b.classList.add(search_constants.SEARCH_CLASS_NAMES.clearHidden);
|
|
77
|
-
}
|
|
78
50
|
}
|
|
79
51
|
}
|
|
80
52
|
async _searchContextSetup() {
|
|
@@ -108,10 +80,6 @@ tslib_es6.__decorate([
|
|
|
108
80
|
decorators.property({ type: String, attribute: 'module-instance-id' }),
|
|
109
81
|
tslib_es6.__metadata("design:type", String)
|
|
110
82
|
], exports.HSearchClear.prototype, "moduleInstanceId", void 0);
|
|
111
|
-
tslib_es6.__decorate([
|
|
112
|
-
decorators.property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
|
|
113
|
-
tslib_es6.__metadata("design:type", Boolean)
|
|
114
|
-
], exports.HSearchClear.prototype, "isSearchClearFixFlagEnabled", void 0);
|
|
115
83
|
tslib_es6.__decorate([
|
|
116
84
|
decorators.state(),
|
|
117
85
|
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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,8DAAkE;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,8DAAkE;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/subcomponents/input/search_input.js
CHANGED
|
@@ -13,7 +13,6 @@ var search_constants = require('../../search_constants.js');
|
|
|
13
13
|
exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
|
-
this.isSearchClearFixFlagEnabled = false;
|
|
17
16
|
this._isSearchPhraseCleared = false;
|
|
18
17
|
this._setupAttributes = () => {
|
|
19
18
|
var _a, _b, _c, _d;
|
|
@@ -73,60 +72,36 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
|
|
|
73
72
|
}
|
|
74
73
|
});
|
|
75
74
|
});
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
if (this._isSearchPhraseCleared) {
|
|
81
|
-
this._isSearchPhraseCleared = false;
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
85
|
-
detail: { searchPhrase: ev.target.value }
|
|
86
|
-
});
|
|
87
|
-
});
|
|
88
|
-
this.input.addEventListener('keyup', debounce['default']((ev) => {
|
|
89
|
-
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
|
|
90
|
-
return;
|
|
75
|
+
this.input.addEventListener('keyup', (ev) => {
|
|
76
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
|
|
77
|
+
return;
|
|
78
|
+
if (ev.key !== 'Enter') {
|
|
91
79
|
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
92
80
|
detail: {
|
|
93
81
|
searchPhrase: ev.target.value
|
|
94
82
|
}
|
|
95
83
|
});
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
searchPhrase: ev.target.value
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
return;
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
if (this._isSearchPhraseCleared) {
|
|
87
|
+
this._isSearchPhraseCleared = false;
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
91
|
+
detail: {
|
|
92
|
+
searchPhrase: ev.target.value
|
|
109
93
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
this.input.addEventListener('keyup', debounce['default']((ev) => {
|
|
97
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
|
|
98
|
+
return;
|
|
99
|
+
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
100
|
+
detail: {
|
|
101
|
+
searchPhrase: ev.target.value
|
|
113
102
|
}
|
|
114
|
-
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
115
|
-
detail: {
|
|
116
|
-
searchPhrase: ev.target.value
|
|
117
|
-
}
|
|
118
|
-
});
|
|
119
103
|
});
|
|
120
|
-
|
|
121
|
-
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
|
|
122
|
-
return;
|
|
123
|
-
this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
124
|
-
detail: {
|
|
125
|
-
searchPhrase: ev.target.value
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
}, 200));
|
|
129
|
-
}
|
|
104
|
+
}, 200));
|
|
130
105
|
this.input.addEventListener('search', (ev) => {
|
|
131
106
|
if (this.input.value !== '') {
|
|
132
107
|
return;
|
|
@@ -160,10 +135,6 @@ tslib_es6.__decorate([
|
|
|
160
135
|
decorators.property({ type: String, attribute: 'module-instance-id' }),
|
|
161
136
|
tslib_es6.__metadata("design:type", String)
|
|
162
137
|
], exports.HSearchInput.prototype, "moduleInstanceId", void 0);
|
|
163
|
-
tslib_es6.__decorate([
|
|
164
|
-
decorators.property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
|
|
165
|
-
tslib_es6.__metadata("design:type", Boolean)
|
|
166
|
-
], exports.HSearchInput.prototype, "isSearchClearFixFlagEnabled", void 0);
|
|
167
138
|
tslib_es6.__decorate([
|
|
168
139
|
decorators.state(),
|
|
169
140
|
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,qDAAyD;AACjF;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -98,14 +98,16 @@ exports.HSearchResults = class HSearchResults extends phoenix_light_lit_element.
|
|
|
98
98
|
data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
|
|
99
99
|
>
|
|
100
100
|
${this.translations.loadMore}
|
|
101
|
-
</button>`), () =>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
101
|
+
</button>`), () => lit.html `
|
|
102
|
+
<button
|
|
103
|
+
class="${search_constants.SEARCH_CLASS_NAMES.productButton}"
|
|
104
|
+
@click="${this.handleGoToProductsFor}"
|
|
105
|
+
type="button"
|
|
106
|
+
data-search-item-id="${this.searchId}${this._goToProductsForButtonId}"
|
|
107
|
+
>
|
|
108
|
+
${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
|
|
109
|
+
</button>
|
|
110
|
+
`)}
|
|
109
111
|
</div>
|
|
110
112
|
`)}
|
|
111
113
|
${when.when((_d = this.results.producers) === null || _d === void 0 ? void 0 : _d.length, () => lit.html ` <h-search-producer-content
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,8DAAkE;AACrF;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,iBAAiB,8DAAkE;AACnF,mBAAmB,8DAAkE;AACrF;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -5,8 +5,6 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
5
5
|
settings: TSearchSettings;
|
|
6
6
|
view: string;
|
|
7
7
|
locale: string;
|
|
8
|
-
isSearchIconFixEnabled: boolean;
|
|
9
|
-
isSearchUxFixesFlagEnabled: boolean;
|
|
10
8
|
displayMode: TSearchDisplayMode;
|
|
11
9
|
moduleInstanceId: string;
|
|
12
10
|
private _historyContextProvider;
|
|
@@ -81,7 +79,6 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
81
79
|
private _isSuggesterLayerVisible;
|
|
82
80
|
private _preventSubmitOnSearchClear;
|
|
83
81
|
private _resetSearchOnFocusOutside;
|
|
84
|
-
private _setupAriaAttributes;
|
|
85
82
|
private _handleOpenSearch;
|
|
86
83
|
private _handleOpenSearchWithKeyboard;
|
|
87
84
|
private _setupToggler;
|
|
@@ -4,7 +4,6 @@ import { property, state } from 'lit/decorators';
|
|
|
4
4
|
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
5
5
|
import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
6
6
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
7
|
-
import { ICONS_SIZES } from '../../icon/icon_constants.js';
|
|
8
7
|
import { Observer } from '../../../core/classes/observer/observer.js';
|
|
9
8
|
import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
|
|
10
9
|
import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior_subject.js';
|
|
@@ -21,8 +20,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
21
20
|
constructor() {
|
|
22
21
|
super(...arguments);
|
|
23
22
|
this.view = DEFAULT_VIEW;
|
|
24
|
-
this.isSearchIconFixEnabled = false;
|
|
25
|
-
this.isSearchUxFixesFlagEnabled = false;
|
|
26
23
|
this.displayMode = 'dropdown';
|
|
27
24
|
this._togglerElement = null;
|
|
28
25
|
this._id = v4();
|
|
@@ -47,24 +44,14 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
47
44
|
this._handleSubmitForm = () => {
|
|
48
45
|
if (this._activeItemId !== `${this._id}-1`)
|
|
49
46
|
return;
|
|
50
|
-
const inputFieldValue = this.
|
|
47
|
+
const inputFieldValue = this._inputField.value.trim();
|
|
51
48
|
if (inputFieldValue === '') {
|
|
52
49
|
this._updateSearchView(this._inputField.value, true);
|
|
53
|
-
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
if (!this.isSearchUxFixesFlagEnabled)
|
|
58
|
-
this._resetSearchView();
|
|
59
|
-
}
|
|
60
|
-
if (this.isSearchUxFixesFlagEnabled) {
|
|
61
|
-
const normalizedPhrase = this._inputField.value.trim().replace(/\s+/g, ' ');
|
|
62
|
-
this._inputField.value = normalizedPhrase;
|
|
63
|
-
this._submitSearchPhrase(normalizedPhrase);
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
this._submitSearchPhrase(this._inputField.value);
|
|
50
|
+
return;
|
|
67
51
|
}
|
|
52
|
+
const normalizedPhrase = this._inputField.value.trim().replace(/\s+/g, ' ');
|
|
53
|
+
this._inputField.value = normalizedPhrase;
|
|
54
|
+
this._submitSearchPhrase(normalizedPhrase);
|
|
68
55
|
};
|
|
69
56
|
this._bindKeys = (ev) => {
|
|
70
57
|
if (this.displayMode !== 'dropdown') {
|
|
@@ -314,7 +301,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
314
301
|
if (!outsideClick)
|
|
315
302
|
return;
|
|
316
303
|
this._resetSearchView();
|
|
317
|
-
this.
|
|
304
|
+
this._removeSearchKeyboardNavigation();
|
|
318
305
|
};
|
|
319
306
|
this._switchTypeOfSearchView = () => {
|
|
320
307
|
var _a;
|
|
@@ -358,12 +345,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
358
345
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
359
346
|
}
|
|
360
347
|
};
|
|
361
|
-
this._setupAriaAttributes = () => {
|
|
362
|
-
var _a;
|
|
363
|
-
if (this._translations.openSearchButtonAriaLabel) {
|
|
364
|
-
(_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
|
|
365
|
-
}
|
|
366
|
-
};
|
|
367
348
|
this._handleOpenSearch = () => {
|
|
368
349
|
this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
369
350
|
const shouldShowMessage = this._searchPhrase !== '';
|
|
@@ -414,7 +395,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
414
395
|
this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
|
|
415
396
|
this._setupInitialSearchPhrase();
|
|
416
397
|
this._setupListeners();
|
|
417
|
-
this.
|
|
398
|
+
this._setupToggler();
|
|
418
399
|
}
|
|
419
400
|
disconnectedCallback() {
|
|
420
401
|
var _a;
|
|
@@ -424,8 +405,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
424
405
|
document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
|
|
425
406
|
window.removeEventListener('resize', this._switchTypeOfSearchView);
|
|
426
407
|
(_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
|
|
427
|
-
|
|
428
|
-
this._teardownToggler();
|
|
408
|
+
this._teardownToggler();
|
|
429
409
|
}
|
|
430
410
|
_setupContext() {
|
|
431
411
|
this._historyContextProvider = new ContextProviderController(this);
|
|
@@ -487,7 +467,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
487
467
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.close, () => {
|
|
488
468
|
this.classList.remove(SEARCH_CLASS_NAMES.mobileOpened);
|
|
489
469
|
this._resetSearchView();
|
|
490
|
-
this.
|
|
470
|
+
this._removeSearchKeyboardNavigation();
|
|
491
471
|
});
|
|
492
472
|
this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.loadMoreHistoryItems, () => {
|
|
493
473
|
const contentLength = this._searchHistory.length;
|
|
@@ -596,7 +576,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
596
576
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
|
|
597
577
|
if (this.displayMode === 'dropdown')
|
|
598
578
|
this._hideHistorySuggestionsAndResults();
|
|
599
|
-
!this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
|
|
600
579
|
}
|
|
601
580
|
_submitSearchPhrase(searchPhrase) {
|
|
602
581
|
this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
|
|
@@ -617,21 +596,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
617
596
|
render() {
|
|
618
597
|
super.render();
|
|
619
598
|
return html `
|
|
620
|
-
${n(!this.isSearchIconFixEnabled, () => html ` <div
|
|
621
|
-
class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
|
|
622
|
-
tabindex="0"
|
|
623
|
-
aria-haspopup="dialog"
|
|
624
|
-
@click=${this._handleOpenSearch}
|
|
625
|
-
@keyup=${this._handleOpenSearchWithKeyboard}
|
|
626
|
-
>
|
|
627
|
-
${n(this._translations.openSearchButtonAriaLabel, () => html `
|
|
628
|
-
<span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
|
|
629
|
-
${this._translations.openSearchButtonAriaLabel}
|
|
630
|
-
</span>
|
|
631
|
-
`)}
|
|
632
|
-
<h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
|
|
633
|
-
<div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
|
|
634
|
-
</div>`)}
|
|
635
599
|
${n(this._isSuggesterLayerVisible(), () => html `
|
|
636
600
|
<div class="${SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
|
|
637
601
|
${n(this._shouldShowMessage, () => html `<h-search-message
|
|
@@ -684,14 +648,6 @@ __decorate([
|
|
|
684
648
|
property({ type: String }),
|
|
685
649
|
__metadata("design:type", String)
|
|
686
650
|
], HSearch.prototype, "locale", void 0);
|
|
687
|
-
__decorate([
|
|
688
|
-
property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
|
|
689
|
-
__metadata("design:type", Boolean)
|
|
690
|
-
], HSearch.prototype, "isSearchIconFixEnabled", void 0);
|
|
691
|
-
__decorate([
|
|
692
|
-
property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
|
|
693
|
-
__metadata("design:type", Boolean)
|
|
694
|
-
], HSearch.prototype, "isSearchUxFixesFlagEnabled", void 0);
|
|
695
651
|
__decorate([
|
|
696
652
|
property({ type: String, attribute: 'display-mode' }),
|
|
697
653
|
__metadata("design:type", String)
|
|
@@ -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
|
|
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,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -67,8 +67,6 @@ export declare const SEARCH_CLASS_NAMES: {
|
|
|
67
67
|
readonly loader: "loader";
|
|
68
68
|
readonly loaderSpinner: "loader__spinner";
|
|
69
69
|
readonly loaderSpinnerXs: "loader__spinner_xs";
|
|
70
|
-
readonly clear: "search__clear";
|
|
71
|
-
readonly clearHidden: "search__clear_hidden";
|
|
72
70
|
};
|
|
73
71
|
export declare const SEARCH_CONTEXT_NAMES: {
|
|
74
72
|
readonly historyContext: "historyContext";
|
|
@@ -66,9 +66,7 @@ const SEARCH_CLASS_NAMES = {
|
|
|
66
66
|
messageText: `${baseSearchCssClass}__message-text`,
|
|
67
67
|
loader: 'loader',
|
|
68
68
|
loaderSpinner: 'loader__spinner',
|
|
69
|
-
loaderSpinnerXs: 'loader__spinner_xs'
|
|
70
|
-
clear: `${baseSearchCssClass}__clear`,
|
|
71
|
-
clearHidden: `${baseSearchCssClass}__clear_hidden`
|
|
69
|
+
loaderSpinnerXs: 'loader__spinner_xs'
|
|
72
70
|
};
|
|
73
71
|
const SEARCH_CONTEXT_NAMES = {
|
|
74
72
|
historyContext: 'historyContext',
|
|
@@ -1 +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;
|
|
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;"}
|
|
@@ -3,19 +3,15 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
|
|
|
3
3
|
export declare class HSearchClear extends PhoenixLightLitElement {
|
|
4
4
|
private _btnController;
|
|
5
5
|
moduleInstanceId: string;
|
|
6
|
-
isSearchClearFixFlagEnabled: boolean;
|
|
7
6
|
private _shouldShow;
|
|
8
7
|
private _isRequestPending;
|
|
9
8
|
private _searchContextConsumer;
|
|
10
9
|
private _searchContext$;
|
|
11
10
|
private _searchContextObserver;
|
|
12
|
-
private _$searchInput;
|
|
13
11
|
constructor();
|
|
14
12
|
connectedCallback(): void;
|
|
15
13
|
private _handleClearButtonOnPhraseEnter;
|
|
16
|
-
private _updateClearButtonVisibility;
|
|
17
14
|
protected updated(_changedProperties: PropertyValues): void;
|
|
18
|
-
private _handleSearchClear;
|
|
19
15
|
private _dispatchClearEvent;
|
|
20
16
|
private _searchContextSetup;
|
|
21
17
|
disconnectedCallback(): void;
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js
CHANGED
|
@@ -7,28 +7,15 @@ import { BtnController } from '../../../../../controllers/btn_controller/btn_con
|
|
|
7
7
|
import { Observer } from '../../../../../core/classes/observer/observer.js';
|
|
8
8
|
import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
|
|
9
9
|
import { when as n } from '../../../../../../../../external/lit-html/directives/when.js';
|
|
10
|
-
import { SEARCH_CUSTOM_EVENT_NAMES,
|
|
10
|
+
import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_CLASS_NAMES, SEARCH_SLOT_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
|
|
11
11
|
|
|
12
12
|
let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
|
|
13
13
|
constructor() {
|
|
14
14
|
super();
|
|
15
|
-
this.isSearchClearFixFlagEnabled = false;
|
|
16
15
|
this._shouldShow = false;
|
|
17
16
|
this._isRequestPending = false;
|
|
18
|
-
this._$searchInput = null;
|
|
19
17
|
this._handleClearButtonOnPhraseEnter = (ev) => {
|
|
20
|
-
this.
|
|
21
|
-
};
|
|
22
|
-
this._updateClearButtonVisibility = (searchPhrase) => {
|
|
23
|
-
this._shouldShow = searchPhrase !== '';
|
|
24
|
-
};
|
|
25
|
-
this._handleSearchClear = () => {
|
|
26
|
-
var _a;
|
|
27
|
-
this._dispatchClearEvent();
|
|
28
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
29
|
-
this._updateClearButtonVisibility('');
|
|
30
|
-
(_a = this._$searchInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
31
|
-
}
|
|
18
|
+
this._shouldShow = ev.detail.searchPhrase !== '';
|
|
32
19
|
};
|
|
33
20
|
this._dispatchClearEvent = () => {
|
|
34
21
|
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.clear, {
|
|
@@ -37,40 +24,25 @@ let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
|
|
|
37
24
|
}
|
|
38
25
|
});
|
|
39
26
|
};
|
|
40
|
-
this._btnController = new BtnController(this, this.
|
|
27
|
+
this._btnController = new BtnController(this, this._dispatchClearEvent);
|
|
41
28
|
}
|
|
42
29
|
connectedCallback() {
|
|
43
|
-
var _a, _b, _c;
|
|
44
30
|
super.connectedCallback();
|
|
45
31
|
this._searchContextSetup();
|
|
46
|
-
|
|
47
|
-
this._$searchInput = (_a = $search === null || $search === void 0 ? void 0 : $search.querySelector('input[type="search"]')) !== null && _a !== void 0 ? _a : null;
|
|
48
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
49
|
-
this._updateClearButtonVisibility((_c = (_b = this._$searchInput) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '');
|
|
50
|
-
}
|
|
51
|
-
this.addEventListener('click', this._handleSearchClear);
|
|
32
|
+
this.addEventListener('click', this._dispatchClearEvent);
|
|
52
33
|
document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, this._handleClearButtonOnPhraseEnter);
|
|
53
34
|
}
|
|
54
35
|
updated(_changedProperties) {
|
|
55
|
-
var _a, _b;
|
|
56
36
|
super.updated(_changedProperties);
|
|
57
37
|
if (this._shouldShow) {
|
|
58
38
|
this.setAttribute('tabindex', '0');
|
|
59
39
|
this.removeAttribute('aria-hidden');
|
|
60
40
|
this.setAttribute('role', 'button');
|
|
61
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
62
|
-
this.classList.remove(SEARCH_CLASS_NAMES.clearHidden);
|
|
63
|
-
(_a = this.querySelector(`.${SEARCH_CLASS_NAMES.clear}`)) === null || _a === void 0 ? void 0 : _a.classList.remove(SEARCH_CLASS_NAMES.clearHidden);
|
|
64
|
-
}
|
|
65
41
|
}
|
|
66
42
|
else {
|
|
67
43
|
this.setAttribute('tabindex', '-1');
|
|
68
44
|
this.setAttribute('aria-hidden', 'true');
|
|
69
45
|
this.removeAttribute('role');
|
|
70
|
-
if (this.isSearchClearFixFlagEnabled) {
|
|
71
|
-
this.classList.add(SEARCH_CLASS_NAMES.clearHidden);
|
|
72
|
-
(_b = this.querySelector(`.${SEARCH_CLASS_NAMES.clear}`)) === null || _b === void 0 ? void 0 : _b.classList.add(SEARCH_CLASS_NAMES.clearHidden);
|
|
73
|
-
}
|
|
74
46
|
}
|
|
75
47
|
}
|
|
76
48
|
async _searchContextSetup() {
|
|
@@ -104,10 +76,6 @@ __decorate([
|
|
|
104
76
|
property({ type: String, attribute: 'module-instance-id' }),
|
|
105
77
|
__metadata("design:type", String)
|
|
106
78
|
], HSearchClear.prototype, "moduleInstanceId", void 0);
|
|
107
|
-
__decorate([
|
|
108
|
-
property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
|
|
109
|
-
__metadata("design:type", Boolean)
|
|
110
|
-
], HSearchClear.prototype, "isSearchClearFixFlagEnabled", void 0);
|
|
111
79
|
__decorate([
|
|
112
80
|
state(),
|
|
113
81
|
__metadata("design:type", Boolean)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ import { PropertyValues } from 'lit';
|
|
|
3
3
|
export declare class HSearchInput extends PhoenixLightLitElement {
|
|
4
4
|
input: HTMLInputElement | null;
|
|
5
5
|
moduleInstanceId: string;
|
|
6
|
-
isSearchClearFixFlagEnabled: boolean;
|
|
7
6
|
private _isSearchPhraseCleared;
|
|
8
7
|
connectedCallback(): void;
|
|
9
8
|
firstUpdated(props: PropertyValues): void;
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js
CHANGED
|
@@ -9,7 +9,6 @@ import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES }
|
|
|
9
9
|
let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
|
-
this.isSearchClearFixFlagEnabled = false;
|
|
13
12
|
this._isSearchPhraseCleared = false;
|
|
14
13
|
this._setupAttributes = () => {
|
|
15
14
|
var _a, _b, _c, _d;
|
|
@@ -69,60 +68,36 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
|
|
|
69
68
|
}
|
|
70
69
|
});
|
|
71
70
|
});
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (this._isSearchPhraseCleared) {
|
|
77
|
-
this._isSearchPhraseCleared = false;
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
81
|
-
detail: { searchPhrase: ev.target.value }
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
this.input.addEventListener('keyup', debounce_1((ev) => {
|
|
85
|
-
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
|
|
86
|
-
return;
|
|
71
|
+
this.input.addEventListener('keyup', (ev) => {
|
|
72
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
|
|
73
|
+
return;
|
|
74
|
+
if (ev.key !== 'Enter') {
|
|
87
75
|
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
88
76
|
detail: {
|
|
89
77
|
searchPhrase: ev.target.value
|
|
90
78
|
}
|
|
91
79
|
});
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
searchPhrase: ev.target.value
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
return;
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
if (this._isSearchPhraseCleared) {
|
|
83
|
+
this._isSearchPhraseCleared = false;
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
87
|
+
detail: {
|
|
88
|
+
searchPhrase: ev.target.value
|
|
105
89
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
this.input.addEventListener('keyup', debounce_1((ev) => {
|
|
93
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
|
|
94
|
+
return;
|
|
95
|
+
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
96
|
+
detail: {
|
|
97
|
+
searchPhrase: ev.target.value
|
|
109
98
|
}
|
|
110
|
-
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
|
|
111
|
-
detail: {
|
|
112
|
-
searchPhrase: ev.target.value
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
99
|
});
|
|
116
|
-
|
|
117
|
-
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape' || ev.key === 'Enter')
|
|
118
|
-
return;
|
|
119
|
-
this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.keyup, {
|
|
120
|
-
detail: {
|
|
121
|
-
searchPhrase: ev.target.value
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
}, 200));
|
|
125
|
-
}
|
|
100
|
+
}, 200));
|
|
126
101
|
this.input.addEventListener('search', (ev) => {
|
|
127
102
|
if (this.input.value !== '') {
|
|
128
103
|
return;
|
|
@@ -156,10 +131,6 @@ __decorate([
|
|
|
156
131
|
property({ type: String, attribute: 'module-instance-id' }),
|
|
157
132
|
__metadata("design:type", String)
|
|
158
133
|
], HSearchInput.prototype, "moduleInstanceId", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
|
|
161
|
-
__metadata("design:type", Boolean)
|
|
162
|
-
], HSearchInput.prototype, "isSearchClearFixFlagEnabled", void 0);
|
|
163
134
|
__decorate([
|
|
164
135
|
state(),
|
|
165
136
|
__metadata("design:type", Boolean)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -94,14 +94,16 @@ let HSearchResults = class HSearchResults extends PhoenixLightLitElement {
|
|
|
94
94
|
data-search-item-id="${this.searchId}${this._loadMoreButtonId}"
|
|
95
95
|
>
|
|
96
96
|
${this.translations.loadMore}
|
|
97
|
-
</button>`), () =>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
</button>`), () => html `
|
|
98
|
+
<button
|
|
99
|
+
class="${SEARCH_CLASS_NAMES.productButton}"
|
|
100
|
+
@click="${this.handleGoToProductsFor}"
|
|
101
|
+
type="button"
|
|
102
|
+
data-search-item-id="${this.searchId}${this._goToProductsForButtonId}"
|
|
103
|
+
>
|
|
104
|
+
${this.translations.goToProductsFor}: <strong>${this._getSearchPhrase()}</strong>
|
|
105
|
+
</button>
|
|
106
|
+
`)}
|
|
105
107
|
</div>
|
|
106
108
|
`)}
|
|
107
109
|
${n((_d = this.results.producers) === null || _d === void 0 ? void 0 : _d.length, () => html ` <h-search-producer-content
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,eAAe,8DAAkE;AACjF,0BAA0B,8DAAkE;AAC5F;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|