@fluid-topics/ft-search-bar - npm Package Compare versions

Comparing version 0.2.18 to 0.2.19

build/ft-search-bar.css.js

@@ -393,8 +393,2 @@ import { designSystemVariables, FtCssVariable, setVariable } from "@fluid-topics/ft-wc-utils";
 
-    .ft-search-bar--no-suggestions {
-        text-align: center;
-        padding: 8px;
-        color: ${FtSearchBarCssVariables.colorOnSurface};
-    }
-
     .ft-search-bar--suggestion {
@@ -401,0 +395,0 @@ text-decoration: none;

build/ft-search-bar.d.ts

@@ -21,3 +21,2 @@ import { PropertyValues } from "lit";
     searchButton?: string;
-    noSuggestions?: string;
     contentLocaleSelector?: string;
@@ -94,3 +93,2 @@ presetsSelector?: string;
     private suggestDebouncer;
-    private get recentSearchesStorageKey();
     private api?;
@@ -106,2 +104,3 @@ get request(): FtSearchRequest;
     focus(): void;
+    focusInput(): void;
     clear(): void;
@@ -141,2 +140,4 @@ protected render(): import("lit-html").TemplateResult<1>;
     private launchSearch;
+    private get recentSearchesStorageKey();
+    private initRecentSearches;
     private saveRecentSearches;
@@ -143,0 +144,0 @@ private closeFloatingContainer;

build/ft-search-bar.js

@@ -39,3 +39,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     searchButton: "Search",
-    noSuggestions: "No results found…",
     clearFilters: "Clear filters",
@@ -111,5 +110,2 @@ contentLocaleSelector: "Lang",
     }
-    get recentSearchesStorageKey() {
-        return this.baseUrl + ":ft:recent-search-queries";
-    }
     get request() {
@@ -166,2 +162,10 @@ return {
     }
+    focusInput() {
+        if (this.input) {
+            this.input.focus();
+        }
+        else {
+            setTimeout(() => this.focusInput(), 50);
+        }
+    }
     clear() {
@@ -197,3 +201,3 @@ this.query = "";
         ` : html `
-            <ft-skeleton class="ft-search-bar--skeleton" part="loader"></ft-skeleton>
+            <ft-skeleton class="ft-search-bar--container ft-search-bar--skeleton" part="loader" tabindex="-1"></ft-skeleton>
         `;
@@ -331,3 +335,3 @@ }
                 ${(this.renderSearchBarLeftAction())}
-                <div class="ft-search-bar--input-container" part="input-container">
+                <div class="ft-search-bar--input-container" part="input-container" tabindex="-1">
                     <div class="ft-search-bar--input-outline" part="input-outline">
@@ -577,3 +581,3 @@ ${this.dense ? this.renderSelectedFacets() : nothing}
         const filteredRecentSearches = this.recentSearches.filter(q => q.toLowerCase().includes(this.query.toLowerCase()));
-        const shouldDisplaySuggestions = this.query.length > 2 || filteredRecentSearches.length > 0;
+        const shouldDisplaySuggestions = this.suggestions.length > 0 || filteredRecentSearches.length > 0;
         return html `
@@ -612,9 +616,2 @@ <div class="ft-search-bar--suggestions ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
                         `)}
-                ${filteredRecentSearches.length === 0 && this.suggestions.length === 0 && this.query.length > 2 && this.suggestionsLoaded
-            ? html `
-                            <ft-typography class="ft-search-bar--no-suggestions" element="p"
-                                           variant="body2">
-                                ${this.labelResolver.resolve("noSuggestions")}
-                            </ft-typography>
-                        ` : null}
             </div>
@@ -653,5 +650,10 @@ `;
         this.initApi();
+        window.addEventListener("storage", (e) => {
+            if (e.key === this.recentSearchesStorageKey) {
+                this.initRecentSearches();
+            }
+        });
     }
     update(props) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (props.has("labels")) {
@@ -675,9 +677,9 @@ this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, this.labels);
             }
-            this.recentSearches = JSON.parse((_b = window.localStorage.getItem(this.recentSearchesStorageKey)) !== null && _b !== void 0 ? _b : "[]");
+            this.initRecentSearches();
         }
         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))));
