@internetarchive/collection-browser 2.22.1 → 3.0.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 (71) hide show
  1. package/.editorconfig +29 -29
  2. package/.github/workflows/ci.yml +27 -27
  3. package/.github/workflows/gh-pages-main.yml +39 -39
  4. package/.github/workflows/npm-publish.yml +39 -39
  5. package/.github/workflows/pr-preview.yml +38 -38
  6. package/.husky/pre-commit +4 -4
  7. package/.prettierignore +1 -1
  8. package/LICENSE +661 -661
  9. package/README.md +83 -83
  10. package/dist/src/collection-browser.d.ts +1 -2
  11. package/dist/src/collection-browser.js +681 -687
  12. package/dist/src/collection-browser.js.map +1 -1
  13. package/dist/src/collection-facets/facet-row.js +130 -130
  14. package/dist/src/collection-facets/facet-row.js.map +1 -1
  15. package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +75 -75
  16. package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
  17. package/dist/src/collection-facets.js +263 -263
  18. package/dist/src/collection-facets.js.map +1 -1
  19. package/dist/src/data-source/collection-browser-data-source.js.map +1 -1
  20. package/dist/src/data-source/collection-browser-query-state.js.map +1 -1
  21. package/dist/src/data-source/models.js.map +1 -1
  22. package/dist/src/models.js.map +1 -1
  23. package/dist/src/restoration-state-handler.js.map +1 -1
  24. package/dist/src/tiles/base-tile-component.js.map +1 -1
  25. package/dist/src/tiles/grid/item-tile.js +139 -139
  26. package/dist/src/tiles/grid/item-tile.js.map +1 -1
  27. package/dist/src/tiles/hover/hover-pane-controller.js +21 -21
  28. package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
  29. package/dist/src/tiles/hover/tile-hover-pane.js +108 -108
  30. package/dist/src/tiles/hover/tile-hover-pane.js.map +1 -1
  31. package/dist/src/tiles/list/tile-list-compact-header.js +45 -45
  32. package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
  33. package/dist/src/tiles/list/tile-list-compact.js +97 -97
  34. package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
  35. package/dist/src/tiles/list/tile-list.js +289 -289
  36. package/dist/src/tiles/list/tile-list.js.map +1 -1
  37. package/dist/src/tiles/tile-dispatcher.js +200 -200
  38. package/dist/src/tiles/tile-dispatcher.js.map +1 -1
  39. package/dist/src/tiles/tile-display-value-provider.js.map +1 -1
  40. package/dist/test/collection-browser.test.js +183 -197
  41. package/dist/test/collection-browser.test.js.map +1 -1
  42. package/dist/test/restoration-state-handler.test.js.map +1 -1
  43. package/eslint.config.mjs +53 -53
  44. package/index.html +24 -24
  45. package/local.archive.org.cert +86 -86
  46. package/local.archive.org.key +27 -27
  47. package/package.json +117 -117
  48. package/renovate.json +6 -6
  49. package/src/collection-browser.ts +2775 -2779
  50. package/src/collection-facets/facet-row.ts +282 -282
  51. package/src/collection-facets/smart-facets/smart-facet-bar.ts +437 -437
  52. package/src/collection-facets.ts +990 -990
  53. package/src/data-source/collection-browser-data-source.ts +1390 -1390
  54. package/src/data-source/collection-browser-query-state.ts +63 -63
  55. package/src/data-source/models.ts +43 -43
  56. package/src/models.ts +870 -870
  57. package/src/restoration-state-handler.ts +544 -544
  58. package/src/tiles/base-tile-component.ts +53 -53
  59. package/src/tiles/grid/item-tile.ts +339 -339
  60. package/src/tiles/hover/hover-pane-controller.ts +517 -517
  61. package/src/tiles/hover/tile-hover-pane.ts +180 -180
  62. package/src/tiles/list/tile-list-compact-header.ts +86 -86
  63. package/src/tiles/list/tile-list-compact.ts +236 -236
  64. package/src/tiles/list/tile-list.ts +688 -688
  65. package/src/tiles/tile-dispatcher.ts +486 -486
  66. package/src/tiles/tile-display-value-provider.ts +124 -124
  67. package/test/collection-browser.test.ts +2340 -2359
  68. package/test/restoration-state-handler.test.ts +510 -510
  69. package/tsconfig.json +20 -20
  70. package/web-dev-server.config.mjs +30 -30
  71. package/web-test-runner.config.mjs +41 -41
@@ -125,7 +125,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
125
125
  this.manageViewLabel = 'Select items to remove';
126
126
  /** Whether to replace the default sort options with a slot for customization (default: false) */
127
127
  this.enableSortOptionsSlot = false;
128
- /** Whether to display a smart results carousel above the full results */
128
+ /** Whether to expose a slot for a smart results carousel above the full results */
129
129
  this.showSmartResults = false;
130
130
  /**
131
131
  * The maximum number of pages we will load when a privileged user clicks
@@ -358,32 +358,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
358
358
  this.setPlaceholderType();
359
359
  }
360
360
  render() {
361
- return html `
361
+ return html `
362
362
  ${this.showSmartFacetBar && this.placeholderType === null
363
- ? html `<smart-facet-bar
364
- .query=${this.baseQuery}
365
- .aggregations=${this.dataSource.aggregations}
366
- .selectedFacets=${this.selectedFacets}
367
- .collectionTitles=${this.dataSource.collectionTitles}
368
- .filterToggleShown=${!this.mobileView}
369
- .filterToggleActive=${this.facetPaneVisible}
370
- .label=${this.smartFacetBarLabel}
371
- @facetsChanged=${this.facetsChanged}
363
+ ? html `<smart-facet-bar
364
+ .query=${this.baseQuery}
365
+ .aggregations=${this.dataSource.aggregations}
366
+ .selectedFacets=${this.selectedFacets}
367
+ .collectionTitles=${this.dataSource.collectionTitles}
368
+ .filterToggleShown=${!this.mobileView}
369
+ .filterToggleActive=${this.facetPaneVisible}
370
+ .label=${this.smartFacetBarLabel}
371
+ @facetsChanged=${this.facetsChanged}
372
372
  @filtersToggled=${() => {
373
373
  this.facetPaneVisible = !this.facetPaneVisible;
374
374
  this.emitFacetPaneVisibilityChanged();
375
- }}
375
+ }}
376
376
  ></smart-facet-bar>`
377
- : nothing}
378
-
379
- <div
380
- id="content-container"
381
- class=${this.mobileView ? 'mobile' : 'desktop'}
382
- >
377
+ : nothing}
378
+
379
+ <div
380
+ id="content-container"
381
+ class=${this.mobileView ? 'mobile' : 'desktop'}
382
+ >
383
383
  ${this.placeholderType
384
384
  ? this.emptyPlaceholderTemplate
385
- : this.collectionBrowserTemplate}
386
- </div>
385
+ : this.collectionBrowserTemplate}
386
+ </div>
387
387
  `;
388
388
  }
389
389
  /**
@@ -427,23 +427,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
427
427
  */
