@internetarchive/collection-browser 4.1.3-alpha-webdev8257.1 → 4.1.4
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/dist/index.d.ts +0 -1
- package/dist/index.js.map +1 -1
- package/dist/src/app-root.d.ts +0 -8
- package/dist/src/app-root.js +614 -645
- package/dist/src/app-root.js.map +1 -1
- package/dist/src/collection-browser.d.ts +0 -3
- package/dist/src/collection-browser.js +790 -794
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/tiles/models.d.ts +0 -14
- package/dist/src/tiles/models.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.d.ts +1 -12
- package/dist/src/tiles/tile-dispatcher.js +216 -333
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/test/collection-browser.test.js +261 -189
- package/dist/test/collection-browser.test.js.map +1 -1
- package/index.ts +28 -29
- package/package.json +1 -1
- package/src/app-root.ts +1166 -1201
- package/src/collection-browser.ts +3077 -3080
- package/src/tiles/models.ts +8 -24
- package/src/tiles/tile-dispatcher.ts +527 -652
- package/test/collection-browser.test.ts +2507 -2402
package/dist/src/app-root.js
CHANGED
|
@@ -79,403 +79,392 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
79
79
|
return searchParams.get('hide-dev-tools') ? 'hidden' : '';
|
|
80
80
|
}
|
|
81
81
|
render() {
|
|
82
|
-
return html `
|
|
83
|
-
<div class="dev-tool-container">
|
|
84
|
-
<div id="dev-tools" class=${this.getClass}>
|
|
85
|
-
<div id="search-and-page-inputs">
|
|
86
|
-
<form @submit=${this.searchPressed}>
|
|
87
|
-
<label for="base-query-field"> Query: </label>
|
|
88
|
-
<input
|
|
89
|
-
type="text"
|
|
90
|
-
id="base-query-field"
|
|
91
|
-
.value=${this.searchQuery ?? ''}
|
|
92
|
-
/>
|
|
93
|
-
<input type="submit" value="Search" />
|
|
94
|
-
</form>
|
|
95
|
-
<form @submit=${this.changePagePressed}>
|
|
96
|
-
<label for="page-number-input"> Page: </label>
|
|
97
|
-
<input type="number" value="1" id="page-number-input" />
|
|
98
|
-
<input type="submit" value="Go" />
|
|
99
|
-
</form>
|
|
100
|
-
</div>
|
|
101
|
-
<div>
|
|
102
|
-
<form @submit=${this.collectionChanged}>
|
|
103
|
-
<label for="base-collection-field"> Within collection: </label>
|
|
104
|
-
<input
|
|
105
|
-
type="text"
|
|
106
|
-
id="base-collection-field"
|
|
107
|
-
.value=${this.withinCollection ?? ''}
|
|
108
|
-
/>
|
|
109
|
-
<input type="submit" value="Search" />
|
|
110
|
-
</form>
|
|
111
|
-
</div>
|
|
112
|
-
|
|
113
|
-
<div id="search-types">
|
|
114
|
-
Search type:
|
|
115
|
-
<span class="search-type">
|
|
116
|
-
<input
|
|
117
|
-
type="radio"
|
|
118
|
-
id="default-search"
|
|
119
|
-
name="search-type"
|
|
120
|
-
value="default"
|
|
121
|
-
.checked=${this.searchType === SearchType.DEFAULT}
|
|
122
|
-
@click=${this.searchTypeSelected}
|
|
123
|
-
/>
|
|
124
|
-
<label for="default-search">Default</label>
|
|
125
|
-
</span>
|
|
126
|
-
<span class="search-type">
|
|
127
|
-
<input
|
|
128
|
-
type="radio"
|
|
129
|
-
id="metadata-search"
|
|
130
|
-
name="search-type"
|
|
131
|
-
value="metadata"
|
|
132
|
-
.checked=${this.searchType === SearchType.METADATA}
|
|
133
|
-
@click=${this.searchTypeSelected}
|
|
134
|
-
/>
|
|
135
|
-
<label for="metadata-search">Metadata</label>
|
|
136
|
-
</span>
|
|
137
|
-
<span class="search-type">
|
|
138
|
-
<input
|
|
139
|
-
type="radio"
|
|
140
|
-
id="fulltext-search"
|
|
141
|
-
name="search-type"
|
|
142
|
-
value="fulltext"
|
|
143
|
-
.checked=${this.searchType === SearchType.FULLTEXT}
|
|
144
|
-
@click=${this.searchTypeSelected}
|
|
145
|
-
/>
|
|
146
|
-
<label for="fulltext-search">Full text</label>
|
|
147
|
-
</span>
|
|
148
|
-
<span class="search-type">
|
|
149
|
-
<input
|
|
150
|
-
type="radio"
|
|
151
|
-
id="tv-search"
|
|
152
|
-
name="search-type"
|
|
153
|
-
value="tv"
|
|
154
|
-
.checked=${this.searchType === SearchType.TV}
|
|
155
|
-
@click=${this.searchTypeSelected}
|
|
156
|
-
/>
|
|
157
|
-
<label for="tv-search">TV</label>
|
|
158
|
-
</span>
|
|
159
|
-
<span class="search-type">
|
|
160
|
-
<input
|
|
161
|
-
type="radio"
|
|
162
|
-
id="radio-search"
|
|
163
|
-
name="search-type"
|
|
164
|
-
value="radio"
|
|
165
|
-
.checked=${this.searchType === SearchType.RADIO}
|
|
166
|
-
@click=${this.searchTypeSelected}
|
|
167
|
-
/>
|
|
168
|
-
<label for="radio-search">Radio</label>
|
|
169
|
-
</span>
|
|
170
|
-
</div>
|
|
171
|
-
|
|
172
|
-
<div id="toggle-controls">
|
|
173
|
-
<button
|
|
82
|
+
return html `
|
|
83
|
+
<div class="dev-tool-container">
|
|
84
|
+
<div id="dev-tools" class=${this.getClass}>
|
|
85
|
+
<div id="search-and-page-inputs">
|
|
86
|
+
<form @submit=${this.searchPressed}>
|
|
87
|
+
<label for="base-query-field"> Query: </label>
|
|
88
|
+
<input
|
|
89
|
+
type="text"
|
|
90
|
+
id="base-query-field"
|
|
91
|
+
.value=${this.searchQuery ?? ''}
|
|
92
|
+
/>
|
|
93
|
+
<input type="submit" value="Search" />
|
|
94
|
+
</form>
|
|
95
|
+
<form @submit=${this.changePagePressed}>
|
|
96
|
+
<label for="page-number-input"> Page: </label>
|
|
97
|
+
<input type="number" value="1" id="page-number-input" />
|
|
98
|
+
<input type="submit" value="Go" />
|
|
99
|
+
</form>
|
|
100
|
+
</div>
|
|
101
|
+
<div>
|
|
102
|
+
<form @submit=${this.collectionChanged}>
|
|
103
|
+
<label for="base-collection-field"> Within collection: </label>
|
|
104
|
+
<input
|
|
105
|
+
type="text"
|
|
106
|
+
id="base-collection-field"
|
|
107
|
+
.value=${this.withinCollection ?? ''}
|
|
108
|
+
/>
|
|
109
|
+
<input type="submit" value="Search" />
|
|
110
|
+
</form>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div id="search-types">
|
|
114
|
+
Search type:
|
|
115
|
+
<span class="search-type">
|
|
116
|
+
<input
|
|
117
|
+
type="radio"
|
|
118
|
+
id="default-search"
|
|
119
|
+
name="search-type"
|
|
120
|
+
value="default"
|
|
121
|
+
.checked=${this.searchType === SearchType.DEFAULT}
|
|
122
|
+
@click=${this.searchTypeSelected}
|
|
123
|
+
/>
|
|
124
|
+
<label for="default-search">Default</label>
|
|
125
|
+
</span>
|
|
126
|
+
<span class="search-type">
|
|
127
|
+
<input
|
|
128
|
+
type="radio"
|
|
129
|
+
id="metadata-search"
|
|
130
|
+
name="search-type"
|
|
131
|
+
value="metadata"
|
|
132
|
+
.checked=${this.searchType === SearchType.METADATA}
|
|
133
|
+
@click=${this.searchTypeSelected}
|
|
134
|
+
/>
|
|
135
|
+
<label for="metadata-search">Metadata</label>
|
|
136
|
+
</span>
|
|
137
|
+
<span class="search-type">
|
|
138
|
+
<input
|
|
139
|
+
type="radio"
|
|
140
|
+
id="fulltext-search"
|
|
141
|
+
name="search-type"
|
|
142
|
+
value="fulltext"
|
|
143
|
+
.checked=${this.searchType === SearchType.FULLTEXT}
|
|
144
|
+
@click=${this.searchTypeSelected}
|
|
145
|
+
/>
|
|
146
|
+
<label for="fulltext-search">Full text</label>
|
|
147
|
+
</span>
|
|
148
|
+
<span class="search-type">
|
|
149
|
+
<input
|
|
150
|
+
type="radio"
|
|
151
|
+
id="tv-search"
|
|
152
|
+
name="search-type"
|
|
153
|
+
value="tv"
|
|
154
|
+
.checked=${this.searchType === SearchType.TV}
|
|
155
|
+
@click=${this.searchTypeSelected}
|
|
156
|
+
/>
|
|
157
|
+
<label for="tv-search">TV</label>
|
|
158
|
+
</span>
|
|
159
|
+
<span class="search-type">
|
|
160
|
+
<input
|
|
161
|
+
type="radio"
|
|
162
|
+
id="radio-search"
|
|
163
|
+
name="search-type"
|
|
164
|
+
value="radio"
|
|
165
|
+
.checked=${this.searchType === SearchType.RADIO}
|
|
166
|
+
@click=${this.searchTypeSelected}
|
|
167
|
+
/>
|
|
168
|
+
<label for="radio-search">Radio</label>
|
|
169
|
+
</span>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<div id="toggle-controls">
|
|
173
|
+
<button
|
|
174
174
|
@click=${() => {
|
|
175
175
|
const details = this.shadowRoot?.getElementById('cell-size-control');
|
|
176
176
|
details?.classList.toggle('hidden');
|
|
177
177
|
const rowGapControls = this.shadowRoot?.getElementById('cell-gap-control');
|
|
178
178
|
rowGapControls?.classList.toggle('hidden');
|
|
179
|
-
}}
|
|
180
|
-
>
|
|
181
|
-
Toggle Cell Controls
|
|
182
|
-
</button>
|
|
183
|
-
<button
|
|
179
|
+
}}
|
|
180
|
+
>
|
|
181
|
+
Toggle Cell Controls
|
|
182
|
+
</button>
|
|
183
|
+
<button
|
|
184
184
|
@click=${() => {
|
|
185
185
|
const details = this.shadowRoot?.getElementById('latest-event-details');
|
|
186
186
|
details?.classList.toggle('hidden');
|
|
187
|
-
}}
|
|
188
|
-
>
|
|
189
|
-
Last Event Captured
|
|
190
|
-
</button>
|
|
191
|
-
</div>
|
|
192
|
-
|
|
193
|
-
<div id="last-event">
|
|
194
|
-
<pre id="latest-event-details" class="hidden">
|
|
195
|
-
${JSON.stringify(this.latestAction, null, 2)}
|
|
196
|
-
</pre
|
|
197
|
-
>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<fieldset class="cell-controls">
|
|
201
|
-
<legend>Cell Controls</legend>
|
|
202
|
-
<div>
|
|
203
|
-
<label for="cell-width-slider">Cell width:</label>
|
|
204
|
-
<input
|
|
205
|
-
type="range"
|
|
206
|
-
min="10"
|
|
207
|
-
max="100"
|
|
208
|
-
value="18"
|
|
209
|
-
step="0.1"
|
|
210
|
-
id="cell-width-slider"
|
|
211
|
-
@input=${this.widthChanged}
|
|
212
|
-
/>
|
|
213
|
-
<span>${this.cellWidth}rem</span>
|
|
214
|
-
</div>
|
|
215
|
-
<div>
|
|
216
|
-
<label for="cell-height-slider">Cell height:</label>
|
|
217
|
-
<input
|
|
218
|
-
type="range"
|
|
219
|
-
min="10"
|
|
220
|
-
max="100"
|
|
221
|
-
value="29"
|
|
222
|
-
step="0.1"
|
|
223
|
-
id="cell-height-slider"
|
|
224
|
-
@input=${this.heightChanged}
|
|
225
|
-
/>
|
|
226
|
-
<span>${this.cellHeight}rem</span>
|
|
227
|
-
</div>
|
|
228
|
-
<div>
|
|
229
|
-
<label for="cell-row-gap-slider">Row gap:</label>
|
|
230
|
-
<input
|
|
231
|
-
type="range"
|
|
232
|
-
min="0"
|
|
233
|
-
max="5"
|
|
234
|
-
value="1.7"
|
|
235
|
-
step="0.1"
|
|
236
|
-
id="cell-row-gap-slider"
|
|
237
|
-
@input=${this.rowGapChanged}
|
|
238
|
-
/>
|
|
239
|
-
<span>${this.rowGap}rem</span>
|
|
240
|
-
</div>
|
|
241
|
-
<div>
|
|
242
|
-
<label for="cell-col-gap-slider">Col gap:</label>
|
|
243
|
-
<input
|
|
244
|
-
type="range"
|
|
245
|
-
min="0"
|
|
246
|
-
max="5"
|
|
247
|
-
value="1.7"
|
|
248
|
-
step="0.1"
|
|
249
|
-
id="cell-col-gap-slider"
|
|
250
|
-
@input=${this.colGapChanged}
|
|
251
|
-
/>
|
|
252
|
-
<span>${this.colGap}rem</span>
|
|
253
|
-
</div>
|
|
254
|
-
</fieldset>
|
|
255
|
-
|
|
256
|
-
<fieldset class="other-controls">
|
|
257
|
-
<legend>Other Controls</legend>
|
|
258
|
-
<div class="checkbox-control">
|
|
259
|
-
<input
|
|
260
|
-
type="checkbox"
|
|
261
|
-
id="simulate-login"
|
|
262
|
-
@click=${this.loginChanged}
|
|
263
|
-
/>
|
|
264
|
-
<label for="simulate-login">Simulate login</label>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="checkbox-control">
|
|
267
|
-
<input
|
|
268
|
-
type="checkbox"
|
|
269
|
-
id="enable-date-picker"
|
|
270
|
-
checked
|
|
271
|
-
@click=${this.datePickerChanged}
|
|
272
|
-
/>
|
|
273
|
-
<label for="enable-date-picker">Enable date picker</label>
|
|
274
|
-
</div>
|
|
275
|
-
<div class="checkbox-control">
|
|
276
|
-
<input
|
|
277
|
-
type="checkbox"
|
|
278
|
-
id="enable-facets"
|
|
279
|
-
checked
|
|
280
|
-
@click=${this.facetsChanged}
|
|
281
|
-
/>
|
|
282
|
-
<label for="enable-facets">Enable facets</label>
|
|
283
|
-
</div>
|
|
284
|
-
<div class="checkbox-control indent">
|
|
285
|
-
<input
|
|
286
|
-
type="checkbox"
|
|
287
|
-
id="lazy-load-facets"
|
|
288
|
-
?disabled=${this.suppressFacets}
|
|
289
|
-
@click=${this.lazyLoadFacetsChanged}
|
|
290
|
-
/>
|
|
291
|
-
<label for="lazy-load-facets">Lazy load facets</label>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="checkbox-control">
|
|
294
|
-
<input
|
|
295
|
-
type="checkbox"
|
|
296
|
-
id="enable-management"
|
|
297
|
-
@click=${this.manageModeCheckboxChanged}
|
|
298
|
-
/>
|
|
299
|
-
<label for="enable-management">Enable manage mode</label>
|
|
300
|
-
</div>
|
|
301
|
-
<div class="checkbox-control indent">
|
|
302
|
-
<input
|
|
303
|
-
type="checkbox"
|
|
304
|
-
id="enable-search-management"
|
|
305
|
-
@click=${this.SearchManageModeCheckboxChanged}
|
|
306
|
-
/>
|
|
307
|
-
<label for="enable-search-management">Search</label>
|
|
308
|
-
</div>
|
|
309
|
-
<div class="checkbox-control">
|
|
310
|
-
<input
|
|
311
|
-
type="checkbox"
|
|
312
|
-
id="enable-smart-facet-bar"
|
|
313
|
-
@click=${this.smartFacetBarCheckboxChanged}
|
|
314
|
-
/>
|
|
315
|
-
<label for="enable-smart-facet-bar">Enable smart facet bar</label>
|
|
316
|
-
</div>
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
<div class="checkbox-control">
|
|
332
|
-
<input
|
|
333
|
-
type="checkbox"
|
|
334
|
-
id="show-
|
|
335
|
-
@click=${this.
|
|
336
|
-
/>
|
|
337
|
-
<label for="show-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
</div>
|
|
377
|
-
<div class="checkbox-control">
|
|
378
|
-
<input
|
|
379
|
-
type="checkbox"
|
|
380
|
-
id="enable-sortbar-
|
|
381
|
-
@click=${this.
|
|
382
|
-
/>
|
|
383
|
-
<label for="enable-sortbar-
|
|
384
|
-
>Show sortbar
|
|
385
|
-
>
|
|
386
|
-
</div>
|
|
387
|
-
<div class="checkbox-control">
|
|
388
|
-
<input
|
|
389
|
-
type="checkbox"
|
|
390
|
-
id="enable-
|
|
391
|
-
@click=${this.
|
|
392
|
-
/>
|
|
393
|
-
<label for="enable-
|
|
394
|
-
|
|
395
|
-
>
|
|
396
|
-
</div>
|
|
397
|
-
<div class="checkbox-control">
|
|
398
|
-
<input
|
|
399
|
-
type="checkbox"
|
|
400
|
-
id="enable-
|
|
401
|
-
@click=${this.
|
|
402
|
-
/>
|
|
403
|
-
<label for="enable-
|
|
404
|
-
Show
|
|
405
|
-
</label>
|
|
406
|
-
</div>
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
>
|
|
431
|
-
</div>
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
.
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
.modalManager=${this.modalManager}
|
|
460
|
-
.analyticsHandler=${this.analyticsHandler}
|
|
461
|
-
.pageContext=${'search'}
|
|
462
|
-
@visiblePageChanged=${this.visiblePageChanged}
|
|
463
|
-
@baseQueryChanged=${this.baseQueryChanged}
|
|
464
|
-
@searchTypeChanged=${this.searchTypeChanged}
|
|
465
|
-
@manageModeChanged=${this.manageModeChanged}
|
|
466
|
-
@itemRemovalRequested=${this.handleItemRemovalRequest}
|
|
467
|
-
@itemManagerRequested=${this.handleItemManagerRequest}
|
|
468
|
-
@tileActionClicked=${this.handleTileActionClicked}
|
|
469
|
-
>
|
|
187
|
+
}}
|
|
188
|
+
>
|
|
189
|
+
Last Event Captured
|
|
190
|
+
</button>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div id="last-event">
|
|
194
|
+
<pre id="latest-event-details" class="hidden">
|
|
195
|
+
${JSON.stringify(this.latestAction, null, 2)}
|
|
196
|
+
</pre
|
|
197
|
+
>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<fieldset class="cell-controls">
|
|
201
|
+
<legend>Cell Controls</legend>
|
|
202
|
+
<div>
|
|
203
|
+
<label for="cell-width-slider">Cell width:</label>
|
|
204
|
+
<input
|
|
205
|
+
type="range"
|
|
206
|
+
min="10"
|
|
207
|
+
max="100"
|
|
208
|
+
value="18"
|
|
209
|
+
step="0.1"
|
|
210
|
+
id="cell-width-slider"
|
|
211
|
+
@input=${this.widthChanged}
|
|
212
|
+
/>
|
|
213
|
+
<span>${this.cellWidth}rem</span>
|
|
214
|
+
</div>
|
|
215
|
+
<div>
|
|
216
|
+
<label for="cell-height-slider">Cell height:</label>
|
|
217
|
+
<input
|
|
218
|
+
type="range"
|
|
219
|
+
min="10"
|
|
220
|
+
max="100"
|
|
221
|
+
value="29"
|
|
222
|
+
step="0.1"
|
|
223
|
+
id="cell-height-slider"
|
|
224
|
+
@input=${this.heightChanged}
|
|
225
|
+
/>
|
|
226
|
+
<span>${this.cellHeight}rem</span>
|
|
227
|
+
</div>
|
|
228
|
+
<div>
|
|
229
|
+
<label for="cell-row-gap-slider">Row gap:</label>
|
|
230
|
+
<input
|
|
231
|
+
type="range"
|
|
232
|
+
min="0"
|
|
233
|
+
max="5"
|
|
234
|
+
value="1.7"
|
|
235
|
+
step="0.1"
|
|
236
|
+
id="cell-row-gap-slider"
|
|
237
|
+
@input=${this.rowGapChanged}
|
|
238
|
+
/>
|
|
239
|
+
<span>${this.rowGap}rem</span>
|
|
240
|
+
</div>
|
|
241
|
+
<div>
|
|
242
|
+
<label for="cell-col-gap-slider">Col gap:</label>
|
|
243
|
+
<input
|
|
244
|
+
type="range"
|
|
245
|
+
min="0"
|
|
246
|
+
max="5"
|
|
247
|
+
value="1.7"
|
|
248
|
+
step="0.1"
|
|
249
|
+
id="cell-col-gap-slider"
|
|
250
|
+
@input=${this.colGapChanged}
|
|
251
|
+
/>
|
|
252
|
+
<span>${this.colGap}rem</span>
|
|
253
|
+
</div>
|
|
254
|
+
</fieldset>
|
|
255
|
+
|
|
256
|
+
<fieldset class="other-controls">
|
|
257
|
+
<legend>Other Controls</legend>
|
|
258
|
+
<div class="checkbox-control">
|
|
259
|
+
<input
|
|
260
|
+
type="checkbox"
|
|
261
|
+
id="simulate-login"
|
|
262
|
+
@click=${this.loginChanged}
|
|
263
|
+
/>
|
|
264
|
+
<label for="simulate-login">Simulate login</label>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="checkbox-control">
|
|
267
|
+
<input
|
|
268
|
+
type="checkbox"
|
|
269
|
+
id="enable-date-picker"
|
|
270
|
+
checked
|
|
271
|
+
@click=${this.datePickerChanged}
|
|
272
|
+
/>
|
|
273
|
+
<label for="enable-date-picker">Enable date picker</label>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="checkbox-control">
|
|
276
|
+
<input
|
|
277
|
+
type="checkbox"
|
|
278
|
+
id="enable-facets"
|
|
279
|
+
checked
|
|
280
|
+
@click=${this.facetsChanged}
|
|
281
|
+
/>
|
|
282
|
+
<label for="enable-facets">Enable facets</label>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="checkbox-control indent">
|
|
285
|
+
<input
|
|
286
|
+
type="checkbox"
|
|
287
|
+
id="lazy-load-facets"
|
|
288
|
+
?disabled=${this.suppressFacets}
|
|
289
|
+
@click=${this.lazyLoadFacetsChanged}
|
|
290
|
+
/>
|
|
291
|
+
<label for="lazy-load-facets">Lazy load facets</label>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="checkbox-control">
|
|
294
|
+
<input
|
|
295
|
+
type="checkbox"
|
|
296
|
+
id="enable-management"
|
|
297
|
+
@click=${this.manageModeCheckboxChanged}
|
|
298
|
+
/>
|
|
299
|
+
<label for="enable-management">Enable manage mode</label>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="checkbox-control indent">
|
|
302
|
+
<input
|
|
303
|
+
type="checkbox"
|
|
304
|
+
id="enable-search-management"
|
|
305
|
+
@click=${this.SearchManageModeCheckboxChanged}
|
|
306
|
+
/>
|
|
307
|
+
<label for="enable-search-management">Search</label>
|
|
308
|
+
</div>
|
|
309
|
+
<div class="checkbox-control">
|
|
310
|
+
<input
|
|
311
|
+
type="checkbox"
|
|
312
|
+
id="enable-smart-facet-bar"
|
|
313
|
+
@click=${this.smartFacetBarCheckboxChanged}
|
|
314
|
+
/>
|
|
315
|
+
<label for="enable-smart-facet-bar">Enable smart facet bar</label>
|
|
316
|
+
</div>
|
|
317
|
+
</fieldset>
|
|
318
|
+
|
|
319
|
+
<fieldset class="cb-visual-appearance">
|
|
320
|
+
<legend>CB Visual Appearance</legend>
|
|
321
|
+
<div class="checkbox-control">
|
|
322
|
+
<input
|
|
323
|
+
type="checkbox"
|
|
324
|
+
id="show-facet-group-outline-check"
|
|
325
|
+
@click=${this.toggleFacetGroupOutline}
|
|
326
|
+
/>
|
|
327
|
+
<label for="show-facet-group-outline-check">
|
|
328
|
+
Show facet group outlines
|
|
329
|
+
</label>
|
|
330
|
+
</div>
|
|
331
|
+
<div class="checkbox-control">
|
|
332
|
+
<input
|
|
333
|
+
type="checkbox"
|
|
334
|
+
id="show-outline-check"
|
|
335
|
+
@click=${this.outlineChanged}
|
|
336
|
+
/>
|
|
337
|
+
<label for="show-outline-check">Show cell outlines</label>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="checkbox-control">
|
|
340
|
+
<input
|
|
341
|
+
type="checkbox"
|
|
342
|
+
id="minimal-tiles-check"
|
|
343
|
+
@click=${this.minimalTilesChanged}
|
|
344
|
+
/>
|
|
345
|
+
<label for="minimal-tiles-check">Minimal tile layouts</label>
|
|
346
|
+
</div>
|
|
347
|
+
</fieldset>
|
|
348
|
+
|
|
349
|
+
<fieldset class="user-profile-controls">
|
|
350
|
+
<legend>User Profile Controls</legend>
|
|
351
|
+
<div class="checkbox-control">
|
|
352
|
+
<input
|
|
353
|
+
type="checkbox"
|
|
354
|
+
id="enable-facet-top-slot"
|
|
355
|
+
@click=${this.facetTopSlotCheckboxChanged}
|
|
356
|
+
/>
|
|
357
|
+
<label for="enable-facet-top-slot">Show facet top slot</label>
|
|
358
|
+
</div>
|
|
359
|
+
<div class="checkbox-control">
|
|
360
|
+
<input
|
|
361
|
+
type="checkbox"
|
|
362
|
+
id="enable-cb-top-slot"
|
|
363
|
+
@click=${this.cbTopSlotCheckboxChanged}
|
|
364
|
+
/>
|
|
365
|
+
<label for="enable-cb-top-slot">Show CB top slot</label>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="checkbox-control">
|
|
368
|
+
<input
|
|
369
|
+
type="checkbox"
|
|
370
|
+
id="enable-sortbar-left-slot"
|
|
371
|
+
@click=${this.sortBarLeftSlotCheckboxChanged}
|
|
372
|
+
/>
|
|
373
|
+
<label for="enable-sortbar-left-slot"
|
|
374
|
+
>Show sortbar left slot</label
|
|
375
|
+
>
|
|
376
|
+
</div>
|
|
377
|
+
<div class="checkbox-control">
|
|
378
|
+
<input
|
|
379
|
+
type="checkbox"
|
|
380
|
+
id="enable-sortbar-right-slot"
|
|
381
|
+
@click=${this.sortBarRightSlotCheckboxChanged}
|
|
382
|
+
/>
|
|
383
|
+
<label for="enable-sortbar-right-slot"
|
|
384
|
+
>Show sortbar right slot</label
|
|
385
|
+
>
|
|
386
|
+
</div>
|
|
387
|
+
<div class="checkbox-control">
|
|
388
|
+
<input
|
|
389
|
+
type="checkbox"
|
|
390
|
+
id="enable-result-last-tile-slot"
|
|
391
|
+
@click=${this.resultLastTileSlotCheckboxChanged}
|
|
392
|
+
/>
|
|
393
|
+
<label for="enable-result-last-tile-slot">
|
|
394
|
+
Show result last tile slot
|
|
395
|
+
</label>
|
|
396
|
+
</div>
|
|
397
|
+
<div class="checkbox-control">
|
|
398
|
+
<input
|
|
399
|
+
type="checkbox"
|
|
400
|
+
id="enable-replaced-sort-options"
|
|
401
|
+
@click=${this.replaceSortOptionsChanged}
|
|
402
|
+
/>
|
|
403
|
+
<label for="enable-replaced-sort-options">
|
|
404
|
+
Show replaced sort options
|
|
405
|
+
</label>
|
|
406
|
+
</div>
|
|
407
|
+
</fieldset>
|
|
408
|
+
|
|
409
|
+
<fieldset class="user-profile-controls">
|
|
410
|
+
<legend>Set Placeholder Types</legend>
|
|
411
|
+
<div class="checkbox-control">
|
|
412
|
+
<input
|
|
413
|
+
id="enable-loading-placeholder"
|
|
414
|
+
type="radio"
|
|
415
|
+
@click=${() => this.setPlaceholderType('loading-placeholder')}
|
|
416
|
+
name="placeholder-radio"
|
|
417
|
+
/>
|
|
418
|
+
<label for="enable-loading-placeholder"
|
|
419
|
+
>Loading Placeholder</label
|
|
420
|
+
>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="checkbox-control">
|
|
423
|
+
<input
|
|
424
|
+
id="enable-empty-placeholder"
|
|
425
|
+
type="radio"
|
|
426
|
+
@click=${() => this.setPlaceholderType('error-placeholder')}
|
|
427
|
+
value="empty-placeholder"
|
|
428
|
+
name="placeholder-radio"
|
|
429
|
+
/>
|
|
430
|
+
<label for="enable-empty-placeholder">Empty Placeholder</label>
|
|
431
|
+
</div>
|
|
432
|
+
</fieldset>
|
|
433
|
+
</div>
|
|
434
|
+
<button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
|
|
435
|
+
Toggle Search Controls
|
|
436
|
+
</button>
|
|
437
|
+
</div>
|
|
438
|
+
<div id="collection-browser-container">
|
|
439
|
+
<collection-browser
|
|
440
|
+
facetPaneVisible
|
|
441
|
+
.baseNavigationUrl=${'https://archive.org'}
|
|
442
|
+
.baseImageUrl=${'https://archive.org'}
|
|
443
|
+
.searchService=${this.searchService}
|
|
444
|
+
.resizeObserver=${this.resizeObserver}
|
|
445
|
+
.showHistogramDatePicker=${true}
|
|
446
|
+
.suppressFacets=${this.suppressFacets}
|
|
447
|
+
.lazyLoadFacets=${this.lazyLoadFacets}
|
|
448
|
+
.loggedIn=${this.loggedIn}
|
|
449
|
+
.modalManager=${this.modalManager}
|
|
450
|
+
.analyticsHandler=${this.analyticsHandler}
|
|
451
|
+
.pageContext=${'search'}
|
|
452
|
+
@visiblePageChanged=${this.visiblePageChanged}
|
|
453
|
+
@baseQueryChanged=${this.baseQueryChanged}
|
|
454
|
+
@searchTypeChanged=${this.searchTypeChanged}
|
|
455
|
+
@manageModeChanged=${this.manageModeChanged}
|
|
456
|
+
@itemRemovalRequested=${this.handleItemRemovalRequest}
|
|
457
|
+
@itemManagerRequested=${this.handleItemManagerRequest}
|
|
458
|
+
>
|
|
470
459
|
${this.toggleSlots
|
|
471
460
|
? html `<div slot="sortbar-left-slot">Sort Slot</div>`
|
|
472
|
-
: nothing}
|
|
461
|
+
: nothing}
|
|
473
462
|
${this.toggleSlots
|
|
474
463
|
? html `<div slot="facet-top-slot">Facet Slot</div>`
|
|
475
|
-
: nothing}
|
|
476
|
-
</collection-browser>
|
|
477
|
-
</div>
|
|
478
|
-
<modal-manager></modal-manager>
|
|
464
|
+
: nothing}
|
|
465
|
+
</collection-browser>
|
|
466
|
+
</div>
|
|
467
|
+
<modal-manager></modal-manager>
|
|
479
468
|
`;
|
|
480
469
|
}
|
|
481
470
|
async setPlaceholderType(type) {
|
|
@@ -654,21 +643,6 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
654
643
|
const target = e.target;
|
|
655
644
|
this.collectionBrowser.showSmartFacetBar = target.checked;
|
|
656
645
|
}
|
|
657
|
-
/**
|
|
658
|
-
* Handler for when the dev panel's "Enable tile action buttons" checkbox is changed.
|
|
659
|
-
*/
|
|
660
|
-
tileActionsCheckboxChanged(e) {
|
|
661
|
-
const target = e.target;
|
|
662
|
-
this.collectionBrowser.tileActions = target.checked
|
|
663
|
-
? [{ id: 'demo-action', label: 'Return' }]
|
|
664
|
-
: [];
|
|
665
|
-
}
|
|
666
|
-
/**
|
|
667
|
-
* Handler for tile action button clicks (logs to console for QA).
|
|
668
|
-
*/
|
|
669
|
-
handleTileActionClicked(e) {
|
|
670
|
-
console.log('Tile action clicked:', e.detail.actionId, e.detail.model);
|
|
671
|
-
}
|
|
672
646
|
/**
|
|
673
647
|
* Handler for when the dev panel's "Show facet top slot" checkbox is changed.
|
|
674
648
|
*/
|
|
@@ -811,251 +785,246 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
811
785
|
this.collectionBrowser.enableSortOptionsSlot = false;
|
|
812
786
|
}
|
|
813
787
|
}
|
|
814
|
-
static { this.styles = css `
|
|
815
|
-
:host {
|
|
816
|
-
display: block;
|
|
817
|
-
--primaryButtonBGColor: #194880;
|
|
818
|
-
--ia-theme-link-color: #4b64ff;
|
|
819
|
-
}
|
|
820
|
-
|
|
821
|
-
/* add the following styles to ensure proper modal visibility */
|
|
822
|
-
body.modal-manager-open {
|
|
823
|
-
overflow: hidden;
|
|
824
|
-
}
|
|
825
|
-
modal-manager {
|
|
826
|
-
display: none;
|
|
827
|
-
}
|
|
828
|
-
modal-manager[mode='open'] {
|
|
829
|
-
display: block;
|
|
830
|
-
}
|
|
831
|
-
modal-manager.remove-items {
|
|
832
|
-
--modalWidth: 58rem;
|
|
833
|
-
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
834
|
-
--modalTitleLineHeight: 4rem;
|
|
835
|
-
--modalTitleFontSize: 1.8rem;
|
|
836
|
-
}
|
|
837
|
-
modal-manager.more-search-facets {
|
|
838
|
-
--modalWidth: 85rem;
|
|
839
|
-
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
840
|
-
--modalTitleLineHeight: 4rem;
|
|
841
|
-
--modalTitleFontSize: 1.8rem;
|
|
842
|
-
--modalCornerRadius: 0;
|
|
843
|
-
--modalBottomPadding: 0;
|
|
844
|
-
--modalBottomMargin: 0;
|
|
845
|
-
--modalScrollOffset: 0;
|
|
846
|
-
--modalCornerRadius: 0.5rem;
|
|
847
|
-
}
|
|
848
|
-
modal-manager.expanded-date-picker {
|
|
849
|
-
--modalWidth: 58rem;
|
|
850
|
-
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
851
|
-
--modalTitleLineHeight: 4rem;
|
|
852
|
-
--modalTitleFontSize: 1.8rem;
|
|
853
|
-
--modalCornerRadius: 0;
|
|
854
|
-
--modalBottomPadding: 0;
|
|
855
|
-
--modalBottomMargin: 0;
|
|
856
|
-
--modalScrollOffset: 0;
|
|
857
|
-
--modalCornerRadius: 0.5rem;
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
input,
|
|
861
|
-
button {
|
|
862
|
-
font-size: 1.6rem;
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
modal-manager.showFacetGroupOutlines,
|
|
866
|
-
collection-browser.showFacetGroupOutlines {
|
|
867
|
-
--facet-row-border-top: 1px solid red;
|
|
868
|
-
--facet-row-border-bottom: 1px solid blue;
|
|
869
|
-
}
|
|
870
|
-
|
|
871
|
-
collection-browser {
|
|
872
|
-
/* Same as production */
|
|
873
|
-
max-width: 135rem;
|
|
874
|
-
margin: auto;
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
#search-and-page-inputs {
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
}
|
|
933
|
-
|
|
934
|
-
#
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
}
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
#cell-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
#cell-gap-control {
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
}
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
div[slot='
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
background
|
|
1021
|
-
}
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
box-shadow:
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
font-size: 2.8rem;
|
|
1055
|
-
color: rgb(44, 44, 44);
|
|
1056
|
-
font-weight: 200;
|
|
1057
|
-
text-align: center;
|
|
1058
|
-
}
|
|
788
|
+
static { this.styles = css `
|
|
789
|
+
:host {
|
|
790
|
+
display: block;
|
|
791
|
+
--primaryButtonBGColor: #194880;
|
|
792
|
+
--ia-theme-link-color: #4b64ff;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
/* add the following styles to ensure proper modal visibility */
|
|
796
|
+
body.modal-manager-open {
|
|
797
|
+
overflow: hidden;
|
|
798
|
+
}
|
|
799
|
+
modal-manager {
|
|
800
|
+
display: none;
|
|
801
|
+
}
|
|
802
|
+
modal-manager[mode='open'] {
|
|
803
|
+
display: block;
|
|
804
|
+
}
|
|
805
|
+
modal-manager.remove-items {
|
|
806
|
+
--modalWidth: 58rem;
|
|
807
|
+
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
808
|
+
--modalTitleLineHeight: 4rem;
|
|
809
|
+
--modalTitleFontSize: 1.8rem;
|
|
810
|
+
}
|
|
811
|
+
modal-manager.more-search-facets {
|
|
812
|
+
--modalWidth: 85rem;
|
|
813
|
+
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
814
|
+
--modalTitleLineHeight: 4rem;
|
|
815
|
+
--modalTitleFontSize: 1.8rem;
|
|
816
|
+
--modalCornerRadius: 0;
|
|
817
|
+
--modalBottomPadding: 0;
|
|
818
|
+
--modalBottomMargin: 0;
|
|
819
|
+
--modalScrollOffset: 0;
|
|
820
|
+
--modalCornerRadius: 0.5rem;
|
|
821
|
+
}
|
|
822
|
+
modal-manager.expanded-date-picker {
|
|
823
|
+
--modalWidth: 58rem;
|
|
824
|
+
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
825
|
+
--modalTitleLineHeight: 4rem;
|
|
826
|
+
--modalTitleFontSize: 1.8rem;
|
|
827
|
+
--modalCornerRadius: 0;
|
|
828
|
+
--modalBottomPadding: 0;
|
|
829
|
+
--modalBottomMargin: 0;
|
|
830
|
+
--modalScrollOffset: 0;
|
|
831
|
+
--modalCornerRadius: 0.5rem;
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
input,
|
|
835
|
+
button {
|
|
836
|
+
font-size: 1.6rem;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
modal-manager.showFacetGroupOutlines,
|
|
840
|
+
collection-browser.showFacetGroupOutlines {
|
|
841
|
+
--facet-row-border-top: 1px solid red;
|
|
842
|
+
--facet-row-border-bottom: 1px solid blue;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
collection-browser {
|
|
846
|
+
/* Same as production */
|
|
847
|
+
max-width: 135rem;
|
|
848
|
+
margin: auto;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
#collection-browser-container {
|
|
852
|
+
/* Same as production */
|
|
853
|
+
padding-left: 0.5rem;
|
|
854
|
+
margin-bottom: 2rem;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
#base-query-field {
|
|
858
|
+
width: 300px;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
.dev-tool-container {
|
|
862
|
+
position: relative;
|
|
863
|
+
}
|
|
864
|
+
#dev-tools {
|
|
865
|
+
position: relative;
|
|
866
|
+
top: 0;
|
|
867
|
+
left: 0;
|
|
868
|
+
z-index: 1;
|
|
869
|
+
-webkit-backdrop-filter: blur(10px);
|
|
870
|
+
backdrop-filter: blur(10px);
|
|
871
|
+
padding: 0.5rem 1rem;
|
|
872
|
+
border: 1px solid black;
|
|
873
|
+
font-size: 1.4rem;
|
|
874
|
+
background: #ffffffb3;
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
#dev-tools > * {
|
|
878
|
+
display: flex;
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
#toggle-dev-tools-btn {
|
|
882
|
+
position: fixed;
|
|
883
|
+
left: 77.4%;
|
|
884
|
+
top: 0;
|
|
885
|
+
background: red;
|
|
886
|
+
padding: 5px;
|
|
887
|
+
color: white;
|
|
888
|
+
font-size: 1.4rem;
|
|
889
|
+
margin: 0;
|
|
890
|
+
z-index: 1;
|
|
891
|
+
cursor: pointer;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
#search-and-page-inputs {
|
|
895
|
+
flex-wrap: wrap;
|
|
896
|
+
row-gap: 2px;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
#search-and-page-inputs > form {
|
|
900
|
+
margin-right: 1rem;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
#search-and-page-inputs label {
|
|
904
|
+
display: inline-block;
|
|
905
|
+
min-width: 50px;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
#page-number-input {
|
|
909
|
+
width: 75px;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.search-type {
|
|
913
|
+
margin-right: 1rem;
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
.cell-controls {
|
|
917
|
+
display: flex;
|
|
918
|
+
flex-wrap: wrap;
|
|
919
|
+
}
|
|
920
|
+
.cell-controls div {
|
|
921
|
+
display: flex;
|
|
922
|
+
align-items: center;
|
|
923
|
+
}
|
|
924
|
+
.cell-controls input[type='range'] {
|
|
925
|
+
width: 120px;
|
|
926
|
+
}
|
|
927
|
+
#cell-controls label {
|
|
928
|
+
display: inline-block;
|
|
929
|
+
width: 10rem;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
#cell-size-control,
|
|
933
|
+
#cell-gap-control {
|
|
934
|
+
flex-basis: calc(50% - 1rem);
|
|
935
|
+
flex-grow: 1;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
#cell-gap-control {
|
|
939
|
+
margin-left: 1rem;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
#checkbox-controls {
|
|
943
|
+
padding-top: 0.5rem;
|
|
944
|
+
flex-wrap: wrap;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.checkbox-control {
|
|
948
|
+
flex-basis: 50%;
|
|
949
|
+
}
|
|
950
|
+
.checkbox-control.indent {
|
|
951
|
+
margin-left: 10px;
|
|
952
|
+
}
|
|
953
|
+
.checkbox-control label {
|
|
954
|
+
user-select: none;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
#last-event {
|
|
958
|
+
background-color: aliceblue;
|
|
959
|
+
padding: 5px;
|
|
960
|
+
margin: 5px auto;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.hidden {
|
|
964
|
+
display: none;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
#toggle-controls {
|
|
968
|
+
background-color: lightskyblue;
|
|
969
|
+
padding: 5px;
|
|
970
|
+
margin: 5px auto;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
#search-types {
|
|
974
|
+
margin: 5px auto;
|
|
975
|
+
background-color: aliceblue;
|
|
976
|
+
font-size: 1.6rem;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
// slots
|
|
980
|
+
div[slot='cb-top-slot'] {
|
|
981
|
+
height: 50px;
|
|
982
|
+
border: 1px solid red;
|
|
983
|
+
background: bisque;
|
|
984
|
+
}
|
|
985
|
+
div[slot='facet-top-slot'] {
|
|
986
|
+
border: 1px solid red;
|
|
987
|
+
width: 100%;
|
|
988
|
+
height: 150px;
|
|
989
|
+
background-color: darkseagreen;
|
|
990
|
+
}
|
|
991
|
+
div[slot='sort-slot-left'] {
|
|
992
|
+
height: 50px;
|
|
993
|
+
border: 1px solid red;
|
|
994
|
+
background: bisque;
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
/* user profile controls */
|
|
998
|
+
.user-profile-controls {
|
|
999
|
+
width: fit-content;
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
fieldset {
|
|
1003
|
+
display: inline-block !important;
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
.result-last-tile {
|
|
1007
|
+
border-radius: 4px;
|
|
1008
|
+
background-color: white;
|
|
1009
|
+
border: 3px dashed #555;
|
|
1010
|
+
box-shadow: none;
|
|
1011
|
+
display: grid;
|
|
1012
|
+
align-content: center;
|
|
1013
|
+
}
|
|
1014
|
+
.result-last-tile:hover {
|
|
1015
|
+
box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
|
|
1016
|
+
transition: box-shadow 0.1s ease 0s;
|
|
1017
|
+
cursor: pointer;
|
|
1018
|
+
border: 3px dashed #4b64ff;
|
|
1019
|
+
}
|
|
1020
|
+
.result-last-tile h3 {
|
|
1021
|
+
margin-bottom: 4rem;
|
|
1022
|
+
margin: 0px auto;
|
|
1023
|
+
font-size: 2.8rem;
|
|
1024
|
+
color: rgb(44, 44, 44);
|
|
1025
|
+
font-weight: 200;
|
|
1026
|
+
text-align: center;
|
|
1027
|
+
}
|
|
1059
1028
|
`; }
|
|
1060
1029
|
};
|
|
1061
1030
|
__decorate([
|