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