@fluid-topics/ft-search-bar 0.2.7 → 0.2.10

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 = [];
@@ -104,7 +107,7 @@ export class FtSearchBar extends FtLitElement {
             contentLocale: this.contentLocale,
             query: this.query,
             facets: this.facetsRequest,
-            priors: this.priors.length > 0 ? this.priors : undefined,
+            priors: this.hasPriors ? this.priors : undefined,
             filters: this.searchFilters,
             paging: { perPage: 0, page: 1 },
             sort: [],
@@ -119,7 +122,6 @@ export class FtSearchBar extends FtLitElement {
             contentLocale: this.contentLocale,
             input: this.query,
             filters: this.searchFilters,
-            priors: this.priors.length > 0 ? this.priors : undefined,
             sort: []
         };
     }
@@ -130,7 +132,10 @@ export class FtSearchBar extends FtLitElement {
         return this.facetsRequest.length > 0;
     }
     get hasPresets() {
-        return this.presets.length > 0;
+        return this.presets != null && this.presets.length > 0;
+    }
+    get hasPriors() {
+        return this.priors != null && this.priors.length > 0;
     }
     get hasLocaleSelector() {
         return this.availableContentLocales.length > 1;
@@ -149,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,
@@ -157,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() {
@@ -377,6 +389,7 @@ export class FtSearchBar extends FtLitElement {
         `;
     }
     renderFacetsActions() {
+        var _a;
         return html `
             <div class="ft-search-bar--facets-actions">
                 ${this.hasPresets ? html `
@@ -386,7 +399,7 @@ export class FtSearchBar extends FtLitElement {
                             label="${this.labelResolver.resolve("presetsSelector")}"
                             outlined
                             @change=${(e) => this.selectedPreset = e.detail}>
-                        ${repeat(this.presets, p => p.name, p => html `
+                        ${repeat((_a = this.presets) !== null && _a !== void 0 ? _a : [], p => p.name, p => html `
                                     <ft-select-option value="${p.name}"
                                                       label="${p.name}"
                                                       ?selected=${p.name === this.selectedPreset}>
@@ -581,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;
+        var _a, _b, _c, _d, _e, _f;
         if (props.has("labels")) {
             this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, this.labels);
         }
@@ -608,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 = this.presets.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 = (_c = this.presets.find(p => this.compareRequests(p, this.request))) === null || _c === void 0 ? void 0 : _c.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("selectedPreset")) {
+            this.updateAvailableContentLocales();
         }
         if (["uiLocale", "contentLocale", "searchFilters", "displayedFilters", "api"].some(p => props.has(p))) {
             this.updateFacets();
@@ -630,6 +650,11 @@ export class FtSearchBar extends FtLitElement {
             this.dispatchEvent(new SearchStateChangeEvent(this.request));
         }
     }
+    async updateAvailableContentLocales() {
+        var _a, _b;
+        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 : [];
+        this.availableContentLocalesInitialized = true;
+    }
     contentAvailableCallback(props) {
         var _a, _b, _c;
         super.contentAvailableCallback(props);
@@ -647,13 +672,10 @@ 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;
@@ -662,10 +684,12 @@ export class FtSearchBar extends FtLitElement {
                 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() {
@@ -827,6 +851,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,
@@ -853,6 +878,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);
@@ -865,12 +893,12 @@ __decorate([
 __decorate([
     jsonProperty([])
 ], FtSearchBar.prototype, "presets", void 0);
-__decorate([
-    jsonProperty([])
-], FtSearchBar.prototype, "priors", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], FtSearchBar.prototype, "selectedPreset", void 0);
+__decorate([
+    jsonProperty([])
+], FtSearchBar.prototype, "priors", void 0);
 __decorate([
     property()
 ], FtSearchBar.prototype, "searchRequestSerializer", void 0);
@@ -889,6 +917,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);