@internetarchive/collection-browser 4.1.3 → 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/.claude/settings.local.json +11 -0
- package/.editorconfig +29 -29
- package/.github/workflows/ci.yml +27 -27
- package/.github/workflows/gh-pages-main.yml +39 -39
- package/.github/workflows/npm-publish.yml +39 -39
- package/.github/workflows/pr-preview.yml +38 -38
- package/.husky/pre-commit +1 -1
- package/.prettierignore +1 -1
- package/LICENSE +661 -661
- package/README.md +83 -83
- package/dist/index.js.map +1 -1
- package/dist/src/app-root.js +614 -614
- package/dist/src/app-root.js.map +1 -1
- package/dist/src/collection-browser.js +789 -786
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/tiles/models.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +216 -216
- 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/eslint.config.mjs +53 -53
- package/index.html +24 -24
- package/index.ts +28 -28
- package/local.archive.org.cert +86 -86
- package/local.archive.org.key +27 -27
- package/package.json +120 -120
- package/renovate.json +6 -6
- package/src/app-root.ts +1166 -1166
- package/src/collection-browser.ts +3077 -3074
- package/src/tiles/models.ts +8 -8
- package/src/tiles/tile-dispatcher.ts +527 -527
- package/test/collection-browser.test.ts +2507 -2402
- package/tsconfig.json +25 -25
- package/web-dev-server.config.mjs +30 -30
- package/web-test-runner.config.mjs +52 -52
package/dist/src/app-root.js
CHANGED
|
@@ -79,392 +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
|
-
</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
|
-
>
|
|
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
|
+
>
|
|
459
459
|
${this.toggleSlots
|
|
460
460
|
? html `<div slot="sortbar-left-slot">Sort Slot</div>`
|
|
461
|
-
: nothing}
|
|
461
|
+
: nothing}
|
|
462
462
|
${this.toggleSlots
|
|
463
463
|
? html `<div slot="facet-top-slot">Facet Slot</div>`
|
|
464
|
-
: nothing}
|
|
465
|
-
</collection-browser>
|
|
466
|
-
</div>
|
|
467
|
-
<modal-manager></modal-manager>
|
|
464
|
+
: nothing}
|
|
465
|
+
</collection-browser>
|
|
466
|
+
</div>
|
|
467
|
+
<modal-manager></modal-manager>
|
|
468
468
|
`;
|
|
469
469
|
}
|
|
470
470
|
async setPlaceholderType(type) {
|
|
@@ -785,246 +785,246 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
785
785
|
this.collectionBrowser.enableSortOptionsSlot = false;
|
|
786
786
|
}
|
|
787
787
|
}
|
|
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
|
-
}
|
|
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
|
+
}
|
|
1028
1028
|
`; }
|
|
1029
1029
|
};
|
|
1030
1030
|
__decorate([
|