428
428
  get emptyPlaceholderTemplate() {
429
429
  var _a;
430
- return html `
431
- <empty-placeholder
432
- .placeholderType=${this.placeholderType}
433
- ?isMobileView=${this.mobileView}
434
- ?isCollection=${!!this.withinCollection}
435
- .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
436
- .baseNavigationUrl=${this.baseNavigationUrl}
437
- ></empty-placeholder>
430
+ return html `
431
+ <empty-placeholder
432
+ .placeholderType=${this.placeholderType}
433
+ ?isMobileView=${this.mobileView}
434
+ ?isCollection=${!!this.withinCollection}
435
+ .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
436
+ .baseNavigationUrl=${this.baseNavigationUrl}
437
+ ></empty-placeholder>
438
438
  `;
439
439
  }
440
440
  /**
441
441
  * Top-level template for rendering the left (facets) and right (results) columns.
442
442
  */
443
443
  get collectionBrowserTemplate() {
444
- return html `
445
- <div id="left-column-scroll-sentinel"></div>
446
- ${this.leftColumnTemplate} ${this.rightColumnTemplate}
444
+ return html `
445
+ <div id="left-column-scroll-sentinel"></div>
446
+ ${this.leftColumnTemplate} ${this.rightColumnTemplate}
447
447
  `;
448
448
  }
449
449
  /**
@@ -462,33 +462,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
462
462
  * accordion-style facets.
463
463
  */
464
464
  get mobileLeftColumnTemplate() {
465
- return html `
466
- <div
467
- id="left-column"
468
- class="column${this.isResizeToMobile ? ' preload' : ''}"
469
- >
470
- ${this.facetTopViewSlot} ${this.resultsCountTemplate}
471
- <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
472
- </div>
465
+ return html `
466
+ <div
467
+ id="left-column"
468
+ class="column${this.isResizeToMobile ? ' preload' : ''}"
469
+ >
470
+ ${this.facetTopViewSlot} ${this.resultsCountTemplate}
471
+ <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
472
+ </div>
473
473
  `;
474
474
  }
475
475
  /**
476
476
  * Template for the desktop version of the left column, displaying the facets sidebar.
477
477
  */
478
478
  get desktopLeftColumnTemplate() {
479
- return html `
480
- <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
481
- ${this.facetTopViewSlot}
482
- <div id="facets-header-container">
483
- <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
484
- ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
485
- </div>
486
- <div id="facets-container" aria-labelledby="facets-header">
487
- ${this.facetsTemplate}
488
- <div id="facets-scroll-sentinel"></div>
489
- </div>
490
- <div id="facets-bottom-fade"></div>
491
- </div>
479
+ return html `
480
+ <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
481
+ ${this.facetTopViewSlot}
482
+ <div id="facets-header-container">
483
+ <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
484
+ ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
485
+ </div>
486
+ <div id="facets-container" aria-labelledby="facets-header">
487
+ ${this.facetsTemplate}
488
+ <div id="facets-scroll-sentinel"></div>
489
+ </div>
490
+ <div id="facets-bottom-fade"></div>
491
+ </div>
492
492
  `;
493
493
  }
494
494
  /**
@@ -496,8 +496,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
496
496
  * - mainly used to render userlists
497
497
  */
498
498
  get facetTopViewSlot() {
499
- return html `<div id="facet-top-view">
500
- <slot name="facet-top-slot"></slot>
499
+ return html `<div id="facet-top-view">
500
+ <slot name="facet-top-slot"></slot>
501
501
  </div>`;
502
502
  }
503
503
  /**
@@ -512,15 +512,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
512
512
  const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
513
513
  const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
514
514
  // Added data-testid for Playwright testing
515
- return html `
516
- <div id="results-total" data-testid="results-total">
517
- <span id="big-results-count">
518
- ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
519
- </span>
520
- <span id="big-results-label">
521
- ${shouldShowSearching ? nothing : resultsLabel}
522
- </span>
523
- </div>
515
+ return html `
516
+ <div id="results-total" data-testid="results-total">
517
+ <span id="big-results-count">
518
+ ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
519
+ </span>
520
+ <span id="big-results-label">
521
+ ${shouldShowSearching ? nothing : resultsLabel}
522
+ </span>
523
+ </div>
524
524
  `;
525
525
  }
526
526
  /**
@@ -528,53 +528,50 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
528
528
  * tiles and sort/filter bar are shown.
529
529
  */
530
530
  get rightColumnTemplate() {
531
- var _a;
532
531
  const rightColumnClasses = classMap({
533
532
  column: true,
534
533
  'full-width': !this.facetPaneVisible,
535
534
  'smart-results-spacing': !!this.showSmartResults,
536
535
  });
537
- return html `
538
- <div id="right-column" class=${rightColumnClasses}>
536
+ return html `
537
+ <div id="right-column" class=${rightColumnClasses}>
539
538
  ${this.showSmartResults
540
539
  ? html `<slot name="smart-results"></slot>`
541
- : nothing}
542
- <section id="results">
543
- ${this.showSmartResults
544
- ? html `<h2 class="results-section-heading">
545
- ${(_a = this.resultsHeader) !== null && _a !== void 0 ? _a : msg('All results')}
546
- </h2>`
547
- : nothing}
548
- <div id="cb-top-view">
549
- <slot name="cb-top-slot"></slot>
550
- </div>
540
+ : nothing}
541
+ <section id="results">
542
+ <h2 class="results-section-heading">
543
+ <slot name="results-heading"></slot>
544
+ </h2>
545
+ <div id="cb-top-view">
546
+ <slot name="cb-top-slot"></slot>
547
+ </div>
551
548
  ${this.isManageView
552
549
  ? this.manageBarTemplate
553
- : this.sortFilterBarTemplate}
554
- <slot name="cb-results"></slot>
550
+ : this.sortFilterBarTemplate}
551
+ <slot name="cb-results"></slot>
555
552
  ${this.displayMode === `list-compact` && this.totalResults
556
553
  ? this.listHeaderTemplate
557
- : nothing}
558
- ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
559
- </section>
560
- </div>
554
+ : nothing}
555
+ ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
556
+ </section>
557
+ </div>
561
558
  `;
562
559
  }
563
560
  /**
564
561
  * Template for the infinite scroller widget that contains the result tiles.
565
562
  */
566
563
  get infiniteScrollerTemplate() {
567
- return html `<infinite-scroller
568
- class=${this.infiniteScrollerClasses}
569
- itemCount=${this.placeholderType ? 0 : nothing}
570
- ariaLandmarkLabel="Search results"
571
- .cellProvider=${this}
572
- .placeholderCellTemplate=${this.placeholderCellTemplate}
573
- @scrollThresholdReached=${this.scrollThresholdReached}
574
- @visibleCellsChanged=${this.visibleCellsChanged}
564
+ return html `<infinite-scroller
565
+ class=${this.infiniteScrollerClasses}
566
+ itemCount=${this.placeholderType ? 0 : nothing}
567
+ ariaLandmarkLabel="Search results"
568
+ .cellProvider=${this}
569
+ .placeholderCellTemplate=${this.placeholderCellTemplate}
570
+ @scrollThresholdReached=${this.scrollThresholdReached}
571
+ @visibleCellsChanged=${this.visibleCellsChanged}
575
572
  >${this.displayMode === 'grid'
576
573
  ? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
577
- : nothing}
574
+ : nothing}
578
575
  </infinite-scroller>`;
579
576
  }
