@internetarchive/collection-browser 4.3.1-alpha-webdev8257.0 → 4.3.2-alpha-webdev7939.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 (41) hide show
  1. package/dist/index.d.ts +0 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/src/app-root.d.ts +0 -8
  4. package/dist/src/app-root.js +672 -698
  5. package/dist/src/app-root.js.map +1 -1
  6. package/dist/src/collection-browser.d.ts +8 -8
  7. package/dist/src/collection-browser.js +44 -36
  8. package/dist/src/collection-browser.js.map +1 -1
  9. package/dist/src/tiles/base-tile-component.d.ts +1 -17
  10. package/dist/src/tiles/base-tile-component.js +1 -48
  11. package/dist/src/tiles/base-tile-component.js.map +1 -1
  12. package/dist/src/tiles/grid/item-tile.js +138 -139
  13. package/dist/src/tiles/grid/item-tile.js.map +1 -1
  14. package/dist/src/tiles/list/tile-list-compact-header.js +46 -66
  15. package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
  16. package/dist/src/tiles/list/tile-list-compact.d.ts +1 -1
  17. package/dist/src/tiles/list/tile-list-compact.js +100 -132
  18. package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
  19. package/dist/src/tiles/list/tile-list.d.ts +1 -1
  20. package/dist/src/tiles/list/tile-list.js +298 -316
  21. package/dist/src/tiles/list/tile-list.js.map +1 -1
  22. package/dist/src/tiles/models.d.ts +0 -14
  23. package/dist/src/tiles/models.js.map +1 -1
  24. package/dist/src/tiles/tile-dispatcher.d.ts +0 -14
  25. package/dist/src/tiles/tile-dispatcher.js +216 -319
  26. package/dist/src/tiles/tile-dispatcher.js.map +1 -1
  27. package/index.ts +28 -29
  28. package/package.json +3 -3
  29. package/src/app-root.ts +1251 -1281
  30. package/src/collection-browser.ts +48 -33
  31. package/src/tiles/base-tile-component.ts +65 -121
  32. package/src/tiles/grid/item-tile.ts +346 -347
  33. package/src/tiles/list/tile-list-compact-header.ts +86 -106
  34. package/src/tiles/list/tile-list-compact.ts +239 -273
  35. package/src/tiles/list/tile-list.ts +700 -718
  36. package/src/tiles/models.ts +8 -24
  37. package/src/tiles/tile-dispatcher.ts +527 -637
  38. package/dist/src/styles/tile-action-styles.d.ts +0 -14
  39. package/dist/src/styles/tile-action-styles.js +0 -52
  40. package/dist/src/styles/tile-action-styles.js.map +0 -1
  41. package/src/styles/tile-action-styles.ts +0 -52
