@shoper/phoenix_design_system 1.17.16-7 → 1.17.16-9
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/subcomponents/results/search_producer_content.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +37 -30
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts +5 -5
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +37 -30
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@ exports.HSearchProducerContent = class HSearchProducerContent extends phoenix_li
|
|
|
37
37
|
: ''}"
|
|
38
38
|
data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
|
|
39
39
|
aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
|
|
40
|
-
tabindex="0
|
|
40
|
+
tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
|
|
41
41
|
role="option"
|
|
42
42
|
>
|
|
43
43
|
<a
|
|
@@ -50,7 +50,7 @@ exports.HSearchProductContent = class HSearchProductContent extends phoenix_ligh
|
|
|
50
50
|
: ''}"
|
|
51
51
|
data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
|
|
52
52
|
aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
|
|
53
|
-
tabindex="0
|
|
53
|
+
tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
|
|
54
54
|
role="option"
|
|
55
55
|
>
|
|
56
56
|
<a
|
|
@@ -7,6 +7,8 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
|
|
10
|
+
var observer = require('../../../../../core/classes/observer/observer.js');
|
|
11
|
+
var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
|
|
10
12
|
var when = require('../../../../../../../../external/lit-html/directives/when.js');
|
|
11
13
|
var search_constants = require('../../search_constants.js');
|
|
12
14
|
var repeat = require('../../../../../../../../external/lit-html/directives/repeat.js');
|
|
@@ -14,7 +16,9 @@ var repeat = require('../../../../../../../../external/lit-html/directives/repea
|
|
|
14
16
|
exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
15
17
|
constructor() {
|
|
16
18
|
super(...arguments);
|
|
19
|
+
this.initialItemIds = {};
|
|
17
20
|
this.translations = {};
|
|
21
|
+
this._searchPhrase = '';
|
|
18
22
|
this._suggestionsData = [];
|
|
19
23
|
this._updateSearchPhrase = (ev, suggestion) => {
|
|
20
24
|
ev.stopPropagation();
|
|
@@ -23,29 +27,40 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
|
|
|
23
27
|
}
|
|
24
28
|
async connectedCallback() {
|
|
25
29
|
super.connectedCallback();
|
|
26
|
-
|
|
30
|
+
try {
|
|
31
|
+
this._searchContextConsumer = new context_consumer_controller.ContextConsumerController(this);
|
|
32
|
+
this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
|
|
33
|
+
this._searchContextObserver = new observer.Observer((searchData) => {
|
|
34
|
+
this._searchPhrase = searchData.searchPhrase;
|
|
35
|
+
this._setupSuggestionData(searchData.results);
|
|
36
|
+
});
|
|
37
|
+
this._searchContext$.subscribe(this._searchContextObserver);
|
|
38
|
+
}
|
|
39
|
+
catch (_a) {
|
|
40
|
+
console.error('Search context is not provided');
|
|
41
|
+
}
|
|
27
42
|
}
|
|
28
|
-
_setupSuggestionData() {
|
|
43
|
+
_setupSuggestionData(results) {
|
|
29
44
|
let suggestionsData = [];
|
|
30
|
-
if (
|
|
31
|
-
|
|
45
|
+
if (results.suggestions.length) {
|
|
46
|
+
results.suggestions.forEach((suggestion, index) => {
|
|
32
47
|
suggestionsData.push({ suggestionName: suggestion, type: search_constants.SUGGESTIONS_TYPE.suggestion });
|
|
33
48
|
if (index)
|
|
34
49
|
return;
|
|
35
|
-
const isProductInTheCategory =
|
|
50
|
+
const isProductInTheCategory = results.products.length;
|
|
36
51
|
if (isProductInTheCategory) {
|
|
37
52
|
const lang = this.locale.split('_')[0];
|
|
38
53
|
suggestionsData.push({
|
|
39
54
|
suggestionName: suggestion,
|
|
40
|
-
categoryName:
|
|
55
|
+
categoryName: results.products[0].category.breadcrumbs,
|
|
41
56
|
type: search_constants.SUGGESTIONS_TYPE.suggestionInCategory,
|
|
42
|
-
url: `/${lang}/c/${
|
|
57
|
+
url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
|
|
43
58
|
});
|
|
44
59
|
}
|
|
45
|
-
if (
|
|
60
|
+
if (results.categories.length) {
|
|
46
61
|
suggestionsData = [
|
|
47
62
|
...suggestionsData,
|
|
48
|
-
...
|
|
63
|
+
...results.categories.map((category) => ({
|
|
49
64
|
categoryName: category.name,
|
|
50
65
|
url: category.url,
|
|
51
66
|
type: search_constants.SUGGESTIONS_TYPE.category
|
|
@@ -54,9 +69,9 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
|
|
|
54
69
|
}
|
|
55
70
|
});
|
|
56
71
|
}
|
|
57
|
-
else if (
|
|
72
|
+
else if (results.categories.length) {
|
|
58
73
|
suggestionsData = [
|
|
59
|
-
...
|
|
74
|
+
...results.categories.map((category) => ({
|
|
60
75
|
categoryName: category.name,
|
|
61
76
|
url: category.url,
|
|
62
77
|
type: search_constants.SUGGESTIONS_TYPE.category
|
|
@@ -84,10 +99,10 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
|
|
|
84
99
|
});
|
|
85
100
|
}
|
|
86
101
|
_getMatchedPhrase(phrase) {
|
|
87
|
-
const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.
|
|
102
|
+
const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
|
|
88
103
|
if (!phraseIncludesSearchPhrase)
|
|
89
104
|
return lit.html `${phrase}`;
|
|
90
|
-
const index = phrase.toLowerCase().indexOf(this.
|
|
105
|
+
const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
|
|
91
106
|
return lit.html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
|
|
92
107
|
}
|
|
93
108
|
render() {
|
|
@@ -106,7 +121,7 @@ exports.HSearchSuggestionContent = class HSearchSuggestionContent extends phoeni
|
|
|
106
121
|
aria-label="${this.suggestionAriaLabel ?
|
|
107
122
|
`${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
|
|
108
123
|
''}"
|
|
109
|
-
tabindex="0
|
|
124
|
+
tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
|
|
110
125
|
role="option"
|
|
111
126
|
>
|
|
112
127
|
${when.when(suggestion.type === search_constants.SUGGESTIONS_TYPE.suggestion, () => lit.html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
|
|
@@ -137,6 +152,10 @@ tslib_es6.__decorate([
|
|
|
137
152
|
decorators.property({ type: String, attribute: 'search-id' }),
|
|
138
153
|
tslib_es6.__metadata("design:type", String)
|
|
139
154
|
], exports.HSearchSuggestionContent.prototype, "searchId", void 0);
|
|
155
|
+
tslib_es6.__decorate([
|
|
156
|
+
decorators.property({ type: Object, reflect: true }),
|
|
157
|
+
tslib_es6.__metadata("design:type", Object)
|
|
158
|
+
], exports.HSearchSuggestionContent.prototype, "initialItemIds", void 0);
|
|
140
159
|
tslib_es6.__decorate([
|
|
141
160
|
decorators.property({ type: Object }),
|
|
142
161
|
tslib_es6.__metadata("design:type", Object)
|
|
@@ -153,26 +172,14 @@ tslib_es6.__decorate([
|
|
|
153
172
|
decorators.property({ type: String, attribute: 'module-instance-id' }),
|
|
154
173
|
tslib_es6.__metadata("design:type", String)
|
|
155
174
|
], exports.HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
|
|
156
|
-
tslib_es6.__decorate([
|
|
157
|
-
decorators.property({ type: String, attribute: 'search-phrase' }),
|
|
158
|
-
tslib_es6.__metadata("design:type", String)
|
|
159
|
-
], exports.HSearchSuggestionContent.prototype, "searchPhrase", void 0);
|
|
160
|
-
tslib_es6.__decorate([
|
|
161
|
-
decorators.property({ type: Object }),
|
|
162
|
-
tslib_es6.__metadata("design:type", Array)
|
|
163
|
-
], exports.HSearchSuggestionContent.prototype, "suggestions", void 0);
|
|
164
|
-
tslib_es6.__decorate([
|
|
165
|
-
decorators.property({ type: Object }),
|
|
166
|
-
tslib_es6.__metadata("design:type", Array)
|
|
167
|
-
], exports.HSearchSuggestionContent.prototype, "products", void 0);
|
|
168
|
-
tslib_es6.__decorate([
|
|
169
|
-
decorators.property({ type: Object, attribute: false }),
|
|
170
|
-
tslib_es6.__metadata("design:type", Array)
|
|
171
|
-
], exports.HSearchSuggestionContent.prototype, "categories", void 0);
|
|
172
175
|
tslib_es6.__decorate([
|
|
173
176
|
decorators.property({ type: String }),
|
|
174
177
|
tslib_es6.__metadata("design:type", String)
|
|
175
178
|
], exports.HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
|
|
179
|
+
tslib_es6.__decorate([
|
|
180
|
+
decorators.state(),
|
|
181
|
+
tslib_es6.__metadata("design:type", String)
|
|
182
|
+
], exports.HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
|
|
176
183
|
tslib_es6.__decorate([
|
|
177
184
|
decorators.state(),
|
|
178
185
|
tslib_es6.__metadata("design:type", Array)
|
|
@@ -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,mBAAmB,8DAAkE;AACrF;AACA,qBAAqB,gEAAoE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,8DAAkE;AACrF;AACA,qBAAqB,gEAAoE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -33,7 +33,7 @@ let HSearchProducerContent = class HSearchProducerContent extends PhoenixLightLi
|
|
|
33
33
|
: ''}"
|
|
34
34
|
data-search-item-id="${this.searchId}${this.initialItemIds.producers + index}"
|
|
35
35
|
aria-label=${this.producerAriaLabel ? `${this.producerAriaLabel} ${producer.name}` : undefined}
|
|
36
|
-
tabindex="0
|
|
36
|
+
tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
|
|
37
37
|
role="option"
|
|
38
38
|
>
|
|
39
39
|
<a
|
|
@@ -46,7 +46,7 @@ let HSearchProductContent = class HSearchProductContent extends PhoenixLightLitE
|
|
|
46
46
|
: ''}"
|
|
47
47
|
data-search-item-id="${this.searchId}${this.initialItemIds.products + index}"
|
|
48
48
|
aria-label=${this.productAriaLabel ? `${this.productAriaLabel} ${product.name}` : undefined}
|
|
49
|
-
tabindex="0
|
|
49
|
+
tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') ? '0' : undefined}
|
|
50
50
|
role="option"
|
|
51
51
|
>
|
|
52
52
|
<a
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
|
-
import type { TCategory, TProduct } from "../../search_types";
|
|
4
3
|
export declare class HSearchSuggestionContent extends PhoenixLightLitElement {
|
|
4
|
+
private _searchContextConsumer;
|
|
5
|
+
private _searchContext$;
|
|
6
|
+
private _searchContextObserver;
|
|
5
7
|
activeItemId: string;
|
|
6
8
|
searchId: string;
|
|
9
|
+
initialItemIds: Record<string, number>;
|
|
7
10
|
translations: Record<string, string>;
|
|
8
11
|
view: string;
|
|
9
12
|
locale: string;
|
|
10
13
|
moduleInstanceId: string;
|
|
11
|
-
searchPhrase: string;
|
|
12
|
-
suggestions: string[];
|
|
13
|
-
products: TProduct[];
|
|
14
|
-
categories: TCategory[];
|
|
15
14
|
suggestionAriaLabel?: string;
|
|
15
|
+
private _searchPhrase;
|
|
16
16
|
private _suggestionsData;
|
|
17
17
|
connectedCallback(): Promise<void>;
|
|
18
18
|
private _setupSuggestionData;
|
|
@@ -3,6 +3,8 @@ import { html } from 'lit';
|
|
|
3
3
|
import { property, state } from 'lit/decorators';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
|
|
6
|
+
import { Observer } from '../../../../../core/classes/observer/observer.js';
|
|
7
|
+
import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
|
|
6
8
|
import { when as n } from '../../../../../../../../external/lit-html/directives/when.js';
|
|
7
9
|
import { SEARCH_CUSTOM_EVENT_NAMES, SUGGESTIONS_TYPE, SEARCH_CLASS_NAMES, SEARCH_COMPONENT_NAMES } from '../../search_constants.js';
|
|
8
10
|
import { repeat as c } from '../../../../../../../../external/lit-html/directives/repeat.js';
|
|
@@ -10,7 +12,9 @@ import { repeat as c } from '../../../../../../../../external/lit-html/directive
|
|
|
10
12
|
let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLightLitElement {
|
|
11
13
|
constructor() {
|
|
12
14
|
super(...arguments);
|
|
15
|
+
this.initialItemIds = {};
|
|
13
16
|
this.translations = {};
|
|
17
|
+
this._searchPhrase = '';
|
|
14
18
|
this._suggestionsData = [];
|
|
15
19
|
this._updateSearchPhrase = (ev, suggestion) => {
|
|
16
20
|
ev.stopPropagation();
|
|
@@ -19,29 +23,40 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
|
|
|
19
23
|
}
|
|
20
24
|
async connectedCallback() {
|
|
21
25
|
super.connectedCallback();
|
|
22
|
-
|
|
26
|
+
try {
|
|
27
|
+
this._searchContextConsumer = new ContextConsumerController(this);
|
|
28
|
+
this._searchContext$ = await this._searchContextConsumer.consumeAsync(this.moduleInstanceId);
|
|
29
|
+
this._searchContextObserver = new Observer((searchData) => {
|
|
30
|
+
this._searchPhrase = searchData.searchPhrase;
|
|
31
|
+
this._setupSuggestionData(searchData.results);
|
|
32
|
+
});
|
|
33
|
+
this._searchContext$.subscribe(this._searchContextObserver);
|
|
34
|
+
}
|
|
35
|
+
catch (_a) {
|
|
36
|
+
console.error('Search context is not provided');
|
|
37
|
+
}
|
|
23
38
|
}
|
|
24
|
-
_setupSuggestionData() {
|
|
39
|
+
_setupSuggestionData(results) {
|
|
25
40
|
let suggestionsData = [];
|
|
26
|
-
if (
|
|
27
|
-
|
|
41
|
+
if (results.suggestions.length) {
|
|
42
|
+
results.suggestions.forEach((suggestion, index) => {
|
|
28
43
|
suggestionsData.push({ suggestionName: suggestion, type: SUGGESTIONS_TYPE.suggestion });
|
|
29
44
|
if (index)
|
|
30
45
|
return;
|
|
31
|
-
const isProductInTheCategory =
|
|
46
|
+
const isProductInTheCategory = results.products.length;
|
|
32
47
|
if (isProductInTheCategory) {
|
|
33
48
|
const lang = this.locale.split('_')[0];
|
|
34
49
|
suggestionsData.push({
|
|
35
50
|
suggestionName: suggestion,
|
|
36
|
-
categoryName:
|
|
51
|
+
categoryName: results.products[0].category.breadcrumbs,
|
|
37
52
|
type: SUGGESTIONS_TYPE.suggestionInCategory,
|
|
38
|
-
url: `/${lang}/c/${
|
|
53
|
+
url: `/${lang}/c/${results.products[0].category.name}/${results.products[0].category.categoryId}/1/${this.view}/1/searchquery/${suggestion}`
|
|
39
54
|
});
|
|
40
55
|
}
|
|
41
|
-
if (
|
|
56
|
+
if (results.categories.length) {
|
|
42
57
|
suggestionsData = [
|
|
43
58
|
...suggestionsData,
|
|
44
|
-
...
|
|
59
|
+
...results.categories.map((category) => ({
|
|
45
60
|
categoryName: category.name,
|
|
46
61
|
url: category.url,
|
|
47
62
|
type: SUGGESTIONS_TYPE.category
|
|
@@ -50,9 +65,9 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
|
|
|
50
65
|
}
|
|
51
66
|
});
|
|
52
67
|
}
|
|
53
|
-
else if (
|
|
68
|
+
else if (results.categories.length) {
|
|
54
69
|
suggestionsData = [
|
|
55
|
-
...
|
|
70
|
+
...results.categories.map((category) => ({
|
|
56
71
|
categoryName: category.name,
|
|
57
72
|
url: category.url,
|
|
58
73
|
type: SUGGESTIONS_TYPE.category
|
|
@@ -80,10 +95,10 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
|
|
|
80
95
|
});
|
|
81
96
|
}
|
|
82
97
|
_getMatchedPhrase(phrase) {
|
|
83
|
-
const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this.
|
|
98
|
+
const phraseIncludesSearchPhrase = phrase.toLowerCase().includes(this._searchPhrase);
|
|
84
99
|
if (!phraseIncludesSearchPhrase)
|
|
85
100
|
return html `${phrase}`;
|
|
86
|
-
const index = phrase.toLowerCase().indexOf(this.
|
|
101
|
+
const index = phrase.toLowerCase().indexOf(this._searchPhrase) + this._searchPhrase.length;
|
|
87
102
|
return html `${phrase.substring(0, index)}<strong>${phrase.substring(index)}</strong>`;
|
|
88
103
|
}
|
|
89
104
|
render() {
|
|
@@ -102,7 +117,7 @@ let HSearchSuggestionContent = class HSearchSuggestionContent extends PhoenixLig
|
|
|
102
117
|
aria-label="${this.suggestionAriaLabel ?
|
|
103
118
|
`${this.suggestionAriaLabel} ${suggestion.suggestionName || suggestion.categoryName}` :
|
|
104
119
|
''}"
|
|
105
|
-
tabindex="0
|
|
120
|
+
tabindex=${this.closest('.search_mobile-opened, [display-mode="dropdown"]') || suggestion.type === SUGGESTIONS_TYPE.suggestion ? '0' : undefined}
|
|
106
121
|
role="option"
|
|
107
122
|
>
|
|
108
123
|
${n(suggestion.type === SUGGESTIONS_TYPE.suggestion, () => html ` <span> ${this._getMatchedPhrase(suggestion.suggestionName)} </span>
|
|
@@ -133,6 +148,10 @@ __decorate([
|
|
|
133
148
|
property({ type: String, attribute: 'search-id' }),
|
|
134
149
|
__metadata("design:type", String)
|
|
135
150
|
], HSearchSuggestionContent.prototype, "searchId", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
property({ type: Object, reflect: true }),
|
|
153
|
+
__metadata("design:type", Object)
|
|
154
|
+
], HSearchSuggestionContent.prototype, "initialItemIds", void 0);
|
|
136
155
|
__decorate([
|
|
137
156
|
property({ type: Object }),
|
|
138
157
|
__metadata("design:type", Object)
|
|
@@ -149,26 +168,14 @@ __decorate([
|
|
|
149
168
|
property({ type: String, attribute: 'module-instance-id' }),
|
|
150
169
|
__metadata("design:type", String)
|
|
151
170
|
], HSearchSuggestionContent.prototype, "moduleInstanceId", void 0);
|
|
152
|
-
__decorate([
|
|
153
|
-
property({ type: String, attribute: 'search-phrase' }),
|
|
154
|
-
__metadata("design:type", String)
|
|
155
|
-
], HSearchSuggestionContent.prototype, "searchPhrase", void 0);
|
|
156
|
-
__decorate([
|
|
157
|
-
property({ type: Object }),
|
|
158
|
-
__metadata("design:type", Array)
|
|
159
|
-
], HSearchSuggestionContent.prototype, "suggestions", void 0);
|
|
160
|
-
__decorate([
|
|
161
|
-
property({ type: Object }),
|
|
162
|
-
__metadata("design:type", Array)
|
|
163
|
-
], HSearchSuggestionContent.prototype, "products", void 0);
|
|
164
|
-
__decorate([
|
|
165
|
-
property({ type: Object, attribute: false }),
|
|
166
|
-
__metadata("design:type", Array)
|
|
167
|
-
], HSearchSuggestionContent.prototype, "categories", void 0);
|
|
168
171
|
__decorate([
|
|
169
172
|
property({ type: String }),
|
|
170
173
|
__metadata("design:type", String)
|
|
171
174
|
], HSearchSuggestionContent.prototype, "suggestionAriaLabel", void 0);
|
|
175
|
+
__decorate([
|
|
176
|
+
state(),
|
|
177
|
+
__metadata("design:type", String)
|
|
178
|
+
], HSearchSuggestionContent.prototype, "_searchPhrase", void 0);
|
|
172
179
|
__decorate([
|
|
173
180
|
state(),
|
|
174
181
|
__metadata("design:type", Array)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;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;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,8DAAkE;AAC5F;AACA,4BAA4B,gEAAoE;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;"}
|