580
577
  /**
@@ -615,32 +612,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
615
612
  }
616
613
  // We only show relevance sort if a search query is currently defined
617
614
  sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
618
- return html `
619
- <sort-filter-bar
620
- .defaultSortField=${this.defaultSortField}
621
- .defaultSortDirection=${this.defaultSortDirection}
622
- .defaultViewSort=${defaultViewSort}
623
- .defaultDateSort=${defaultDateSort}
624
- .selectedSort=${this.selectedSort}
625
- .sortDirection=${this.sortDirection}
626
- .sortFieldAvailability=${sortFieldAvailability}
627
- .displayMode=${this.displayMode}
628
- .selectedTitleFilter=${this.selectedTitleFilter}
629
- .selectedCreatorFilter=${this.selectedCreatorFilter}
630
- .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
631
- .resizeObserver=${this.resizeObserver}
632
- .enableSortOptionsSlot=${this.enableSortOptionsSlot}
633
- .suppressDisplayModes=${this.suppressDisplayModes}
634
- @sortChanged=${this.userChangedSort}
635
- @displayModeChanged=${this.displayModeChanged}
636
- @titleLetterChanged=${this.titleLetterSelected}
637
- @creatorLetterChanged=${this.creatorLetterSelected}
638
- >
639
- ${this.tileBlurCheckboxTemplate}
640
- <slot name="sort-options-left" slot="sort-options-left"></slot>
641
- <slot name="sort-options" slot="sort-options"></slot>
642
- <slot name="sort-options-right" slot="sort-options-right"></slot>
643
- </sort-filter-bar>
615
+ return html `
616
+ <sort-filter-bar
617
+ .defaultSortField=${this.defaultSortField}
618
+ .defaultSortDirection=${this.defaultSortDirection}
619
+ .defaultViewSort=${defaultViewSort}
620
+ .defaultDateSort=${defaultDateSort}
621
+ .selectedSort=${this.selectedSort}
622
+ .sortDirection=${this.sortDirection}
623
+ .sortFieldAvailability=${sortFieldAvailability}
624
+ .displayMode=${this.displayMode}
625
+ .selectedTitleFilter=${this.selectedTitleFilter}
626
+ .selectedCreatorFilter=${this.selectedCreatorFilter}
627
+ .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
628
+ .resizeObserver=${this.resizeObserver}
629
+ .enableSortOptionsSlot=${this.enableSortOptionsSlot}
630
+ .suppressDisplayModes=${this.suppressDisplayModes}
631
+ @sortChanged=${this.userChangedSort}
632
+ @displayModeChanged=${this.displayModeChanged}
633
+ @titleLetterChanged=${this.titleLetterSelected}
634
+ @creatorLetterChanged=${this.creatorLetterSelected}
635
+ >
636
+ ${this.tileBlurCheckboxTemplate}
637
+ <slot name="sort-options-left" slot="sort-options-left"></slot>
638
+ <slot name="sort-options" slot="sort-options"></slot>
639
+ <slot name="sort-options-right" slot="sort-options-right"></slot>
640
+ </sort-filter-bar>
644
641
  `;
645
642
  }
646
643
  /**
@@ -652,20 +649,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
652
649
  // Only show the checkbox for @archive.org users
653
650
  if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
654
651
  return nothing;
655
- return html `
656
- <label
657
- id="tile-blur-label"
658
- for="tile-blur-check"
659
- slot="sort-options-right"
660
- >
661
- ${msg('Blurring')}
662
- <input
663
- id="tile-blur-check"
664
- type="checkbox"
665
- ?checked=${!this.shouldSuppressTileBlurring}
666
- @change=${this.tileBlurCheckboxChanged}
667
- />
668
- </label>
652
+ return html `
653
+ <label
654
+ id="tile-blur-label"
655
+ for="tile-blur-check"
656
+ slot="sort-options-right"
657
+ >
658
+ ${msg('Blurring')}
659
+ <input
660
+ id="tile-blur-check"
661
+ type="checkbox"
662
+ ?checked=${!this.shouldSuppressTileBlurring}
663
+ @change=${this.tileBlurCheckboxChanged}
664
+ />
665
+ </label>
669
666
  `;
670
667
  }
671
668
  /**
@@ -691,27 +688,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
691
688
  * showing the management view. This generally replaces the sort bar when present.
692
689
  */
693
690
  get manageBarTemplate() {
694
- return html `
695
- <manage-bar
696
- .label=${this.manageViewLabel}
697
- .modalManager=${this.modalManager}
698
- .selectedItems=${this.dataSource.checkedTileModels}
699
- .manageViewModalMsg=${this.manageViewModalMsg}
700
- showSelectAll
701
- showUnselectAll
702
- ?showItemManageButton=${this.pageContext === 'search'}
703
- ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
704
- @removeItems=${this.handleRemoveItems}
705
- @manageItems=${this.handleManageItems}
706
- @selectAll=${() => this.dataSource.checkAllTiles()}
707
- @unselectAll=${() => this.dataSource.uncheckAllTiles()}
691
+ return html `
692
+ <manage-bar
693
+ .label=${this.manageViewLabel}
694
+ .modalManager=${this.modalManager}
695
+ .selectedItems=${this.dataSource.checkedTileModels}
696
+ .manageViewModalMsg=${this.manageViewModalMsg}
697
+ showSelectAll
698
+ showUnselectAll
699
+ ?showItemManageButton=${this.pageContext === 'search'}
700
+ ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
701
+ @removeItems=${this.handleRemoveItems}
702
+ @manageItems=${this.handleManageItems}
703
+ @selectAll=${() => this.dataSource.checkAllTiles()}
704
+ @unselectAll=${() => this.dataSource.uncheckAllTiles()}
708
705
  @cancel=${() => {
709
706
  this.isManageView = false;
710
707
  this.dataSource.uncheckAllTiles();
711
708
  if (this.searchResultsLoading)
712
709
  this.dataSource.resetPages();
713
- }}
714
- ></manage-bar>
710
+ }}
711
+ ></manage-bar>
715
712
  `;
716
713
  }
717
714
  /**
@@ -959,15 +956,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
959
956
  label: target.open ? 'open' : 'closed',
960
957
  });
961
958
  };
962
- return html `
963
- <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
964
- <summary>
965
- <span class="collapser-icon">${chevronIcon}</span>
966
- <h2>${msg('Filters')}</h2>
967
- ${this.clearFiltersBtnTemplate(true)}
968
- </summary>
969
- ${this.facetsTemplate}
970
- </details>
959
+ return html `
960
+ <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
961
+ <summary>
962
+ <span class="collapser-icon">${chevronIcon}</span>
963
+ <h2>${msg('Filters')}</h2>
964
+ ${this.clearFiltersBtnTemplate(true)}
965
+ </summary>
966
+ ${this.facetsTemplate}
967
+ </details>
971
968
  `;
972
969
  }
