@internetarchive/collection-browser 2.18.3-alpha-webdev5427.0 → 2.18.3-alpha-webdev7768.1

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.
@@ -38,6 +38,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
38
38
  this.defaultSortField = SortField.relevance;
39
39
  this.defaultSortDirection = null;
40
40
  this.pageSize = 50;
41
+ /**
42
+ * Whether to show smart facets (bubbles) along the top of the component
43
+ */
41
44
  this.showSmartFacetBar = false;
42
45
  /**
43
46
  * Whether to show the date picker (above the facets)
@@ -347,30 +350,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
347
350
  this.setPlaceholderType();
348
351
  }
349
352
  render() {
350
- return html `
353
+ return html `
351
354
  ${this.showSmartFacetBar && this.placeholderType === null
352
- ? html `<smart-facet-bar
353
- .query=${this.baseQuery}
354
- .aggregations=${this.dataSource.aggregations}
355
- .selectedFacets=${this.selectedFacets}
356
- .collectionTitles=${this.dataSource.collectionTitles}
357
- .filterToggleActive=${this.facetPaneVisible}
358
- @facetsChanged=${this.facetsChanged}
355
+ ? html `<smart-facet-bar
356
+ .query=${this.baseQuery}
357
+ .aggregations=${this.dataSource.aggregations}
358
+ .selectedFacets=${this.selectedFacets}
359
+ .collectionTitles=${this.dataSource.collectionTitles}
360
+ .filterToggleActive=${this.facetPaneVisible}
361
+ .label=${this.smartFacetBarLabel}
362
+ @facetsChanged=${this.facetsChanged}
359
363
  @filtersToggled=${() => {
360
364
  this.facetPaneVisible = !this.facetPaneVisible;
361
365
  this.emitFacetPaneVisibilityChanged();
362
- }}
366
+ }}
363
367
  ></smart-facet-bar>`
364
- : nothing}
365
-
366
- <div
367
- id="content-container"
368
- class=${this.mobileView ? 'mobile' : 'desktop'}
369
- >
368
+ : nothing}
369
+
370
+ <div
371
+ id="content-container"
372
+ class=${this.mobileView ? 'mobile' : 'desktop'}
373
+ >
370
374
  ${this.placeholderType
371
375
  ? this.emptyPlaceholderTemplate
372
- : this.collectionBrowserTemplate}
373
- </div>
376
+ : this.collectionBrowserTemplate}
377
+ </div>
374
378
  `;
375
379
  }
376
380
  /**
@@ -410,23 +414,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
410
414
  */
411
415
  get emptyPlaceholderTemplate() {
412
416
  var _a;
413
- return html `
414
- <empty-placeholder
415
- .placeholderType=${this.placeholderType}
416
- ?isMobileView=${this.mobileView}
417
- ?isCollection=${!!this.withinCollection}
418
- .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
419
- .baseNavigationUrl=${this.baseNavigationUrl}
420
- ></empty-placeholder>
417
+ return html `
418
+ <empty-placeholder
419
+ .placeholderType=${this.placeholderType}
420
+ ?isMobileView=${this.mobileView}
421
+ ?isCollection=${!!this.withinCollection}
422
+ .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
423
+ .baseNavigationUrl=${this.baseNavigationUrl}
424
+ ></empty-placeholder>
421
425
  `;
422
426
  }
423
427
  /**
424
428
  * Top-level template for rendering the left (facets) and right (results) columns.
425
429
  */
426
430
  get collectionBrowserTemplate() {
427
- return html `
428
- <div id="left-column-scroll-sentinel"></div>
429
- ${this.leftColumnTemplate} ${this.rightColumnTemplate}
431
+ return html `
432
+ <div id="left-column-scroll-sentinel"></div>
433
+ ${this.leftColumnTemplate} ${this.rightColumnTemplate}
430
434
  `;
431
435
  }
432
436
  /**
@@ -445,37 +449,37 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
445
449
  * accordion-style facets.
446
450
  */
447
451
  get mobileLeftColumnTemplate() {
448
- return html `
449
- <div
450
- id="left-column"
451
- class="column${this.isResizeToMobile ? ' preload' : ''}"
452
- >
453
- ${this.facetTopViewSlot} ${this.resultsCountTemplate}
454
- <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
455
- </div>
452
+ return html `
453
+ <div
454
+ id="left-column"
455
+ class="column${this.isResizeToMobile ? ' preload' : ''}"
456
+ >
457
+ ${this.facetTopViewSlot} ${this.resultsCountTemplate}
458
+ <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
459
+ </div>
456
460
  `;
457
461
  }
458
462
  /**
459
463
  * Template for the desktop version of the left column, displaying the facets sidebar.
460
464
  */
461
465
  get desktopLeftColumnTemplate() {
462
- return html `
463
- <div
464
- id="left-column"
465
- class="column"
466
- ?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
467
- >
468
- ${this.facetTopViewSlot}
469
- <div id="facets-header-container">
470
- <h2 id="facets-header" class="sr-only">Filters</h2>
471
- ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
472
- </div>
473
- <div id="facets-container" aria-labelledby="facets-header">
474
- ${this.facetsTemplate}
475
- <div id="facets-scroll-sentinel"></div>
476
- </div>
477
- <div id="facets-bottom-fade"></div>
478
- </div>
466
+ return html `
467
+ <div
468
+ id="left-column"
469
+ class="column"
470
+ ?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
471
+ >
472
+ ${this.facetTopViewSlot}
473
+ <div id="facets-header-container">
474
+ <h2 id="facets-header" class="sr-only">Filters</h2>
475
+ ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
476
+ </div>
477
+ <div id="facets-container" aria-labelledby="facets-header">
478
+ ${this.facetsTemplate}
479
+ <div id="facets-scroll-sentinel"></div>
480
+ </div>
481
+ <div id="facets-bottom-fade"></div>
482
+ </div>
479
483
  `;
480
484
  }
481
485
  /**
@@ -483,8 +487,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
483
487
  * - mainly used to render userlists
484
488
  */
485
489
  get facetTopViewSlot() {
486
- return html `<div id="facet-top-view">
487
- <slot name="facet-top-slot"></slot>
490
+ return html `<div id="facet-top-view">
491
+ <slot name="facet-top-slot"></slot>
488
492
  </div>`;
489
493
  }
490
494
  /**
@@ -499,15 +503,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
499
503
  const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
500
504
  const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
501
505
  // Added data-testid for Playwright testing
502
- return html `
503
- <div id="results-total" data-testid="results-total">
504
- <span id="big-results-count">
505
- ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
506
- </span>
507
- <span id="big-results-label">
508
- ${shouldShowSearching ? nothing : resultsLabel}
509
- </span>
510
- </div>
506
+ return html `
507
+ <div id="results-total" data-testid="results-total">
508
+ <span id="big-results-count">
509
+ ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
510
+ </span>
511
+ <span id="big-results-label">
512
+ ${shouldShowSearching ? nothing : resultsLabel}
513
+ </span>
514
+ </div>
511
515
  `;
512
516
  }