+            ((_b = this.presets) !== null && _b !== void 0 ? _b : []).forEach(preset => preset.filters.forEach(filter => filter.values = filter.values.map(v => unquote(v))));
         }
         if (props.has("selectedPreset")) {
-            const currentPreset = ((_d = this.presets) !== null && _d !== void 0 ? _d : []).find(p => p.name === this.selectedPreset);
+            const currentPreset = ((_c = this.presets) !== null && _c !== void 0 ? _c : []).find(p => p.name === this.selectedPreset);
             if (currentPreset && !this.compareRequests(this.request, currentPreset)) {
@@ -691,3 +693,3 @@ this.setFiltersFromPreset(currentPreset);
         if (["contentLocale", "searchFilters"].some(p => props.has(p))) {
-            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;
+            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;
         }
@@ -845,4 +847,18 @@ if (["baseUrl", "apiIntegrationIdentifier"].some(p => props.has(p))) {
     }
+    get recentSearchesStorageKey() {
+        return this.baseUrl + ":ft:recent-search-queries";
+    }
+    initRecentSearches() {
+        var _a;
+        this.recentSearches = JSON.parse((_a = window.localStorage.getItem(this.recentSearchesStorageKey)) !== null && _a !== void 0 ? _a : "[]");
+    }
     saveRecentSearches() {
-        window.localStorage.setItem(this.recentSearchesStorageKey, JSON.stringify(this.recentSearches));
+        const newValue = JSON.stringify(this.recentSearches);
+        window.localStorage.setItem(this.recentSearchesStorageKey, newValue);
+        window.dispatchEvent(new StorageEvent("storage", {
+            key: this.recentSearchesStorageKey,
+            newValue,
+            storageArea: window.localStorage,
+            url: window.location.href
+        }));
     }
@@ -849,0 +865,0 @@ connectedCallback() {

package.json

 {
   "name": "@fluid-topics/ft-search-bar",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Search bar component using Fluid Topics public API",
@@ -22,14 +22,14 @@ "keywords": [
   "dependencies": {
-    "@fluid-topics/ft-accordion": "^0.2.18",
-    "@fluid-topics/ft-button": "^0.2.18",
-    "@fluid-topics/ft-chip": "^0.2.18",
-    "@fluid-topics/ft-filter": "^0.2.18",
-    "@fluid-topics/ft-icon": "^0.2.18",
-    "@fluid-topics/ft-select": "^0.2.18",
-    "@fluid-topics/ft-size-watcher": "^0.2.18",
-    "@fluid-topics/ft-skeleton": "^0.2.18",
-    "@fluid-topics/ft-snap-scroll": "^0.2.18",
-    "@fluid-topics/ft-tooltip": "^0.2.18",
-    "@fluid-topics/ft-typography": "^0.2.18",
-    "@fluid-topics/ft-wc-utils": "^0.2.18",
+    "@fluid-topics/ft-accordion": "^0.2.19",
+    "@fluid-topics/ft-button": "^0.2.19",
+    "@fluid-topics/ft-chip": "^0.2.19",
+    "@fluid-topics/ft-filter": "^0.2.19",
+    "@fluid-topics/ft-icon": "^0.2.19",
+    "@fluid-topics/ft-select": "^0.2.19",
+    "@fluid-topics/ft-size-watcher": "^0.2.19",
+    "@fluid-topics/ft-skeleton": "^0.2.19",
+    "@fluid-topics/ft-snap-scroll": "^0.2.19",
+    "@fluid-topics/ft-tooltip": "^0.2.19",
+    "@fluid-topics/ft-typography": "^0.2.19",
+    "@fluid-topics/ft-wc-utils": "^0.2.19",
     "lit": "2.1.3"
@@ -43,3 +43,3 @@ },
   },
-  "gitHead": "ef8d35d4cfa0669cf38aa2e3d40e02ba46f4d7f9"
+  "gitHead": "d61a4095bbb6a067c6e0a0389dc934264c9a4b55"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

474713

decreased by-0.03%

Lines of code

7037

decreased by-0.1%

Dependency changes

• Updated@fluid-topics/ft-accordion@^0.2.19

• Updated@fluid-topics/ft-button@^0.2.19

• Updated@fluid-topics/ft-chip@^0.2.19

• Updated@fluid-topics/ft-filter@^0.2.19

• Updated@fluid-topics/ft-icon@^0.2.19

• Updated@fluid-topics/ft-select@^0.2.19

• Updated@fluid-topics/ft-size-watcher@^0.2.19

• Updated@fluid-topics/ft-skeleton@^0.2.19

• Updated@fluid-topics/ft-snap-scroll@^0.2.19

• Updated@fluid-topics/ft-tooltip@^0.2.19

• Updated@fluid-topics/ft-typography@^0.2.19

• Updated@fluid-topics/ft-wc-utils@^0.2.19