@fluid-topics/ft-search-bar 0.2.9 → 0.2.13

package/build/ft-search-bar.js

@@ -11,7 +11,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { Debouncer, FtLitElement, jsonProperty, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
 import { FtSizeCategory, FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
 import { FtTypography, FtTypographyBody2 } from "@fluid-topics/ft-typography";
-import { facetToFilter, getBreadcrumbFromValue, getLabelFromValue, getSelectedValues, selectedValues, serializeRequest } from "./converters";
+import { facetToFilter, getBreadcrumbFromValue, getLabelFromValue, getSelectedValues, selectedValues, serializeRequest, unquote } from "./converters";
 import { FtFilter, FtFilterOption } from "@fluid-topics/ft-filter";
 import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
 import { FtAccordion, FtAccordionItem } from "@fluid-topics/ft-accordion";
@@ -23,6 +23,7 @@ import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { flatDeep } from "@fluid-topics/ft-filter/build/utils";
 import { facetsCss, searchBarCss, selectedFiltersCss, suggestionsCss } from "./ft-search-bar.css";
+import { FtSkeleton } from "@fluid-topics/ft-skeleton";
 if (window.fluidtopics == null) {
     console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");
 }
@@ -63,6 +64,7 @@ export class FtSearchBar extends FtLitElement {
         this.baseUrl = "";
         this.apiIntegrationIdentifier = "ft-search-bar";
         this.availableContentLocales = [];
+        this.availableContentLocalesInitialized = false;
         this.labels = {};
         this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, {});
         this.displayedFilters = [];
@@ -70,10 +72,11 @@ export class FtSearchBar extends FtLitElement {
         this.priors = [];
         this.searchRequestSerializer = (request) => serializeRequest(this.baseUrl, request);
         this.searchFilters = [];
-        this.sizeCategory = FtSizeCategory.S;
+        this.sizeCategory = FtSizeCategory.M;
         this.displayFacets = false;
         this.mobileMenuOpen = false;
         this.facets = [];
+        this.facetsInitialized = false;
         this.knownFacetLabels = {};
         this.query = "";
         this.suggestions = [];
@@ -151,6 +154,12 @@ export class FtSearchBar extends FtLitElement {
         this.displayFacets = false;
     }
     render() {
+        return html `
+            <ft-size-watcher @change=${this.updateSize}></ft-size-watcher>
+            ${this.renderSearchBar()}
+        `;
+    }
+    renderSearchBar() {
         const rootClasses = {
             "ft-search-bar--container": true,
             "ft-search-bar--dense": !this.isMobile && this.dense,
@@ -159,11 +168,12 @@ export class FtSearchBar extends FtLitElement {
             "ft-search-bar--floating-panel-open": !this.isMobile && this.displayFacets,
             "ft-search-bar--mobile-menu-open": this.mobileMenuOpen,
         };
-        return html `
-            <ft-size-watcher @change=${this.updateSize}></ft-size-watcher>
+        return this.facetsInitialized && this.availableContentLocalesInitialized ? html `
             <div class="${classMap(rootClasses)}" part="container" tabindex="-1">
                 ${this.isMobile ? this.renderMobileSearchBar() : this.renderDesktopSearchBar()}
             </div>
+        ` : html `
+            <ft-skeleton class="ft-search-bar--skeleton"></ft-skeleton>
         `;
     }
     renderMobileSearchBar() {
@@ -584,13 +594,11 @@ export class FtSearchBar extends FtLitElement {
         }
     }
     async firstUpdated(props) {
-        var _a, _b;
         super.firstUpdated(props);
         this.initApi();
-        this.availableContentLocales = (_b = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.getAvailableSearchLocales().then(result => result.contentLocales).catch(() => []))) !== null && _b !== void 0 ? _b : [];
     }
     update(props) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (props.has("labels")) {
             this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, this.labels);
         }
@@ -611,17 +619,26 @@ export class FtSearchBar extends FtLitElement {
             }
             this.recentSearches = JSON.parse((_b = window.localStorage.getItem(this.recentSearchesStorageKey)) !== null && _b !== void 0 ? _b : "[]");
         }
+        if (props.has("presets")) {
+            ((_c = this.presets) !== null && _c !== void 0 ? _c : []).forEach(preset => preset.filters.forEach(filter => filter.values = filter.values.map(v => unquote(v))));
+        }
         if (props.has("selectedPreset")) {
-            const currentPreset = ((_c = this.presets) !== null && _c !== void 0 ? _c : []).find(p => p.name === this.selectedPreset);
+            const currentPreset = ((_d = this.presets) !== null && _d !== void 0 ? _d : []).find(p => p.name === this.selectedPreset);
             if (currentPreset && !this.compareRequests(this.request, currentPreset)) {
                 this.setFiltersFromPreset(currentPreset);
             }
         }
         if (["contentLocale", "searchFilters"].some(p => props.has(p))) {
-            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;
+            this.selectedPreset = (_f = ((_e = this.presets) !== null && _e !== void 0 ? _e : []).find(p => this.compareRequests(p, this.request))) === null || _f === void 0 ? void 0 : _f.name;
         }
         if (["baseUrl", "apiIntegrationIdentifier"].some(p => props.has(p))) {
-            this.setApi();
+            this.api = undefined;
+            this.initApi();
+            this.availableContentLocalesInitialized = false;
+            this.facetsInitialized = false;
+        }
+        if (props.has("api")) {
+            this.updateAvailableContentLocales();
         }
         if (["uiLocale", "contentLocale", "searchFilters", "displayedFilters", "api"].some(p => props.has(p))) {
             this.updateFacets();
@@ -633,6 +650,12 @@ export class FtSearchBar extends FtLitElement {
             this.dispatchEvent(new SearchStateChangeEvent(this.request));
         }
     }
+    async updateAvailableContentLocales() {
+        if (this.api) {
+            this.availableContentLocales = await this.api.getAvailableSearchLocales().then(result => result.contentLocales).catch(() => []);
+            this.availableContentLocalesInitialized = true;
+        }
+    }
     contentAvailableCallback(props) {
         var _a, _b, _c;
         super.contentAvailableCallback(props);
@@ -650,25 +673,26 @@ export class FtSearchBar extends FtLitElement {
     }
     initApi() {
         if (this.api == null) {
-            this.setApi();
+            this.api = window.fluidtopics ? new window.fluidtopics.FluidTopicsApi(this.baseUrl, this.apiIntegrationIdentifier, true) : undefined;
             setTimeout(() => this.initApi(), 100);
         }
     }
-    setApi() {
-        this.api = window.fluidtopics ? new window.fluidtopics.FluidTopicsApi(this.baseUrl, this.apiIntegrationIdentifier, true) : undefined;
-    }
     updateFacets() {
-        if (this.facetsRequest.length > 0) {
-            this.facetsLoaded = false;
-            this.updateFacetsDebouncer.run(async () => {
-                var _a, _b;
-                this.facets = (_b = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets).catch(() => []))) !== null && _b !== void 0 ? _b : [];
-                this.facets.forEach(f => this.knownFacetLabels[f.key] = f.label);
-                this.facetsLoaded = true;
-            });
-        }
-        else {
-            this.facets = [];
+        if (this.api) {
+            if (this.facetsRequest.length > 0) {
+                this.facetsLoaded = false;
+                this.updateFacetsDebouncer.run(async () => {
+                    var _a, _b;
+                    this.facets = (_b = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets).catch(() => []))) !== null && _b !== void 0 ? _b : [];
+                    this.facets.forEach(f => this.knownFacetLabels[f.key] = f.label);
+                    this.facetsLoaded = true;
+                    this.facetsInitialized = true;
+                });
+            }
+            else {
+                this.facets = [];
+                this.facetsInitialized = true;
+            }
         }
     }
     updateSuggestions() {
@@ -830,6 +854,7 @@ FtSearchBar.elementDefinitions = {
     "ft-select": FtSelect,
     "ft-select-option": FtSelectOption,
     "ft-size-watcher": FtSizeWatcher,
+    "ft-skeleton": FtSkeleton,
     "ft-snap-scroll": FtSnapScroll,
     "ft-tooltip": FtTooltip,
     "ft-typography": FtTypography,
@@ -856,6 +881,9 @@ __decorate([
 __decorate([
     state()
 ], FtSearchBar.prototype, "availableContentLocales", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "availableContentLocalesInitialized", void 0);
 __decorate([
     property({ type: String })
 ], FtSearchBar.prototype, "uiLocale", void 0);
@@ -892,6 +920,9 @@ __decorate([
 __decorate([
     state()
 ], FtSearchBar.prototype, "facets", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "facetsInitialized", void 0);
 __decorate([
     query(".ft-search-bar--container")
 ], FtSearchBar.prototype, "container", void 0);