513
517
  /**
@@ -521,47 +525,47 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
521
525
  'full-width': this.showSmartFacetBar && !this.facetPaneVisible,
522
526
  'smart-results-spacing': !!this.showSmartResults,
523
527
  });
524
- return html `
525
- <div id="right-column" class=${rightColumnClasses}>
528
+ return html `
529
+ <div id="right-column" class=${rightColumnClasses}>
526
530
  ${this.showSmartResults
527
531
  ? html `<slot name="smart-results"></slot>`
528
- : nothing}
529
- <section id="results">
532
+ : nothing}
533
+ <section id="results">
530
534
  ${this.showSmartResults
531
- ? html `<h2 class="results-section-heading">
532
- ${(_a = this.resultsHeader) !== null && _a !== void 0 ? _a : msg('All results')}
535
+ ? html `<h2 class="results-section-heading">
536
+ ${(_a = this.resultsHeader) !== null && _a !== void 0 ? _a : msg('All results')}
533
537
  </h2>`
534
- : nothing}
535
- <div id="cb-top-view">
536
- <slot name="cb-top-slot"></slot>
537
- </div>
538
+ : nothing}
539
+ <div id="cb-top-view">
540
+ <slot name="cb-top-slot"></slot>
541
+ </div>
538
542
  ${this.isManageView
539
543
  ? this.manageBarTemplate
540
- : this.sortFilterBarTemplate}
541
- <slot name="cb-results"></slot>
544
+ : this.sortFilterBarTemplate}
545
+ <slot name="cb-results"></slot>
542
546
  ${this.displayMode === `list-compact` && this.totalResults
543
547
  ? this.listHeaderTemplate
544
- : nothing}
545
- ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
546
- </section>
547
- </div>
548
+ : nothing}
549
+ ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
550
+ </section>
551
+ </div>
548
552
  `;
549
553
  }
550
554
  /**
551
555
  * Template for the infinite scroller widget that contains the result tiles.
552
556
  */
553
557
  get infiniteScrollerTemplate() {
554
- return html `<infinite-scroller
555
- class=${this.infiniteScrollerClasses}
556
- itemCount=${this.placeholderType ? 0 : nothing}
557
- ariaLandmarkLabel="Search results"
558
- .cellProvider=${this}
559
- .placeholderCellTemplate=${this.placeholderCellTemplate}
560
- @scrollThresholdReached=${this.scrollThresholdReached}
561
- @visibleCellsChanged=${this.visibleCellsChanged}
558
+ return html `<infinite-scroller
559
+ class=${this.infiniteScrollerClasses}
560
+ itemCount=${this.placeholderType ? 0 : nothing}
561
+ ariaLandmarkLabel="Search results"
562
+ .cellProvider=${this}
563
+ .placeholderCellTemplate=${this.placeholderCellTemplate}
564
+ @scrollThresholdReached=${this.scrollThresholdReached}
565
+ @visibleCellsChanged=${this.visibleCellsChanged}
562
566
  >${this.displayMode === 'grid'
563
567
  ? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
564
- : nothing}
568
+ : nothing}
565
569
  </infinite-scroller>`;
566
570
  }
567
571
  /**
@@ -582,31 +586,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
582
586
  var _a;
583
587
  if (this.suppressSortBar)
584
588
  return nothing;
585
- return html `
586
- <sort-filter-bar
587
- .defaultSortField=${this.defaultSortField}
588
- .defaultSortDirection=${this.defaultSortDirection}
589
- .selectedSort=${this.selectedSort}
590
- .sortDirection=${this.sortDirection}
591
- .showRelevance=${this.isRelevanceSortAvailable}
592
- .showDateFavorited=${(_a = this.withinCollection) === null || _a === void 0 ? void 0 : _a.startsWith('fav-')}
593
- .displayMode=${this.displayMode}
594
- .selectedTitleFilter=${this.selectedTitleFilter}
595
- .selectedCreatorFilter=${this.selectedCreatorFilter}
596
- .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
597
- .resizeObserver=${this.resizeObserver}
598
- .enableSortOptionsSlot=${this.enableSortOptionsSlot}
599
- .suppressDisplayModes=${this.suppressDisplayModes}
600
- @sortChanged=${this.userChangedSort}
601
- @displayModeChanged=${this.displayModeChanged}
602
- @titleLetterChanged=${this.titleLetterSelected}
603
- @creatorLetterChanged=${this.creatorLetterSelected}
604
- >
605
- ${this.tileBlurCheckboxTemplate}
606
- <slot name="sort-options-left" slot="sort-options-left"></slot>
607
- <slot name="sort-options" slot="sort-options"></slot>
608
- <slot name="sort-options-right" slot="sort-options-right"></slot>
609
- </sort-filter-bar>
589
+ return html `
590
+ <sort-filter-bar
591
+ .defaultSortField=${this.defaultSortField}
592
+ .defaultSortDirection=${this.defaultSortDirection}
593
+ .selectedSort=${this.selectedSort}
594
+ .sortDirection=${this.sortDirection}
595
+ .showRelevance=${this.isRelevanceSortAvailable}
596
+ .showDateFavorited=${(_a = this.withinCollection) === null || _a === void 0 ? void 0 : _a.startsWith('fav-')}
597
+ .displayMode=${this.displayMode}
598
+ .selectedTitleFilter=${this.selectedTitleFilter}
599
+ .selectedCreatorFilter=${this.selectedCreatorFilter}
600
+ .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
601
+ .resizeObserver=${this.resizeObserver}
602
+ .enableSortOptionsSlot=${this.enableSortOptionsSlot}
603
+ .suppressDisplayModes=${this.suppressDisplayModes}
604
+ @sortChanged=${this.userChangedSort}
605
+ @displayModeChanged=${this.displayModeChanged}
606
+ @titleLetterChanged=${this.titleLetterSelected}
607
+ @creatorLetterChanged=${this.creatorLetterSelected}
608
+ >
609
+ ${this.tileBlurCheckboxTemplate}
610
+ <slot name="sort-options-left" slot="sort-options-left"></slot>
611
+ <slot name="sort-options" slot="sort-options"></slot>
612
+ <slot name="sort-options-right" slot="sort-options-right"></slot>
613
+ </sort-filter-bar>
610
614
  `;
611
615
  }