973
970
  /**
@@ -977,10 +974,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
977
974
  if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
978
975
  return nothing;
979
976
  if (this.facetLoadStrategy === 'off') {
980
- return html `
981
- <p class="facets-message">
982
- ${msg('Facets are temporarily unavailable.')}
983
- </p>
977
+ return html `
978
+ <p class="facets-message">
979
+ ${msg('Facets are temporarily unavailable.')}
980
+ </p>
984
981
  `;
985
982
  }
986
983
  // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
@@ -989,44 +986,44 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
989
986
  const facetDisplayOrder = shouldUseTvInterface
990
987
  ? tvFacetDisplayOrder
991
988
  : defaultFacetDisplayOrder;
992
- const facets = html `
993
- <collection-facets
994
- .collectionPagePath=${this.collectionPagePath}
995
- .parentCollections=${this.dataSource.parentCollections}
996
- .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
997
- .searchService=${this.searchService}
998
- .featureFeedbackService=${this.featureFeedbackService}
999
- .recaptchaManager=${this.recaptchaManager}
1000
- .resizeObserver=${this.resizeObserver}
1001
- .searchType=${this.searchType}
1002
- .aggregations=${this.dataSource.aggregations}
1003
- .histogramAggregation=${this.dataSource.histogramAggregation}
1004
- .minSelectedDate=${this.minSelectedDate}
1005
- .maxSelectedDate=${this.maxSelectedDate}
1006
- .selectedFacets=${this.selectedFacets}
1007
- .baseNavigationUrl=${this.baseNavigationUrl}
1008
- .collectionTitles=${this.dataSource.collectionTitles}
1009
- .tvChannelAliases=${this.dataSource.tvChannelAliases}
1010
- .showHistogramDatePicker=${this.showHistogramDatePicker}
1011
- .allowExpandingDatePicker=${!this.mobileView}
1012
- .allowDatePickerMonths=${shouldUseTvInterface}
1013
- .contentWidth=${this.contentWidth}
1014
- .query=${this.baseQuery}
1015
- .filterMap=${this.dataSource.filterMap}
1016
- .isManageView=${this.isManageView}
1017
- .modalManager=${this.modalManager}
1018
- .analyticsHandler=${this.analyticsHandler}
1019
- .facetDisplayOrder=${facetDisplayOrder}
1020
- .isTvSearch=${shouldUseTvInterface}
1021
- ?collapsableFacets=${this.mobileView}
1022
- ?facetsLoading=${this.facetsLoading}
1023
- ?histogramAggregationLoading=${this.facetsLoading}
1024
- ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
1025
- @facetClick=${this.facetClickHandler}
1026
- @facetsChanged=${this.facetsChanged}
1027
- @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
1028
- >
1029
- </collection-facets>
989
+ const facets = html `
990
+ <collection-facets
991
+ .collectionPagePath=${this.collectionPagePath}
992
+ .parentCollections=${this.dataSource.parentCollections}
993
+ .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
994
+ .searchService=${this.searchService}
995
+ .featureFeedbackService=${this.featureFeedbackService}
996
+ .recaptchaManager=${this.recaptchaManager}
997
+ .resizeObserver=${this.resizeObserver}
998
+ .searchType=${this.searchType}
999
+ .aggregations=${this.dataSource.aggregations}
1000
+ .histogramAggregation=${this.dataSource.histogramAggregation}
1001
+ .minSelectedDate=${this.minSelectedDate}
1002
+ .maxSelectedDate=${this.maxSelectedDate}
1003
+ .selectedFacets=${this.selectedFacets}
1004
+ .baseNavigationUrl=${this.baseNavigationUrl}
1005
+ .collectionTitles=${this.dataSource.collectionTitles}
1006
+ .tvChannelAliases=${this.dataSource.tvChannelAliases}
1007
+ .showHistogramDatePicker=${this.showHistogramDatePicker}
1008
+ .allowExpandingDatePicker=${!this.mobileView}
1009
+ .allowDatePickerMonths=${shouldUseTvInterface}
1010
+ .contentWidth=${this.contentWidth}
1011
+ .query=${this.baseQuery}
1012
+ .filterMap=${this.dataSource.filterMap}
1013
+ .isManageView=${this.isManageView}
1014
+ .modalManager=${this.modalManager}
1015
+ .analyticsHandler=${this.analyticsHandler}
1016
+ .facetDisplayOrder=${facetDisplayOrder}
1017
+ .isTvSearch=${shouldUseTvInterface}
1018
+ ?collapsableFacets=${this.mobileView}
1019
+ ?facetsLoading=${this.facetsLoading}
1020
+ ?histogramAggregationLoading=${this.facetsLoading}
1021
+ ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
1022
+ @facetClick=${this.facetClickHandler}
1023
+ @facetsChanged=${this.facetsChanged}
1024
+ @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
1025
+ >
1026
+ </collection-facets>
1030
1027
  `;
1031
1028
  // If we are using one of the opt-in facet load strategies, we may need to wrap the
1032
1029
  // desktop view facets in a <details> widget so that patrons can opt into loading them.
@@ -1034,20 +1031,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1034
1031
  const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
1035
1032
  (this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
1036
1033
  if (showDesktopOptInWidget && !this.mobileView) {
1037
- return html `
1038
- <details
1039
- class="desktop-facets-dropdown"
1034
+ return html `
1035
+ <details
1036
+ class="desktop-facets-dropdown"
1040
1037
  @toggle=${(e) => {
1041
1038
  const target = e.target;
1042
1039
  this.collapsibleFacetsVisible = target.open;
1043
- }}
1044
- >
1045
- <summary>
1046
- <span class="collapser-icon">${chevronIcon}</span>
1047
- <h2>${msg('Filters')}</h2>
1048
- </summary>
1049
- ${facets}
1050
- </details>
1040
+ }}
1041
+ >
1042
+ <summary>
1043
+ <span class="collapser-icon">${chevronIcon}</span>
1044
+ <h2>${msg('Filters')}</h2>
1045
+ </summary>
1046
+ ${facets}
1047
+ </details>
1051
1048
  `;
1052
1049
  }
1053
1050
  // Otherwise, just render the facets component bare
@@ -1067,34 +1064,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1067
1064
  mobile,
1068
1065
  });
1069
1066
  const buttonText = mobile ? 'Clear all' : 'Clear all filters';
1070
- return html `
1071
- <div class="clear-filters-btn-row">
1067
+ return html `
1068
+ <div class="clear-filters-btn-row">
1072
1069
  ${mobile
1073
1070
  ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
1074
- : nothing}
1075
- <button class=${buttonClasses} @click=${this.clearFilters}>
1076
- ${buttonText}
1077
- </button>
1078
- </div>
1071
+ : nothing}
1072
+ <button class=${buttonClasses} @click=${this.clearFilters}>
1073
+ ${buttonText}
1074
+ </button>
1075
+ </div>
1079
1076
  `;
1080
1077
  }
1081
1078
  /**
1082
1079
  * Template for the table header content that appears atop the compact list view.
1083
1080
  */
