@internetarchive/collection-browser 0.1.7 → 0.1.8-alpha1

package/README.md

@@ -1,4 +1,5 @@
-![Build Status](https://github.com/internetarchive/iaux-collection-browser/actions/workflows/ci.yml/badge.svg)
+![Build Status](https://github.com/internetarchive/iaux-collection-browser/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-collection-browser/branch/main/graph/badge.svg?token=CLWEGO4RMQ)](https://codecov.io/gh/internetarchive/iaux-collection-browser)
+
 
 # Internet Archive Collection Browser
 
@@ -15,9 +16,10 @@ import '@internetarchive/collection-browser';
 
 ## Local Demo with `web-dev-server`
 ```bash
+yarn install
 yarn start
 ```
-To run a local development server that serves the basic demo located in `demo/index.html`
+To run a local development server that serves the basic demo located in `index.html`
 
 ## Testing with Web Test Runner
 To run the suite of Web Test Runner tests, run
@@ -63,3 +65,14 @@ yarn run format:prettier
 For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
 
 If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Deploying using `gh-pages`
+
+
+```
+yarn run deploy -e <review_app_name>
+```
+
+Review app URL: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
+
+

package/dist/{demo → src}/app-root.d.ts

@@ -11,6 +11,7 @@ export declare class AppRoot extends LitElement {
     private cellHeight;
     private rowGap;
     private colGap;
+    private loggedIn;
     private baseQueryField;
     private pageNumberInput;
     private collectionBrowser;
@@ -20,6 +21,7 @@ export declare class AppRoot extends LitElement {
     private queryUpdated;
     render(): import("lit-html").TemplateResult<1>;
     private baseQueryChanged;
+    private loginChanged;
     private outlineChanged;
     private rowGapChanged;
     private colGapChanged;

package/dist/{demo → src}/app-root.js

@@ -20,6 +20,7 @@ let AppRoot = class AppRoot extends LitElement {
         this.cellHeight = 29;
         this.rowGap = 1.7;
         this.colGap = 1.7;
+        this.loggedIn = false;
     }
     searchPressed(e) {
         var _a, _b;
@@ -100,6 +101,14 @@ let AppRoot = class AppRoot extends LitElement {
                 @click=${this.outlineChanged}
               />
             </div>
+            <div>
+              <label for="simulate-login">Simulate Login:</label>
+              <input
+                type="checkbox"
+                id="simulate-login"
+                @click=${this.loginChanged}
+              />
+            </div>
           </div>
           <div id="cell-gap-control">
             <div>
@@ -140,6 +149,7 @@ let AppRoot = class AppRoot extends LitElement {
           .resizeObserver=${this.resizeObserver}
           .collectionNameCache=${this.collectionNameCache}
           .showHistogramDatePicker=${true}
+          .loggedIn=${this.loggedIn}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
         >
@@ -150,6 +160,15 @@ let AppRoot = class AppRoot extends LitElement {
     baseQueryChanged(e) {
         this.searchQuery = e.detail.baseQuery;
     }
+    loginChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.loggedIn = true;
+        }
+        else {
+            this.loggedIn = false;
+        }
+    }
     outlineChanged(e) {
         const target = e.target;
         if (target.checked) {
@@ -247,6 +266,9 @@ __decorate([
 __decorate([
     state()
 ], AppRoot.prototype, "colGap", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "loggedIn", void 0);
 __decorate([
     query('#base-query-field')
 ], AppRoot.prototype, "baseQueryField", void 0);

package/dist/src/app-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n  `;\n}\n"]}

package/dist/src/assets/img/icons/restricted.d.ts

@@ -0,0 +1 @@
+export declare const restrictedIcon: import("lit-html").TemplateResult<2>;

package/dist/src/assets/img/icons/restricted.js

@@ -0,0 +1,29 @@
+import { svg } from 'lit';
+export const restrictedIcon = svg `
+  <svg
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+    <path
+      d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714z"
+      fill="#000"
+      fill-rule="nonzero"
+    />
+    <path
+      d="m94.0140845 90-44.5547054-79-44.4593791 79z"
+      fill="#f8e71c"
+      fill-rule="nonzero"
+    />
+    <path
+      d="m54 69v8h-8v-8zm0-30v10.2515641l-2.0923567 14.7484359h-3.8184713l-2.089172-14.7484359v-10.2515641z"
+      fill="#000"
+    />
+    </g>
+    <title>Content may be inappropriate</title>
+  </svg>
+`;
+//# sourceMappingURL=restricted.js.map

package/dist/src/assets/img/icons/restricted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restricted.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/restricted.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BhC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const restrictedIcon = svg`\n  <svg\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g\n      fill=\"none\"\n      fill-rule=\"evenodd\"\n    >\n    <path\n      d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714z\"\n      fill=\"#000\"\n      fill-rule=\"nonzero\"\n    />\n    <path\n      d=\"m94.0140845 90-44.5547054-79-44.4593791 79z\"\n      fill=\"#f8e71c\"\n      fill-rule=\"nonzero\"\n    />\n    <path\n      d=\"m54 69v8h-8v-8zm0-30v10.2515641l-2.0923567 14.7484359h-3.8184713l-2.089172-14.7484359v-10.2515641z\"\n      fill=\"#000\"\n    />\n    </g>\n    <title>Content may be inappropriate</title>\n  </svg>\n`;\n"]}

package/dist/src/collection-browser.d.ts

@@ -37,6 +37,11 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     pageContext: CollectionBrowserContext;
     restorationStateHandler: RestorationStateHandlerInterface;
     mobileBreakpoint: number;
+    loggedIn: boolean;
+    /**
+     * If item management UI active
+     */
+    isManageView: boolean;
     /**
      * The page that the consumer wants to load.
      */
@@ -67,6 +72,11 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      * When we've reached the end of the data, stop trying to fetch more
      */
     private endOfDataReached;
+    /**
+     * When page width resizes from desktop to mobile, set true to
+     * disable expand/collapse transition when loading.
+     */
+    private isResizeToMobile;
     private placeholderCellTemplate;
     private tileModelAtCellIndex;
     private get sortFilterQueries();
@@ -97,6 +107,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private titleLetterSelected;
     private creatorLetterSelected;
     private get facetDataLoading();
+    private get mobileFacetsTemplate();
     private get facetsTemplate();
     private get loadingTemplate();
     private get listHeaderTemplate();

package/dist/src/collection-browser.js

@@ -30,6 +30,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             context: this.pageContext,
         });
         this.mobileBreakpoint = 600;
+        this.loggedIn = false;
+        /**
+         * If item management UI active
+         */
+        this.isManageView = false;
         /**
          * The page that the consumer wants to load.
          */
@@ -56,6 +61,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * When we've reached the end of the data, stop trying to fetch more
          */
         this.endOfDataReached = false;
+        /**
+         * When page width resizes from desktop to mobile, set true to
+         * disable expand/collapse transition when loading.
+         */
+        this.isResizeToMobile = false;
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
         /**
          * The results per page so we can paginate.
@@ -129,31 +139,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     render() {
         return html `
       <div id="content-container" class=${this.mobileView ? 'mobile' : ''}>
-        <div id="left-column" class="column">
+        <div
+          id="left-column"
+          class="column${this.isResizeToMobile ? ' preload' : ''}"
+        >
           <div id="mobile-header-container">
-            ${this.mobileView
-            ? html `
-                  <div id="mobile-filter-collapse">
-                    <h1
-                      @click=${() => {
-                this.mobileFacetsVisible = !this.mobileFacetsVisible;
-            }}
-                      @keyup=${() => {
-                this.mobileFacetsVisible = !this.mobileFacetsVisible;
-            }}
-                    >
-                      <span
-                        class="collapser ${this.mobileFacetsVisible
-                ? 'open'
-                : ''}"
-                      >
-                        ${chevronIcon}
-                      </span>
-                      Filters
-                    </h1>
-                  </div>
-                `
-            : nothing}
+            ${this.mobileView ? this.mobileFacetsTemplate : nothing}
             <div id="results-total">
               <span id="big-results-count"
                 >${this.totalResults !== undefined
@@ -255,6 +246,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     get facetDataLoading() {
         return this.facetsLoading || this.fullYearAggregationLoading;
     }
+    get mobileFacetsTemplate() {
+        return html `
+      <div id="mobile-filter-collapse">
+        <h1
+          @click=${() => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+        }}
+          @keyup=${() => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+        }}
+        >
+          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
+            ${chevronIcon}
+          </span>
+          Filters
+        </h1>
+      </div>
+    `;
+    }
     get facetsTemplate() {
         return html `
       ${this.facetsLoading ? this.loadingTemplate : nothing}
@@ -369,8 +381,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     handleResize(entry) {
+        const previousView = this.mobileView;
         if (entry.target === this.contentContainer) {
-            this.mobileView = entry.contentRect.width < 600;
+            this.mobileView = entry.contentRect.width < this.mobileBreakpoint;
+            // If changing from desktop to mobile disable transition
+            if (this.mobileView && !previousView) {
+                this.isResizeToMobile = true;
+            }
         }
     }
     emitBaseQueryChanged() {
@@ -789,30 +806,50 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const datasource = { ...this.dataSource };
         const tiles = [];
         docs === null || docs === void 0 ? void 0 : docs.forEach(doc => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
             if (!doc.identifier)
                 return;
+            let loginRequired = false;
+            let contentWarning = false;
+            // Check if item and item in "modifying" collection, setting above flags
+            if (((_a = doc.collections_raw) === null || _a === void 0 ? void 0 : _a.values.length) &&
+                ((_b = doc.mediatype) === null || _b === void 0 ? void 0 : _b.value) !== 'collection') {
+                for (const collection of (_c = doc.collections_raw) === null || _c === void 0 ? void 0 : _c.values) {
+                    if (collection === 'loggedin') {
+                        loginRequired = true;
+                        if (contentWarning)
+                            break;
+                    }
+                    if (collection === 'no-preview') {
+                        contentWarning = true;
+                        if (loginRequired)
+                            break;
+                    }
+                }
+            }
             tiles.push({
-                averageRating: (_a = doc.avg_rating) === null || _a === void 0 ? void 0 : _a.value,
-                collections: (_c = (_b = doc.collections_raw) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : [],
-                commentCount: (_e = (_d = doc.num_reviews) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 0,
-                creator: (_f = doc.creator) === null || _f === void 0 ? void 0 : _f.value,
-                creators: (_h = (_g = doc.creator) === null || _g === void 0 ? void 0 : _g.values) !== null && _h !== void 0 ? _h : [],
-                dateAdded: (_j = doc.addeddate) === null || _j === void 0 ? void 0 : _j.value,
-                dateArchived: (_k = doc.publicdate) === null || _k === void 0 ? void 0 : _k.value,
-                datePublished: (_l = doc.date) === null || _l === void 0 ? void 0 : _l.value,
-                dateReviewed: (_m = doc.reviewdate) === null || _m === void 0 ? void 0 : _m.value,
-                description: (_o = doc.description) === null || _o === void 0 ? void 0 : _o.value,
-                favCount: (_q = (_p = doc.num_favorites) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 0,
+                averageRating: (_d = doc.avg_rating) === null || _d === void 0 ? void 0 : _d.value,
+                collections: (_f = (_e = doc.collections_raw) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : [],
+                commentCount: (_h = (_g = doc.num_reviews) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : 0,
+                creator: (_j = doc.creator) === null || _j === void 0 ? void 0 : _j.value,
+                creators: (_l = (_k = doc.creator) === null || _k === void 0 ? void 0 : _k.values) !== null && _l !== void 0 ? _l : [],
+                dateAdded: (_m = doc.addeddate) === null || _m === void 0 ? void 0 : _m.value,
+                dateArchived: (_o = doc.publicdate) === null || _o === void 0 ? void 0 : _o.value,
+                datePublished: (_p = doc.date) === null || _p === void 0 ? void 0 : _p.value,
+                dateReviewed: (_q = doc.reviewdate) === null || _q === void 0 ? void 0 : _q.value,
+                description: (_r = doc.description) === null || _r === void 0 ? void 0 : _r.value,
+                favCount: (_t = (_s = doc.num_favorites) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : 0,
                 identifier: doc.identifier,
-                issue: (_r = doc.issue) === null || _r === void 0 ? void 0 : _r.value,
-                itemCount: (_t = (_s = doc.item_count) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : 0,
-                mediatype: (_v = (_u = doc.mediatype) === null || _u === void 0 ? void 0 : _u.value) !== null && _v !== void 0 ? _v : 'data',
-                source: (_w = doc.source) === null || _w === void 0 ? void 0 : _w.value,
-                subjects: (_y = (_x = doc.subject) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [],
-                title: this.etreeTitle((_z = doc.title) === null || _z === void 0 ? void 0 : _z.value, (_0 = doc.mediatype) === null || _0 === void 0 ? void 0 : _0.value, (_1 = doc.collection) === null || _1 === void 0 ? void 0 : _1.values),
-                volume: (_2 = doc.volume) === null || _2 === void 0 ? void 0 : _2.value,
-                viewCount: (_4 = (_3 = doc.downloads) === null || _3 === void 0 ? void 0 : _3.value) !== null && _4 !== void 0 ? _4 : 0,
+                issue: (_u = doc.issue) === null || _u === void 0 ? void 0 : _u.value,
+                itemCount: (_w = (_v = doc.item_count) === null || _v === void 0 ? void 0 : _v.value) !== null && _w !== void 0 ? _w : 0,
+                mediatype: (_y = (_x = doc.mediatype) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : 'data',
+                source: (_z = doc.source) === null || _z === void 0 ? void 0 : _z.value,
+                subjects: (_1 = (_0 = doc.subject) === null || _0 === void 0 ? void 0 : _0.values) !== null && _1 !== void 0 ? _1 : [],
+                title: this.etreeTitle((_2 = doc.title) === null || _2 === void 0 ? void 0 : _2.value, (_3 = doc.mediatype) === null || _3 === void 0 ? void 0 : _3.value, (_4 = doc.collection) === null || _4 === void 0 ? void 0 : _4.values),
+                volume: (_5 = doc.volume) === null || _5 === void 0 ? void 0 : _5.value,
+                viewCount: (_7 = (_6 = doc.downloads) === null || _6 === void 0 ? void 0 : _6.value) !== null && _7 !== void 0 ? _7 : 0,
+                loginRequired,
+                contentWarning,
             });
         });
         datasource[pageNumber] = tiles;
@@ -869,6 +906,18 @@ CollectionBrowser.styles = css `
       display: block;
     }
 
+    /**
+    * When page width resizes from desktop to mobile, use this class to
+    * disable expand/collapse transition when loading.
+    */
+    .preload * {
+      transition: none !important;
+      -webkit-transition: none !important;
+      -moz-transition: none !important;
+      -ms-transition: none !important;
+      -o-transition: none !important;
+    }
+
     #content-container {
       display: flex;
     }
@@ -1115,6 +1164,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], CollectionBrowser.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "isManageView", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "pagesToRender", void 0);