612
616
  /**
@@ -618,20 +622,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
618
622
  // Only show the checkbox for @archive.org users
619
623
  if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
620
624
  return nothing;
621
- return html `
622
- <label
623
- id="tile-blur-label"
624
- for="tile-blur-check"
625
- slot="sort-options-right"
626
- >
627
- ${msg('Blurring')}
628
- <input
629
- id="tile-blur-check"
630
- type="checkbox"
631
- ?checked=${!this.shouldSuppressTileBlurring}
632
- @change=${this.tileBlurCheckboxChanged}
633
- />
634
- </label>
625
+ return html `
626
+ <label
627
+ id="tile-blur-label"
628
+ for="tile-blur-check"
629
+ slot="sort-options-right"
630
+ >
631
+ ${msg('Blurring')}
632
+ <input
633
+ id="tile-blur-check"
634
+ type="checkbox"
635
+ ?checked=${!this.shouldSuppressTileBlurring}
636
+ @change=${this.tileBlurCheckboxChanged}
637
+ />
638
+ </label>
635
639
  `;
636
640
  }
637
641
  /**
@@ -642,27 +646,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
642
646
  const manageViewModalMsg = this.profileElement === 'uploads'
643
647
  ? 'Note: it may take a few minutes for these items to stop appearing in your uploads list.'
644
648
  : nothing;
645
- return html `
646
- <manage-bar
647
- .label=${this.manageViewLabel}
648
- .modalManager=${this.modalManager}
649
- .selectedItems=${this.dataSource.checkedTileModels}
650
- .manageViewModalMsg=${manageViewModalMsg}
651
- showSelectAll
652
- showUnselectAll
653
- ?showItemManageButton=${this.pageContext === 'search'}
654
- ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
655
- @removeItems=${this.handleRemoveItems}
656
- @manageItems=${this.handleManageItems}
657
- @selectAll=${() => this.dataSource.checkAllTiles()}
658
- @unselectAll=${() => this.dataSource.uncheckAllTiles()}
649
+ return html `
650
+ <manage-bar
651
+ .label=${this.manageViewLabel}
652
+ .modalManager=${this.modalManager}
653
+ .selectedItems=${this.dataSource.checkedTileModels}
654
+ .manageViewModalMsg=${manageViewModalMsg}
655
+ showSelectAll
656
+ showUnselectAll
657
+ ?showItemManageButton=${this.pageContext === 'search'}
658
+ ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
659
+ @removeItems=${this.handleRemoveItems}
660
+ @manageItems=${this.handleManageItems}
661
+ @selectAll=${() => this.dataSource.checkAllTiles()}
662
+ @unselectAll=${() => this.dataSource.uncheckAllTiles()}
659
663
  @cancel=${() => {
660
664
  this.isManageView = false;
661
665
  this.dataSource.uncheckAllTiles();
662
666
  if (this.searchResultsLoading)
663
667
  this.dataSource.resetPages();
664
- }}
665
- ></manage-bar>
668
+ }}
669
+ ></manage-bar>
666
670
  `;
667
671
  }
668
672
  /**
@@ -910,15 +914,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
910
914
  label: target.open ? 'open' : 'closed',
911
915
  });
912
916
  };
913
- return html `
914
- <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
915
- <summary>
916
- <span class="collapser-icon">${chevronIcon}</span>
917
- <h2>${msg('Filters')}</h2>
918
- ${this.clearFiltersBtnTemplate(true)}
919
- </summary>
920
- ${this.facetsTemplate}
921
- </details>
917
+ return html `
918
+ <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
919
+ <summary>
920
+ <span class="collapser-icon">${chevronIcon}</span>
921
+ <h2>${msg('Filters')}</h2>
922
+ ${this.clearFiltersBtnTemplate(true)}
923
+ </summary>
924
+ ${this.facetsTemplate}
925
+ </details>
922
926
  `;
923
927
  }
924
928
  /**
@@ -928,10 +932,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
928
932
  if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
929
933
  return nothing;
930
934
  if (this.facetLoadStrategy === 'off') {
931
- return html `
932
- <p class="facets-message">
933
- ${msg('Facets are temporarily unavailable.')}
934
- </p>
935
+ return html `
936
+ <p class="facets-message">
937
+ ${msg('Facets are temporarily unavailable.')}
938
+ </p>
935
939
  `;
936
940
  }
937
941
  // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
@@ -940,44 +944,44 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
940
944
  const facetDisplayOrder = shouldUseTvInterface
941
945
  ? tvFacetDisplayOrder
942
946
  : defaultFacetDisplayOrder;
943
- const facets = html `
944
- <collection-facets
945
- .collectionPagePath=${this.collectionPagePath}
946
- .parentCollections=${this.dataSource.parentCollections}
947
- .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
948
- .searchService=${this.searchService}
949
- .featureFeedbackService=${this.featureFeedbackService}
950
- .recaptchaManager=${this.recaptchaManager}
951
- .resizeObserver=${this.resizeObserver}
952
- .searchType=${this.searchType}
953
- .aggregations=${this.dataSource.aggregations}
954
- .histogramAggregation=${this.dataSource.histogramAggregation}
955
- .minSelectedDate=${this.minSelectedDate}
956
- .maxSelectedDate=${this.maxSelectedDate}
957
- .selectedFacets=${this.selectedFacets}
958
- .baseNavigationUrl=${this.baseNavigationUrl}
959
- .collectionTitles=${this.dataSource.collectionTitles}
960
- .tvChannelAliases=${this.dataSource.tvChannelAliases}
961
- .showHistogramDatePicker=${this.showHistogramDatePicker}
962
- .allowExpandingDatePicker=${!this.mobileView}
963
- .allowDatePickerMonths=${shouldUseTvInterface}
964
- .contentWidth=${this.contentWidth}
965
- .query=${this.baseQuery}
966
- .filterMap=${this.dataSource.filterMap}
967
- .isManageView=${this.isManageView}
968
- .modalManager=${this.modalManager}
969
- .analyticsHandler=${this.analyticsHandler}
970
- .facetDisplayOrder=${facetDisplayOrder}
971
- .isTvSearch=${shouldUseTvInterface}
972
- ?collapsableFacets=${this.mobileView}
973
- ?facetsLoading=${this.facetsLoading}
974
- ?histogramAggregationLoading=${this.facetsLoading}
975
- ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
976
- @facetClick=${this.facetClickHandler}
977
- @facetsChanged=${this.facetsChanged}
978
- @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
979
- >
980
- </collection-facets>
947
+ const facets = html `
948
+ <collection-facets
949
+ .collectionPagePath=${this.collectionPagePath}
950
+ .parentCollections=${this.dataSource.parentCollections}
951
+ .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
952
+ .searchService=${this.searchService}
953
+ .featureFeedbackService=${this.featureFeedbackService}
954
+ .recaptchaManager=${this.recaptchaManager}
955
+ .resizeObserver=${this.resizeObserver}
956
+ .searchType=${this.searchType}
957
+ .aggregations=${this.dataSource.aggregations}
958
+ .histogramAggregation=${this.dataSource.histogramAggregation}
959
+ .minSelectedDate=${this.minSelectedDate}
960
+ .maxSelectedDate=${this.maxSelectedDate}
961
+ .selectedFacets=${this.selectedFacets}
962
+ .baseNavigationUrl=${this.baseNavigationUrl}
963
+ .collectionTitles=${this.dataSource.collectionTitles}
964
+ .tvChannelAliases=${this.dataSource.tvChannelAliases}
965
+ .showHistogramDatePicker=${this.showHistogramDatePicker}
966
+ .allowExpandingDatePicker=${!this.mobileView}
967
+ .allowDatePickerMonths=${shouldUseTvInterface}
968
+ .contentWidth=${this.contentWidth}
969
+ .query=${this.baseQuery}
970
+ .filterMap=${this.dataSource.filterMap}
971
+ .isManageView=${this.isManageView}
972
+ .modalManager=${this.modalManager}
973
+ .analyticsHandler=${this.analyticsHandler}
974
+ .facetDisplayOrder=${facetDisplayOrder}
975
+ .isTvSearch=${shouldUseTvInterface}
976
+ ?collapsableFacets=${this.mobileView}
977
+ ?facetsLoading=${this.facetsLoading}
978
+ ?histogramAggregationLoading=${this.facetsLoading}
979
+ ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
980
+ @facetClick=${this.facetClickHandler}
981
+ @facetsChanged=${this.facetsChanged}
982
+ @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
983
+ >
984
+ </collection-facets>
981
985
  `;
982
986
  // If we are using one of the opt-in facet load strategies, we may need to wrap the
983
987
  // desktop view facets in a <details> widget so that patrons can opt into loading them.
@@ -985,20 +989,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
985
989
  const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
986
990
  (this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
987
991
  if (showDesktopOptInWidget && !this.mobileView) {
988
- return html `
989
- <details
990
- class="desktop-facets-dropdown"
992
+ return html `
993
+ <details
994
+ class="desktop-facets-dropdown"
991
995
  @toggle=${(e) => {
992
996
  const target = e.target;
993
997
  this.collapsibleFacetsVisible = target.open;
994
- }}
995
- >
996
- <summary>
997
- <span class="collapser-icon">${chevronIcon}</span>
998
- <h2>${msg('Filters')}</h2>
999
- </summary>
1000
- ${facets}
1001
- </details>
998
+ }}
999
+ >
1000
+ <summary>
1001
+ <span class="collapser-icon">${chevronIcon}</span>
1002
+ <h2>${msg('Filters')}</h2>
1003
+ </summary>
1004
+ ${facets}
1005
+ </details>
1002
1006
  `;
1003
1007
  }
1004
1008
  // Otherwise, just render the facets component bare
@@ -1018,34 +1022,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1018
1022
  mobile,
1019
1023
  });
1020
1024
  const buttonText = mobile ? 'Clear all' : 'Clear all filters';
1021
- return html `
1022
- <div class="clear-filters-btn-row">
1025
+ return html `
1026
+ <div class="clear-filters-btn-row">
1023
1027
  ${mobile
1024
1028
  ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
1025
- : nothing}
1026
- <button class=${buttonClasses} @click=${this.clearFilters}>
1027
- ${buttonText}
1028
- </button>
1029
- </div>
1029
+ : nothing}
1030
+ <button class=${buttonClasses} @click=${this.clearFilters}>
1031
+ ${buttonText}
1032
+ </button>
1033
+ </div>
1030
1034
  `;
1031
1035
  }
1032
1036
  /**
1033
1037
  * Template for the table header content that appears atop the compact list view.
1034
1038
  */