1084
1081
  get listHeaderTemplate() {
1085
- return html `
1086
- <div id="list-header">
1087
- <tile-dispatcher
1088
- .tileDisplayMode=${'list-header'}
1089
- .resizeObserver=${this.resizeObserver}
1090
- .sortParam=${this.sortParam}
1091
- .defaultSortParam=${this.defaultSortParam}
1092
- .mobileBreakpoint=${this.mobileBreakpoint}
1093
- .loggedIn=${this.loggedIn}
1094
- .suppressBlurring=${this.shouldSuppressTileBlurring}
1095
- >
1096
- </tile-dispatcher>
1097
- </div>
1082
+ return html `
1083
+ <div id="list-header">
1084
+ <tile-dispatcher
1085
+ .tileDisplayMode=${'list-header'}
1086
+ .resizeObserver=${this.resizeObserver}
1087
+ .sortParam=${this.sortParam}
1088
+ .defaultSortParam=${this.defaultSortParam}
1089
+ .mobileBreakpoint=${this.mobileBreakpoint}
1090
+ .loggedIn=${this.loggedIn}
1091
+ .suppressBlurring=${this.shouldSuppressTileBlurring}
1092
+ >
1093
+ </tile-dispatcher>
1094
+ </div>
1098
1095
  `;
1099
1096
  }
1100
1097
  /**
@@ -1823,27 +1820,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1823
1820
  const model = this.tileModelAtCellIndex(index);
1824
1821
  if (!model)
1825
1822
  return undefined;
1826
- return html `
1827
- <tile-dispatcher
1828
- .collectionPagePath=${this.collectionPagePath}
1829
- .baseNavigationUrl=${this.baseNavigationUrl}
1830
- .baseImageUrl=${this.baseImageUrl}
1831
- .model=${model}
1832
- .tileDisplayMode=${this.displayMode}
1833
- .resizeObserver=${this.resizeObserver}
1834
- .collectionTitles=${this.dataSource.collectionTitles}
1835
- .sortParam=${this.sortParam}
1836
- .defaultSortParam=${this.defaultSortParam}
1837
- .creatorFilter=${this.selectedCreatorFilter}
1838
- .mobileBreakpoint=${this.mobileBreakpoint}
1839
- .loggedIn=${this.loggedIn}
1840
- .suppressBlurring=${this.shouldSuppressTileBlurring}
1841
- .isManageView=${this.isManageView}
1842
- ?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
1843
- ?enableHoverPane=${true}
1844
- @resultSelected=${(e) => this.resultSelected(e)}
1845
- >
1846
- </tile-dispatcher>
1823
+ return html `
1824
+ <tile-dispatcher
1825
+ .collectionPagePath=${this.collectionPagePath}
1826
+ .baseNavigationUrl=${this.baseNavigationUrl}
1827
+ .baseImageUrl=${this.baseImageUrl}
1828
+ .model=${model}
1829
+ .tileDisplayMode=${this.displayMode}
1830
+ .resizeObserver=${this.resizeObserver}
1831
+ .collectionTitles=${this.dataSource.collectionTitles}
1832
+ .sortParam=${this.sortParam}
1833
+ .defaultSortParam=${this.defaultSortParam}
1834
+ .creatorFilter=${this.selectedCreatorFilter}
1835
+ .mobileBreakpoint=${this.mobileBreakpoint}
1836
+ .loggedIn=${this.loggedIn}
1837
+ .suppressBlurring=${this.shouldSuppressTileBlurring}
1838
+ .isManageView=${this.isManageView}
1839
+ ?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
1840
+ ?enableHoverPane=${true}
1841
+ @resultSelected=${(e) => this.resultSelected(e)}
1842
+ >
1843
+ </tile-dispatcher>
1847
1844
  `;
1848
1845
  }