package/dist/src/app-root.js CHANGED
@@ -79,372 +79,362 @@ 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
- <div class="checkbox-control">
318
- <input
319
- type="checkbox"
320
- id="enable-tile-actions"
321
- @click=${this.tileActionsCheckboxChanged}
322
- />
323
- <label for="enable-tile-actions"
324
- >Enable tile action buttons</label
325
- >
326
- </div>
327
- </fieldset>
328
-
329
- <fieldset class="cb-visual-appearance">
330
- <legend>CB Visual Appearance</legend>
331
- <div class="checkbox-control">
332
- <input
333
- type="checkbox"
334
- id="show-facet-group-outline-check"
335
- @click=${this.toggleFacetGroupOutline}
336
- />
337
- <label for="show-facet-group-outline-check">
338
- Show facet group outlines
339
- </label>
340
- </div>
341
- <div class="checkbox-control">
342
- <input
343
- type="checkbox"
344
- id="show-outline-check"
345
- @click=${this.outlineChanged}
346
- />
347
- <label for="show-outline-check">Show cell outlines</label>
348
- </div>
349
- <div class="checkbox-control">
350
- <input
351
- type="checkbox"
352
- id="minimal-tiles-check"
353
- @click=${this.minimalTilesChanged}
354
- />
355
- <label for="minimal-tiles-check">Minimal tile layouts</label>
356
- </div>
357
- </fieldset>
358
-
359
- <fieldset class="user-profile-controls">
360
- <legend>User Profile Controls</legend>
361
- <div class="checkbox-control">
362
- <input
363
- type="checkbox"
364
- id="enable-facet-top-slot"
365
- @click=${this.facetTopSlotCheckboxChanged}
366
- />
367
- <label for="enable-facet-top-slot">Show facet top slot</label>
368
- </div>
369
- <div class="checkbox-control">
370
- <input
371
- type="checkbox"
372
- id="enable-cb-top-slot"
373
- @click=${this.cbTopSlotCheckboxChanged}
374
- />
375
- <label for="enable-cb-top-slot">Show CB top slot</label>
376
- </div>
377
- <div class="checkbox-control">
378
- <input
379
- type="checkbox"
380
- id="enable-sortbar-left-slot"
381
- @click=${this.sortBarLeftSlotCheckboxChanged}
382
- />
383
- <label for="enable-sortbar-left-slot"
384
- >Show sortbar left slot</label
385
- >
386
- </div>
387
- <div class="checkbox-control">
388
- <input
389
- type="checkbox"
390
- id="enable-sortbar-right-slot"
391
- @click=${this.sortBarRightSlotCheckboxChanged}
392
- />
393
- <label for="enable-sortbar-right-slot"
394
- >Show sortbar right slot</label
395
- >
396
- </div>
397
- <div class="checkbox-control">
398
- <input
399
- type="checkbox"
400
- id="enable-result-last-tile-slot"
401
- @click=${this.resultLastTileSlotCheckboxChanged}
402
- />
403
- <label for="enable-result-last-tile-slot">
404
- Show result last tile slot
405
- </label>
406
- </div>
407
- <div class="checkbox-control">
408
- <input
409
- type="checkbox"
410
- id="enable-replaced-sort-options"
411
- @click=${this.replaceSortOptionsChanged}
412
- />
413
- <label for="enable-replaced-sort-options">
414
- Show replaced sort options
415
- </label>
416
- </div>
417
- <div class="text-input-control">
418
- <label for="within-profile-input">withinProfile</label>
419
- <input
420
- type="text"
421
- id="within-profile-input"
422
- placeholder="e.g. @foobar"
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"
423
413
  @change=${(e) => {
424
414
  const val = e.target.value.trim();
425
415
  this.withinProfile = val || undefined;
426
- }}
427
- />
428
- </div>
429
- <details class="profile-element-controls">
430
- <summary>
431
- Profile tab
416
+ }}
417
+ />
418
+ </div>
419
+ <details class="profile-element-controls">
420
+ <summary>
421
+ Profile tab
432
422
  (profileElement)${this.profileElement
433
423
  ? html `: <strong>${this.profileElement}</strong>`
434
- : ''}
435
- </summary>
436
- <div class="profile-element-options">
437
- <div class="checkbox-control">
438
- <input
439
- type="radio"
440
- id="profile-none"
441
- name="profile-element"
442
- value=""
443
- checked
444
- @click=${this.profileElementChanged}
445
- />
446
- <label for="profile-none">None</label>
447
- </div>
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>
448
438
  ${[
449
439
  'uploads',
450
440
  'favorites',
@@ -453,84 +443,83 @@ let AppRoot = class AppRoot extends LitElement {
453
443
  'lending',
454
444
  'web_archives',
455
445
  'forum_posts',
456
- ].map(tab => html `
457
- <div class="checkbox-control">
458
- <input
459
- type="radio"
460
- id="profile-${tab}"
461
- name="profile-element"
462
- value="${tab}"
463
- @click=${this.profileElementChanged}
464
- />
465
- <label for="profile-${tab}">${tab}</label>
466
- </div>
467
- `)}
468
- </div>
469
- </details>
470
- </fieldset>
471
-
472
- <fieldset class="user-profile-controls">
473
- <legend>Set Placeholder Types</legend>
474
- <div class="checkbox-control">
475
- <input
476
- id="enable-loading-placeholder"
477
- type="radio"
478
- @click=${() => this.setPlaceholderType('loading-placeholder')}
479
- name="placeholder-radio"
480
- />
481
- <label for="enable-loading-placeholder"
482
- >Loading Placeholder</label
483
- >
484
- </div>
485
- <div class="checkbox-control">
486
- <input
487
- id="enable-empty-placeholder"
488
- type="radio"
489
- @click=${() => this.setPlaceholderType('error-placeholder')}
490
- value="empty-placeholder"
491
- name="placeholder-radio"
492
- />
493
- <label for="enable-empty-placeholder">Empty Placeholder</label>
494
- </div>
495
- </fieldset>
496
- </div>
497
- <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
498
- Toggle Search Controls
499
- </button>
500
- </div>
501
- <div id="collection-browser-container">
502
- <collection-browser
503
- facetPaneVisible
504
- .baseNavigationUrl=${'https://archive.org'}
505
- .baseImageUrl=${'https://archive.org'}
506
- .searchService=${this.searchService}
507
- .resizeObserver=${this.resizeObserver}
508
- .showHistogramDatePicker=${true}
509
- .suppressFacets=${this.suppressFacets}
510
- .lazyLoadFacets=${this.lazyLoadFacets}
511
- .loggedIn=${this.loggedIn}
512
- .modalManager=${this.modalManager}
513
- .analyticsHandler=${this.analyticsHandler}
514
- .withinProfile=${this.withinProfile}
515
- .profileElement=${this.profileElement}
516
- .pageContext=${'search'}
517
- @visiblePageChanged=${this.visiblePageChanged}
518
- @baseQueryChanged=${this.baseQueryChanged}
519
- @searchTypeChanged=${this.searchTypeChanged}
520
- @manageModeChanged=${this.manageModeChanged}
521
- @itemRemovalRequested=${this.handleItemRemovalRequest}
522
- @itemManagerRequested=${this.handleItemManagerRequest}
523
- @tileActionClicked=${this.handleTileActionClicked}
524
- >
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
+ >
525
514
  ${this.toggleSlots
526
515
  ? html `<div slot="sortbar-left-slot">Sort Slot</div>`
527
- : nothing}
516
+ : nothing}
528
517
  ${this.toggleSlots
529
518
  ? html `<div slot="facet-top-slot">Facet Slot</div>`
530
- : nothing}
531
- </collection-browser>
532
- </div>
533
- <modal-manager></modal-manager>
519
+ : nothing}
520
+ </collection-browser>
521
+ </div>
522
+ <modal-manager></modal-manager>
534
523
  `;
535
524
  }
536
525
  async setPlaceholderType(type) {
@@ -709,21 +698,6 @@ let AppRoot = class AppRoot extends LitElement {
709
698
  const target = e.target;
710
699
  this.collectionBrowser.showSmartFacetBar = target.checked;
711
700
  }
712
- /**
713
- * Handler for when the dev panel's "Enable tile action buttons" checkbox is changed.
714
- */
715
- tileActionsCheckboxChanged(e) {
716
- const target = e.target;
717
- this.collectionBrowser.tileActions = target.checked
718
- ? [{ id: 'demo-action', label: 'Return' }]
719
- : [];
720
- }
721
- /**
722
- * Handler for tile action button clicks (logs to console for QA).
723
- */
724
- handleTileActionClicked(e) {
725
- console.log('Tile action clicked:', e.detail.actionId, e.detail.model);
726
- }
727
701
  /**
728
702
  * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
729
703
  */
@@ -870,262 +844,262 @@ let AppRoot = class AppRoot extends LitElement {
870
844
  const input = e.target;
871
845
  this.profileElement = input.value || undefined;
872
846
  }
873
- static { this.styles = css `
874
- :host {
875
- display: block;
876
- --primaryButtonBGColor: #194880;
877
- --ia-theme-link-color: #4b64ff;
878
- }
879
-
880
- /* add the following styles to ensure proper modal visibility */
881
- body.modal-manager-open {
882
- overflow: hidden;
883
- }
884
- modal-manager {
885
- display: none;
886
- }
887
- modal-manager[mode='open'] {
888
- display: block;
889
- }
890
- modal-manager.remove-items {
891
- --modalWidth: 58rem;
892
- --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
893
- --modalTitleLineHeight: 4rem;
894
- --modalTitleFontSize: 1.8rem;
895
- }
896
- modal-manager.more-search-facets {
897
- --modalWidth: 85rem;
898
- --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
899
- --modalTitleLineHeight: 4rem;
900
- --modalTitleFontSize: 1.8rem;
901
- --modalCornerRadius: 0;
902
- --modalBottomPadding: 0;
903
- --modalBottomMargin: 0;
904
- --modalScrollOffset: 0;
905
- --modalCornerRadius: 0.5rem;
906
- }
907
- modal-manager.expanded-date-picker {
908
- --modalWidth: 58rem;
909
- --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
910
- --modalTitleLineHeight: 4rem;
911
- --modalTitleFontSize: 1.8rem;
912
- --modalCornerRadius: 0;
913
- --modalBottomPadding: 0;
914
- --modalBottomMargin: 0;
915
- --modalScrollOffset: 0;
916
- --modalCornerRadius: 0.5rem;
917
- }
918
-
919
- input,
920
- button {
921
- font-size: 1.6rem;
922
- }
923
-
924
- modal-manager.showFacetGroupOutlines,
925
- collection-browser.showFacetGroupOutlines {
926
- --facet-row-border-top: 1px solid red;
927
- --facet-row-border-bottom: 1px solid blue;
928
- }
929
-
930
- collection-browser {
931
- /* Same as production */
932
- max-width: 135rem;
933
- margin: auto;
934
- }
935
-
936
- #collection-browser-container {
937
- /* Same as production */
938
- padding-left: 0.5rem;
939
- margin-bottom: 2rem;
940
- }
941
-
942
- #base-query-field {
943
- width: 300px;
944
- }
945
-
946
- .dev-tool-container {
947
- position: relative;
948
- }
949
- #dev-tools {
950
- position: relative;
951
- top: 0;
952
- left: 0;
953
- z-index: 1;
954
- -webkit-backdrop-filter: blur(10px);
955
- backdrop-filter: blur(10px);
956
- padding: 0.5rem 1rem;
957
- border: 1px solid black;
958
- font-size: 1.4rem;
959
- background: #ffffffb3;
960
- }
961
-
962
- #dev-tools > * {
963
- display: flex;
964
- }
965
-
966
- #toggle-dev-tools-btn {
967
- position: fixed;
968
- left: 77.4%;
969
- top: 0;
970
- background: red;
971
- padding: 5px;
972
- color: white;
973
- font-size: 1.4rem;
974
- margin: 0;
975
- z-index: 1;
976
- cursor: pointer;
977
- }
978
-
979
- #search-and-page-inputs {
980
- flex-wrap: wrap;
981
- row-gap: 2px;
982
- }
983
-
984
- #search-and-page-inputs > form {
985
- margin-right: 1rem;
986
- }
987
-
988
- #search-and-page-inputs label {
989
- display: inline-block;
990
- min-width: 50px;
991
- }
992
-
993
- #page-number-input {
994
- width: 75px;
995
- }
996
-
997
- .search-type {
998
- margin-right: 1rem;
999
- }
1000
-
1001
- .cell-controls {
1002
- display: flex;
1003
- flex-wrap: wrap;
1004
- }
1005
- .cell-controls div {
1006
- display: flex;
1007
- align-items: center;
1008
- }
1009
- .cell-controls input[type='range'] {
1010
- width: 120px;
1011
- }
1012
- #cell-controls label {
1013
- display: inline-block;
1014
- width: 10rem;
1015
- }
1016
-
1017
- #cell-size-control,
1018
- #cell-gap-control {
1019
- flex-basis: calc(50% - 1rem);
1020
- flex-grow: 1;
1021
- }
1022
-
1023
- #cell-gap-control {
1024
- margin-left: 1rem;
1025
- }
1026
-
1027
- #checkbox-controls {
1028
- padding-top: 0.5rem;
1029
- flex-wrap: wrap;
1030
- }
1031
-
1032
- .checkbox-control {
1033
- flex-basis: 50%;
1034
- }
1035
- .checkbox-control.indent {
1036
- margin-left: 10px;
1037
- }
1038
- .checkbox-control label {
1039
- user-select: none;
1040
- }
1041
-
1042
- #last-event {
1043
- background-color: aliceblue;
1044
- padding: 5px;
1045
- margin: 5px auto;
1046
- }
1047
-
1048
- .hidden {
1049
- display: none;
1050
- }
1051
-
1052
- #toggle-controls {
1053
- background-color: lightskyblue;
1054
- padding: 5px;
1055
- margin: 5px auto;
1056
- }
1057
-
1058
- #search-types {
1059
- margin: 5px auto;
1060
- background-color: aliceblue;
1061
- font-size: 1.6rem;
1062
- }
1063
-
1064
- // slots
1065
- div[slot='cb-top-slot'] {
1066
- height: 50px;
1067
- border: 1px solid red;
1068
- background: bisque;
1069
- }
1070
- div[slot='facet-top-slot'] {
1071
- border: 1px solid red;
1072
- width: 100%;
1073
- height: 150px;
1074
- background-color: darkseagreen;
1075
- }
1076
- div[slot='sort-slot-left'] {
1077
- height: 50px;
1078
- border: 1px solid red;
1079
- background: bisque;
1080
- }
1081
-
1082
- /* user profile controls */
1083
- .user-profile-controls {
1084
- width: fit-content;
1085
- }
1086
-
1087
- .profile-element-controls {
1088
- margin-top: 4px;
1089
- }
1090
-
1091
- .profile-element-controls summary {
1092
- cursor: pointer;
1093
- user-select: none;
1094
- }
1095
-
1096
- .profile-element-options {
1097
- display: grid;
1098
- grid-template-columns: 1fr 1fr;
1099
- column-gap: 8px;
1100
- margin-top: 4px;
1101
- }
1102
-
1103
- fieldset {
1104
- display: inline-block !important;
1105
- }
1106
-
1107
- .result-last-tile {
1108
- border-radius: 4px;
1109
- background-color: white;
1110
- border: 3px dashed #555;
1111
- box-shadow: none;
1112
- display: grid;
1113
- align-content: center;
1114
- }
1115
- .result-last-tile:hover {
1116
- box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
1117
- transition: box-shadow 0.1s ease 0s;
1118
- cursor: pointer;
1119
- border: 3px dashed #4b64ff;
1120
- }
1121
- .result-last-tile h3 {
1122
- margin-bottom: 4rem;
1123
- margin: 0px auto;
1124
- font-size: 2.8rem;
1125
- color: rgb(44, 44, 44);
1126
- font-weight: 200;
1127
- text-align: center;
1128
- }
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
+ }
1129
1103
  `; }
1130
1104
  };
1131
1105
  __decorate([