1035
1039
  get listHeaderTemplate() {
1036
- return html `
1037
- <div id="list-header">
1038
- <tile-dispatcher
1039
- .tileDisplayMode=${'list-header'}
1040
- .resizeObserver=${this.resizeObserver}
1041
- .sortParam=${this.sortParam}
1042
- .defaultSortParam=${this.defaultSortParam}
1043
- .mobileBreakpoint=${this.mobileBreakpoint}
1044
- .loggedIn=${this.loggedIn}
1045
- .suppressBlurring=${this.shouldSuppressTileBlurring}
1046
- >
1047
- </tile-dispatcher>
1048
- </div>
1040
+ return html `
1041
+ <div id="list-header">
1042
+ <tile-dispatcher
1043
+ .tileDisplayMode=${'list-header'}
1044
+ .resizeObserver=${this.resizeObserver}
1045
+ .sortParam=${this.sortParam}
1046
+ .defaultSortParam=${this.defaultSortParam}
1047
+ .mobileBreakpoint=${this.mobileBreakpoint}
1048
+ .loggedIn=${this.loggedIn}
1049
+ .suppressBlurring=${this.shouldSuppressTileBlurring}
1050
+ >
1051
+ </tile-dispatcher>
1052
+ </div>
1049
1053
  `;
1050
1054
  }
1051
1055
  /**
@@ -1774,27 +1778,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1774
1778
  const model = this.tileModelAtCellIndex(index);
1775
1779
  if (!model)
1776
1780
  return undefined;
1777
- return html `
1778
- <tile-dispatcher
1779
- .collectionPagePath=${this.collectionPagePath}
1780
- .baseNavigationUrl=${this.baseNavigationUrl}
1781
- .baseImageUrl=${this.baseImageUrl}
1782
- .model=${model}
1783
- .tileDisplayMode=${this.displayMode}
1784
- .resizeObserver=${this.resizeObserver}
1785
- .collectionTitles=${this.dataSource.collectionTitles}
1786
- .sortParam=${this.sortParam}
1787
- .defaultSortParam=${this.defaultSortParam}
1788
- .creatorFilter=${this.selectedCreatorFilter}
1789
- .mobileBreakpoint=${this.mobileBreakpoint}
1790
- .loggedIn=${this.loggedIn}
1791
- .suppressBlurring=${this.shouldSuppressTileBlurring}
1792
- .isManageView=${this.isManageView}
1793
- ?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
1794
- ?enableHoverPane=${true}
1795
- @resultSelected=${(e) => this.resultSelected(e)}
1796
- >
1797
- </tile-dispatcher>
1781
+ return html `
1782
+ <tile-dispatcher
1783
+ .collectionPagePath=${this.collectionPagePath}
1784
+ .baseNavigationUrl=${this.baseNavigationUrl}
1785
+ .baseImageUrl=${this.baseImageUrl}
1786
+ .model=${model}
1787
+ .tileDisplayMode=${this.displayMode}
1788
+ .resizeObserver=${this.resizeObserver}
1789
+ .collectionTitles=${this.dataSource.collectionTitles}
1790
+ .sortParam=${this.sortParam}
1791
+ .defaultSortParam=${this.defaultSortParam}
1792
+ .creatorFilter=${this.selectedCreatorFilter}
1793
+ .mobileBreakpoint=${this.mobileBreakpoint}
1794
+ .loggedIn=${this.loggedIn}
1795
+ .suppressBlurring=${this.shouldSuppressTileBlurring}
1796
+ .isManageView=${this.isManageView}
1797
+ ?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
1798
+ ?enableHoverPane=${true}
1799
+ @resultSelected=${(e) => this.resultSelected(e)}
1800
+ >
1801
+ </tile-dispatcher>
1798
1802
  `;
1799
1803
  }
