@fluid-topics/ft-search-bar 1.3.16 → 1.3.17
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/ft-search-bar.js +43 -43
- package/build/ft-search-bar.light.js +167 -166
- package/build/ft-search-bar.min.js +369 -368
- package/package.json +16 -16
package/build/ft-search-bar.js
CHANGED
|
@@ -12,7 +12,7 @@ import { FtSizeCategory, FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
|
|
|
12
12
|
import { FtTypography, FtTypographyBody2 } from "@fluid-topics/ft-typography";
|
|
13
13
|
import { facetToFilter, selectedValues, unquote } from "./converters";
|
|
14
14
|
import { FtFilter, FtFilterOption } from "@fluid-topics/ft-filter";
|
|
15
|
-
import { FtIcon
|
|
15
|
+
import { FtIcon } from "@fluid-topics/ft-icon";
|
|
16
16
|
import { FtAccordion, FtAccordionItem } from "@fluid-topics/ft-accordion";
|
|
17
17
|
import { FtButton } from "@fluid-topics/ft-button";
|
|
18
18
|
import { FtChip } from "@fluid-topics/ft-chip";
|
|
@@ -26,7 +26,7 @@ import { SuggestManager } from "./managers/SuggestManager";
|
|
|
26
26
|
import { FacetsChipsManager } from "./managers/FacetsChipsManager";
|
|
27
27
|
import { MobileSearchBarManager } from "./managers/MobileSearchBarManager";
|
|
28
28
|
import { DesktopSearchBarManager } from "./managers/DesktopSearchBarManager";
|
|
29
|
-
import { FtRadio, FtRadioGroup
|
|
29
|
+
import { FtRadio, FtRadioGroup } from "@fluid-topics/ft-radio";
|
|
30
30
|
import { ftAppInfoStore } from "@fluid-topics/ft-app-context";
|
|
31
31
|
if (window.fluidtopics == null) {
|
|
32
32
|
console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");
|
|
@@ -45,7 +45,7 @@ export const DEFAULT_LABELS = {
|
|
|
45
45
|
presetsSelector: "Quick filters",
|
|
46
46
|
removeRecentSearch: "Remove {0}",
|
|
47
47
|
back: "Back",
|
|
48
|
-
selectLocale: "Select a language"
|
|
48
|
+
selectLocale: "Select a language",
|
|
49
49
|
};
|
|
50
50
|
export class SearchStateChangeEvent extends CustomEvent {
|
|
51
51
|
constructor(request) {
|
|
@@ -70,7 +70,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
70
70
|
this.displayedFilters = [];
|
|
71
71
|
this.presets = [];
|
|
72
72
|
this.priors = [];
|
|
73
|
-
this.searchRequestSerializer = (request) => new SearchPlaceConverter(this.baseUrl
|
|
73
|
+
this.searchRequestSerializer = (request) => new SearchPlaceConverter(this.baseUrl).serialize(request);
|
|
74
74
|
this.focusOnDisplay = false;
|
|
75
75
|
this.metadataFilters = [];
|
|
76
76
|
this.sizeCategory = FtSizeCategory.M;
|
|
@@ -97,7 +97,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
97
97
|
this.facetsInitialized = false;
|
|
98
98
|
this.updateLocalesDebouncer.run(() => {
|
|
99
99
|
var _a;
|
|
100
|
-
(_a = this.api) === null || _a === void 0 ? void 0 : _a.getAvailableSearchLocales().then(result => result.contentLocales).catch(() => []).then(result => {
|
|
100
|
+
(_a = this.api) === null || _a === void 0 ? void 0 : _a.getAvailableSearchLocales().then((result) => result.contentLocales).catch(() => []).then((result) => {
|
|
101
101
|
this.availableContentLocales = result;
|
|
102
102
|
this.availableContentLocalesInitialized = true;
|
|
103
103
|
});
|
|
@@ -114,12 +114,12 @@ class FtSearchBar extends FtLitElement {
|
|
|
114
114
|
this.updateFacetsDebouncer = new Debouncer(500);
|
|
115
115
|
this.closeFloatingContainer = (e) => {
|
|
116
116
|
if (!this.isMobile()) {
|
|
117
|
-
this.displayFacets = this.displayFacets && e.composedPath().some(element => element === this.floatingContainer);
|
|
117
|
+
this.displayFacets = this.displayFacets && e.composedPath().some((element) => element === this.floatingContainer);
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
120
|
this.closeSuggestListbox = (e) => {
|
|
121
121
|
const path = e.composedPath();
|
|
122
|
-
const inside = path.some(n => n === this || n === this.shadowRoot);
|
|
122
|
+
const inside = path.some((n) => n === this || n === this.shadowRoot);
|
|
123
123
|
if (!inside) {
|
|
124
124
|
this.displaySuggestListbox = false;
|
|
125
125
|
this.selectedSuggestOptionId = undefined;
|
|
@@ -139,7 +139,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
139
139
|
};
|
|
140
140
|
this.compareValueFilters = (a, b) => a.negative == b.negative
|
|
141
141
|
&& a.values.length === b.values.length
|
|
142
|
-
&& a.values.every(value => b.values.includes(value));
|
|
142
|
+
&& a.values.every((value) => b.values.includes(value));
|
|
143
143
|
this.compareDateFilters = (a, b) => a.type === b.type;
|
|
144
144
|
this.compareRangeFilters = (a, b) => a.from === b.from
|
|
145
145
|
&& a.to === b.to;
|
|
@@ -147,7 +147,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
147
147
|
&& this.compareUnknownFilters(a, b);
|
|
148
148
|
this.compareRequests = (a, b) => (a.contentLocale == null || b.contentLocale == null || a.contentLocale === b.contentLocale)
|
|
149
149
|
&& a.metadataFilters.length === b.metadataFilters.length
|
|
150
|
-
&& a.metadataFilters.every(fa => b.metadataFilters.some(fb => this.compareFilters(fa, fb)));
|
|
150
|
+
&& a.metadataFilters.every((fa) => b.metadataFilters.some((fb) => this.compareFilters(fa, fb)));
|
|
151
151
|
}
|
|
152
152
|
isMobileMenuOpen() {
|
|
153
153
|
return this.isMobile() && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
|
|
@@ -165,16 +165,16 @@ class FtSearchBar extends FtLitElement {
|
|
|
165
165
|
};
|
|
166
166
|
}
|
|
167
167
|
get facetsRequest() {
|
|
168
|
-
const fromFilters = this.metadataFilters.filter(f => { var _a, _b; return ((_b = (_a = f.valueFilter) === null || _a === void 0 ? void 0 : _a.values.length) !== null && _b !== void 0 ? _b : 0) > 0 && !this.displayedFilters.includes(f.key); })
|
|
169
|
-
.map(f => ({ id: f.key }));
|
|
170
|
-
return [...this.displayedFilters.map(id => ({ id })), ...fromFilters];
|
|
168
|
+
const fromFilters = this.metadataFilters.filter((f) => { var _a, _b; return ((_b = (_a = f.valueFilter) === null || _a === void 0 ? void 0 : _a.values.length) !== null && _b !== void 0 ? _b : 0) > 0 && !this.displayedFilters.includes(f.key); })
|
|
169
|
+
.map((f) => ({ id: f.key }));
|
|
170
|
+
return [...this.displayedFilters.map((id) => ({ id })), ...fromFilters];
|
|
171
171
|
}
|
|
172
172
|
get suggestRequest() {
|
|
173
173
|
return {
|
|
174
174
|
contentLocale: this.contentLocale,
|
|
175
175
|
input: this.query,
|
|
176
176
|
metadataFilters: this.metadataFilters,
|
|
177
|
-
sort: []
|
|
177
|
+
sort: [],
|
|
178
178
|
};
|
|
179
179
|
}
|
|
180
180
|
isMobile() {
|
|
@@ -246,7 +246,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
246
246
|
`;
|
|
247
247
|
}
|
|
248
248
|
renderMobileFacets() {
|
|
249
|
-
const currentLocale = this.availableContentLocales.filter(l => l.lang === this.contentLocale).pop();
|
|
249
|
+
const currentLocale = this.availableContentLocales.filter((l) => l.lang === this.contentLocale).pop();
|
|
250
250
|
return html `
|
|
251
251
|
<ft-accordion class="ft-search-bar--filters-container">
|
|
252
252
|
${this.hasLocaleSelector() ? html `
|
|
@@ -265,7 +265,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
265
265
|
</div>
|
|
266
266
|
</ft-accordion-item>
|
|
267
267
|
` : null}
|
|
268
|
-
${repeat(this.facets, facet => facet.key, facet => {
|
|
268
|
+
${repeat(this.facets, (facet) => facet.key, (facet) => {
|
|
269
269
|
const filter = facetToFilter(facet);
|
|
270
270
|
const keyWithNoColumn = facet.key.replace(":", "-");
|
|
271
271
|
const values = selectedValues(filter);
|
|
@@ -307,7 +307,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
307
307
|
this.contentLocale = (e.detail === "all" ? undefined : e.detail);
|
|
308
308
|
this.clearFilters();
|
|
309
309
|
}}>
|
|
310
|
-
${repeat(((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []), locale => locale.lang, locale => {
|
|
310
|
+
${repeat(((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []), (locale) => locale.lang, (locale) => {
|
|
311
311
|
var _a;
|
|
312
312
|
return html `
|
|
313
313
|
<ft-radio value="${(_a = locale.lang) !== null && _a !== void 0 ? _a : "all"}"
|
|
@@ -348,7 +348,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
348
348
|
label="${this.labelResolver.resolve("presetsSelector")}"
|
|
349
349
|
outlined
|
|
350
350
|
@change=${(e) => this.selectedPreset = e.detail}>
|
|
351
|
-
${repeat((_a = this.presets) !== null && _a !== void 0 ? _a : [], p => p.name, p => html `
|
|
351
|
+
${repeat((_a = this.presets) !== null && _a !== void 0 ? _a : [], (p) => p.name, (p) => html `
|
|
352
352
|
<ft-select-option value="${p.name}"
|
|
353
353
|
label="${p.name}"
|
|
354
354
|
?selected=${p.name === this.selectedPreset}>
|
|
@@ -389,9 +389,9 @@ class FtSearchBar extends FtLitElement {
|
|
|
389
389
|
${this.getContentLocaleRadioGroup()}
|
|
390
390
|
</div>
|
|
391
391
|
` : nothing}
|
|
392
|
-
${repeat(this.facets, facet => facet.key, facet => {
|
|
392
|
+
${repeat(this.facets, (facet) => facet.key, (facet) => {
|
|
393
393
|
const filter = facetToFilter(facet);
|
|
394
|
-
const hierachical = filter.options.some(o => { var _a, _b; return ((_b = (_a = o.subOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; });
|
|
394
|
+
const hierachical = filter.options.some((o) => { var _a, _b; return ((_b = (_a = o.subOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; });
|
|
395
395
|
const keyWithNoColumn = facet.key.replace(":", "-");
|
|
396
396
|
return html `
|
|
397
397
|
<ft-filter
|
|
@@ -435,7 +435,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
435
435
|
}
|
|
436
436
|
super.update(props);
|
|
437
437
|
if ((props.has("availableContentLocales") || props.has("contentLocale")) && this.availableContentLocales.length > 0) {
|
|
438
|
-
const isKnown = (locale) => this.availableContentLocales.some(l => l.lang == locale);
|
|
438
|
+
const isKnown = (locale) => this.availableContentLocales.some((l) => l.lang == locale);
|
|
439
439
|
if (!isKnown(this.contentLocale)) {
|
|
440
440
|
this.contentLocale = props.has("contentLocale") && isKnown(props.get("contentLocale"))
|
|
441
441
|
? props.get("contentLocale")
|
|
@@ -449,14 +449,14 @@ class FtSearchBar extends FtLitElement {
|
|
|
449
449
|
this.initRecentSearches();
|
|
450
450
|
}
|
|
451
451
|
if (props.has("presets")) {
|
|
452
|
-
((_b = this.presets) !== null && _b !== void 0 ? _b : []).forEach(preset => preset.metadataFilters.forEach(filter => {
|
|
452
|
+
((_b = this.presets) !== null && _b !== void 0 ? _b : []).forEach((preset) => preset.metadataFilters.forEach((filter) => {
|
|
453
453
|
if (filter.valueFilter) {
|
|
454
|
-
filter.valueFilter.values = filter.valueFilter.values.map(v => unquote(v));
|
|
454
|
+
filter.valueFilter.values = filter.valueFilter.values.map((v) => unquote(v));
|
|
455
455
|
}
|
|
456
456
|
}));
|
|
457
457
|
}
|
|
458
458
|
if (props.has("presets") || props.has("selectedPreset")) {
|
|
459
|
-
const currentPreset = ((_c = this.presets) !== null && _c !== void 0 ? _c : []).find(p => p.name === this.selectedPreset);
|
|
459
|
+
const currentPreset = ((_c = this.presets) !== null && _c !== void 0 ? _c : []).find((p) => p.name === this.selectedPreset);
|
|
460
460
|
if (currentPreset && !this.compareRequests(this.request, currentPreset)) {
|
|
461
461
|
this.setFiltersFromPreset(currentPreset);
|
|
462
462
|
}
|
|
@@ -464,23 +464,23 @@ class FtSearchBar extends FtLitElement {
|
|
|
464
464
|
if (props.has("contentLocale") && this.contentLocale != null) {
|
|
465
465
|
this.knownFacetLabels = new Map();
|
|
466
466
|
}
|
|
467
|
-
if (["contentLocale", "metadataFilters"].some(p => props.has(p))) {
|
|
468
|
-
this.selectedPreset = (_e = ((_d = this.presets) !== null && _d !== void 0 ? _d : []).find(p => this.compareRequests(p, this.request))) === null || _e === void 0 ? void 0 : _e.name;
|
|
467
|
+
if (["contentLocale", "metadataFilters"].some((p) => props.has(p))) {
|
|
468
|
+
this.selectedPreset = (_e = ((_d = this.presets) !== null && _d !== void 0 ? _d : []).find((p) => this.compareRequests(p, this.request))) === null || _e === void 0 ? void 0 : _e.name;
|
|
469
469
|
}
|
|
470
|
-
if (["baseUrl", "apiIntegrationIdentifier"].some(p => props.has(p))) {
|
|
470
|
+
if (["baseUrl", "apiIntegrationIdentifier"].some((p) => props.has(p))) {
|
|
471
471
|
this.api = undefined;
|
|
472
472
|
this.initApi();
|
|
473
473
|
}
|
|
474
474
|
if (props.has("api") && this.api) {
|
|
475
475
|
this.initSearchData();
|
|
476
476
|
}
|
|
477
|
-
if (["uiLocale", "contentLocale", "metadataFilters", "displayedFilters"].some(p => props.has(p))) {
|
|
477
|
+
if (["uiLocale", "contentLocale", "metadataFilters", "displayedFilters"].some((p) => props.has(p))) {
|
|
478
478
|
this.updateFacets();
|
|
479
479
|
}
|
|
480
|
-
if (["query", "uiLocale", "contentLocale", "metadataFilters", "displayedFilters", "api"].some(p => props.has(p))) {
|
|
480
|
+
if (["query", "uiLocale", "contentLocale", "metadataFilters", "displayedFilters", "api"].some((p) => props.has(p))) {
|
|
481
481
|
this.suggestManager.update();
|
|
482
482
|
}
|
|
483
|
-
if (["query", "uiLocale", "contentLocale", "metadataFilters"].some(p => props.has(p))) {
|
|
483
|
+
if (["query", "uiLocale", "contentLocale", "metadataFilters"].some((p) => props.has(p))) {
|
|
484
484
|
this.dispatchStateChangeEvent();
|
|
485
485
|
}
|
|
486
486
|
}
|
|
@@ -509,7 +509,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
509
509
|
(_a = this.floatingContainer) === null || _a === void 0 ? void 0 : _a.focus();
|
|
510
510
|
}
|
|
511
511
|
if (this.scrollToFacet != null && this.facetsLoaded) {
|
|
512
|
-
(_b = this.scrollingFiltersContainer) === null || _b === void 0 ? void 0 : _b.scrollIndexIntoView(this.facets.findIndex(f => f.key === this.scrollToFacet));
|
|
512
|
+
(_b = this.scrollingFiltersContainer) === null || _b === void 0 ? void 0 : _b.scrollIndexIntoView(this.facets.findIndex((f) => f.key === this.scrollToFacet));
|
|
513
513
|
const maybeFacet = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`ft-accordion-item[data-facet-key="${this.scrollToFacet}"]`);
|
|
514
514
|
if (maybeFacet) {
|
|
515
515
|
maybeFacet.active = true;
|
|
@@ -528,12 +528,12 @@ class FtSearchBar extends FtLitElement {
|
|
|
528
528
|
async retrieveFacetsFromSearch() {
|
|
529
529
|
var _a;
|
|
530
530
|
const retrievedFacets = new Map();
|
|
531
|
-
await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets.forEach(f => {
|
|
531
|
+
await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then((r) => r.facets.forEach((f) => {
|
|
532
532
|
this.knownFacetLabels.set(f.key, f.label);
|
|
533
533
|
retrievedFacets.set(f.key, f);
|
|
534
534
|
})).catch(doNothing));
|
|
535
535
|
this.facets = [];
|
|
536
|
-
for (
|
|
536
|
+
for (const r of this.facetsRequest) {
|
|
537
537
|
if (retrievedFacets.has(r.id)) {
|
|
538
538
|
this.facets.push(retrievedFacets.get(r.id));
|
|
539
539
|
}
|
|
@@ -543,7 +543,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
543
543
|
label: this.knownFacetLabels.get(r.id),
|
|
544
544
|
rootNodes: [],
|
|
545
545
|
multiSelectionable: true,
|
|
546
|
-
hierarchical: false
|
|
546
|
+
hierarchical: false,
|
|
547
547
|
});
|
|
548
548
|
}
|
|
549
549
|
}
|
|
@@ -563,8 +563,8 @@ class FtSearchBar extends FtLitElement {
|
|
|
563
563
|
}
|
|
564
564
|
onLaunchSearch() {
|
|
565
565
|
if (this.query) {
|
|
566
|
-
|
|
567
|
-
.filter(q => q.toLowerCase() !== this.query.toLowerCase())
|
|
566
|
+
const filteredRecentSearches = this.recentSearches
|
|
567
|
+
.filter((q) => q.toLowerCase() !== this.query.toLowerCase())
|
|
568
568
|
.filter((q, index) => index < 20);
|
|
569
569
|
this.recentSearches = [this.query, ...filteredRecentSearches];
|
|
570
570
|
this.saveRecentSearches();
|
|
@@ -587,7 +587,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
587
587
|
key: this.recentSearchesStorageKey,
|
|
588
588
|
newValue,
|
|
589
589
|
storageArea: window.localStorage,
|
|
590
|
-
url: window.location.href
|
|
590
|
+
url: window.location.href,
|
|
591
591
|
}));
|
|
592
592
|
}
|
|
593
593
|
async connectedCallback() {
|
|
@@ -612,10 +612,10 @@ class FtSearchBar extends FtLitElement {
|
|
|
612
612
|
this.sizeCategory = e.detail.category;
|
|
613
613
|
}
|
|
614
614
|
setFilter(key, selectedValues) {
|
|
615
|
-
|
|
616
|
-
this.facets.forEach(facet => {
|
|
615
|
+
const newFilters = this.metadataFilters.filter((f) => !f.valueFilter || f.key !== key);
|
|
616
|
+
this.facets.forEach((facet) => {
|
|
617
617
|
if (facet.key === key) {
|
|
618
|
-
flatDeep(facet.rootNodes, n => n.childNodes).forEach(n => n.selected = selectedValues.includes(n.value));
|
|
618
|
+
flatDeep(facet.rootNodes, (n) => n.childNodes).forEach((n) => n.selected = selectedValues.includes(n.value));
|
|
619
619
|
}
|
|
620
620
|
});
|
|
621
621
|
if (selectedValues.length) {
|
|
@@ -623,8 +623,8 @@ class FtSearchBar extends FtLitElement {
|
|
|
623
623
|
key: key,
|
|
624
624
|
valueFilter: {
|
|
625
625
|
negative: false,
|
|
626
|
-
values: selectedValues
|
|
627
|
-
}
|
|
626
|
+
values: selectedValues,
|
|
627
|
+
},
|
|
628
628
|
});
|
|
629
629
|
}
|
|
630
630
|
this.metadataFilters = newFilters;
|
|
@@ -639,7 +639,7 @@ class FtSearchBar extends FtLitElement {
|
|
|
639
639
|
}
|
|
640
640
|
}
|
|
641
641
|
clearFilters() {
|
|
642
|
-
this.facets.forEach(facet => flatDeep(facet.rootNodes, n => n.childNodes).forEach(n => n.selected = false));
|
|
642
|
+
this.facets.forEach((facet) => flatDeep(facet.rootNodes, (n) => n.childNodes).forEach((n) => n.selected = false));
|
|
643
643
|
this.metadataFilters = [];
|
|
644
644
|
const firstFacet = this.facets[0];
|
|
645
645
|
this.scrollToFacet = firstFacet === null || firstFacet === void 0 ? void 0 : firstFacet.key;
|
|
@@ -696,7 +696,7 @@ FtSearchBar.styles = [
|
|
|
696
696
|
facetsCss,
|
|
697
697
|
FacetsChipsManager.styles,
|
|
698
698
|
SuggestManager.styles,
|
|
699
|
-
screenReaderStyles
|
|
699
|
+
screenReaderStyles,
|
|
700
700
|
];
|
|
701
701
|
__decorate([
|
|
702
702
|
property({ type: Boolean })
|