@internetarchive/collection-browser 4.2.1-alpha-webdev8165.0 → 4.3.1-alpha-webdev8165.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.
Files changed (50) hide show
  1. package/dist/src/app-root.d.ts +3 -0
  2. package/dist/src/app-root.js +695 -614
  3. package/dist/src/app-root.js.map +1 -1
  4. package/dist/src/collection-browser.d.ts +0 -4
  5. package/dist/src/collection-browser.js +761 -779
  6. package/dist/src/collection-browser.js.map +1 -1
  7. package/dist/src/data-source/collection-browser-data-source.d.ts +7 -0
  8. package/dist/src/data-source/collection-browser-data-source.js +24 -8
  9. package/dist/src/data-source/collection-browser-data-source.js.map +1 -1
  10. package/dist/src/manage/manage-bar.d.ts +7 -2
  11. package/dist/src/manage/manage-bar.js +102 -80
  12. package/dist/src/manage/manage-bar.js.map +1 -1
  13. package/dist/src/models.js.map +1 -1
  14. package/dist/src/restoration-state-handler.js.map +1 -1
  15. package/dist/src/tiles/list/tile-list-compact-header.js +45 -45
  16. package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
  17. package/dist/src/tiles/list/tile-list-compact.js +99 -99
  18. package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
  19. package/dist/src/tiles/list/tile-list.js +300 -299
  20. package/dist/src/tiles/list/tile-list.js.map +1 -1
  21. package/dist/src/tiles/tile-display-value-provider.d.ts +5 -0
  22. package/dist/src/tiles/tile-display-value-provider.js +9 -0
  23. package/dist/src/tiles/tile-display-value-provider.js.map +1 -1
  24. package/dist/test/data-source/collection-browser-data-source.test.js +54 -2
  25. package/dist/test/data-source/collection-browser-data-source.test.js.map +1 -1
  26. package/dist/test/manage/manage-bar.test.d.ts +1 -0
  27. package/dist/test/manage/manage-bar.test.js +129 -7
  28. package/dist/test/manage/manage-bar.test.js.map +1 -1
  29. package/dist/test/restoration-state-handler.test.js.map +1 -1
  30. package/dist/test/tiles/list/tile-list-compact-header.test.d.ts +1 -0
  31. package/dist/test/tiles/list/tile-list-compact-header.test.js +36 -0
  32. package/dist/test/tiles/list/tile-list-compact-header.test.js.map +1 -0
  33. package/dist/test/tiles/list/tile-list.test.js +147 -127
  34. package/dist/test/tiles/list/tile-list.test.js.map +1 -1
  35. package/package.json +1 -1
  36. package/src/app-root.ts +1251 -1166
  37. package/src/collection-browser.ts +3049 -3077
  38. package/src/data-source/collection-browser-data-source.ts +1465 -1445
  39. package/src/manage/manage-bar.ts +276 -247
  40. package/src/models.ts +879 -879
  41. package/src/restoration-state-handler.ts +546 -546
  42. package/src/tiles/list/tile-list-compact-header.ts +86 -86
  43. package/src/tiles/list/tile-list-compact.ts +239 -239
  44. package/src/tiles/list/tile-list.ts +700 -700
  45. package/src/tiles/tile-display-value-provider.ts +134 -124
  46. package/test/data-source/collection-browser-data-source.test.ts +193 -131
  47. package/test/manage/manage-bar.test.ts +347 -157
  48. package/test/restoration-state-handler.test.ts +569 -569
  49. package/test/tiles/list/tile-list-compact-header.test.ts +43 -0
  50. package/test/tiles/list/tile-list.test.ts +576 -552
