@fluid-topics/ft-search-bar 0.3.14 → 0.3.16
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 +1 -1
- package/build/ft-search-bar.light.js +63 -63
- package/build/ft-search-bar.min.js +417 -405
- package/build/managers/SuggestManager.d.ts +1 -1
- package/build/managers/SuggestManager.js +67 -64
- package/package.json +14 -14
|
@@ -3,7 +3,7 @@ export declare class SuggestManager {
|
|
|
3
3
|
private searchBar;
|
|
4
4
|
private updateDebouncer;
|
|
5
5
|
constructor(searchBar: FtSearchBar, debounceTime?: number);
|
|
6
|
-
static styles: import("lit").CSSResult;
|
|
6
|
+
static styles: import("lit").CSSResult[];
|
|
7
7
|
render(): import("lit-html").TemplateResult<1>;
|
|
8
8
|
update(): Promise<void>;
|
|
9
9
|
private onSuggestKeyDown;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
2
|
import { repeat } from "lit/directives/repeat.js";
|
|
3
3
|
import { FtIcons, FtIconVariants, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
|
|
4
|
-
import { Debouncer } from "@fluid-topics/ft-wc-utils";
|
|
4
|
+
import { Debouncer, wordWrap } from "@fluid-topics/ft-wc-utils";
|
|
5
5
|
import { FtSearchBarCssVariables } from "../ft-search-bar.css";
|
|
6
6
|
export class SuggestManager {
|
|
7
7
|
constructor(searchBar, debounceTime = 300) {
|
|
@@ -12,7 +12,7 @@ export class SuggestManager {
|
|
|
12
12
|
const filteredRecentSearches = this.searchBar.recentSearches.filter(q => q.toLowerCase().includes(this.searchBar.query.toLowerCase()));
|
|
13
13
|
const shouldDisplaySuggestions = this.searchBar.suggestions.length > 0 || filteredRecentSearches.length > 0;
|
|
14
14
|
return html `
|
|
15
|
-
<div class="ft-search-bar--suggestions ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
|
|
15
|
+
<div class="ft-search-bar--suggestions ft-word-wrap ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
|
|
16
16
|
part="suggestions-container"
|
|
17
17
|
@keydown=${(e) => this.onSuggestKeyDown(e)}>
|
|
18
18
|
${repeat(filteredRecentSearches.slice(0, 5), query => query, query => html `
|
|
@@ -139,77 +139,80 @@ export class SuggestManager {
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
//language=css
|
|
142
|
-
SuggestManager.styles =
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
142
|
+
SuggestManager.styles = [
|
|
143
|
+
wordWrap,
|
|
144
|
+
css `
|
|
145
|
+
.ft-search-bar--mobile .ft-search-bar--suggestions {
|
|
146
|
+
flex-grow: 1;
|
|
147
|
+
flex-shrink: 1;
|
|
148
|
+
overflow-y: auto;
|
|
149
|
+
height: 0;
|
|
150
|
+
}
|
|
149
151
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
152
|
+
.ft-search-bar--mobile-menu-open .ft-search-bar--suggestions {
|
|
153
|
+
border-top: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
154
|
+
}
|
|
153
155
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
156
|
+
.ft-search-bar--mobile-menu-open .ft-search-bar--suggestions {
|
|
157
|
+
height: initial;
|
|
158
|
+
}
|
|
157
159
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
160
|
+
.ft-search-bar--floating-panel,
|
|
161
|
+
.ft-search-bar--desktop .ft-search-bar--suggestions {
|
|
162
|
+
position: absolute;
|
|
163
|
+
z-index: ${FtSearchBarCssVariables.floatingZIndex};
|
|
164
|
+
top: 100%;
|
|
165
|
+
left: -1px;
|
|
166
|
+
right: -1px;
|
|
167
|
+
display: none;
|
|
168
|
+
background: ${FtSearchBarCssVariables.colorSurface};
|
|
169
|
+
border: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
170
|
+
border-radius: 0 0 ${FtSearchBarCssVariables.borderRadius} ${FtSearchBarCssVariables.borderRadius};
|
|
171
|
+
box-shadow: ${FtSearchBarCssVariables.elevation02};
|
|
172
|
+
outline: none;
|
|
173
|
+
}
|
|
172
174
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
175
|
+
.ft-search-bar--desktop .ft-search-bar--suggestions {
|
|
176
|
+
top: calc(100% + 2px);
|
|
177
|
+
}
|
|
176
178
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
179
|
+
.ft-search-bar--input-container:focus-within .ft-search-bar--suggestions-not-empty {
|
|
180
|
+
display: block;
|
|
181
|
+
}
|
|
180
182
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
183
|
+
.ft-search-bar--suggestion {
|
|
184
|
+
text-decoration: none;
|
|
185
|
+
position: relative;
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
padding: 8px;
|
|
189
|
+
gap: 8px;
|
|
190
|
+
cursor: pointer;
|
|
191
|
+
color: ${FtSearchBarCssVariables.colorOnSurface};
|
|
192
|
+
min-height: 52px;
|
|
193
|
+
}
|
|
192
194
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
195
|
+
.ft-search-bar--suggestion > *:not(ft-ripple) {
|
|
196
|
+
position: relative;
|
|
197
|
+
}
|
|
196
198
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
199
|
+
.ft-search-bar--desktop .ft-search-bar--suggestion {
|
|
200
|
+
min-height: 44px;
|
|
201
|
+
}
|
|
200
202
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
203
|
+
.ft-search-bar--suggestion:focus {
|
|
204
|
+
outline: none;
|
|
205
|
+
}
|
|
204
206
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
207
|
+
.ft-search-bar--recent-search + .ft-search-bar--suggestion:not(.ft-search-bar--recent-search) {
|
|
208
|
+
border-top: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
209
|
+
}
|
|
208
210
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
211
|
+
.ft-search-bar--suggestion ft-typography {
|
|
212
|
+
display: block;
|
|
213
|
+
flex-grow: 1;
|
|
214
|
+
flex-shrink: 1;
|
|
215
|
+
}
|
|
216
|
+
`,
|
|
217
|
+
];
|
|
215
218
|
//# sourceMappingURL=SuggestManager.js.map
|
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.16",
|
|
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.16",
|
|
23
|
+
"@fluid-topics/ft-button": "0.3.16",
|
|
24
|
+
"@fluid-topics/ft-chip": "0.3.16",
|
|
25
|
+
"@fluid-topics/ft-filter": "0.3.16",
|
|
26
|
+
"@fluid-topics/ft-icon": "0.3.16",
|
|
27
|
+
"@fluid-topics/ft-select": "0.3.16",
|
|
28
|
+
"@fluid-topics/ft-size-watcher": "0.3.16",
|
|
29
|
+
"@fluid-topics/ft-skeleton": "0.3.16",
|
|
30
|
+
"@fluid-topics/ft-snap-scroll": "0.3.16",
|
|
31
|
+
"@fluid-topics/ft-tooltip": "0.3.16",
|
|
32
|
+
"@fluid-topics/ft-typography": "0.3.16",
|
|
33
|
+
"@fluid-topics/ft-wc-utils": "0.3.16",
|
|
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.22"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "0d05a101f09cb5819ee10930772a873e7e0cc87b"
|
|
43
43
|
}
|