@fluid-topics/ft-search-bar 0.1.2 → 0.1.3
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 +19 -11
- package/build/ft-search-bar.js +52 -33
- package/build/ft-search-bar.min.js +609 -126
- package/package.json +13 -13
package/build/ft-search-bar.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropertyValues } from "lit";
|
|
2
|
-
import { ElementDefinitionsMap, FtLitElement, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { ElementDefinitionsMap, FtCssVariable, FtLitElement, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
import { FluidTopicsApi, FtSearchRequest, FtSuggestRequest } from "@fluid-topics/public-api";
|
|
4
4
|
declare global {
|
|
5
5
|
interface Window {
|
|
@@ -33,16 +33,24 @@ export interface FtSearchBarProperties {
|
|
|
33
33
|
uiLocale?: string;
|
|
34
34
|
displayedFilters?: Array<string>;
|
|
35
35
|
}
|
|
36
|
-
export
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
export declare const FtSearchBarCssVariables: {
|
|
37
|
+
height: FtCssVariable;
|
|
38
|
+
borderRadius: FtCssVariable;
|
|
39
|
+
mobileOpenPosition: FtCssVariable;
|
|
40
|
+
mobileOpenTop: FtCssVariable;
|
|
41
|
+
mobileOpenBottom: FtCssVariable;
|
|
42
|
+
mobileOpenLeft: FtCssVariable;
|
|
43
|
+
mobileOpenRight: FtCssVariable;
|
|
44
|
+
floatingZIndex: FtCssVariable;
|
|
45
|
+
colorSurface: FtCssVariable;
|
|
46
|
+
colorOnSurface: FtCssVariable;
|
|
47
|
+
colorOnSurfaceMedium: FtCssVariable;
|
|
48
|
+
colorOutline: FtCssVariable;
|
|
49
|
+
colorPrimary: FtCssVariable;
|
|
50
|
+
elevation02: FtCssVariable;
|
|
51
|
+
buttonColor: FtCssVariable;
|
|
52
|
+
buttonRippleColor: FtCssVariable;
|
|
53
|
+
};
|
|
46
54
|
export declare class LaunchSearchEvent extends CustomEvent<FtSearchRequest> {
|
|
47
55
|
constructor(request: FtSearchRequest);
|
|
48
56
|
}
|
package/build/ft-search-bar.js
CHANGED
|
@@ -8,21 +8,22 @@ import { css, html, nothing } from "lit";
|
|
|
8
8
|
import { property, query, state } from "lit/decorators.js";
|
|
9
9
|
import { repeat } from "lit/directives/repeat.js";
|
|
10
10
|
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
-
import { customElement, Debouncer, FtLitElement, jsonProperty, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
|
|
11
|
+
import { customElement, Debouncer, designSystemVariables, FtCssVariable, FtLitElement, jsonProperty, ParametrizedLabelResolver, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
12
12
|
import { FtSizeCategory, FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
|
|
13
13
|
import { FtTypography, FtTypographyBody2 } from "@fluid-topics/ft-typography";
|
|
14
14
|
import { facetToFilter, getBreadcrumbFromValue, getLabelFromValue, selectedValues, serializeRequest } from "./converters";
|
|
15
15
|
import { FtFilter, FtFilterOption } from "@fluid-topics/ft-filter";
|
|
16
16
|
import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
|
|
17
17
|
import { FtAccordion, FtAccordionItem } from "@fluid-topics/ft-accordion";
|
|
18
|
-
import { FtButton } from "@fluid-topics/ft-button";
|
|
19
|
-
import { FtChip } from "@fluid-topics/ft-chip";
|
|
20
|
-
import { FtSelect, FtSelectOption } from "@fluid-topics/ft-select";
|
|
18
|
+
import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
|
|
19
|
+
import { FtChip, FtChipCssVariables } from "@fluid-topics/ft-chip";
|
|
20
|
+
import { FtSelect, FtSelectCssVariables, FtSelectOption } from "@fluid-topics/ft-select";
|
|
21
21
|
import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
|
|
22
22
|
import { FtTooltip } from "@fluid-topics/ft-tooltip";
|
|
23
23
|
import { Icon } from "@material/mwc-icon";
|
|
24
|
-
import { FtRipple } from "@fluid-topics/ft-ripple";
|
|
24
|
+
import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
|
|
25
25
|
import { flatDeep } from "@fluid-topics/ft-filter/build/utils";
|
|
26
|
+
import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
|
|
26
27
|
if (window.fluidtopics == null) {
|
|
27
28
|
console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");
|
|
28
29
|
}
|
|
@@ -42,6 +43,24 @@ export const DEFAULT_LABELS = {
|
|
|
42
43
|
removeRecentSearch: "Remove",
|
|
43
44
|
back: "Back",
|
|
44
45
|
};
|
|
46
|
+
export const FtSearchBarCssVariables = {
|
|
47
|
+
height: FtCssVariable.create("--ft-search-bar-height", "SIZE", "38px"),
|
|
48
|
+
borderRadius: FtCssVariable.extend("--ft-search-bar-border-radius", designSystemVariables.borderRadiusS),
|
|
49
|
+
mobileOpenPosition: FtCssVariable.create("--ft-search-bar-mobile-open-position", "POSITION", "fixed"),
|
|
50
|
+
mobileOpenTop: FtCssVariable.create("--ft-search-bar-mobile-open-top", "SIZE", "0"),
|
|
51
|
+
mobileOpenBottom: FtCssVariable.create("--ft-search-bar-mobile-open-bottom", "SIZE", "0"),
|
|
52
|
+
mobileOpenLeft: FtCssVariable.create("--ft-search-bar-mobile-open-left", "SIZE", "0"),
|
|
53
|
+
mobileOpenRight: FtCssVariable.create("--ft-search-bar-mobile-open-right", "SIZE", "0"),
|
|
54
|
+
floatingZIndex: FtCssVariable.create("--ft-search-bar-floating-components-z-index", "NUMBER", "2"),
|
|
55
|
+
colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
|
|
56
|
+
colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
|
|
57
|
+
colorOnSurfaceMedium: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
|
|
58
|
+
colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
|
|
59
|
+
colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
|
|
60
|
+
elevation02: FtCssVariable.external(designSystemVariables.elevation02, "Design system"),
|
|
61
|
+
buttonColor: FtCssVariable.external(FtButtonCssVariables.color, "Button"),
|
|
62
|
+
buttonRippleColor: FtCssVariable.external(FtButtonCssVariables.rippleColor, "Button"),
|
|
63
|
+
};
|
|
45
64
|
export class LaunchSearchEvent extends CustomEvent {
|
|
46
65
|
constructor(request) {
|
|
47
66
|
super("launch-search", { detail: request });
|
|
@@ -93,19 +112,19 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
93
112
|
display: flex;
|
|
94
113
|
flex-direction: column;
|
|
95
114
|
gap: 8px;
|
|
96
|
-
background:
|
|
115
|
+
background: ${FtSearchBarCssVariables.colorSurface};
|
|
97
116
|
outline: none;
|
|
98
117
|
|
|
99
|
-
--ft-search-bar-border-radius--internal:
|
|
118
|
+
--ft-search-bar-border-radius--internal: ${FtSearchBarCssVariables.borderRadius};
|
|
100
119
|
}
|
|
101
120
|
|
|
102
121
|
.ft-search-bar--mobile-menu-open {
|
|
103
|
-
position:
|
|
104
|
-
top:
|
|
105
|
-
bottom:
|
|
106
|
-
left:
|
|
107
|
-
right:
|
|
108
|
-
z-index:
|
|
122
|
+
position: ${FtSearchBarCssVariables.mobileOpenPosition};
|
|
123
|
+
top: ${FtSearchBarCssVariables.mobileOpenTop};
|
|
124
|
+
bottom: ${FtSearchBarCssVariables.mobileOpenBottom};
|
|
125
|
+
left: ${FtSearchBarCssVariables.mobileOpenLeft};
|
|
126
|
+
right: ${FtSearchBarCssVariables.mobileOpenRight};
|
|
127
|
+
z-index: ${FtSearchBarCssVariables.floatingZIndex};
|
|
109
128
|
padding: 16px;
|
|
110
129
|
}
|
|
111
130
|
|
|
@@ -115,10 +134,10 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
115
134
|
display: flex;
|
|
116
135
|
flex-direction: row;
|
|
117
136
|
align-items: center;
|
|
118
|
-
height:
|
|
137
|
+
height: ${FtSearchBarCssVariables.height};
|
|
119
138
|
|
|
120
|
-
background:
|
|
121
|
-
border: 1px solid
|
|
139
|
+
background: ${FtSearchBarCssVariables.colorSurface};
|
|
140
|
+
border: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
122
141
|
border-radius: var(--ft-search-bar-border-radius--internal);
|
|
123
142
|
}
|
|
124
143
|
|
|
@@ -142,7 +161,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
142
161
|
}
|
|
143
162
|
|
|
144
163
|
.ft-search-bar--input:focus-within {
|
|
145
|
-
outline-color:
|
|
164
|
+
outline-color: ${FtSearchBarCssVariables.colorPrimary};
|
|
146
165
|
}
|
|
147
166
|
|
|
148
167
|
.ft-search-bar--mobile .ft-search-bar--suggestions {
|
|
@@ -164,10 +183,10 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
164
183
|
left: -1px;
|
|
165
184
|
right: -1px;
|
|
166
185
|
display: none;
|
|
167
|
-
background:
|
|
168
|
-
border: 1px solid
|
|
186
|
+
background: ${FtSearchBarCssVariables.colorSurface};
|
|
187
|
+
border: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
169
188
|
border-radius: 0 0 var(--ft-search-bar-border-radius--internal) var(--ft-search-bar-border-radius--internal);
|
|
170
|
-
box-shadow:
|
|
189
|
+
box-shadow: ${FtSearchBarCssVariables.elevation02};
|
|
171
190
|
outline: none;
|
|
172
191
|
}
|
|
173
192
|
|
|
@@ -182,7 +201,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
182
201
|
.ft-search-bar--no-suggestions {
|
|
183
202
|
text-align: center;
|
|
184
203
|
padding: 8px;
|
|
185
|
-
color:
|
|
204
|
+
color: ${FtSearchBarCssVariables.colorOnSurface};
|
|
186
205
|
}
|
|
187
206
|
|
|
188
207
|
.ft-search-bar--suggestion {
|
|
@@ -193,7 +212,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
193
212
|
padding: 8px;
|
|
194
213
|
gap: 8px;
|
|
195
214
|
cursor: pointer;
|
|
196
|
-
color:
|
|
215
|
+
color: ${FtSearchBarCssVariables.colorOnSurface};
|
|
197
216
|
min-height: 52px;
|
|
198
217
|
}
|
|
199
218
|
|
|
@@ -207,7 +226,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
207
226
|
|
|
208
227
|
.ft-search-bar--mobile .ft-search-bar--suggestion:first-child,
|
|
209
228
|
.ft-search-bar--recent-search + .ft-search-bar--suggestion:not(.ft-search-bar--recent-search) {
|
|
210
|
-
border-top: 1px solid
|
|
229
|
+
border-top: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
211
230
|
}
|
|
212
231
|
|
|
213
232
|
.ft-search-bar--suggestion ft-typography {
|
|
@@ -221,12 +240,12 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
221
240
|
}
|
|
222
241
|
|
|
223
242
|
.ft-search-bar--left-action {
|
|
224
|
-
|
|
225
|
-
border-right: 1px solid
|
|
243
|
+
${setVariable(FtButtonCssVariables.borderRadius, "calc(var(--ft-search-bar-border-radius--internal) - 1px) 0 0 calc(var(--ft-search-bar-border-radius--internal) - 1px)")};
|
|
244
|
+
border-right: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
226
245
|
}
|
|
227
246
|
|
|
228
247
|
.ft-search-bar--floating-panel-open .ft-search-bar--left-action {
|
|
229
|
-
|
|
248
|
+
${setVariable(FtButtonCssVariables.borderRadius, "calc(var(--ft-search-bar-border-radius--internal) - 1px) 0 0 0")};
|
|
230
249
|
}
|
|
231
250
|
|
|
232
251
|
.ft-search-bar--launch-search,
|
|
@@ -236,7 +255,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
236
255
|
|
|
237
256
|
.ft-search-bar--separator {
|
|
238
257
|
height: 20px;
|
|
239
|
-
border-right: 1px solid
|
|
258
|
+
border-right: 1px solid ${FtSearchBarCssVariables.colorOutline};
|
|
240
259
|
}
|
|
241
260
|
|
|
242
261
|
.ft-search-bar--floating-panel {
|
|
@@ -283,20 +302,20 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
283
302
|
}
|
|
284
303
|
|
|
285
304
|
.ft-search-bar > .ft-search-bar--content-locale::part(selected-value) {
|
|
286
|
-
|
|
287
|
-
|
|
305
|
+
${setVariable(FtChipCssVariables.color, FtSearchBarCssVariables.buttonColor)};
|
|
306
|
+
${setVariable(FtChipCssVariables.rippleColor, FtSearchBarCssVariables.buttonRippleColor)};
|
|
288
307
|
border-radius: calc(var(--ft-search-bar-border-radius--internal) - 1px) 0 0 calc(var(--ft-search-bar-border-radius--internal) - 1px);
|
|
289
308
|
}
|
|
290
309
|
|
|
291
310
|
.ft-search-bar > .ft-search-bar--content-locale::part(label) {
|
|
292
|
-
|
|
293
|
-
|
|
311
|
+
${setVariable(FtInputLabelCssVariables.borderColor, "transparent")};
|
|
312
|
+
${setVariable(FtRippleCssVariables.color, FtSearchBarCssVariables.buttonRippleColor)}
|
|
294
313
|
}
|
|
295
314
|
|
|
296
315
|
.ft-search-bar--floating-panel .ft-search-bar--content-locale {
|
|
297
316
|
margin-right: auto;
|
|
298
317
|
min-width: 250px;
|
|
299
|
-
|
|
318
|
+
${setVariable(FtSelectCssVariables.optionsZIndex, "2")};
|
|
300
319
|
}
|
|
301
320
|
|
|
302
321
|
.ft-search-bar--mobile .ft-search-bar--content-locale::part(clear-button) {
|
|
@@ -356,7 +375,7 @@ let FtSearchBar = class FtSearchBar extends FtLitElement {
|
|
|
356
375
|
|
|
357
376
|
.ft-search-bar--filter-label > :last-child {
|
|
358
377
|
flex-shrink: 1;
|
|
359
|
-
color:
|
|
378
|
+
color: ${FtSearchBarCssVariables.colorOnSurfaceMedium};
|
|
360
379
|
}
|
|
361
380
|
|
|
362
381
|
ft-accordion-item::part(toggle) {
|