package/dist/src/app-root.js CHANGED
@@ -79,392 +79,447 @@ 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
+ <div class="text-input-control">
408
+ <label for="within-profile-input">withinProfile</label>
409
+ <input
410
+ type="text"
411
+ id="within-profile-input"
412
+ placeholder="e.g. @foobar"
413
+ @change=${(e) => {
414
+ const val = e.target.value.trim();
415
+ this.withinProfile = val || undefined;
416
+ }}
417
+ />
418
+ </div>
419
+ <details class="profile-element-controls">
420
+ <summary>
421
+ Profile tab
422
+ (profileElement)${this.profileElement
423
+ ? html `: <strong>${this.profileElement}</strong>`
424
+ : ''}
425
+ </summary>
426
+ <div class="profile-element-options">
427
+ <div class="checkbox-control">
428
+ <input
429
+ type="radio"
430
+ id="profile-none"
431
+ name="profile-element"
432
+ value=""
433
+ checked
434
+ @click=${this.profileElementChanged}
435
+ />
436
+ <label for="profile-none">None</label>
437
+ </div>
438
+ ${[
439
+ 'uploads',
440
+ 'favorites',
441
+ 'reviews',
442
+ 'collections',
443
+ 'lending',
444
+ 'web_archives',
445
+ 'forum_posts',
446
+ ].map(tab => html `
447
+ <div class="checkbox-control">
448
+ <input
449
+ type="radio"
450
+ id="profile-${tab}"
451
+ name="profile-element"
452
+ value="${tab}"
453
+ @click=${this.profileElementChanged}
454
+ />
455
+ <label for="profile-${tab}">${tab}</label>
456
+ </div>
457
+ `)}
458
+ </div>
459
+ </details>
460
+ </fieldset>
461
+
462
+ <fieldset class="user-profile-controls">
463
+ <legend>Set Placeholder Types</legend>
464
+ <div class="checkbox-control">
465
+ <input
466
+ id="enable-loading-placeholder"
467
+ type="radio"
468
+ @click=${() => this.setPlaceholderType('loading-placeholder')}
469
+ name="placeholder-radio"
470
+ />
471
+ <label for="enable-loading-placeholder"
472
+ >Loading Placeholder</label
473
+ >
474
+ </div>
475
+ <div class="checkbox-control">
476
+ <input
477
+ id="enable-empty-placeholder"
478
+ type="radio"
479
+ @click=${() => this.setPlaceholderType('error-placeholder')}
480
+ value="empty-placeholder"
481
+ name="placeholder-radio"
482
+ />
483
+ <label for="enable-empty-placeholder">Empty Placeholder</label>
484
+ </div>
485
+ </fieldset>
486
+ </div>
487
+ <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
488
+ Toggle Search Controls
489
+ </button>
490
+ </div>
491
+ <div id="collection-browser-container">
492
+ <collection-browser
493
+ facetPaneVisible
494
+ .baseNavigationUrl=${'https://archive.org'}
495
+ .baseImageUrl=${'https://archive.org'}
496
+ .searchService=${this.searchService}
497
+ .resizeObserver=${this.resizeObserver}
498
+ .showHistogramDatePicker=${true}
499
+ .suppressFacets=${this.suppressFacets}
500
+ .lazyLoadFacets=${this.lazyLoadFacets}
501
+ .loggedIn=${this.loggedIn}
502
+ .modalManager=${this.modalManager}
503
+ .analyticsHandler=${this.analyticsHandler}
504
+ .withinProfile=${this.withinProfile}
505
+ .profileElement=${this.profileElement}
506
+ .pageContext=${'search'}
507
+ @visiblePageChanged=${this.visiblePageChanged}
508
+ @baseQueryChanged=${this.baseQueryChanged}
509
+ @searchTypeChanged=${this.searchTypeChanged}
510
+ @manageModeChanged=${this.manageModeChanged}
511
+ @itemRemovalRequested=${this.handleItemRemovalRequest}
512
+ @itemManagerRequested=${this.handleItemManagerRequest}
513
+ >
459
514
  ${this.toggleSlots
460
515
  ? html `<div slot="sortbar-left-slot">Sort Slot</div>`
461
- : nothing}
516
+ : nothing}
462
517
  ${this.toggleSlots
463
518
  ? html `<div slot="facet-top-slot">Facet Slot</div>`
464
- : nothing}
465
- </collection-browser>
466
- </div>
467
- <modal-manager></modal-manager>
519
+ : nothing}
520
+ </collection-browser>
521
+ </div>
522
+ <modal-manager></modal-manager>
468
523
  `;
469
524
  }
470
525
  async setPlaceholderType(type) {
@@ -785,246 +840,266 @@ let AppRoot = class AppRoot extends LitElement {
785
840
  this.collectionBrowser.enableSortOptionsSlot = false;
786
841
  }
787
842
  }
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
- }
843
+ profileElementChanged(e) {
844
+ const input = e.target;
845
+ this.profileElement = input.value || undefined;
846
+ }
847
+ static { this.styles = css `
848
+ :host {
849
+ display: block;
850
+ --primaryButtonBGColor: #194880;
851
+ --ia-theme-link-color: #4b64ff;
852
+ }
853
+
854
+ /* add the following styles to ensure proper modal visibility */
855
+ body.modal-manager-open {
856
+ overflow: hidden;
857
+ }
858
+ modal-manager {
859
+ display: none;
860
+ }
861
+ modal-manager[mode='open'] {
862
+ display: block;
863
+ }
864
+ modal-manager.remove-items {
865
+ --modalWidth: 58rem;
866
+ --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
867
+ --modalTitleLineHeight: 4rem;
868
+ --modalTitleFontSize: 1.8rem;
869
+ }
870
+ modal-manager.more-search-facets {
871
+ --modalWidth: 85rem;
872
+ --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
873
+ --modalTitleLineHeight: 4rem;
874
+ --modalTitleFontSize: 1.8rem;
875
+ --modalCornerRadius: 0;
876
+ --modalBottomPadding: 0;
877
+ --modalBottomMargin: 0;
878
+ --modalScrollOffset: 0;
879
+ --modalCornerRadius: 0.5rem;
880
+ }
881
+ modal-manager.expanded-date-picker {
882
+ --modalWidth: 58rem;
883
+ --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
884
+ --modalTitleLineHeight: 4rem;
885
+ --modalTitleFontSize: 1.8rem;
886
+ --modalCornerRadius: 0;
887
+ --modalBottomPadding: 0;
888
+ --modalBottomMargin: 0;
889
+ --modalScrollOffset: 0;
890
+ --modalCornerRadius: 0.5rem;
891
+ }
892
+
893
+ input,
894
+ button {
895
+ font-size: 1.6rem;
896
+ }
897
+
898
+ modal-manager.showFacetGroupOutlines,
899
+ collection-browser.showFacetGroupOutlines {
900
+ --facet-row-border-top: 1px solid red;
901
+ --facet-row-border-bottom: 1px solid blue;
902
+ }
903
+
904
+ collection-browser {
905
+ /* Same as production */
906
+ max-width: 135rem;
907
+ margin: auto;
908
+ }
909
+
910
+ #collection-browser-container {
911
+ /* Same as production */
912
+ padding-left: 0.5rem;
913
+ margin-bottom: 2rem;
914
+ }
915
+
916
+ #base-query-field {
917
+ width: 300px;
918
+ }
919
+
920
+ .dev-tool-container {
921
+ position: relative;
922
+ }
923
+ #dev-tools {
924
+ position: relative;
925
+ top: 0;
926
+ left: 0;
927
+ z-index: 1;
928
+ -webkit-backdrop-filter: blur(10px);
929
+ backdrop-filter: blur(10px);
930
+ padding: 0.5rem 1rem;
931
+ border: 1px solid black;
932
+ font-size: 1.4rem;
933
+ background: #ffffffb3;
934
+ }
935
+
936
+ #dev-tools > * {
937
+ display: flex;
938
+ }
939
+
940
+ #toggle-dev-tools-btn {
941
+ position: fixed;
942
+ left: 77.4%;
943
+ top: 0;
944
+ background: red;
945
+ padding: 5px;
946
+ color: white;
947
+ font-size: 1.4rem;
948
+ margin: 0;
949
+ z-index: 1;
950
+ cursor: pointer;
951
+ }
952
+
953
+ #search-and-page-inputs {
954
+ flex-wrap: wrap;
955
+ row-gap: 2px;
956
+ }
957
+
958
+ #search-and-page-inputs > form {
959
+ margin-right: 1rem;
960
+ }
961
+
962
+ #search-and-page-inputs label {
963
+ display: inline-block;
964
+ min-width: 50px;
965
+ }
966
+
967
+ #page-number-input {
968
+ width: 75px;
969
+ }
970
+
971
+ .search-type {
972
+ margin-right: 1rem;
973
+ }
974
+
975
+ .cell-controls {
976
+ display: flex;
977
+ flex-wrap: wrap;
978
+ }
979
+ .cell-controls div {
980
+ display: flex;
981
+ align-items: center;
982
+ }
983
+ .cell-controls input[type='range'] {
984
+ width: 120px;
985
+ }
986
+ #cell-controls label {
987
+ display: inline-block;
988
+ width: 10rem;
989
+ }
990
+
991
+ #cell-size-control,
992
+ #cell-gap-control {
993
+ flex-basis: calc(50% - 1rem);
994
+ flex-grow: 1;
995
+ }
996
+
997
+ #cell-gap-control {
998
+ margin-left: 1rem;
999
+ }
1000
+
1001
+ #checkbox-controls {
1002
+ padding-top: 0.5rem;
1003
+ flex-wrap: wrap;
1004
+ }
1005
+
1006
+ .checkbox-control {
1007
+ flex-basis: 50%;
1008
+ }
1009
+ .checkbox-control.indent {
1010
+ margin-left: 10px;
1011
+ }
1012
+ .checkbox-control label {
1013
+ user-select: none;
1014
+ }
1015
+
1016
+ #last-event {
1017
+ background-color: aliceblue;
1018
+ padding: 5px;
1019
+ margin: 5px auto;
1020
+ }
1021
+
1022
+ .hidden {
1023
+ display: none;
1024
+ }
1025
+
1026
+ #toggle-controls {
1027
+ background-color: lightskyblue;
1028
+ padding: 5px;
1029
+ margin: 5px auto;
1030
+ }
1031
+
1032
+ #search-types {
1033
+ margin: 5px auto;
1034
+ background-color: aliceblue;
1035
+ font-size: 1.6rem;
1036
+ }
1037
+
1038
+ // slots
1039
+ div[slot='cb-top-slot'] {
1040
+ height: 50px;
1041
+ border: 1px solid red;
1042
+ background: bisque;
1043
+ }
1044
+ div[slot='facet-top-slot'] {
1045
+ border: 1px solid red;
1046
+ width: 100%;
1047
+ height: 150px;
1048
+ background-color: darkseagreen;
1049
+ }
1050
+ div[slot='sort-slot-left'] {
1051
+ height: 50px;
1052
+ border: 1px solid red;
1053
+ background: bisque;
1054
+ }
1055
+
1056
+ /* user profile controls */
1057
+ .user-profile-controls {
1058
+ width: fit-content;
1059
+ }
1060
+
1061
+ .profile-element-controls {
1062
+ margin-top: 4px;
1063
+ }
1064
+
1065
+ .profile-element-controls summary {
1066
+ cursor: pointer;
1067
+ user-select: none;
1068
+ }
1069
+
1070
+ .profile-element-options {
1071
+ display: grid;
1072
+ grid-template-columns: 1fr 1fr;
1073
+ column-gap: 8px;
1074
+ margin-top: 4px;
1075
+ }
1076
+
1077
+ fieldset {
1078
+ display: inline-block !important;
1079
+ }
1080
+
1081
+ .result-last-tile {
1082
+ border-radius: 4px;
1083
+ background-color: white;
1084
+ border: 3px dashed #555;
1085
+ box-shadow: none;
1086
+ display: grid;
1087
+ align-content: center;
1088
+ }
1089
+ .result-last-tile:hover {
1090
+ box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
1091
+ transition: box-shadow 0.1s ease 0s;
1092
+ cursor: pointer;
1093
+ border: 3px dashed #4b64ff;
1094
+ }
1095
+ .result-last-tile h3 {
1096
+ margin-bottom: 4rem;
1097
+ margin: 0px auto;
1098
+ font-size: 2.8rem;
1099
+ color: rgb(44, 44, 44);
1100
+ font-weight: 200;
1101
+ text-align: center;
1102
+ }
1028
1103
  `; }
1029
1104
  };
1030
1105
  __decorate([
@@ -1063,6 +1138,12 @@ __decorate([
1063
1138
  __decorate([
1064
1139
  state()
1065
1140
  ], AppRoot.prototype, "searchType", void 0);
1141
+ __decorate([
1142
+ state()
1143
+ ], AppRoot.prototype, "profileElement", void 0);
1144
+ __decorate([
1145
+ state()
1146
+ ], AppRoot.prototype, "withinProfile", void 0);
1066
1147
  __decorate([
1067
1148
  property({ type: Object, reflect: false })
1068
1149
  ], AppRoot.prototype, "latestAction", void 0);