@fluid-topics/ft-search-bar 0.3.3 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-search-bar.d.ts +3 -1
- package/build/ft-search-bar.js +42 -35
- package/build/ft-search-bar.light.js +6 -7
- package/build/ft-search-bar.min.js +6 -7
- package/package.json +14 -14
package/build/ft-search-bar.d.ts
CHANGED
|
@@ -113,11 +113,13 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
|
|
|
113
113
|
private renderDesktopFacets;
|
|
114
114
|
protected firstUpdated(props: PropertyValues): Promise<void>;
|
|
115
115
|
protected update(props: PropertyValues): void;
|
|
116
|
-
private
|
|
116
|
+
private initDataDebouncer;
|
|
117
|
+
private initSearchData;
|
|
117
118
|
protected contentAvailableCallback(props: PropertyValues): void;
|
|
118
119
|
private initApi;
|
|
119
120
|
private facetsLoaded;
|
|
120
121
|
private updateFacets;
|
|
122
|
+
private retrieveFacetsFromSearch;
|
|
121
123
|
private onFloatingContainerKeyUp;
|
|
122
124
|
setQuery(query: string): void;
|
|
123
125
|
launchSearch(): void;
|
package/build/ft-search-bar.js
CHANGED
|
@@ -93,6 +93,7 @@ export class FtSearchBar extends FtLitElement {
|
|
|
93
93
|
this.selectedFacetsManager = new FacetsChipsManager(this);
|
|
94
94
|
this.desktopSearchBarManager = new DesktopSearchBarManager(this);
|
|
95
95
|
this.mobileSearchBarManager = new MobileSearchBarManager(this);
|
|
96
|
+
this.initDataDebouncer = new Debouncer(10);
|
|
96
97
|
this.facetsLoaded = false;
|
|
97
98
|
this.closeFloatingContainer = (e) => {
|
|
98
99
|
if (!this.isMobile()) {
|
|
@@ -400,13 +401,11 @@ export class FtSearchBar extends FtLitElement {
|
|
|
400
401
|
if (["baseUrl", "apiIntegrationIdentifier"].some(p => props.has(p))) {
|
|
401
402
|
this.api = undefined;
|
|
402
403
|
this.initApi();
|
|
403
|
-
this.availableContentLocalesInitialized = false;
|
|
404
|
-
this.facetsInitialized = false;
|
|
405
404
|
}
|
|
406
|
-
if (props.has("api")) {
|
|
407
|
-
this.
|
|
405
|
+
if (props.has("api") && this.api) {
|
|
406
|
+
this.initSearchData();
|
|
408
407
|
}
|
|
409
|
-
if (["uiLocale", "contentLocale", "searchFilters", "displayedFilters"
|
|
408
|
+
if (["uiLocale", "contentLocale", "searchFilters", "displayedFilters"].some(p => props.has(p))) {
|
|
410
409
|
this.updateFacets();
|
|
411
410
|
}
|
|
412
411
|
if (["query", "uiLocale", "contentLocale", "searchFilters", "displayedFilters", "api"].some(p => props.has(p))) {
|
|
@@ -416,11 +415,18 @@ export class FtSearchBar extends FtLitElement {
|
|
|
416
415
|
this.dispatchEvent(new SearchStateChangeEvent(this.request));
|
|
417
416
|
}
|
|
418
417
|
}
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
418
|
+
initSearchData() {
|
|
419
|
+
this.availableContentLocalesInitialized = false;
|
|
420
|
+
this.facetsInitialized = false;
|
|
421
|
+
this.initDataDebouncer.run(() => {
|
|
422
|
+
var _a;
|
|
423
|
+
(_a = this.api) === null || _a === void 0 ? void 0 : _a.getAvailableSearchLocales().then(result => result.contentLocales).catch(() => []).then(result => {
|
|
424
|
+
this.availableContentLocales = result;
|
|
425
|
+
this.availableContentLocalesInitialized = true;
|
|
426
|
+
});
|
|
427
|
+
this.retrieveFacetsFromSearch()
|
|
428
|
+
.then(() => this.facetsInitialized = true);
|
|
429
|
+
});
|
|
424
430
|
}
|
|
425
431
|
contentAvailableCallback(props) {
|
|
426
432
|
var _a, _b, _c;
|
|
@@ -440,42 +446,43 @@ export class FtSearchBar extends FtLitElement {
|
|
|
440
446
|
initApi() {
|
|
441
447
|
if (this.api == null) {
|
|
442
448
|
this.api = window.fluidtopics ? new window.fluidtopics.FluidTopicsApi(this.baseUrl, this.apiIntegrationIdentifier, true) : undefined;
|
|
443
|
-
setTimeout(() => this.initApi(),
|
|
449
|
+
setTimeout(() => this.initApi(), 10);
|
|
444
450
|
}
|
|
445
451
|
}
|
|
446
452
|
updateFacets() {
|
|
447
|
-
if (this.api) {
|
|
453
|
+
if (this.api && this.facetsInitialized) {
|
|
448
454
|
if (this.facetsRequest.length > 0) {
|
|
449
455
|
this.facetsLoaded = false;
|
|
450
456
|
this.updateFacetsDebouncer.run(async () => {
|
|
451
|
-
|
|
452
|
-
const retrievedFacets = new Map();
|
|
453
|
-
await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets.forEach(f => {
|
|
454
|
-
this.knownFacetLabels.set(f.key, f.label);
|
|
455
|
-
retrievedFacets.set(f.key, f);
|
|
456
|
-
})).catch(doNothing));
|
|
457
|
-
this.facets = [];
|
|
458
|
-
for (let r of this.facetsRequest) {
|
|
459
|
-
if (retrievedFacets.has(r.id)) {
|
|
460
|
-
this.facets.push(retrievedFacets.get(r.id));
|
|
461
|
-
}
|
|
462
|
-
else if (this.knownFacetLabels.has(r.id)) {
|
|
463
|
-
this.facets.push({
|
|
464
|
-
key: r.id,
|
|
465
|
-
label: this.knownFacetLabels.get(r.id),
|
|
466
|
-
rootNodes: [],
|
|
467
|
-
multiSelectionable: true,
|
|
468
|
-
hierarchical: false
|
|
469
|
-
});
|
|
470
|
-
}
|
|
471
|
-
}
|
|
457
|
+
await this.retrieveFacetsFromSearch();
|
|
472
458
|
this.facetsLoaded = true;
|
|
473
|
-
this.facetsInitialized = true;
|
|
474
459
|
});
|
|
475
460
|
}
|
|
476
461
|
else {
|
|
477
462
|
this.facets = [];
|
|
478
|
-
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
async retrieveFacetsFromSearch() {
|
|
467
|
+
var _a;
|
|
468
|
+
const retrievedFacets = new Map();
|
|
469
|
+
await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets.forEach(f => {
|
|
470
|
+
this.knownFacetLabels.set(f.key, f.label);
|
|
471
|
+
retrievedFacets.set(f.key, f);
|
|
472
|
+
})).catch(doNothing));
|
|
473
|
+
this.facets = [];
|
|
474
|
+
for (let r of this.facetsRequest) {
|
|
475
|
+
if (retrievedFacets.has(r.id)) {
|
|
476
|
+
this.facets.push(retrievedFacets.get(r.id));
|
|
477
|
+
}
|
|
478
|
+
else if (this.knownFacetLabels.has(r.id)) {
|
|
479
|
+
this.facets.push({
|
|
480
|
+
key: r.id,
|
|
481
|
+
label: this.knownFacetLabels.get(r.id),
|
|
482
|
+
rootNodes: [],
|
|
483
|
+
multiSelectionable: true,
|
|
484
|
+
hierarchical: false
|
|
485
|
+
});
|
|
479
486
|
}
|
|
480
487
|
}
|
|
481
488
|
}
|
|
@@ -250,7 +250,7 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
|
|
|
250
250
|
</div>
|
|
251
251
|
<slot></slot>
|
|
252
252
|
</div>
|
|
253
|
-
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,o=(e.width-this.tooltip.clientWidth)/2
|
|
253
|
+
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,o=(e.width-this.tooltip.clientWidth)/2;let s=0,r=0;switch(this.position){case"top":r=-this.tooltip.clientHeight,s=o;break;case"bottom":r=e.height,s=o;break;case"left":r=i,s=-this.tooltip.clientWidth;break;case"right":r=i,s=e.width}e.left+s+this.tooltip.clientWidth>window.innerWidth&&(s=window.innerWidth-this.tooltip.clientWidth-e.left),e.left+s<0&&(s=0);const n=this.tooltip.style;n.left=s+"px",n.top=r+"px",n.maxWidth=Math.max(e.width,150)+"px"}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}}ue.elementDefinitions={"ft-typography":Yt},ue.styles=i.css`
|
|
254
254
|
.ft-tooltip--container {
|
|
255
255
|
display: block;
|
|
256
256
|
position: relative;
|
|
@@ -410,7 +410,7 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
|
|
|
410
410
|
box-shadow: 0px 0px 0px transparent;
|
|
411
411
|
border: 0px solid transparent;
|
|
412
412
|
text-shadow: 0px 0px 0px transparent;
|
|
413
|
-
font-size:
|
|
413
|
+
font-size: ${Be.fontSize};
|
|
414
414
|
}
|
|
415
415
|
|
|
416
416
|
button:hover {
|
|
@@ -439,8 +439,7 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
|
|
|
439
439
|
border: none;
|
|
440
440
|
pointer-events: auto;
|
|
441
441
|
|
|
442
|
-
--ft-button-internal-
|
|
443
|
-
--ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
|
|
442
|
+
--ft-button-internal-line-height: calc(${Be.fontSize} + 2px);
|
|
444
443
|
--ft-button-internal-color: ${Be.color};
|
|
445
444
|
${e.setVariable(ke.size,Be.iconSize)};
|
|
446
445
|
--ft-button-internal-vertical-padding: 6px;
|
|
@@ -496,7 +495,7 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
|
|
|
496
495
|
text-overflow: ellipsis;
|
|
497
496
|
display: block;
|
|
498
497
|
margin: 0 var(--ft-button-internal-horizontal-padding);
|
|
499
|
-
${e.setVariable(Nt.fontSize,"
|
|
498
|
+
${e.setVariable(Nt.fontSize,"1em")};
|
|
500
499
|
${e.setVariable(Nt.lineHeight,"var(--ft-button-internal-content-height)")};
|
|
501
500
|
}
|
|
502
501
|
|
|
@@ -2400,7 +2399,7 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
|
|
|
2400
2399
|
</div>
|
|
2401
2400
|
`}onSearchBarKeyDown(t){var e;switch(t.key){case"Escape":this.searchBar.mobileMenuOpen=!1,null===(e=this.searchBar.input)||void 0===e||e.blur();break;case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestManager.focusFirstSuggestion()}}onSearchBarKeyUp(t){const e=t.composedPath()[0];this.searchBar.query=e.value,"Enter"===t.key&&this.searchBar.launchSearch()}}Hi.styles=i.css`
|
|
2402
2401
|
|
|
2403
|
-
`;var Vi=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};null==window.fluidtopics&&console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");const Ki={filtersButton:"Filters",inputPlaceHolder:"Search",filterInputPlaceHolder:"Filter {0}",clearInputButton:"Clear",clearFilterButton:"Clear",displayMoreFilterValuesButton:"More",noFilterValuesAvailable:"No values available",searchButton:"Search",clearFilters:"Clear filters",contentLocaleSelector:"Lang",presetsSelector:"Preset",removeRecentSearch:"Remove",back:"Back"};class qi extends CustomEvent{constructor(t){super("launch-search",{detail:t,bubbles:!0,composed:!0})}}class Wi extends CustomEvent{constructor(t){super("change",{detail:t})}}const Gi=()=>{};class Xi extends e.FtLitElement{constructor(){super(...arguments),this.dense=!1,this.mode="auto",this.forceMobileMenuOpen=!1,this.forceMenuOpen=!1,this.baseUrl="",this.apiIntegrationIdentifier="ft-search-bar",this.availableContentLocales=[],this.availableContentLocalesInitialized=!1,this.labels={},this.labelResolver=new e.ParametrizedLabelResolver(Ki,{}),this.displayedFilters=[],this.presets=[],this.priors=[],this.searchRequestSerializer=t=>function(t,e){var i;const o=new URLSearchParams({"content-lang":null!==(i=e.contentLocale)&&void 0!==i?i:"all",query:e.query});if(e.filters.length>0){const t=e.filters.map((t=>{const e=t.values.map((t=>t.replace(/_/g,"\\\\\\\\_").replace(/~/g,"\\\\~").replace(/\*/g,"\\*"))).map((t=>encodeURIComponent(function(t){return`"${t}"`}(t)))).join("_");return`${t.key}~${e}`})).join("*");o.append("filters",t)}return new URL(`${t}/search/all?${o.toString()}`).href}(this.baseUrl,t),this.searchFilters=[],this.sizeCategory=l.M,this.displayFacets=!1,this.mobileMenuOpen=!1,this.facets=[],this.facetsInitialized=!1,this.knownFacetLabels=new Map,this.query="",this.suggestions=[],this.recentSearches=[],this.updateFacetsDebouncer=new e.Debouncer(500),this.suggestManager=new Zi(this),this.selectedFacetsManager=new Ui(this),this.desktopSearchBarManager=new Hi(this),this.mobileSearchBarManager=new _i(this),this.facetsLoaded=!1,this.closeFloatingContainer=t=>{this.isMobile()||(this.displayFacets=this.displayFacets&&t.composedPath().some((t=>t===this.floatingContainer)))},this.compareFilters=(t,e)=>t.key===e.key&&t.negative==e.negative&&t.values.length===e.values.length&&t.values.every((t=>e.values.includes(t))),this.compareRequests=(t,e)=>(null==t.contentLocale||null==e.contentLocale||t.contentLocale===e.contentLocale)&&t.filters.length===e.filters.length&&t.filters.every((t=>e.filters.some((e=>this.compareFilters(t,e)))))}isMobileMenuOpen(){return this.isMobile()&&(this.forceMobileMenuOpen||this.forceMenuOpen||this.mobileMenuOpen)}get request(){return{uiLocale:this.uiLocale,contentLocale:this.contentLocale,query:this.query,facets:this.facetsRequest,priors:this.hasPriors?this.priors:void 0,filters:this.searchFilters,paging:{perPage:0,page:1},sort:[]}}get facetsRequest(){const t=this.searchFilters.filter((t=>t.values.length>0&&!this.displayedFilters.includes(t.key))).map((t=>({id:t.key})));return[...this.displayedFilters.map((t=>({id:t}))),...t]}get suggestRequest(){return{contentLocale:this.contentLocale,input:this.query,filters:this.searchFilters,sort:[]}}isMobile(){switch(this.mode){case"mobile":return!0;case"desktop":return!1;default:return this.sizeCategory===l.S}}hasFacets(){return this.facetsRequest.length>0}get hasPresets(){return null!=this.presets&&this.presets.length>0}get hasPriors(){return null!=this.priors&&this.priors.length>0}hasLocaleSelector(){return this.availableContentLocales.length>1}focus(){var t;null===(t=this.container)||void 0===t||t.focus()}focusInput(){this.input?this.input.focus():setTimeout((()=>this.focusInput()),50)}clear(){this.query="",this.searchFilters=[],this.input&&(this.input.value=""),this.mobileMenuOpen=!1,this.displayFacets=!1}render(){return i.html`
|
|
2402
|
+
`;var Vi=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};null==window.fluidtopics&&console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");const Ki={filtersButton:"Filters",inputPlaceHolder:"Search",filterInputPlaceHolder:"Filter {0}",clearInputButton:"Clear",clearFilterButton:"Clear",displayMoreFilterValuesButton:"More",noFilterValuesAvailable:"No values available",searchButton:"Search",clearFilters:"Clear filters",contentLocaleSelector:"Lang",presetsSelector:"Preset",removeRecentSearch:"Remove",back:"Back"};class qi extends CustomEvent{constructor(t){super("launch-search",{detail:t,bubbles:!0,composed:!0})}}class Wi extends CustomEvent{constructor(t){super("change",{detail:t})}}const Gi=()=>{};class Xi extends e.FtLitElement{constructor(){super(...arguments),this.dense=!1,this.mode="auto",this.forceMobileMenuOpen=!1,this.forceMenuOpen=!1,this.baseUrl="",this.apiIntegrationIdentifier="ft-search-bar",this.availableContentLocales=[],this.availableContentLocalesInitialized=!1,this.labels={},this.labelResolver=new e.ParametrizedLabelResolver(Ki,{}),this.displayedFilters=[],this.presets=[],this.priors=[],this.searchRequestSerializer=t=>function(t,e){var i;const o=new URLSearchParams({"content-lang":null!==(i=e.contentLocale)&&void 0!==i?i:"all",query:e.query});if(e.filters.length>0){const t=e.filters.map((t=>{const e=t.values.map((t=>t.replace(/_/g,"\\\\\\\\_").replace(/~/g,"\\\\~").replace(/\*/g,"\\*"))).map((t=>encodeURIComponent(function(t){return`"${t}"`}(t)))).join("_");return`${t.key}~${e}`})).join("*");o.append("filters",t)}return new URL(`${t}/search/all?${o.toString()}`).href}(this.baseUrl,t),this.searchFilters=[],this.sizeCategory=l.M,this.displayFacets=!1,this.mobileMenuOpen=!1,this.facets=[],this.facetsInitialized=!1,this.knownFacetLabels=new Map,this.query="",this.suggestions=[],this.recentSearches=[],this.updateFacetsDebouncer=new e.Debouncer(500),this.suggestManager=new Zi(this),this.selectedFacetsManager=new Ui(this),this.desktopSearchBarManager=new Hi(this),this.mobileSearchBarManager=new _i(this),this.initDataDebouncer=new e.Debouncer(10),this.facetsLoaded=!1,this.closeFloatingContainer=t=>{this.isMobile()||(this.displayFacets=this.displayFacets&&t.composedPath().some((t=>t===this.floatingContainer)))},this.compareFilters=(t,e)=>t.key===e.key&&t.negative==e.negative&&t.values.length===e.values.length&&t.values.every((t=>e.values.includes(t))),this.compareRequests=(t,e)=>(null==t.contentLocale||null==e.contentLocale||t.contentLocale===e.contentLocale)&&t.filters.length===e.filters.length&&t.filters.every((t=>e.filters.some((e=>this.compareFilters(t,e)))))}isMobileMenuOpen(){return this.isMobile()&&(this.forceMobileMenuOpen||this.forceMenuOpen||this.mobileMenuOpen)}get request(){return{uiLocale:this.uiLocale,contentLocale:this.contentLocale,query:this.query,facets:this.facetsRequest,priors:this.hasPriors?this.priors:void 0,filters:this.searchFilters,paging:{perPage:0,page:1},sort:[]}}get facetsRequest(){const t=this.searchFilters.filter((t=>t.values.length>0&&!this.displayedFilters.includes(t.key))).map((t=>({id:t.key})));return[...this.displayedFilters.map((t=>({id:t}))),...t]}get suggestRequest(){return{contentLocale:this.contentLocale,input:this.query,filters:this.searchFilters,sort:[]}}isMobile(){switch(this.mode){case"mobile":return!0;case"desktop":return!1;default:return this.sizeCategory===l.S}}hasFacets(){return this.facetsRequest.length>0}get hasPresets(){return null!=this.presets&&this.presets.length>0}get hasPriors(){return null!=this.priors&&this.priors.length>0}hasLocaleSelector(){return this.availableContentLocales.length>1}focus(){var t;null===(t=this.container)||void 0===t||t.focus()}focusInput(){this.input?this.input.focus():setTimeout((()=>this.focusInput()),50)}clear(){this.query="",this.searchFilters=[],this.input&&(this.input.value=""),this.mobileMenuOpen=!1,this.displayFacets=!1}render(){return i.html`
|
|
2404
2403
|
<ft-size-watcher @change=${this.updateSize}></ft-size-watcher>
|
|
2405
2404
|
${this.renderSearchBar()}
|
|
2406
2405
|
`}renderSearchBar(){return this.facetsInitialized&&this.availableContentLocalesInitialized?this.isMobile()?this.mobileSearchBarManager.render():this.desktopSearchBarManager.render():i.html`
|
|
@@ -2528,7 +2527,7 @@ const V=Symbol.for(""),K=t=>{if((null==t?void 0:t.r)===V)return null==t?void 0:t
|
|
|
2528
2527
|
></ft-filter>
|
|
2529
2528
|
`}))}
|
|
2530
2529
|
</ft-snap-scroll>
|
|
2531
|
-
`:i.nothing}async firstUpdated(t){super.firstUpdated(t),this.initApi(),window.addEventListener("storage",(t=>{t.key===this.recentSearchesStorageKey&&this.initRecentSearches()}))}update(t){var i,o,s,r,n;if(t.has("labels")&&(this.labelResolver=new e.ParametrizedLabelResolver(Ki,this.labels)),t.has("sizeCategory")&&(this.mobileMenuOpen=!1,this.displayFacets=this.displayFacets&&!this.isMobile()),super.update(t),(t.has("availableContentLocales")||t.has("contentLocale"))&&this.availableContentLocales.length>0){const e=t=>this.availableContentLocales.some((e=>e.lang===t));e(this.contentLocale)||(this.contentLocale=t.has("contentLocale")&&e(t.get("contentLocale"))?t.get("contentLocale"):null===(i=this.availableContentLocales[0])||void 0===i?void 0:i.lang)}if(t.has("baseUrl")&&this.baseUrl&&(this.baseUrl.endsWith("/")&&(this.baseUrl=this.baseUrl.replace(/\/$/,"")),this.initRecentSearches()),t.has("presets")&&(null!==(o=this.presets)&&void 0!==o?o:[]).forEach((t=>t.filters.forEach((t=>t.values=t.values.map((t=>Qt(t))))))),t.has("selectedPreset")){const t=(null!==(s=this.presets)&&void 0!==s?s:[]).find((t=>t.name===this.selectedPreset));t&&!this.compareRequests(this.request,t)&&this.setFiltersFromPreset(t)}t.has("contentLocale")&&null!=this.contentLocale&&(this.knownFacetLabels=new Map),["contentLocale","searchFilters"].some((e=>t.has(e)))&&(this.selectedPreset=null===(n=(null!==(r=this.presets)&&void 0!==r?r:[]).find((t=>this.compareRequests(t,this.request))))||void 0===n?void 0:n.name),["baseUrl","apiIntegrationIdentifier"].some((e=>t.has(e)))&&(this.api=void 0,this.initApi()
|
|
2530
|
+
`:i.nothing}async firstUpdated(t){super.firstUpdated(t),this.initApi(),window.addEventListener("storage",(t=>{t.key===this.recentSearchesStorageKey&&this.initRecentSearches()}))}update(t){var i,o,s,r,n;if(t.has("labels")&&(this.labelResolver=new e.ParametrizedLabelResolver(Ki,this.labels)),t.has("sizeCategory")&&(this.mobileMenuOpen=!1,this.displayFacets=this.displayFacets&&!this.isMobile()),super.update(t),(t.has("availableContentLocales")||t.has("contentLocale"))&&this.availableContentLocales.length>0){const e=t=>this.availableContentLocales.some((e=>e.lang===t));e(this.contentLocale)||(this.contentLocale=t.has("contentLocale")&&e(t.get("contentLocale"))?t.get("contentLocale"):null===(i=this.availableContentLocales[0])||void 0===i?void 0:i.lang)}if(t.has("baseUrl")&&this.baseUrl&&(this.baseUrl.endsWith("/")&&(this.baseUrl=this.baseUrl.replace(/\/$/,"")),this.initRecentSearches()),t.has("presets")&&(null!==(o=this.presets)&&void 0!==o?o:[]).forEach((t=>t.filters.forEach((t=>t.values=t.values.map((t=>Qt(t))))))),t.has("selectedPreset")){const t=(null!==(s=this.presets)&&void 0!==s?s:[]).find((t=>t.name===this.selectedPreset));t&&!this.compareRequests(this.request,t)&&this.setFiltersFromPreset(t)}t.has("contentLocale")&&null!=this.contentLocale&&(this.knownFacetLabels=new Map),["contentLocale","searchFilters"].some((e=>t.has(e)))&&(this.selectedPreset=null===(n=(null!==(r=this.presets)&&void 0!==r?r:[]).find((t=>this.compareRequests(t,this.request))))||void 0===n?void 0:n.name),["baseUrl","apiIntegrationIdentifier"].some((e=>t.has(e)))&&(this.api=void 0,this.initApi()),t.has("api")&&this.api&&this.initSearchData(),["uiLocale","contentLocale","searchFilters","displayedFilters"].some((e=>t.has(e)))&&this.updateFacets(),["query","uiLocale","contentLocale","searchFilters","displayedFilters","api"].some((e=>t.has(e)))&&this.suggestManager.update(),["query","uiLocale","contentLocale","searchFilters"].some((e=>t.has(e)))&&this.dispatchEvent(new Wi(this.request))}initSearchData(){this.availableContentLocalesInitialized=!1,this.facetsInitialized=!1,this.initDataDebouncer.run((()=>{var t;null===(t=this.api)||void 0===t||t.getAvailableSearchLocales().then((t=>t.contentLocales)).catch((()=>[])).then((t=>{this.availableContentLocales=t,this.availableContentLocalesInitialized=!0})),this.retrieveFacetsFromSearch().then((()=>this.facetsInitialized=!0))}))}contentAvailableCallback(t){var e,i,o;if(super.contentAvailableCallback(t),t.has("displayFacets")&&this.displayFacets&&(null===(e=this.floatingContainer)||void 0===e||e.focus()),null!=this.scrollToFacet&&this.facetsLoaded){null===(i=this.scrollingFiltersContainer)||void 0===i||i.scrollIndexIntoView(this.facets.findIndex((t=>t.key===this.scrollToFacet)));const t=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(`ft-accordion-item[data-facet-key="${this.scrollToFacet}"]`);t&&(t.active=!0),this.scrollToFacet=void 0}}initApi(){null==this.api&&(this.api=window.fluidtopics?new window.fluidtopics.FluidTopicsApi(this.baseUrl,this.apiIntegrationIdentifier,!0):void 0,setTimeout((()=>this.initApi()),10))}updateFacets(){this.api&&this.facetsInitialized&&(this.facetsRequest.length>0?(this.facetsLoaded=!1,this.updateFacetsDebouncer.run((async()=>{await this.retrieveFacetsFromSearch(),this.facetsLoaded=!0}))):this.facets=[])}async retrieveFacetsFromSearch(){var t;const e=new Map;await(null===(t=this.api)||void 0===t?void 0:t.search({...this.request,query:""}).then((t=>t.facets.forEach((t=>{this.knownFacetLabels.set(t.key,t.label),e.set(t.key,t)})))).catch(Gi)),this.facets=[];for(let t of this.facetsRequest)e.has(t.id)?this.facets.push(e.get(t.id)):this.knownFacetLabels.has(t.id)&&this.facets.push({key:t.id,label:this.knownFacetLabels.get(t.id),rootNodes:[],multiSelectionable:!0,hierarchical:!1})}onFloatingContainerKeyUp(t){var e;"Escape"===t.key&&(this.displayFacets=!1,null===(e=this.filtersOpener)||void 0===e||e.focus())}setQuery(t){this.input&&(this.input.value=t),this.query=t}launchSearch(){if(this.query){let t=this.recentSearches.filter((t=>t.toLowerCase()!==this.query.toLowerCase())).filter(((t,e)=>e<20));this.recentSearches=[this.query,...t],this.saveRecentSearches()}this.dispatchEvent(new qi(this.request)),this.mobileMenuOpen=!1,this.displayFacets=!1,this.focus()}get recentSearchesStorageKey(){return this.baseUrl+":ft:recent-search-queries"}initRecentSearches(){var t;this.recentSearches=JSON.parse(null!==(t=window.localStorage.getItem(this.recentSearchesStorageKey))&&void 0!==t?t:"[]")}saveRecentSearches(){const t=JSON.stringify(this.recentSearches);window.localStorage.setItem(this.recentSearchesStorageKey,t),window.dispatchEvent(new StorageEvent("storage",{key:this.recentSearchesStorageKey,newValue:t,storageArea:window.localStorage,url:window.location.href}))}connectedCallback(){super.connectedCallback(),document.addEventListener("focusin",this.closeFloatingContainer),document.addEventListener("click",this.closeFloatingContainer)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("focusin",this.closeFloatingContainer),document.addEventListener("click",this.closeFloatingContainer)}updateSize(t){this.sizeCategory=t.detail.category}setFilter(t,e){let i=this.searchFilters.filter((e=>e.key!==t));this.facets.forEach((i=>{i.key===t&&Jt(i.rootNodes,(t=>t.childNodes)).forEach((t=>t.selected=e.includes(t.value)))})),e.length&&i.push({key:t,negative:!1,values:e}),this.searchFilters=i,this.scrollToFacet=t}setFiltersFromPreset(t){null!=t&&(null!=t.contentLocale&&(this.contentLocale=t.contentLocale),this.searchFilters=t.filters)}clearFilters(){this.facets.forEach((t=>Jt(t.rootNodes,(t=>t.childNodes)).forEach((t=>t.selected=!1)))),this.searchFilters=[];const t=this.facets[0];this.scrollToFacet=null==t?void 0:t.key}querySelector(t){return this.shadowRoot.querySelector(t)}querySelectorAll(t){return this.shadowRoot.querySelectorAll(t)}renderDesktopFloatingMenu(){return this.forceMenuOpen?i.nothing:i.html`
|
|
2532
2531
|
<div class="ft-search-bar--floating-panel"
|
|
2533
2532
|
@keyup=${this.onFloatingContainerKeyUp}
|
|
2534
2533
|
part="floating-panel"
|
|
@@ -364,7 +364,7 @@ const Qe=Et(class extends zt{constructor(t){var e;if(super(t),t.type!==Ot||"clas
|
|
|
364
364
|
</div>
|
|
365
365
|
<slot></slot>
|
|
366
366
|
</div>
|
|
367
|
-
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,o=(e.width-this.tooltip.clientWidth)/2
|
|
367
|
+
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.position){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const e=t.getBoundingClientRect(),i=(e.height-this.tooltip.clientHeight)/2,o=(e.width-this.tooltip.clientWidth)/2;let s=0,n=0;switch(this.position){case"top":n=-this.tooltip.clientHeight,s=o;break;case"bottom":n=e.height,s=o;break;case"left":n=i,s=-this.tooltip.clientWidth;break;case"right":n=i,s=e.width}e.left+s+this.tooltip.clientWidth>window.innerWidth&&(s=window.innerWidth-this.tooltip.clientWidth-e.left),e.left+s<0&&(s=0);const r=this.tooltip.style;r.left=s+"px",r.top=n+"px",r.maxWidth=Math.max(e.width,150)+"px"}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}}pi.elementDefinitions={"ft-typography":Ve},pi.styles=g`
|
|
368
368
|
.ft-tooltip--container {
|
|
369
369
|
display: block;
|
|
370
370
|
position: relative;
|
|
@@ -530,7 +530,7 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
|
|
|
530
530
|
box-shadow: 0px 0px 0px transparent;
|
|
531
531
|
border: 0px solid transparent;
|
|
532
532
|
text-shadow: 0px 0px 0px transparent;
|
|
533
|
-
font-size:
|
|
533
|
+
font-size: ${Ci.fontSize};
|
|
534
534
|
}
|
|
535
535
|
|
|
536
536
|
button:hover {
|
|
@@ -559,8 +559,7 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
|
|
|
559
559
|
border: none;
|
|
560
560
|
pointer-events: auto;
|
|
561
561
|
|
|
562
|
-
--ft-button-internal-
|
|
563
|
-
--ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
|
|
562
|
+
--ft-button-internal-line-height: calc(${Ci.fontSize} + 2px);
|
|
564
563
|
--ft-button-internal-color: ${Ci.color};
|
|
565
564
|
${bt(wi.size,Ci.iconSize)};
|
|
566
565
|
--ft-button-internal-vertical-padding: 6px;
|
|
@@ -616,7 +615,7 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
|
|
|
616
615
|
text-overflow: ellipsis;
|
|
617
616
|
display: block;
|
|
618
617
|
margin: 0 var(--ft-button-internal-horizontal-padding);
|
|
619
|
-
${bt(je.fontSize,"
|
|
618
|
+
${bt(je.fontSize,"1em")};
|
|
620
619
|
${bt(je.lineHeight,"var(--ft-button-internal-content-height)")};
|
|
621
620
|
}
|
|
622
621
|
|
|
@@ -2520,7 +2519,7 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
|
|
|
2520
2519
|
</div>
|
|
2521
2520
|
`}onSearchBarKeyDown(t){var e;switch(t.key){case"Escape":this.searchBar.mobileMenuOpen=!1,null===(e=this.searchBar.input)||void 0===e||e.blur();break;case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestManager.focusFirstSuggestion()}}onSearchBarKeyUp(t){const e=t.composedPath()[0];this.searchBar.query=e.value,"Enter"===t.key&&this.searchBar.launchSearch()}}Zo.styles=g`
|
|
2522
2521
|
|
|
2523
|
-
`;var Ko=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};null==window.fluidtopics&&console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");const Wo={filtersButton:"Filters",inputPlaceHolder:"Search",filterInputPlaceHolder:"Filter {0}",clearInputButton:"Clear",clearFilterButton:"Clear",displayMoreFilterValuesButton:"More",noFilterValuesAvailable:"No values available",searchButton:"Search",clearFilters:"Clear filters",contentLocaleSelector:"Lang",presetsSelector:"Preset",removeRecentSearch:"Remove",back:"Back"};class Vo extends CustomEvent{constructor(t){super("launch-search",{detail:t,bubbles:!0,composed:!0})}}class qo extends CustomEvent{constructor(t){super("change",{detail:t})}}const Jo=()=>{};class Xo extends xt{constructor(){super(...arguments),this.dense=!1,this.mode="auto",this.forceMobileMenuOpen=!1,this.forceMenuOpen=!1,this.baseUrl="",this.apiIntegrationIdentifier="ft-search-bar",this.availableContentLocales=[],this.availableContentLocalesInitialized=!1,this.labels={},this.labelResolver=new mt(Wo,{}),this.displayedFilters=[],this.presets=[],this.priors=[],this.searchRequestSerializer=t=>function(t,e){var i;const o=new URLSearchParams({"content-lang":null!==(i=e.contentLocale)&&void 0!==i?i:"all",query:e.query});if(e.filters.length>0){const t=e.filters.map((t=>{const e=t.values.map((t=>t.replace(/_/g,"\\\\\\\\_").replace(/~/g,"\\\\~").replace(/\*/g,"\\*"))).map((t=>encodeURIComponent(function(t){return`"${t}"`}(t)))).join("_");return`${t.key}~${e}`})).join("*");o.append("filters",t)}return new URL(`${t}/search/all?${o.toString()}`).href}(this.baseUrl,t),this.searchFilters=[],this.sizeCategory=It.M,this.displayFacets=!1,this.mobileMenuOpen=!1,this.facets=[],this.facetsInitialized=!1,this.knownFacetLabels=new Map,this.query="",this.suggestions=[],this.recentSearches=[],this.updateFacetsDebouncer=new e(500),this.suggestManager=new To(this),this.selectedFacetsManager=new _o(this),this.desktopSearchBarManager=new Zo(this),this.mobileSearchBarManager=new Ho(this),this.facetsLoaded=!1,this.closeFloatingContainer=t=>{this.isMobile()||(this.displayFacets=this.displayFacets&&t.composedPath().some((t=>t===this.floatingContainer)))},this.compareFilters=(t,e)=>t.key===e.key&&t.negative==e.negative&&t.values.length===e.values.length&&t.values.every((t=>e.values.includes(t))),this.compareRequests=(t,e)=>(null==t.contentLocale||null==e.contentLocale||t.contentLocale===e.contentLocale)&&t.filters.length===e.filters.length&&t.filters.every((t=>e.filters.some((e=>this.compareFilters(t,e)))))}isMobileMenuOpen(){return this.isMobile()&&(this.forceMobileMenuOpen||this.forceMenuOpen||this.mobileMenuOpen)}get request(){return{uiLocale:this.uiLocale,contentLocale:this.contentLocale,query:this.query,facets:this.facetsRequest,priors:this.hasPriors?this.priors:void 0,filters:this.searchFilters,paging:{perPage:0,page:1},sort:[]}}get facetsRequest(){const t=this.searchFilters.filter((t=>t.values.length>0&&!this.displayedFilters.includes(t.key))).map((t=>({id:t.key})));return[...this.displayedFilters.map((t=>({id:t}))),...t]}get suggestRequest(){return{contentLocale:this.contentLocale,input:this.query,filters:this.searchFilters,sort:[]}}isMobile(){switch(this.mode){case"mobile":return!0;case"desktop":return!1;default:return this.sizeCategory===It.S}}hasFacets(){return this.facetsRequest.length>0}get hasPresets(){return null!=this.presets&&this.presets.length>0}get hasPriors(){return null!=this.priors&&this.priors.length>0}hasLocaleSelector(){return this.availableContentLocales.length>1}focus(){var t;null===(t=this.container)||void 0===t||t.focus()}focusInput(){this.input?this.input.focus():setTimeout((()=>this.focusInput()),50)}clear(){this.query="",this.searchFilters=[],this.input&&(this.input.value=""),this.mobileMenuOpen=!1,this.displayFacets=!1}render(){return W`
|
|
2522
|
+
`;var Ko=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};null==window.fluidtopics&&console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");const Wo={filtersButton:"Filters",inputPlaceHolder:"Search",filterInputPlaceHolder:"Filter {0}",clearInputButton:"Clear",clearFilterButton:"Clear",displayMoreFilterValuesButton:"More",noFilterValuesAvailable:"No values available",searchButton:"Search",clearFilters:"Clear filters",contentLocaleSelector:"Lang",presetsSelector:"Preset",removeRecentSearch:"Remove",back:"Back"};class Vo extends CustomEvent{constructor(t){super("launch-search",{detail:t,bubbles:!0,composed:!0})}}class qo extends CustomEvent{constructor(t){super("change",{detail:t})}}const Jo=()=>{};class Xo extends xt{constructor(){super(...arguments),this.dense=!1,this.mode="auto",this.forceMobileMenuOpen=!1,this.forceMenuOpen=!1,this.baseUrl="",this.apiIntegrationIdentifier="ft-search-bar",this.availableContentLocales=[],this.availableContentLocalesInitialized=!1,this.labels={},this.labelResolver=new mt(Wo,{}),this.displayedFilters=[],this.presets=[],this.priors=[],this.searchRequestSerializer=t=>function(t,e){var i;const o=new URLSearchParams({"content-lang":null!==(i=e.contentLocale)&&void 0!==i?i:"all",query:e.query});if(e.filters.length>0){const t=e.filters.map((t=>{const e=t.values.map((t=>t.replace(/_/g,"\\\\\\\\_").replace(/~/g,"\\\\~").replace(/\*/g,"\\*"))).map((t=>encodeURIComponent(function(t){return`"${t}"`}(t)))).join("_");return`${t.key}~${e}`})).join("*");o.append("filters",t)}return new URL(`${t}/search/all?${o.toString()}`).href}(this.baseUrl,t),this.searchFilters=[],this.sizeCategory=It.M,this.displayFacets=!1,this.mobileMenuOpen=!1,this.facets=[],this.facetsInitialized=!1,this.knownFacetLabels=new Map,this.query="",this.suggestions=[],this.recentSearches=[],this.updateFacetsDebouncer=new e(500),this.suggestManager=new To(this),this.selectedFacetsManager=new _o(this),this.desktopSearchBarManager=new Zo(this),this.mobileSearchBarManager=new Ho(this),this.initDataDebouncer=new e(10),this.facetsLoaded=!1,this.closeFloatingContainer=t=>{this.isMobile()||(this.displayFacets=this.displayFacets&&t.composedPath().some((t=>t===this.floatingContainer)))},this.compareFilters=(t,e)=>t.key===e.key&&t.negative==e.negative&&t.values.length===e.values.length&&t.values.every((t=>e.values.includes(t))),this.compareRequests=(t,e)=>(null==t.contentLocale||null==e.contentLocale||t.contentLocale===e.contentLocale)&&t.filters.length===e.filters.length&&t.filters.every((t=>e.filters.some((e=>this.compareFilters(t,e)))))}isMobileMenuOpen(){return this.isMobile()&&(this.forceMobileMenuOpen||this.forceMenuOpen||this.mobileMenuOpen)}get request(){return{uiLocale:this.uiLocale,contentLocale:this.contentLocale,query:this.query,facets:this.facetsRequest,priors:this.hasPriors?this.priors:void 0,filters:this.searchFilters,paging:{perPage:0,page:1},sort:[]}}get facetsRequest(){const t=this.searchFilters.filter((t=>t.values.length>0&&!this.displayedFilters.includes(t.key))).map((t=>({id:t.key})));return[...this.displayedFilters.map((t=>({id:t}))),...t]}get suggestRequest(){return{contentLocale:this.contentLocale,input:this.query,filters:this.searchFilters,sort:[]}}isMobile(){switch(this.mode){case"mobile":return!0;case"desktop":return!1;default:return this.sizeCategory===It.S}}hasFacets(){return this.facetsRequest.length>0}get hasPresets(){return null!=this.presets&&this.presets.length>0}get hasPriors(){return null!=this.priors&&this.priors.length>0}hasLocaleSelector(){return this.availableContentLocales.length>1}focus(){var t;null===(t=this.container)||void 0===t||t.focus()}focusInput(){this.input?this.input.focus():setTimeout((()=>this.focusInput()),50)}clear(){this.query="",this.searchFilters=[],this.input&&(this.input.value=""),this.mobileMenuOpen=!1,this.displayFacets=!1}render(){return W`
|
|
2524
2523
|
<ft-size-watcher @change=${this.updateSize}></ft-size-watcher>
|
|
2525
2524
|
${this.renderSearchBar()}
|
|
2526
2525
|
`}renderSearchBar(){return this.facetsInitialized&&this.availableContentLocalesInitialized?this.isMobile()?this.mobileSearchBarManager.render():this.desktopSearchBarManager.render():W`
|
|
@@ -2648,7 +2647,7 @@ class ui extends zt{constructor(t){if(super(t),this.it=q,t.type!==Ct)throw Error
|
|
|
2648
2647
|
></ft-filter>
|
|
2649
2648
|
`}))}
|
|
2650
2649
|
</ft-snap-scroll>
|
|
2651
|
-
`:q}async firstUpdated(t){super.firstUpdated(t),this.initApi(),window.addEventListener("storage",(t=>{t.key===this.recentSearchesStorageKey&&this.initRecentSearches()}))}update(t){var e,i,o,s,n;if(t.has("labels")&&(this.labelResolver=new mt(Wo,this.labels)),t.has("sizeCategory")&&(this.mobileMenuOpen=!1,this.displayFacets=this.displayFacets&&!this.isMobile()),super.update(t),(t.has("availableContentLocales")||t.has("contentLocale"))&&this.availableContentLocales.length>0){const i=t=>this.availableContentLocales.some((e=>e.lang===t));i(this.contentLocale)||(this.contentLocale=t.has("contentLocale")&&i(t.get("contentLocale"))?t.get("contentLocale"):null===(e=this.availableContentLocales[0])||void 0===e?void 0:e.lang)}if(t.has("baseUrl")&&this.baseUrl&&(this.baseUrl.endsWith("/")&&(this.baseUrl=this.baseUrl.replace(/\/$/,"")),this.initRecentSearches()),t.has("presets")&&(null!==(i=this.presets)&&void 0!==i?i:[]).forEach((t=>t.filters.forEach((t=>t.values=t.values.map((t=>Je(t))))))),t.has("selectedPreset")){const t=(null!==(o=this.presets)&&void 0!==o?o:[]).find((t=>t.name===this.selectedPreset));t&&!this.compareRequests(this.request,t)&&this.setFiltersFromPreset(t)}t.has("contentLocale")&&null!=this.contentLocale&&(this.knownFacetLabels=new Map),["contentLocale","searchFilters"].some((e=>t.has(e)))&&(this.selectedPreset=null===(n=(null!==(s=this.presets)&&void 0!==s?s:[]).find((t=>this.compareRequests(t,this.request))))||void 0===n?void 0:n.name),["baseUrl","apiIntegrationIdentifier"].some((e=>t.has(e)))&&(this.api=void 0,this.initApi()
|
|
2650
|
+
`:q}async firstUpdated(t){super.firstUpdated(t),this.initApi(),window.addEventListener("storage",(t=>{t.key===this.recentSearchesStorageKey&&this.initRecentSearches()}))}update(t){var e,i,o,s,n;if(t.has("labels")&&(this.labelResolver=new mt(Wo,this.labels)),t.has("sizeCategory")&&(this.mobileMenuOpen=!1,this.displayFacets=this.displayFacets&&!this.isMobile()),super.update(t),(t.has("availableContentLocales")||t.has("contentLocale"))&&this.availableContentLocales.length>0){const i=t=>this.availableContentLocales.some((e=>e.lang===t));i(this.contentLocale)||(this.contentLocale=t.has("contentLocale")&&i(t.get("contentLocale"))?t.get("contentLocale"):null===(e=this.availableContentLocales[0])||void 0===e?void 0:e.lang)}if(t.has("baseUrl")&&this.baseUrl&&(this.baseUrl.endsWith("/")&&(this.baseUrl=this.baseUrl.replace(/\/$/,"")),this.initRecentSearches()),t.has("presets")&&(null!==(i=this.presets)&&void 0!==i?i:[]).forEach((t=>t.filters.forEach((t=>t.values=t.values.map((t=>Je(t))))))),t.has("selectedPreset")){const t=(null!==(o=this.presets)&&void 0!==o?o:[]).find((t=>t.name===this.selectedPreset));t&&!this.compareRequests(this.request,t)&&this.setFiltersFromPreset(t)}t.has("contentLocale")&&null!=this.contentLocale&&(this.knownFacetLabels=new Map),["contentLocale","searchFilters"].some((e=>t.has(e)))&&(this.selectedPreset=null===(n=(null!==(s=this.presets)&&void 0!==s?s:[]).find((t=>this.compareRequests(t,this.request))))||void 0===n?void 0:n.name),["baseUrl","apiIntegrationIdentifier"].some((e=>t.has(e)))&&(this.api=void 0,this.initApi()),t.has("api")&&this.api&&this.initSearchData(),["uiLocale","contentLocale","searchFilters","displayedFilters"].some((e=>t.has(e)))&&this.updateFacets(),["query","uiLocale","contentLocale","searchFilters","displayedFilters","api"].some((e=>t.has(e)))&&this.suggestManager.update(),["query","uiLocale","contentLocale","searchFilters"].some((e=>t.has(e)))&&this.dispatchEvent(new qo(this.request))}initSearchData(){this.availableContentLocalesInitialized=!1,this.facetsInitialized=!1,this.initDataDebouncer.run((()=>{var t;null===(t=this.api)||void 0===t||t.getAvailableSearchLocales().then((t=>t.contentLocales)).catch((()=>[])).then((t=>{this.availableContentLocales=t,this.availableContentLocalesInitialized=!0})),this.retrieveFacetsFromSearch().then((()=>this.facetsInitialized=!0))}))}contentAvailableCallback(t){var e,i,o;if(super.contentAvailableCallback(t),t.has("displayFacets")&&this.displayFacets&&(null===(e=this.floatingContainer)||void 0===e||e.focus()),null!=this.scrollToFacet&&this.facetsLoaded){null===(i=this.scrollingFiltersContainer)||void 0===i||i.scrollIndexIntoView(this.facets.findIndex((t=>t.key===this.scrollToFacet)));const t=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(`ft-accordion-item[data-facet-key="${this.scrollToFacet}"]`);t&&(t.active=!0),this.scrollToFacet=void 0}}initApi(){null==this.api&&(this.api=window.fluidtopics?new window.fluidtopics.FluidTopicsApi(this.baseUrl,this.apiIntegrationIdentifier,!0):void 0,setTimeout((()=>this.initApi()),10))}updateFacets(){this.api&&this.facetsInitialized&&(this.facetsRequest.length>0?(this.facetsLoaded=!1,this.updateFacetsDebouncer.run((async()=>{await this.retrieveFacetsFromSearch(),this.facetsLoaded=!0}))):this.facets=[])}async retrieveFacetsFromSearch(){var t;const e=new Map;await(null===(t=this.api)||void 0===t?void 0:t.search({...this.request,query:""}).then((t=>t.facets.forEach((t=>{this.knownFacetLabels.set(t.key,t.label),e.set(t.key,t)})))).catch(Jo)),this.facets=[];for(let t of this.facetsRequest)e.has(t.id)?this.facets.push(e.get(t.id)):this.knownFacetLabels.has(t.id)&&this.facets.push({key:t.id,label:this.knownFacetLabels.get(t.id),rootNodes:[],multiSelectionable:!0,hierarchical:!1})}onFloatingContainerKeyUp(t){var e;"Escape"===t.key&&(this.displayFacets=!1,null===(e=this.filtersOpener)||void 0===e||e.focus())}setQuery(t){this.input&&(this.input.value=t),this.query=t}launchSearch(){if(this.query){let t=this.recentSearches.filter((t=>t.toLowerCase()!==this.query.toLowerCase())).filter(((t,e)=>e<20));this.recentSearches=[this.query,...t],this.saveRecentSearches()}this.dispatchEvent(new Vo(this.request)),this.mobileMenuOpen=!1,this.displayFacets=!1,this.focus()}get recentSearchesStorageKey(){return this.baseUrl+":ft:recent-search-queries"}initRecentSearches(){var t;this.recentSearches=JSON.parse(null!==(t=window.localStorage.getItem(this.recentSearchesStorageKey))&&void 0!==t?t:"[]")}saveRecentSearches(){const t=JSON.stringify(this.recentSearches);window.localStorage.setItem(this.recentSearchesStorageKey,t),window.dispatchEvent(new StorageEvent("storage",{key:this.recentSearchesStorageKey,newValue:t,storageArea:window.localStorage,url:window.location.href}))}connectedCallback(){super.connectedCallback(),document.addEventListener("focusin",this.closeFloatingContainer),document.addEventListener("click",this.closeFloatingContainer)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("focusin",this.closeFloatingContainer),document.addEventListener("click",this.closeFloatingContainer)}updateSize(t){this.sizeCategory=t.detail.category}setFilter(t,e){let i=this.searchFilters.filter((e=>e.key!==t));this.facets.forEach((i=>{i.key===t&&qe(i.rootNodes,(t=>t.childNodes)).forEach((t=>t.selected=e.includes(t.value)))})),e.length&&i.push({key:t,negative:!1,values:e}),this.searchFilters=i,this.scrollToFacet=t}setFiltersFromPreset(t){null!=t&&(null!=t.contentLocale&&(this.contentLocale=t.contentLocale),this.searchFilters=t.filters)}clearFilters(){this.facets.forEach((t=>qe(t.rootNodes,(t=>t.childNodes)).forEach((t=>t.selected=!1)))),this.searchFilters=[];const t=this.facets[0];this.scrollToFacet=null==t?void 0:t.key}querySelector(t){return this.shadowRoot.querySelector(t)}querySelectorAll(t){return this.shadowRoot.querySelectorAll(t)}renderDesktopFloatingMenu(){return this.forceMenuOpen?q:W`
|
|
2652
2651
|
<div class="ft-search-bar--floating-panel"
|
|
2653
2652
|
@keyup=${this.onFloatingContainerKeyUp}
|
|
2654
2653
|
part="floating-panel"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-search-bar",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "Search bar component using Fluid Topics public API",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-accordion": "0.3.
|
|
23
|
-
"@fluid-topics/ft-button": "0.3.
|
|
24
|
-
"@fluid-topics/ft-chip": "0.3.
|
|
25
|
-
"@fluid-topics/ft-filter": "0.3.
|
|
26
|
-
"@fluid-topics/ft-icon": "0.3.
|
|
27
|
-
"@fluid-topics/ft-select": "0.3.
|
|
28
|
-
"@fluid-topics/ft-size-watcher": "0.3.
|
|
29
|
-
"@fluid-topics/ft-skeleton": "0.3.
|
|
30
|
-
"@fluid-topics/ft-snap-scroll": "0.3.
|
|
31
|
-
"@fluid-topics/ft-tooltip": "0.3.
|
|
32
|
-
"@fluid-topics/ft-typography": "0.3.
|
|
33
|
-
"@fluid-topics/ft-wc-utils": "0.3.
|
|
22
|
+
"@fluid-topics/ft-accordion": "0.3.5",
|
|
23
|
+
"@fluid-topics/ft-button": "0.3.5",
|
|
24
|
+
"@fluid-topics/ft-chip": "0.3.5",
|
|
25
|
+
"@fluid-topics/ft-filter": "0.3.5",
|
|
26
|
+
"@fluid-topics/ft-icon": "0.3.5",
|
|
27
|
+
"@fluid-topics/ft-select": "0.3.5",
|
|
28
|
+
"@fluid-topics/ft-size-watcher": "0.3.5",
|
|
29
|
+
"@fluid-topics/ft-skeleton": "0.3.5",
|
|
30
|
+
"@fluid-topics/ft-snap-scroll": "0.3.5",
|
|
31
|
+
"@fluid-topics/ft-tooltip": "0.3.5",
|
|
32
|
+
"@fluid-topics/ft-typography": "0.3.5",
|
|
33
|
+
"@fluid-topics/ft-wc-utils": "0.3.5",
|
|
34
34
|
"lit": "2.2.8"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"@fluid-topics/public-api": "1.0.18"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "a8d8a3bf89bac6275c44c4aa7f966e557a94454f"
|
|
43
43
|
}
|