1849
1846
  /**
@@ -1879,440 +1876,440 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1879
1876
  static get styles() {
1880
1877
  return [
1881
1878
  srOnlyStyle,
1882
- css `
1883
- :host {
1884
- display: block;
1885
- --leftColumnWidth: 18rem;
1886
- --leftColumnPaddingTop: 2rem;
1887
- --leftColumnPaddingRight: 2.5rem;
1888
- }
1889
-
1890
- #facet-top-view {
1891
- display: flex;
1892
- }
1893
-
1894
- /**
1895
- * When page width resizes from desktop to mobile, use this class to
1896
- * disable expand/collapse transition when loading.
1897
- */
1898
- .preload * {
1899
- transition: none !important;
1900
- -webkit-transition: none !important;
1901
- -moz-transition: none !important;
1902
- -ms-transition: none !important;
1903
- -o-transition: none !important;
1904
- }
1905
-
1906
- #content-container {
1907
- display: flex;
1908
- }
1909
-
1910
- empty-placeholder {
1911
- margin-top: var(--placeholderMarginTop, 0);
1912
- }
1913
-
1914
- .collapser-icon {
1915
- display: inline-block;
1916
- }
1917
-
1918
- .collapser-icon svg {
1919
- display: inline-block;
1920
- width: 12px;
1921
- height: 12px;
1922
- transition: transform 0.2s ease-out;
1923
- }
1924
-
1925
- #mobile-filter-collapse {
1926
- width: 100%;
1927
- }
1928
-
1929
- #mobile-filter-collapse > summary {
1930
- cursor: pointer;
1931
- list-style: none;
1932
- }
1933
-
1934
- #mobile-filter-collapse[open] > summary {
1935
- margin-bottom: 10px;
1936
- }
1937
-
1938
- #mobile-filter-collapse h2 {
1939
- display: inline-block;
1940
- margin: 0;
1941
- font-size: 2rem;
1942
- }
1943
-
1944
- #mobile-filter-collapse[open] svg {
1945
- transform: rotate(90deg);
1946
- }
1947
-
1948
- #content-container.mobile {
1949
- display: block;
1950
- }
1951
-
1952
- #right-column {
1953
- flex: 1;
1954
- position: relative;
1955
- min-height: 90vh;
1956
- border-right: 1px solid rgb(232, 232, 232);
1957
- margin-top: var(--rightColumnMarginTop, 0);
1958
- padding-top: 2rem;
1959
- background: #fff;
1960
- }
1961
-
1962
- #left-column:not([hidden]) + #right-column {
1963
- border-left: 1px solid rgb(232, 232, 232);
1964
- }
1965
-
1966
- #right-column.smart-results-spacing {
1967
- padding-top: 0.5rem;
1968
- border-right: none;
1969
- background: transparent;
1970
- min-width: 0;
1971
- }
1972
-
1973
- #results {
1974
- background: #fff;
1975
- padding-left: 1rem;
1976
- padding-right: 1rem;
1977
- }
1978
-
1979
- #right-column.smart-results-spacing #results {
1980
- border-radius: 10px 10px 0px 0px;
1981
- padding-top: 0.5rem;
1982
- margin-top: 1rem;
1983
- }
1984
-
1985
- .mobile #right-column {
1986
- border-left: none;
1987
- }
1988
-
1989
- .mobile #results {
1990
- padding: 5px 5px 0;
1991
- }
1992
-
1993
- #left-column {
1994
- width: var(--leftColumnWidth, 18rem);
1995
- /* Prevents Safari from shrinking col at first draw */
1996
- min-width: var(--leftColumnWidth, 18rem);
1997
- padding-top: var(--leftColumnPaddingTop, 2rem);
1998
- /* Reduced padding by 0.2rem to add the invisible border in the rule below */
1999
- padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
2000
- border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
2001
- z-index: 1;
2002
- }
2003
-
2004
- .desktop #left-column {
2005
- top: 0;
2006
- position: sticky;
2007
- height: calc(100vh - 2rem);
2008
- max-height: calc(100vh - 2rem);
2009
- overflow-x: hidden;
2010
- overflow-y: scroll;
2011
-
2012
- /*
2013
- * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
2014
- * does at least give us a tiny bit of control over width & color.
2015
- */
2016
- scrollbar-width: thin;
2017
- scrollbar-color: transparent transparent;
2018
- }
2019
- .desktop #left-column:hover {
2020
- scrollbar-color: auto;
2021
- }
2022
- .desktop #left-column::-webkit-scrollbar {
2023
- appearance: none;
2024
- width: 6px;
2025
- }
2026
- .desktop #left-column::-webkit-scrollbar-button {
2027
- height: 3px;
2028
- background: transparent;
2029
- }
2030
- .desktop #left-column::-webkit-scrollbar-corner {
2031
- background: transparent;
2032
- }
2033
- .desktop #left-column::-webkit-scrollbar-thumb {
2034
- border-radius: 4px;
2035
- }
2036
- .desktop #left-column:hover::-webkit-scrollbar-thumb {
2037
- background: rgba(0, 0, 0, 0.15);
2038
- }
2039
- .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
2040
- background: rgba(0, 0, 0, 0.2);
2041
- }
2042
- .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
2043
- background: rgba(0, 0, 0, 0.3);
2044
- }
2045
-
2046
- #facets-bottom-fade {
2047
- background: linear-gradient(
2048
- to bottom,
2049
- #f5f5f700 0%,
2050
- #f5f5f7c0 50%,
2051
- #f5f5f7 80%,
2052
- #f5f5f7 100%
2053
- );
2054
- position: fixed;
2055
- bottom: 0;
2056
- height: 50px;
2057
- /* Wide enough to cover the content, but leave the scrollbar uncovered */
2058
- width: calc(
2059
- var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
2060
- );
2061
- z-index: 2;
2062
- pointer-events: none;
2063
- transition: height 0.1s ease;
2064
- }
2065
- #facets-bottom-fade.hidden {
2066
- height: 0;
2067
- }
2068
-
2069
- .facets-message {
2070
- font-size: 1.4rem;
2071
- }
2072
-
2073
- .desktop-facets-dropdown > summary {
2074
- cursor: pointer;
2075
- list-style: none;
2076
- }
2077
-
2078
- .desktop-facets-dropdown h2 {
2079
- display: inline-block;
2080
- margin: 0;
2081
- font-size: 1.6rem;
2082
- }
2083
-
2084
- .desktop-facets-dropdown[open] > summary {
2085
- margin-bottom: 10px;
2086
- }
2087
-
2088
- .desktop-facets-dropdown[open] svg {
2089
- transform: rotate(90deg);
2090
- }
2091
-
2092
- .desktop #left-column-scroll-sentinel {
2093
- width: 1px;
2094
- height: 100vh;
2095
- background: transparent;
2096
- }
2097
-
2098
- .desktop #facets-scroll-sentinel {
2099
- width: 1px;
2100
- height: 1px;
2101
- background: transparent;
2102
- }
2103
-
2104
- #facets-header-container {
2105
- display: flex;
2106
- justify-content: space-between;
2107
- align-items: flex-start;
2108
- clear: both;
2109
- }
2110
-
2111
- .desktop #facets-header-container {
2112
- flex-wrap: wrap;
2113
- }
2114
-
2115
- .mobile #left-column {
2116
- width: 100%;
2117
- min-width: 0;
2118
- padding: 5px 0;
2119
- border: 0;
2120
- }
2121
-
2122
- .clear-filters-btn-row {
2123
- display: inline-block;
2124
- }
2125
-
2126
- .desktop .clear-filters-btn-row {
2127
- width: 100%;
2128
- }
2129
-
2130
- .clear-filters-btn {
2131
- display: inline-block;
2132
- appearance: none;
2133
- margin: 0;
2134
- padding: 0;
2135
- border: 0;
2136
- background: none;
2137
- color: var(--ia-theme-link-color);
2138
- font-size: 1.4rem;
2139
- font-family: inherit;
2140
- cursor: pointer;
2141
- }
2142
-
2143
- .clear-filters-btn:hover {
2144
- text-decoration: underline;
2145
- }
2146
-
2147
- .clear-filters-btn-separator {
2148
- display: inline-block;
2149
- margin-left: 5px;
2150
- border-left: 1px solid #2c2c2c;
2151
- font-size: 1.4rem;
2152
- line-height: 1.3rem;
2153
- }
2154
-
2155
- #facets-container {
2156
- position: relative;
2157
- max-height: 0;
2158
- transition: max-height 0.2s ease-in-out;
2159
- z-index: 1;
2160
- margin-top: 5rem;
2161
- padding-bottom: 2rem;
2162
- }
2163
-
2164
- .desktop #facets-container {
2165
- width: 18rem;
2166
- }
2167
-
2168
- .mobile #facets-container {
2169
- overflow: hidden;
2170
- padding-bottom: 0;
2171
- padding-left: 10px;
2172
- padding-right: 10px;
2173
- }
2174
-
2175
- #facets-container.expanded {
2176
- max-height: 2000px;
2177
- }
2178
-
2179
- .results-section-heading {
2180
- margin: 0.5rem 0.3rem;
2181
- font-size: 2rem;
2182
- line-height: 25px;
2183
- }
2184
-
2185
- #results-total {
2186
- display: flex;
2187
- align-items: baseline;
2188
- }
2189
-
2190
- .mobile #results-total {
2191
- position: absolute;
2192
- right: 10px;
2193
- }
2194
-
2195
- #big-results-count {
2196
- font-size: 2.4rem;
2197
- font-weight: 500;
2198
- margin-right: 5px;
2199
- }
2200
-
2201
- .mobile #big-results-count {
2202
- font-size: 2rem;
2203
- }
2204
-
2205
- #big-results-label {
2206
- font-size: 1.4rem;
2207
- font-weight: 200;
2208
- }
2209
-
2210
- #list-header {
2211
- max-height: 4.2rem;
2212
- }
2213
-
2214
- .loading-cover {
2215
- position: absolute;
2216
- top: 0;
2217
- left: 0;
2218
- width: 100%;
2219
- height: 100%;
2220
- display: flex;
2221
- justify-content: center;
2222
- z-index: 1;
2223
- padding-top: 50px;
2224
- }
2225
-
2226
- #tile-blur-label {
2227
- display: flex;
2228
- align-items: center;
2229
- column-gap: 5px;
2230
- }
2231
-
2232
- #tile-blur-check {
2233
- margin: 0 5px 0 0;
2234
- }
2235
-
2236
- circular-activity-indicator {
2237
- width: 30px;
2238
- height: 30px;
2239
- }
2240
-
2241
- sort-filter-bar {
2242
- display: block;
2243
- margin-bottom: 4rem;
2244
- }
2245
-
2246
- infinite-scroller {
2247
- display: block;
2248
- --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
2249
- --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
2250
- }
2251
-
2252
- infinite-scroller.list-compact {
2253
- --infiniteScrollerCellMinWidth: var(
2254
- --collectionBrowserCellMinWidth,
2255
- 100%
2256
- );
2257
- --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
2258
- --infiniteScrollerCellMaxHeight: 56px;
2259
- --infiniteScrollerRowGap: 10px;
2260
- }
2261
-
2262
- infinite-scroller.list-detail {
2263
- --infiniteScrollerCellMinWidth: var(
2264
- --collectionBrowserCellMinWidth,
2265
- 100%
2266
- );
2267
- --infiniteScrollerCellMinHeight: var(
2268
- --collectionBrowserCellMinHeight,
2269
- 5rem
2270
- );
2271
- /*
2272
- 30px in spec, compensating for a -4px margin
2273
- to align title with top of item image
2274
- src/tiles/list/tile-list.ts
2275
- */
2276
- --infiniteScrollerRowGap: 34px;
2277
- }
2278
-
2279
- .mobile infinite-scroller.list-detail {
2280
- --infiniteScrollerRowGap: 24px;
2281
- }
2282
-
2283
- infinite-scroller.grid {
2284
- --infiniteScrollerCellMinWidth: var(
2285
- --collectionBrowserCellMinWidth,
2286
- 17rem
2287
- );
2288
- --infiniteScrollerCellMaxWidth: var(
2289
- --collectionBrowserCellMaxWidth,
2290
- 1fr
2291
- );
2292
- }
2293
-
2294
- /* Allow tiles to shrink a bit further at smaller viewport widths */
2295
- @media screen and (max-width: 880px) {
2296
- infinite-scroller.grid {
2297
- --infiniteScrollerCellMinWidth: var(
2298
- --collectionBrowserCellMinWidth,
2299
- 15rem
2300
- );
2301
- }
2302
- }
2303
- /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
2304
- @media screen and (max-width: 360px) {
2305
- infinite-scroller.grid {
2306
- --infiniteScrollerCellMinWidth: var(
2307
- --collectionBrowserCellMinWidth,
2308
- 12rem
2309
- );
2310
- }
2311
- }
2312
-
2313
- infinite-scroller.hidden {
2314
- display: none;
2315
- }
1879
+ css `
1880
+ :host {
1881
+ display: block;
1882
+ --leftColumnWidth: 18rem;
1883
+ --leftColumnPaddingTop: 2rem;
1884
+ --leftColumnPaddingRight: 2.5rem;
1885
+ }
1886
+
1887
+ #facet-top-view {
1888
+ display: flex;
1889
+ }
1890
+
1891
+ /**
1892
+ * When page width resizes from desktop to mobile, use this class to
1893
+ * disable expand/collapse transition when loading.
1894
+ */
1895
+ .preload * {
1896
+ transition: none !important;
1897
+ -webkit-transition: none !important;
1898
+ -moz-transition: none !important;
1899
+ -ms-transition: none !important;
1900
+ -o-transition: none !important;
1901
+ }
1902
+
1903
+ #content-container {
1904
+ display: flex;
1905
+ }
1906
+
1907
+ empty-placeholder {
1908
+ margin-top: var(--placeholderMarginTop, 0);
1909
+ }
1910
+
1911
+ .collapser-icon {
1912
+ display: inline-block;
1913
+ }
1914
+
1915
+ .collapser-icon svg {
1916
+ display: inline-block;
1917
+ width: 12px;
1918
+ height: 12px;
1919
+ transition: transform 0.2s ease-out;
1920
+ }
1921
+
1922
+ #mobile-filter-collapse {
1923
+ width: 100%;
1924
+ }
1925
+
1926
+ #mobile-filter-collapse > summary {
1927
+ cursor: pointer;
1928
+ list-style: none;
1929
+ }
1930
+
1931
+ #mobile-filter-collapse[open] > summary {
1932
+ margin-bottom: 10px;
1933
+ }
1934
+
1935
+ #mobile-filter-collapse h2 {
1936
+ display: inline-block;
1937
+ margin: 0;
1938
+ font-size: 2rem;
1939
+ }
1940
+
1941
+ #mobile-filter-collapse[open] svg {
1942
+ transform: rotate(90deg);
1943
+ }
1944
+
1945
+ #content-container.mobile {
1946
+ display: block;
1947
+ }
1948
+
1949
+ #right-column {
1950
+ flex: 1;
1951
+ position: relative;
1952
+ min-height: 90vh;
1953
+ border-right: 1px solid rgb(232, 232, 232);
1954
+ margin-top: var(--rightColumnMarginTop, 0);
1955
+ padding-top: var(--rightColumnPaddingTop, 2rem);
1956
+ background: #fff;
1957
+ }
1958
+
1959
+ #left-column:not([hidden]) + #right-column {
1960
+ border-left: 1px solid rgb(232, 232, 232);
1961
+ }
1962
+
1963
+ #right-column.smart-results-spacing {
1964
+ padding-top: 0.5rem;
1965
+ border-right: none;
1966
+ background: transparent;
1967
+ min-width: 0;
1968
+ }
1969
+
1970
+ #results {
1971
+ background: #fff;
1972
+ padding-left: 1rem;
1973
+ padding-right: 1rem;
1974
+ }
1975
+
1976
+ #right-column.smart-results-spacing #results {
1977
+ border-radius: 10px 10px 0px 0px;
1978
+ padding-top: 0.5rem;
1979
+ margin-top: 1rem;
1980
+ }
1981
+
1982
+ .mobile #right-column {
1983
+ border-left: none;
1984
+ }
1985
+
1986
+ .mobile #results {
1987
+ padding: 5px 5px 0;
1988
+ }
1989
+
1990
+ #left-column {
1991
+ width: var(--leftColumnWidth, 18rem);
1992
+ /* Prevents Safari from shrinking col at first draw */
1993
+ min-width: var(--leftColumnWidth, 18rem);
1994
+ padding-top: var(--leftColumnPaddingTop, 2rem);
1995
+ /* Reduced padding by 0.2rem to add the invisible border in the rule below */
1996
+ padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
1997
+ border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
1998
+ z-index: 1;
1999
+ }
2000
+
2001
+ .desktop #left-column {
2002
+ top: 0;
2003
+ position: sticky;
2004
+ height: calc(100vh - 2rem);
2005
+ max-height: calc(100vh - 2rem);
2006
+ overflow-x: hidden;
2007
+ overflow-y: scroll;
2008
+
2009
+ /*
2010
+ * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
2011
+ * does at least give us a tiny bit of control over width & color.
2012
+ */
2013
+ scrollbar-width: thin;
2014
+ scrollbar-color: transparent transparent;
2015
+ }
2016
+ .desktop #left-column:hover {
2017
+ scrollbar-color: auto;
2018
+ }
2019
+ .desktop #left-column::-webkit-scrollbar {
2020
+ appearance: none;
2021
+ width: 6px;
2022
+ }
2023
+ .desktop #left-column::-webkit-scrollbar-button {
2024
+ height: 3px;
2025
+ background: transparent;
2026
+ }
2027
+ .desktop #left-column::-webkit-scrollbar-corner {
2028
+ background: transparent;
2029
+ }
2030
+ .desktop #left-column::-webkit-scrollbar-thumb {
2031
+ border-radius: 4px;
2032
+ }
2033
+ .desktop #left-column:hover::-webkit-scrollbar-thumb {
2034
+ background: rgba(0, 0, 0, 0.15);
2035
+ }
2036
+ .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
2037
+ background: rgba(0, 0, 0, 0.2);
2038
+ }
2039
+ .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
2040
+ background: rgba(0, 0, 0, 0.3);
2041
+ }
2042
+
2043
+ #facets-bottom-fade {
2044
+ background: linear-gradient(
2045
+ to bottom,
2046
+ #f5f5f700 0%,
2047
+ #f5f5f7c0 50%,
2048
+ #f5f5f7 80%,
2049
+ #f5f5f7 100%
2050
+ );
2051
+ position: fixed;
2052
+ bottom: 0;
2053
+ height: 50px;
2054
+ /* Wide enough to cover the content, but leave the scrollbar uncovered */
2055
+ width: calc(
2056
+ var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
2057
+ );
2058
+ z-index: 2;
2059
+ pointer-events: none;
2060
+ transition: height 0.1s ease;
2061
+ }
2062
+ #facets-bottom-fade.hidden {
2063
+ height: 0;
2064
+ }
2065
+
2066
+ .facets-message {
2067
+ font-size: 1.4rem;
2068
+ }
2069
+
2070
+ .desktop-facets-dropdown > summary {
2071
+ cursor: pointer;
2072
+ list-style: none;
2073
+ }
2074
+
2075
+ .desktop-facets-dropdown h2 {
2076
+ display: inline-block;
2077
+ margin: 0;
2078
+ font-size: 1.6rem;
2079
+ }
2080
+
2081
+ .desktop-facets-dropdown[open] > summary {
2082
+ margin-bottom: 10px;
2083
+ }
2084
+
2085
+ .desktop-facets-dropdown[open] svg {
2086
+ transform: rotate(90deg);
2087
+ }
2088
+
2089
+ .desktop #left-column-scroll-sentinel {
2090
+ width: 1px;
2091
+ height: 100vh;
2092
+ background: transparent;
2093
+ }
2094
+
2095
+ .desktop #facets-scroll-sentinel {
2096
+ width: 1px;
2097
+ height: 1px;
2098
+ background: transparent;
2099
+ }
2100
+
2101
+ #facets-header-container {
2102
+ display: flex;
2103
+ justify-content: space-between;
2104
+ align-items: flex-start;
2105
+ clear: both;
2106
+ }
2107
+
2108
+ .desktop #facets-header-container {
2109
+ flex-wrap: wrap;
2110
+ }
2111
+
2112
+ .mobile #left-column {
2113
+ width: 100%;
2114
+ min-width: 0;
2115
+ padding: 5px 0;
2116
+ border: 0;
2117
+ }
2118
+
2119
+ .clear-filters-btn-row {
2120
+ display: inline-block;
2121
+ }
2122
+
2123
+ .desktop .clear-filters-btn-row {
2124
+ width: 100%;
2125
+ }
2126
+
2127
+ .clear-filters-btn {
2128
+ display: inline-block;
2129
+ appearance: none;
2130
+ margin: 0;
2131
+ padding: 0;
2132
+ border: 0;
2133
+ background: none;
2134
+ color: var(--ia-theme-link-color);
2135
+ font-size: 1.4rem;
2136
+ font-family: inherit;
2137
+ cursor: pointer;
2138
+ }
2139
+
2140
+ .clear-filters-btn:hover {
2141
+ text-decoration: underline;
2142
+ }
2143
+
2144
+ .clear-filters-btn-separator {
2145
+ display: inline-block;
2146
+ margin-left: 5px;
2147
+ border-left: 1px solid #2c2c2c;
2148
+ font-size: 1.4rem;
2149
+ line-height: 1.3rem;
2150
+ }
2151
+
2152
+ #facets-container {
2153
+ position: relative;
2154
+ max-height: 0;
2155
+ transition: max-height 0.2s ease-in-out;
2156
+ z-index: 1;
2157
+ margin-top: var(--facetsContainerMarginTop, 5rem);
2158
+ padding-bottom: 2rem;
2159
+ }
2160
+
2161
+ .desktop #facets-container {
2162
+ width: 18rem;
2163
+ }
2164
+
2165
+ .mobile #facets-container {
2166
+ overflow: hidden;
2167
+ padding-bottom: 0;
2168
+ padding-left: 10px;
2169
+ padding-right: 10px;
2170
+ }
2171
+
2172
+ #facets-container.expanded {
2173
+ max-height: 2000px;
2174
+ }
2175
+
2176
+ .results-section-heading {
2177
+ margin: 0.5rem 0.3rem;
2178
+ font-size: 2rem;
2179
+ line-height: 25px;
2180
+ }
2181
+
2182
+ #results-total {
2183
+ display: flex;
2184
+ align-items: baseline;
2185
+ }
2186
+
2187
+ .mobile #results-total {
2188
+ position: absolute;
2189
+ right: 10px;
2190
+ }
2191
+
2192
+ #big-results-count {
2193
+ font-size: 2.4rem;
2194
+ font-weight: 500;
2195
+ margin-right: 5px;
2196
+ }
2197
+
2198
+ .mobile #big-results-count {
2199
+ font-size: 2rem;
2200
+ }
2201
+
2202
+ #big-results-label {
2203
+ font-size: 1.4rem;
2204
+ font-weight: 200;
2205
+ }
2206
+
2207
+ #list-header {
2208
+ max-height: 4.2rem;
2209
+ }
2210
+
2211
+ .loading-cover {
2212
+ position: absolute;
2213
+ top: 0;
2214
+ left: 0;
2215
+ width: 100%;
2216
+ height: 100%;
2217
+ display: flex;
2218
+ justify-content: center;
2219
+ z-index: 1;
2220
+ padding-top: 50px;
2221
+ }
2222
+
2223
+ #tile-blur-label {
2224
+ display: flex;
2225
+ align-items: center;
2226
+ column-gap: 5px;
2227
+ }
2228
+
2229
+ #tile-blur-check {
2230
+ margin: 0 5px 0 0;
2231
+ }
2232
+
2233
+ circular-activity-indicator {
2234
+ width: 30px;
2235
+ height: 30px;
2236
+ }
2237
+
2238
+ sort-filter-bar {
2239
+ display: block;
2240
+ margin-bottom: 4rem;
2241
+ }
2242
+
2243
+ infinite-scroller {
2244
+ display: block;
2245
+ --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
2246
+ --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
2247
+ }
2248
+
2249
+ infinite-scroller.list-compact {
2250
+ --infiniteScrollerCellMinWidth: var(
2251
+ --collectionBrowserCellMinWidth,
2252
+ 100%
2253
+ );
2254
+ --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
2255
+ --infiniteScrollerCellMaxHeight: 56px;
2256
+ --infiniteScrollerRowGap: 10px;
2257
+ }
2258
+
2259
+ infinite-scroller.list-detail {
2260
+ --infiniteScrollerCellMinWidth: var(
2261
+ --collectionBrowserCellMinWidth,
2262
+ 100%
2263
+ );
2264
+ --infiniteScrollerCellMinHeight: var(
2265
+ --collectionBrowserCellMinHeight,
2266
+ 5rem
2267
+ );
2268
+ /*
2269
+ 30px in spec, compensating for a -4px margin
2270
+ to align title with top of item image
2271
+ src/tiles/list/tile-list.ts
2272
+ */
2273
+ --infiniteScrollerRowGap: 34px;
2274
+ }
2275
+
2276
+ .mobile infinite-scroller.list-detail {
2277
+ --infiniteScrollerRowGap: 24px;
2278
+ }
2279
+
2280
+ infinite-scroller.grid {
2281
+ --infiniteScrollerCellMinWidth: var(
2282
+ --collectionBrowserCellMinWidth,
2283
+ 17rem
2284
+ );
2285
+ --infiniteScrollerCellMaxWidth: var(
2286
+ --collectionBrowserCellMaxWidth,
2287
+ 1fr
2288
+ );
2289
+ }
2290
+
2291
+ /* Allow tiles to shrink a bit further at smaller viewport widths */
2292
+ @media screen and (max-width: 880px) {
2293
+ infinite-scroller.grid {
2294
+ --infiniteScrollerCellMinWidth: var(
2295
+ --collectionBrowserCellMinWidth,
2296
+ 15rem
2297
+ );
2298
+ }
2299
+ }
2300
+ /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
2301
+ @media screen and (max-width: 360px) {
2302
+ infinite-scroller.grid {
2303
+ --infiniteScrollerCellMinWidth: var(
2304
+ --collectionBrowserCellMinWidth,
2305
+ 12rem
2306
+ );
2307
+ }
2308
+ }
2309
+
2310
+ infinite-scroller.hidden {
2311
+ display: none;
2312
+ }
2316
2313
  `,
2317
2314
  ];
2318
2315
  }
@@ -2470,9 +2467,6 @@ __decorate([
2470
2467
  __decorate([
2471
2468
  property({ type: Boolean, reflect: true })
2472
2469
  ], CollectionBrowser.prototype, "showSmartResults", void 0);
2473
- __decorate([
2474
- property({ type: String })
2475
- ], CollectionBrowser.prototype, "resultsHeader", void 0);
2476
2470
  __decorate([
2477
2471
  property({ type: Number })
2478
2472
  ], CollectionBrowser.prototype, "maxPagesToManage", void 0);