1800
1804
  /**
@@ -1830,441 +1834,441 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
1830
1834
  static get styles() {
1831
1835
  return [
1832
1836
  srOnlyStyle,
1833
- css `
1834
- :host {
1835
- display: block;
1836
- --leftColumnWidth: 18rem;
1837
- --leftColumnPaddingTop: 2rem;
1838
- --leftColumnPaddingRight: 2.5rem;
1839
- }
1840
-
1841
- #facet-top-view {
1842
- display: flex;
1843
- }
1844
-
1845
- /**
1846
- * When page width resizes from desktop to mobile, use this class to
1847
- * disable expand/collapse transition when loading.
1848
- */
1849
- .preload * {
1850
- transition: none !important;
1851
- -webkit-transition: none !important;
1852
- -moz-transition: none !important;
1853
- -ms-transition: none !important;
1854
- -o-transition: none !important;
1855
- }
1856
-
1857
- #content-container {
1858
- display: flex;
1859
- }
1860
-
1861
- empty-placeholder {
1862
- margin-top: var(--placeholderMarginTop, 0);
1863
- }
1864
-
1865
- .collapser-icon {
1866
- display: inline-block;
1867
- }
1868
-
1869
- .collapser-icon svg {
1870
- display: inline-block;
1871
- width: 12px;
1872
- height: 12px;
1873
- transition: transform 0.2s ease-out;
1874
- }
1875
-
1876
- #mobile-filter-collapse {
1877
- width: 100%;
1878
- }
1879
-
1880
- #mobile-filter-collapse > summary {
1881
- cursor: pointer;
1882
- list-style: none;
1883
- }
1884
-
1885
- #mobile-filter-collapse[open] > summary {
1886
- margin-bottom: 10px;
1887
- }
1888
-
1889
- #mobile-filter-collapse h2 {
1890
- display: inline-block;
1891
- margin: 0;
1892
- font-size: 2rem;
1893
- }
1894
-
1895
- #mobile-filter-collapse[open] svg {
1896
- transform: rotate(90deg);
1897
- }
1898
-
1899
- #content-container.mobile {
1900
- display: block;
1901
- }
1902
-
1903
- #right-column {
1904
- flex: 1;
1905
- position: relative;
1906
- min-height: 90vh;
1907
- border-right: 1px solid rgb(232, 232, 232);
1908
- margin-top: var(--rightColumnMarginTop, 0);
1909
- padding-top: 2rem;
1910
- background: #fff;
1911
- }
1912
-
1913
- #left-column:not([hidden]) + #right-column {
1914
- border-left: 1px solid rgb(232, 232, 232);
1915
- }
1916
-
1917
- #right-column.smart-results-spacing {
1918
- padding-top: 0.5rem;
1919
- border-right: none;
1920
- background: transparent;
1921
- min-width: 0;
1922
- }
1923
-
1924
- #results {
1925
- background: #fff;
1926
- padding-left: 1rem;
1927
- padding-right: 1rem;
1928
- }
1929
-
1930
- #right-column.smart-results-spacing #results {
1931
- border-radius: 10px 10px 0px 0px;
1932
- padding-top: 0.5rem;
1933
- margin-top: 1rem;
1934
- }
1935
-
1936
- .mobile #right-column {
1937
- border-left: none;
1938
- }
1939
-
1940
- .mobile #results {
1941
- padding: 5px 5px 0;
1942
- }
1943
-
1944
- #left-column {
1945
- width: var(--leftColumnWidth, 18rem);
1946
- /* Prevents Safari from shrinking col at first draw */
1947
- min-width: var(--leftColumnWidth, 18rem);
1948
- padding-top: var(--leftColumnPaddingTop, 2rem);
1949
- /* Reduced padding by 0.2rem to add the invisible border in the rule below */
1950
- padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
1951
- border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
1952
- z-index: 1;
1953
- }
1954
-
1955
- .desktop #left-column {
1956
- top: 0;
1957
- position: sticky;
1958
- height: calc(100vh - 2rem);
1959
- max-height: calc(100vh - 2rem);
1960
- overflow-x: hidden;
1961
- overflow-y: scroll;
1962
-
1963
- /*
1964
- * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
1965
- * does at least give us a tiny bit of control over width & color.
1966
- */
1967
- scrollbar-width: thin;
1968
- scrollbar-color: transparent transparent;
1969
- }
1970
- .desktop #left-column:hover {
1971
- scrollbar-color: auto;
1972
- }
1973
- .desktop #left-column::-webkit-scrollbar {
1974
- appearance: none;
1975
- width: 6px;
1976
- }
1977
- .desktop #left-column::-webkit-scrollbar-button {
1978
- height: 3px;
1979
- background: transparent;
1980
- }
1981
- .desktop #left-column::-webkit-scrollbar-corner {
1982
- background: transparent;
1983
- }
1984
- .desktop #left-column::-webkit-scrollbar-thumb {
1985
- border-radius: 4px;
1986
- }
1987
- .desktop #left-column:hover::-webkit-scrollbar-thumb {
1988
- background: rgba(0, 0, 0, 0.15);
1989
- }
1990
- .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
1991
- background: rgba(0, 0, 0, 0.2);
1992
- }
1993
- .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
1994
- background: rgba(0, 0, 0, 0.3);
1995
- }
1996
-
1997
- #facets-bottom-fade {
1998
- background: linear-gradient(
1999
- to bottom,
2000
- #f5f5f700 0%,
2001
- #f5f5f7c0 50%,
2002
- #f5f5f7 80%,
2003
- #f5f5f7 100%
2004
- );
2005
- position: fixed;
2006
- bottom: 0;
2007
- height: 50px;
2008
- /* Wide enough to cover the content, but leave the scrollbar uncovered */
2009
- width: calc(
2010
- var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
2011
- );
2012
- z-index: 2;
2013
- pointer-events: none;
2014
- transition: height 0.1s ease;
2015
- }
2016
- #facets-bottom-fade.hidden {
2017
- height: 0;
2018
- }
2019
-
2020
- .facets-message {
2021
- font-size: 1.4rem;
2022
- }
2023
-
2024
- .desktop-facets-dropdown > summary {
2025
- cursor: pointer;
2026
- list-style: none;
2027
- }
2028
-
2029
- .desktop-facets-dropdown h2 {
2030
- display: inline-block;
2031
- margin: 0;
2032
- font-size: 1.6rem;
2033
- }
2034
-
2035
- .desktop-facets-dropdown[open] > summary {
2036
- margin-bottom: 10px;
2037
- }
2038
-
2039
- .desktop-facets-dropdown[open] svg {
2040
- transform: rotate(90deg);
2041
- }
2042
-
2043
- .desktop #left-column-scroll-sentinel {
2044
- width: 1px;
2045
- height: 100vh;
2046
- background: transparent;
2047
- }
2048
-
2049
- .desktop #facets-scroll-sentinel {
2050
- width: 1px;
2051
- height: 1px;
2052
- background: transparent;
2053
- }
2054
-
2055
- #facets-header-container {
2056
- display: flex;
2057
- justify-content: space-between;
2058
- align-items: flex-start;
2059
- clear: both;
2060
- }
2061
-
2062
- .desktop #facets-header-container {
2063
- flex-wrap: wrap;
2064
- }
2065
-
2066
- .mobile #left-column {
2067
- width: 100%;
2068
- min-width: 0;
2069
- padding: 0;
2070
- border: 0;
2071
- }
2072
-
2073
- .clear-filters-btn-row {
2074
- display: inline-block;
2075
- }
2076
-
2077
- .desktop .clear-filters-btn-row {
2078
- width: 100%;
2079
- }
2080
-
2081
- .clear-filters-btn {
2082
- display: inline-block;
2083
- appearance: none;
2084
- margin: 0;
2085
- padding: 0;
2086
- border: 0;
2087
- background: none;
2088
- color: var(--ia-theme-link-color);
2089
- font-size: 1.4rem;
2090
- font-family: inherit;
2091
- cursor: pointer;
2092
- }
2093
-
2094
- .clear-filters-btn:hover {
2095
- text-decoration: underline;
2096
- }
2097
-
2098
- .clear-filters-btn-separator {
2099
- display: inline-block;
2100
- margin-left: 5px;
2101
- border-left: 1px solid #2c2c2c;
2102
- font-size: 1.4rem;
2103
- line-height: 1.3rem;
2104
- }
2105
-
2106
- #facets-container {
2107
- position: relative;
2108
- max-height: 0;
2109
- transition: max-height 0.2s ease-in-out;
2110
- z-index: 1;
2111
- margin-top: 5rem;
2112
- padding-bottom: 2rem;
2113
- }
2114
-
2115
- .desktop #facets-container {
2116
- width: 18rem;
2117
- }
2118
-
2119
- .mobile #facets-container {
2120
- overflow: hidden;
2121
- padding-bottom: 0;
2122
- padding-left: 10px;
2123
- padding-right: 10px;
2124
- }
2125
-
2126
- #facets-container.expanded {
2127
- max-height: 2000px;
2128
- }
2129
-
2130
- .results-section-heading {
2131
- margin: 0.5rem 0.3rem;
2132
- font-size: 2rem;
2133
- line-height: 25px;
2134
- }
2135
-
2136
- #results-total {
2137
- display: flex;
2138
- align-items: baseline;
2139
- }
2140
-
2141
- .mobile #results-total {
2142
- float: right;
2143
- margin-bottom: 0;
2144
- margin-right: 5px;
2145
- }
2146
-
2147
- #big-results-count {
2148
- font-size: 2.4rem;
2149
- font-weight: 500;
2150
- margin-right: 5px;
2151
- }
2152
-
2153
- .mobile #big-results-count {
2154
- font-size: 2rem;
2155
- }
2156
-
2157
- #big-results-label {
2158
- font-size: 1.4rem;
2159
- font-weight: 200;
2160
- }
2161
-
2162
- #list-header {
2163
- max-height: 4.2rem;
2164
- }
2165
-
2166
- .loading-cover {
2167
- position: absolute;
2168
- top: 0;
2169
- left: 0;
2170
- width: 100%;
2171
- height: 100%;
2172
- display: flex;
2173
- justify-content: center;
2174
- z-index: 1;
2175
- padding-top: 50px;
2176
- }
2177
-
2178
- #tile-blur-label {
2179
- display: flex;
2180
- align-items: center;
2181
- column-gap: 5px;
2182
- }
2183
-
2184
- #tile-blur-check {
2185
- margin: 0 5px 0 0;
2186
- }
2187
-
2188
- circular-activity-indicator {
2189
- width: 30px;
2190
- height: 30px;
2191
- }
2192
-
2193
- sort-filter-bar {
2194
- display: block;
2195
- margin-bottom: 4rem;
2196
- }
2197
-
2198
- infinite-scroller {
2199
- display: block;
2200
- --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
2201
- --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
2202
- }
2203
-
2204
- infinite-scroller.list-compact {
2205
- --infiniteScrollerCellMinWidth: var(
2206
- --collectionBrowserCellMinWidth,
2207
- 100%
2208
- );
2209
- --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
2210
- --infiniteScrollerCellMaxHeight: 56px;
2211
- --infiniteScrollerRowGap: 10px;
2212
- }
2213
-
2214
- infinite-scroller.list-detail {
2215
- --infiniteScrollerCellMinWidth: var(
2216
- --collectionBrowserCellMinWidth,
2217
- 100%
2218
- );
2219
- --infiniteScrollerCellMinHeight: var(
2220
- --collectionBrowserCellMinHeight,
2221
- 5rem
2222
- );
2223
- /*
2224
- 30px in spec, compensating for a -4px margin
2225
- to align title with top of item image
2226
- src/tiles/list/tile-list.ts
2227
- */
2228
- --infiniteScrollerRowGap: 34px;
2229
- }
2230
-
2231
- .mobile infinite-scroller.list-detail {
2232
- --infiniteScrollerRowGap: 24px;
2233
- }
2234
-
2235
- infinite-scroller.grid {
2236
- --infiniteScrollerCellMinWidth: var(
2237
- --collectionBrowserCellMinWidth,
2238
- 17rem
2239
- );
2240
- --infiniteScrollerCellMaxWidth: var(
2241
- --collectionBrowserCellMaxWidth,
2242
- 1fr
2243
- );
2244
- }
2245
-
2246
- /* Allow tiles to shrink a bit further at smaller viewport widths */
2247
- @media screen and (max-width: 880px) {
2248
- infinite-scroller.grid {
2249
- --infiniteScrollerCellMinWidth: var(
2250
- --collectionBrowserCellMinWidth,
2251
- 15rem
2252
- );
2253
- }
2254
- }
2255
- /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
2256
- @media screen and (max-width: 360px) {
2257
- infinite-scroller.grid {
2258
- --infiniteScrollerCellMinWidth: var(
2259
- --collectionBrowserCellMinWidth,
2260
- 12rem
2261
- );
2262
- }
2263
- }
2264
-
2265
- infinite-scroller.hidden {
2266
- display: none;
2267
- }
1837
+ css `
1838
+ :host {
1839
+ display: block;
1840
+ --leftColumnWidth: 18rem;
1841
+ --leftColumnPaddingTop: 2rem;
1842
+ --leftColumnPaddingRight: 2.5rem;
1843
+ }
1844
+
1845
+ #facet-top-view {
1846
+ display: flex;
1847
+ }
1848
+
1849
+ /**
1850
+ * When page width resizes from desktop to mobile, use this class to
1851
+ * disable expand/collapse transition when loading.
1852
+ */
1853
+ .preload * {
1854
+ transition: none !important;
1855
+ -webkit-transition: none !important;
1856
+ -moz-transition: none !important;
1857
+ -ms-transition: none !important;
1858
+ -o-transition: none !important;
1859
+ }
1860
+
1861
+ #content-container {
1862
+ display: flex;
1863
+ }
1864
+
1865
+ empty-placeholder {
1866
+ margin-top: var(--placeholderMarginTop, 0);
1867
+ }
1868
+
1869
+ .collapser-icon {
1870
+ display: inline-block;
1871
+ }
1872
+
1873
+ .collapser-icon svg {
1874
+ display: inline-block;
1875
+ width: 12px;
1876
+ height: 12px;
1877
+ transition: transform 0.2s ease-out;
1878
+ }
1879
+
1880
+ #mobile-filter-collapse {
1881
+ width: 100%;
1882
+ }
1883
+
1884
+ #mobile-filter-collapse > summary {
1885
+ cursor: pointer;
1886
+ list-style: none;
1887
+ }
1888
+
1889
+ #mobile-filter-collapse[open] > summary {
1890
+ margin-bottom: 10px;
1891
+ }
1892
+
1893
+ #mobile-filter-collapse h2 {
1894
+ display: inline-block;
1895
+ margin: 0;
1896
+ font-size: 2rem;
1897
+ }
1898
+
1899
+ #mobile-filter-collapse[open] svg {
1900
+ transform: rotate(90deg);
1901
+ }
1902
+
1903
+ #content-container.mobile {
1904
+ display: block;
1905
+ }
1906
+
1907
+ #right-column {
1908
+ flex: 1;
1909
+ position: relative;
1910
+ min-height: 90vh;
1911
+ border-right: 1px solid rgb(232, 232, 232);
1912
+ margin-top: var(--rightColumnMarginTop, 0);
1913
+ padding-top: 2rem;
1914
+ background: #fff;
1915
+ }
1916
+
1917
+ #left-column:not([hidden]) + #right-column {
1918
+ border-left: 1px solid rgb(232, 232, 232);
1919
+ }
1920
+
1921
+ #right-column.smart-results-spacing {
1922
+ padding-top: 0.5rem;
1923
+ border-right: none;
1924
+ background: transparent;
1925
+ min-width: 0;
1926
+ }
1927
+
1928
+ #results {
1929
+ background: #fff;
1930
+ padding-left: 1rem;
1931
+ padding-right: 1rem;
1932
+ }
1933
+
1934
+ #right-column.smart-results-spacing #results {
1935
+ border-radius: 10px 10px 0px 0px;
1936
+ padding-top: 0.5rem;
1937
+ margin-top: 1rem;
1938
+ }
1939
+
1940
+ .mobile #right-column {
1941
+ border-left: none;
1942
+ }
1943
+
1944
+ .mobile #results {
1945
+ padding: 5px 5px 0;
1946
+ }
1947
+
1948
+ #left-column {
1949
+ width: var(--leftColumnWidth, 18rem);
1950
+ /* Prevents Safari from shrinking col at first draw */
1951
+ min-width: var(--leftColumnWidth, 18rem);
1952
+ padding-top: var(--leftColumnPaddingTop, 2rem);
1953
+ /* Reduced padding by 0.2rem to add the invisible border in the rule below */
1954
+ padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
1955
+ border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
1956
+ z-index: 1;
1957
+ }
1958
+
1959
+ .desktop #left-column {
1960
+ top: 0;
1961
+ position: sticky;
1962
+ height: calc(100vh - 2rem);
1963
+ max-height: calc(100vh - 2rem);
1964
+ overflow-x: hidden;
1965
+ overflow-y: scroll;
1966
+
1967
+ /*
1968
+ * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
1969
+ * does at least give us a tiny bit of control over width & color.
1970
+ */
1971
+ scrollbar-width: thin;
1972
+ scrollbar-color: transparent transparent;
1973
+ }
1974
+ .desktop #left-column:hover {
1975
+ scrollbar-color: auto;
1976
+ }
1977
+ .desktop #left-column::-webkit-scrollbar {
1978
+ appearance: none;
1979
+ width: 6px;
1980
+ }
1981
+ .desktop #left-column::-webkit-scrollbar-button {
1982
+ height: 3px;
1983
+ background: transparent;
1984
+ }
1985
+ .desktop #left-column::-webkit-scrollbar-corner {
1986
+ background: transparent;
1987
+ }
1988
+ .desktop #left-column::-webkit-scrollbar-thumb {
1989
+ border-radius: 4px;
1990
+ }
1991
+ .desktop #left-column:hover::-webkit-scrollbar-thumb {
1992
+ background: rgba(0, 0, 0, 0.15);
1993
+ }
1994
+ .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
1995
+ background: rgba(0, 0, 0, 0.2);
1996
+ }
1997
+ .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
1998
+ background: rgba(0, 0, 0, 0.3);
1999
+ }
2000
+
2001
+ #facets-bottom-fade {
2002
+ background: linear-gradient(
2003
+ to bottom,
2004
+ #f5f5f700 0%,
2005
+ #f5f5f7c0 50%,
2006
+ #f5f5f7 80%,
2007
+ #f5f5f7 100%
2008
+ );
2009
+ position: fixed;
2010
+ bottom: 0;
2011
+ height: 50px;
2012
+ /* Wide enough to cover the content, but leave the scrollbar uncovered */
2013
+ width: calc(
2014
+ var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
2015
+ );
2016
+ z-index: 2;
2017
+ pointer-events: none;
2018
+ transition: height 0.1s ease;
2019
+ }
2020
+ #facets-bottom-fade.hidden {
2021
+ height: 0;
2022
+ }
2023
+
2024
+ .facets-message {
2025
+ font-size: 1.4rem;
2026
+ }
2027
+
2028
+ .desktop-facets-dropdown > summary {
2029
+ cursor: pointer;
2030
+ list-style: none;
2031
+ }
2032
+
2033
+ .desktop-facets-dropdown h2 {
2034
+ display: inline-block;
2035
+ margin: 0;
2036
+ font-size: 1.6rem;
2037
+ }
2038
+
2039
+ .desktop-facets-dropdown[open] > summary {
2040
+ margin-bottom: 10px;
2041
+ }
2042
+
2043
+ .desktop-facets-dropdown[open] svg {
2044
+ transform: rotate(90deg);
2045
+ }
2046
+
2047
+ .desktop #left-column-scroll-sentinel {
2048
+ width: 1px;
2049
+ height: 100vh;
2050
+ background: transparent;
2051
+ }
2052
+
2053
+ .desktop #facets-scroll-sentinel {
2054
+ width: 1px;
2055
+ height: 1px;
2056
+ background: transparent;
2057
+ }
2058
+
2059
+ #facets-header-container {
2060
+ display: flex;
2061
+ justify-content: space-between;
2062
+ align-items: flex-start;
2063
+ clear: both;
2064
+ }
2065
+
2066
+ .desktop #facets-header-container {
2067
+ flex-wrap: wrap;
2068
+ }
2069
+
2070
+ .mobile #left-column {
2071
+ width: 100%;
2072
+ min-width: 0;
2073
+ padding: 0;
2074
+ border: 0;
2075
+ }
2076
+
2077
+ .clear-filters-btn-row {
2078
+ display: inline-block;
2079
+ }
2080
+
2081
+ .desktop .clear-filters-btn-row {
2082
+ width: 100%;
2083
+ }
2084
+
2085
+ .clear-filters-btn {
2086
+ display: inline-block;
2087
+ appearance: none;
2088
+ margin: 0;
2089
+ padding: 0;
2090
+ border: 0;
2091
+ background: none;
2092
+ color: var(--ia-theme-link-color);
2093
+ font-size: 1.4rem;
2094
+ font-family: inherit;
2095
+ cursor: pointer;
2096
+ }
2097
+
2098
+ .clear-filters-btn:hover {
2099
+ text-decoration: underline;
2100
+ }
2101
+
2102
+ .clear-filters-btn-separator {
2103
+ display: inline-block;
2104
+ margin-left: 5px;
2105
+ border-left: 1px solid #2c2c2c;
2106
+ font-size: 1.4rem;
2107
+ line-height: 1.3rem;
2108
+ }
2109
+
2110
+ #facets-container {
2111
+ position: relative;
2112
+ max-height: 0;
2113
+ transition: max-height 0.2s ease-in-out;
2114
+ z-index: 1;
2115
+ margin-top: 5rem;
2116
+ padding-bottom: 2rem;
2117
+ }
2118
+
2119
+ .desktop #facets-container {
2120
+ width: 18rem;
2121
+ }
2122
+
2123
+ .mobile #facets-container {
2124
+ overflow: hidden;
2125
+ padding-bottom: 0;
2126
+ padding-left: 10px;
2127
+ padding-right: 10px;
2128
+ }
2129
+
2130
+ #facets-container.expanded {
2131
+ max-height: 2000px;
2132
+ }
2133
+
2134
+ .results-section-heading {
2135
+ margin: 0.5rem 0.3rem;
2136
+ font-size: 2rem;
2137
+ line-height: 25px;
2138
+ }
2139
+
2140
+ #results-total {
2141
+ display: flex;
2142
+ align-items: baseline;
2143
+ }
2144
+
2145
+ .mobile #results-total {
2146
+ float: right;
2147
+ margin-bottom: 0;
2148
+ margin-right: 5px;
2149
+ }
2150
+
2151
+ #big-results-count {
2152
+ font-size: 2.4rem;
2153
+ font-weight: 500;
2154
+ margin-right: 5px;
2155
+ }
2156
+
2157
+ .mobile #big-results-count {
2158
+ font-size: 2rem;
2159
+ }
2160
+
2161
+ #big-results-label {
2162
+ font-size: 1.4rem;
2163
+ font-weight: 200;
2164
+ }
2165
+
2166
+ #list-header {
2167
+ max-height: 4.2rem;
2168
+ }
2169
+
2170
+ .loading-cover {
2171
+ position: absolute;
2172
+ top: 0;
2173
+ left: 0;
2174
+ width: 100%;
2175
+ height: 100%;
2176
+ display: flex;
2177
+ justify-content: center;
2178
+ z-index: 1;
2179
+ padding-top: 50px;
2180
+ }
2181
+
2182
+ #tile-blur-label {
2183
+ display: flex;
2184
+ align-items: center;
2185
+ column-gap: 5px;
2186
+ }
2187
+
2188
+ #tile-blur-check {
2189
+ margin: 0 5px 0 0;
2190
+ }
2191
+
2192
+ circular-activity-indicator {
2193
+ width: 30px;
2194
+ height: 30px;
2195
+ }
2196
+
2197
+ sort-filter-bar {
2198
+ display: block;
2199
+ margin-bottom: 4rem;
2200
+ }
2201
+
2202
+ infinite-scroller {
2203
+ display: block;
2204
+ --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
2205
+ --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
2206
+ }
2207
+
2208
+ infinite-scroller.list-compact {
2209
+ --infiniteScrollerCellMinWidth: var(
2210
+ --collectionBrowserCellMinWidth,
2211
+ 100%
2212
+ );
2213
+ --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
2214
+ --infiniteScrollerCellMaxHeight: 56px;
2215
+ --infiniteScrollerRowGap: 10px;
2216
+ }
2217
+
2218
+ infinite-scroller.list-detail {
2219
+ --infiniteScrollerCellMinWidth: var(
2220
+ --collectionBrowserCellMinWidth,
2221
+ 100%
2222
+ );
2223
+ --infiniteScrollerCellMinHeight: var(
2224
+ --collectionBrowserCellMinHeight,
2225
+ 5rem
2226
+ );
2227
+ /*
2228
+ 30px in spec, compensating for a -4px margin
2229
+ to align title with top of item image
2230
+ src/tiles/list/tile-list.ts
2231
+ */
2232
+ --infiniteScrollerRowGap: 34px;
2233
+ }
2234
+
2235
+ .mobile infinite-scroller.list-detail {
2236
+ --infiniteScrollerRowGap: 24px;
2237
+ }
2238
+
2239
+ infinite-scroller.grid {
2240
+ --infiniteScrollerCellMinWidth: var(
2241
+ --collectionBrowserCellMinWidth,
2242
+ 17rem
2243
+ );
2244
+ --infiniteScrollerCellMaxWidth: var(
2245
+ --collectionBrowserCellMaxWidth,
2246
+ 1fr
2247
+ );
2248
+ }
2249
+
2250
+ /* Allow tiles to shrink a bit further at smaller viewport widths */
2251
+ @media screen and (max-width: 880px) {
2252
+ infinite-scroller.grid {
2253
+ --infiniteScrollerCellMinWidth: var(
2254
+ --collectionBrowserCellMinWidth,
2255
+ 15rem
2256
+ );
2257
+ }
2258
+ }
2259
+ /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
2260
+ @media screen and (max-width: 360px) {
2261
+ infinite-scroller.grid {
2262
+ --infiniteScrollerCellMinWidth: var(
2263
+ --collectionBrowserCellMinWidth,
2264
+ 12rem
2265
+ );
2266
+ }
2267
+ }
2268
+
2269
+ infinite-scroller.hidden {
2270
+ display: none;
2271
+ }
2268
2272
  `,
2269
2273
  ];
2270
2274
  }
@@ -2338,6 +2342,9 @@ __decorate([
2338
2342
  __decorate([
2339
2343
  property({ type: Boolean })
2340
2344
  ], CollectionBrowser.prototype, "showSmartFacetBar", void 0);
2345
+ __decorate([
2346
+ property({ type: String })
2347
+ ], CollectionBrowser.prototype, "smartFacetBarLabel", void 0);
2341
2348
  __decorate([
2342
2349
  property({ type: Boolean })
2343
2350
  ], CollectionBrowser.prototype, "showHistogramDatePicker", void 0);