@internetarchive/collection-browser 1.14.9-alpha1 → 1.14.9-alpha10

package/dist/src/collection-facets/facet-row.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { FacetOption, FacetBucket, FacetState } from '../models';
+export declare class FacetRow extends LitElement {
+    /** The name of the facet group to which this facet belongs (e.g., "mediatype") */
+    facetType?: FacetOption;
+    /** The facet bucket containing details about the state, count, and key for this row */
+    bucket?: FacetBucket;
+    /** The collection name cache for converting collection identifiers to titles */
+    collectionNameCache?: CollectionNameCacheInterface;
+    render(): TemplateResult<1>;
+    /**
+     * Template for the full facet row, including the positive/negative checks,
+     * the display name, and the count.
+     */
+    private get facetRowTemplate();
+    /**
+     * Handler for whenever this facet is clicked & its state changes
+     */
+    private facetClicked;
+    /**
+     * Emits a `facetClick` event with details about this facet & its current state
+     */
+    private dispatchFacetClickEvent;
+    /**
+     * Returns the composed facet state corresponding to a positive or negative facet's checked state
+     */
+    static getFacetState(checked: boolean, negative: boolean): FacetState;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/collection-facets/facet-row.js

@@ -0,0 +1,245 @@
+var FacetRow_1;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import eyeIcon from '../assets/img/icons/eye';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
+    //
+    // COMPONENT LIFECYCLE METHODS
+    //
+    render() {
+        return html `${this.facetRowTemplate}`;
+    }
+    //
+    // TEMPLATE GETTERS
+    //
+    /**
+     * Template for the full facet row, including the positive/negative checks,
+     * the display name, and the count.
+     */
+    get facetRowTemplate() {
+        var _a, _b;
+        const { bucket, facetType } = this;
+        if (!bucket || !facetType)
+            return nothing;
+        const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
+        const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
+        // For collections, we need to asynchronously load the collection name
+        // so we use the `async-collection-name` widget.
+        // For other facet types, we just have a static value to use.
+        const bucketTextDisplay = facetType !== 'collection'
+            ? html `${(_a = bucket.displayText) !== null && _a !== void 0 ? _a : bucket.key}`
+            : html `<a href="/details/${bucket.key}">
+            <async-collection-name
+              .collectionNameCache=${this.collectionNameCache}
+              .identifier=${bucket.key}
+              placeholder="-"
+            ></async-collection-name>
+          </a> `;
+        const facetHidden = bucket.state === 'hidden';
+        const facetSelected = bucket.state === 'selected';
+        const titleText = `${facetType}: ${(_b = bucket.displayText) !== null && _b !== void 0 ? _b : bucket.key}`;
+        const onlyShowText = facetSelected
+            ? `Show all ${facetType}s`
+            : `Only show ${titleText}`;
+        const hideText = `Hide ${titleText}`;
+        const unhideText = `Unhide ${titleText}`;
+        const showHideText = facetHidden ? unhideText : hideText;
+        const ariaLabel = `${titleText}, ${bucket.count} results`;
+        return html `
+      <div class="facet-row-container">
+        <div class="facet-checkboxes">
+          <input
+            type="checkbox"
+            .name=${facetType}
+            .value=${bucket.key}
+            @click=${(e) => {
+            this.facetClicked(e, false);
+        }}
+            .checked=${facetSelected}
+            class="select-facet-checkbox"
+            title=${onlyShowText}
+            id=${showOnlyCheckboxId}
+          />
+          <input
+            type="checkbox"
+            id=${negativeCheckboxId}
+            .name=${facetType}
+            .value=${bucket.key}
+            @click=${(e) => {
+            this.facetClicked(e, true);
+        }}
+            .checked=${facetHidden}
+            class="hide-facet-checkbox"
+          />
+          <label
+            for=${negativeCheckboxId}
+            class="hide-facet-icon${facetHidden ? ' active' : ''}"
+            title=${showHideText}
+          >
+            <span class="eye">${eyeIcon}</span>
+            <span class="eye-closed">${eyeClosedIcon}</span>
+          </label>
+        </div>
+        <label
+          for=${showOnlyCheckboxId}
+          class="facet-info-display"
+          title=${onlyShowText}
+          aria-label=${ariaLabel}
+        >
+          <div class="facet-title">${bucketTextDisplay}</div>
+          <div class="facet-count">${bucket.count.toLocaleString()}</div>
+        </label>
+      </div>
+    `;
+    }
+    //
+    // EVENT HANDLERS & DISPATCHERS
+    //
+    /**
+     * Handler for whenever this facet is clicked & its state changes
+     */
+    facetClicked(e, negative) {
+        const { bucket, facetType } = this;
+        if (!bucket || !facetType)
+            return;
+        const target = e.target;
+        const { checked } = target;
+        bucket.state = FacetRow_1.getFacetState(checked, negative);
+        this.dispatchFacetClickEvent({
+            facetType,
+            bucket,
+            negative,
+        });
+    }
+    /**
+     * Emits a `facetClick` event with details about this facet & its current state
+     */
+    dispatchFacetClickEvent(detail) {
+        const event = new CustomEvent('facetClick', {
+            detail,
+        });
+        this.dispatchEvent(event);
+    }
+    //
+    // OTHER METHODS
+    //
+    /**
+     * Returns the composed facet state corresponding to a positive or negative facet's checked state
+     */
+    static getFacetState(checked, negative) {
+        let state;
+        if (checked) {
+            state = negative ? 'hidden' : 'selected';
+        }
+        else {
+            state = 'none';
+        }
+        return state;
+    }
+    //
+    // STYLES
+    //
+    static get styles() {
+        const facetRowBorderTop = css `var(--facet-row-border-top, 1px solid transparent)`;
+        const facetRowBorderBottom = css `var(--facet-row-border-bottom, 1px solid transparent)`;
+        return css `
+      async-collection-name {
+        display: contents;
+      }
+      .facet-checkboxes {
+        margin: 0 5px 0 0;
+        display: flex;
+        height: 15px;
+      }
+      .facet-checkboxes input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkboxes input {
+        height: 15px;
+        width: 15px;
+        margin: 0;
+      }
+      .facet-row-container {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+        margin: 2.5px auto;
+        height: auto;
+        border-top: ${facetRowBorderTop};
+        border-bottom: ${facetRowBorderBottom};
+        overflow: hidden;
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+        flex-wrap: wrap;
+      }
+      .facet-title {
+        word-break: break-word;
+        display: inline-block;
+        flex: 1 1 0%;
+      }
+      .facet-count {
+        text-align: right;
+      }
+      .select-facet-checkbox {
+        cursor: pointer;
+        display: inline-block;
+      }
+      .hide-facet-checkbox {
+        display: none;
+      }
+      .hide-facet-icon {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+        opacity: 0.3;
+        display: inline-block;
+      }
+      .hide-facet-icon:hover,
+      .active {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye,
+      .hide-facet-icon .eye-closed {
+        display: none;
+      }
+      .hide-facet-icon:hover .eye-closed,
+      .hide-facet-icon.active .eye-closed {
+        display: inline;
+      }
+      .hide-facet-icon.active .eye {
+        display: none;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], FacetRow.prototype, "facetType", void 0);
+__decorate([
+    property({ type: Object })
+], FacetRow.prototype, "bucket", void 0);
+__decorate([
+    property({ type: Object })
+], FacetRow.prototype, "collectionNameCache", void 0);
+FacetRow = FacetRow_1 = __decorate([
+    customElement('facet-row')
+], FacetRow);
+export { FacetRow };
+//# sourceMappingURL=facet-row.js.map

package/dist/src/collection-facets/facet-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport type {\n  FacetOption,\n  FacetBucket,\n  FacetEventDetails,\n  FacetState,\n} from '../models';\n\n@customElement('facet-row')\nexport class FacetRow extends LitElement {\n  //\n  // UI STATE\n  //\n\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n  @property({ type: String }) facetType?: FacetOption;\n\n  /** The facet bucket containing details about the state, count, and key for this row */\n  @property({ type: Object }) bucket?: FacetBucket;\n\n  /** The collection name cache for converting collection identifiers to titles */\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    return html`${this.facetRowTemplate}`;\n  }\n\n  //\n  // TEMPLATE GETTERS\n  //\n\n  /**\n   * Template for the full facet row, including the positive/negative checks,\n   * the display name, and the count.\n   */\n  private get facetRowTemplate(): TemplateResult | typeof nothing {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return nothing;\n\n    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\n    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\n\n    // For collections, we need to asynchronously load the collection name\n    // so we use the `async-collection-name` widget.\n    // For other facet types, we just have a static value to use.\n    const bucketTextDisplay =\n      facetType !== 'collection'\n        ? html`${bucket.displayText ?? bucket.key}`\n        : html`<a href=\"/details/${bucket.key}\">\n            <async-collection-name\n              .collectionNameCache=${this.collectionNameCache}\n              .identifier=${bucket.key}\n              placeholder=\"-\"\n            ></async-collection-name>\n          </a> `;\n\n    const facetHidden = bucket.state === 'hidden';\n    const facetSelected = bucket.state === 'selected';\n\n    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\n    const onlyShowText = facetSelected\n      ? `Show all ${facetType}s`\n      : `Only show ${titleText}`;\n    const hideText = `Hide ${titleText}`;\n    const unhideText = `Unhide ${titleText}`;\n    const showHideText = facetHidden ? unhideText : hideText;\n    const ariaLabel = `${titleText}, ${bucket.count} results`;\n\n    return html`\n      <div class=\"facet-row-container\">\n        <div class=\"facet-checkboxes\">\n          <input\n            type=\"checkbox\"\n            .name=${facetType}\n            .value=${bucket.key}\n            @click=${(e: Event) => {\n              this.facetClicked(e, false);\n            }}\n            .checked=${facetSelected}\n            class=\"select-facet-checkbox\"\n            title=${onlyShowText}\n            id=${showOnlyCheckboxId}\n          />\n          <input\n            type=\"checkbox\"\n            id=${negativeCheckboxId}\n            .name=${facetType}\n            .value=${bucket.key}\n            @click=${(e: Event) => {\n              this.facetClicked(e, true);\n            }}\n            .checked=${facetHidden}\n            class=\"hide-facet-checkbox\"\n          />\n          <label\n            for=${negativeCheckboxId}\n            class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n            title=${showHideText}\n          >\n            <span class=\"eye\">${eyeIcon}</span>\n            <span class=\"eye-closed\">${eyeClosedIcon}</span>\n          </label>\n        </div>\n        <label\n          for=${showOnlyCheckboxId}\n          class=\"facet-info-display\"\n          title=${onlyShowText}\n          aria-label=${ariaLabel}\n        >\n          <div class=\"facet-title\">${bucketTextDisplay}</div>\n          <div class=\"facet-count\">${bucket.count.toLocaleString()}</div>\n        </label>\n      </div>\n    `;\n  }\n\n  //\n  // EVENT HANDLERS & DISPATCHERS\n  //\n\n  /**\n   * Handler for whenever this facet is clicked & its state changes\n   */\n  private facetClicked(e: Event, negative: boolean) {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return;\n\n    const target = e.target as HTMLInputElement;\n    const { checked } = target;\n    bucket.state = FacetRow.getFacetState(checked, negative);\n\n    this.dispatchFacetClickEvent({\n      facetType,\n      bucket,\n      negative,\n    });\n  }\n\n  /**\n   * Emits a `facetClick` event with details about this facet & its current state\n   */\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  /**\n   * Returns the composed facet state corresponding to a positive or negative facet's checked state\n   */\n  static getFacetState(checked: boolean, negative: boolean): FacetState {\n    let state: FacetState;\n    if (checked) {\n      state = negative ? 'hidden' : 'selected';\n    } else {\n      state = 'none';\n    }\n    return state;\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\n    const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\n\n    return css`\n      async-collection-name {\n        display: contents;\n      }\n      .facet-checkboxes {\n        margin: 0 5px 0 0;\n        display: flex;\n        height: 15px;\n      }\n      .facet-checkboxes input:first-child {\n        margin-right: 5px;\n      }\n      .facet-checkboxes input {\n        height: 15px;\n        width: 15px;\n        margin: 0;\n      }\n      .facet-row-container {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 2.5px auto;\n        height: auto;\n        border-top: ${facetRowBorderTop};\n        border-bottom: ${facetRowBorderBottom};\n        overflow: hidden;\n      }\n      .facet-info-display {\n        display: flex;\n        flex: 1 1 0%;\n        cursor: pointer;\n        flex-wrap: wrap;\n      }\n      .facet-title {\n        word-break: break-word;\n        display: inline-block;\n        flex: 1 1 0%;\n      }\n      .facet-count {\n        text-align: right;\n      }\n      .select-facet-checkbox {\n        cursor: pointer;\n        display: inline-block;\n      }\n      .hide-facet-checkbox {\n        display: none;\n      }\n      .hide-facet-icon {\n        width: 15px;\n        height: 15px;\n        cursor: pointer;\n        opacity: 0.3;\n        display: inline-block;\n      }\n      .hide-facet-icon:hover,\n      .active {\n        opacity: 1;\n      }\n      .hide-facet-icon:hover .eye,\n      .hide-facet-icon .eye-closed {\n        display: none;\n      }\n      .hide-facet-icon:hover .eye-closed,\n      .hide-facet-icon.active .eye-closed {\n        display: inline;\n      }\n      .hide-facet-icon.active .eye {\n        display: none;\n      }\n      .sorting-icon {\n        cursor: pointer;\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/facets-template.d.ts

@@ -5,16 +5,13 @@ export declare class FacetsTemplate extends LitElement {
     facetGroup?: FacetGroup;
     selectedFacets?: SelectedFacets;
     renderOn?: string;
-    collectionPagePath: string;
     collectionNameCache?: CollectionNameCacheInterface;
     private facetClicked;
     private facetChecked;
     private facetUnchecked;
-    /** Returns the composed facet state corresponding to a positive or negative facet's checked state */
-    private getFacetState;
     private dispatchFacetClickEvent;
     private dispatchSelectedFacetsChanged;
-    private getFacetsTemplate;
+    private get facetsTemplate();
     render(): TemplateResult<1>;
     static get styles(): CSSResultGroup;
 }

package/dist/src/collection-facets/facets-template.js

@@ -1,28 +1,24 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import eyeIcon from '../assets/img/icons/eye';
-import eyeClosedIcon from '../assets/img/icons/eye-closed';
 import { getDefaultSelectedFacets, } from '../models';
+import { FacetRow } from './facet-row';
 let FacetsTemplate = class FacetsTemplate extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.collectionPagePath = '/details/';
-    }
-    facetClicked(e, count, negative) {
-        const target = e.target;
-        const { checked, name, value } = target;
-        if (checked) {
-            this.facetChecked(name, value, count, negative);
+    facetClicked(e) {
+        const { bucket, negative } = e.detail;
+        if (bucket.state === 'none') {
+            this.facetUnchecked(bucket);
         }
         else {
-            this.facetUnchecked(name, value);
+            this.facetChecked(bucket, negative);
         }
-        this.dispatchFacetClickEvent(name, this.getFacetState(checked, negative), negative);
+        this.dispatchFacetClickEvent(e.detail);
     }
-    facetChecked(key, value, count, negative) {
-        const { selectedFacets } = this;
+    facetChecked(bucket, negative) {
+        const { facetGroup, selectedFacets } = this;
+        if (!facetGroup)
+            return;
         let newFacets;
         if (selectedFacets) {
             newFacets = {
@@ -32,15 +28,17 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         else {
             newFacets = getDefaultSelectedFacets();
         }
-        newFacets[key][value] = {
-            state: this.getFacetState(true, negative),
-            count,
+        newFacets[facetGroup.key][bucket.key] = {
+            ...bucket,
+            state: FacetRow.getFacetState(true, negative),
         };
         this.selectedFacets = newFacets;
         this.dispatchSelectedFacetsChanged();
     }
-    facetUnchecked(key, value) {
-        const { selectedFacets } = this;
+    facetUnchecked(bucket) {
+        const { facetGroup, selectedFacets } = this;
+        if (!facetGroup)
+            return;
         let newFacets;
         if (selectedFacets) {
             newFacets = {
@@ -50,24 +48,13 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         else {
             newFacets = getDefaultSelectedFacets();
         }
-        delete newFacets[key][value];
+        delete newFacets[facetGroup.key][bucket.key];
         this.selectedFacets = newFacets;
         this.dispatchSelectedFacetsChanged();
     }
-    /** Returns the composed facet state corresponding to a positive or negative facet's checked state */
-    getFacetState(checked, negative) {
-        let state;
-        if (checked) {
-            state = negative ? 'hidden' : 'selected';
-        }
-        else {
-            state = 'none';
-        }
-        return state;
-    }
-    dispatchFacetClickEvent(key, state, negative) {
+    dispatchFacetClickEvent(detail) {
         const event = new CustomEvent('facetClick', {
-            detail: { key, state, negative },
+            detail,
             composed: true,
         });
         this.dispatchEvent(event);
@@ -80,105 +67,39 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         });
         this.dispatchEvent(event);
     }
-    getFacetsTemplate(facetGroup) {
-        let facetsBucket = facetGroup === null || facetGroup === void 0 ? void 0 : facetGroup.buckets;
+    get facetsTemplate() {
+        const { facetGroup } = this;
+        if (!facetGroup)
+            return nothing;
+        let facetBuckets = facetGroup.buckets;
         /**
          * sorting FacetBucket before render page / modal
          * - first, selected items should be at top having sorted
          * - second, suppressed/hidden items should be after selected having sorted
          * - and then no-selected / not suppressed items should render having sorted
          */
-        facetsBucket = [
-            ...facetsBucket
+        facetBuckets = [
+            ...facetBuckets
                 .filter(x => x.state === 'selected')
                 .sort((a, b) => (a.count < b.count ? 1 : -1)),
-            ...facetsBucket
+            ...facetBuckets
                 .filter(x => x.state === 'hidden')
                 .sort((a, b) => (a.count < b.count ? 1 : -1)),
-            ...facetsBucket.filter(x => x.state === 'none'),
+            ...facetBuckets.filter(x => x.state === 'none'),
         ];
         return html `
       <div class="facets-on-${this.renderOn}">
-        ${repeat(facetsBucket, bucket => `${facetGroup.key}:${bucket.key}`, bucket => {
-            var _a, _b;
-            const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;
-            const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;
-            // for collections, we need to asynchronously load the collection name
-            // so we use the `async-collection-name` widget and for the rest, we have
-            // a static value to use
-            const bucketTextDisplay = facetGroup.key !== 'collection'
-                ? html `${(_a = bucket.displayText) !== null && _a !== void 0 ? _a : bucket.key}`
-                : html `<a href="${this.collectionPagePath}${bucket.key}">
-                    <async-collection-name
-                      .collectionNameCache=${this.collectionNameCache}
-                      .identifier=${bucket.key}
-                      placeholder="-"
-                    ></async-collection-name>
-                  </a> `;
-            const facetHidden = bucket.state === 'hidden';
-            const facetSelected = bucket.state === 'selected';
-            const titleText = `${facetGroup.key}: ${(_b = bucket.displayText) !== null && _b !== void 0 ? _b : bucket.key}`;
-            const onlyShowText = facetSelected
-                ? `Show all ${facetGroup.key}s`
-                : `Only show ${titleText}`;
-            const hideText = `Hide ${titleText}`;
-            const unhideText = `Unhide ${titleText}`;
-            const showHideText = facetHidden ? unhideText : hideText;
-            const ariaLabel = `${titleText}, ${bucket.count} results`;
-            return html `
-              <div class="facet-row">
-                <div class="facet-checkbox">
-                  <input
-                    type="checkbox"
-                    .name=${facetGroup.key}
-                    .value=${bucket.key}
-                    @click=${(e) => {
-                this.facetClicked(e, bucket.count, false);
-            }}
-                    .checked=${facetSelected}
-                    class="select-facet-checkbox"
-                    title=${onlyShowText}
-                    id=${showOnlyCheckboxId}
-                  />
-                  <input
-                    type="checkbox"
-                    id=${negativeCheckboxId}
-                    .name=${facetGroup.key}
-                    .value=${bucket.key}
-                    @click=${(e) => {
-                this.facetClicked(e, bucket.count, true);
-            }}
-                    .checked=${facetHidden}
-                    class="hide-facet-checkbox"
-                  />
-                  <label
-                    for=${negativeCheckboxId}
-                    class="hide-facet-icon${facetHidden ? ' active' : ''}"
-                    title=${showHideText}
-                  >
-                    <span class="eye">${eyeIcon}</span>
-                    <span class="eye-closed">${eyeClosedIcon}</span>
-                  </label>
-                </div>
-                <label
-                  for=${showOnlyCheckboxId}
-                  class="facet-info-display"
-                  title=${onlyShowText}
-                  aria-label=${ariaLabel}
-                >
-                  <div class="facet-title">${bucketTextDisplay}</div>
-                  <div class="facet-count">
-                    ${bucket.count.toLocaleString()}
-                  </div>
-                </label>
-              </div>
-            `;
-        })}
+        ${repeat(facetBuckets, bucket => `${facetGroup.key}:${bucket.key}`, bucket => html `<facet-row
+            .facetType=${facetGroup.key}
+            .bucket=${bucket}
+            .collectionNameCache=${this.collectionNameCache}
+            @facetClick=${this.facetClicked}
+          ></facet-row>`)}
       </div>
     `;
     }
     render() {
-        return html `${this.getFacetsTemplate(this.facetGroup)}`;
+        return html `${this.facetsTemplate}`;
     }
     static get styles() {
         return css `
@@ -191,9 +112,7 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         column-gap: 15px;
         column-count: 3;
       }
-      async-collection-name {
-        display: contents;
-      }
+
       ul.facet-list {
         list-style: none;
         margin: 0;
@@ -203,19 +122,7 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         margin-bottom: 0.2rem;
         display: grid;
       }
-      .facet-checkbox {
-        margin: 0 5px 0 0;
-        display: flex;
-        height: 15px;
-      }
-      .facet-checkbox input:first-child {
-        margin-right: 5px;
-      }
-      .facet-checkbox input {
-        height: 15px;
-        width: 15px;
-        margin: 0;
-      }
+
       .facet-row {
         display: flex;
         font-weight: 500;
@@ -226,52 +133,6 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         border-bottom: var(--facet-row-border-bottom, 1px solid transparent);
         overflow: hidden;
       }
-      .facet-info-display {
-        display: flex;
-        flex: 1 1 0%;
-        cursor: pointer;
-        flex-wrap: wrap;
-      }
-      .facet-title {
-        word-break: break-word;
-        display: inline-block;
-        flex: 1 1 0%;
-      }
-      .facet-count {
-        text-align: right;
-      }
-      .select-facet-checkbox {
-        cursor: pointer;
-        display: inline-block;
-      }
-      .hide-facet-checkbox {
-        display: none;
-      }
-      .hide-facet-icon {
-        width: 15px;
-        height: 15px;
-        cursor: pointer;
-        opacity: 0.3;
-        display: inline-block;
-      }
-      .hide-facet-icon:hover,
-      .active {
-        opacity: 1;
-      }
-      .hide-facet-icon:hover .eye,
-      .hide-facet-icon .eye-closed {
-        display: none;
-      }
-      .hide-facet-icon:hover .eye-closed,
-      .hide-facet-icon.active .eye-closed {
-        display: inline;
-      }
-      .hide-facet-icon.active .eye {
-        display: none;
-      }
-      .sorting-icon {
-        cursor: pointer;
-      }
 
       a:link,
       a:visited {
@@ -293,9 +154,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FacetsTemplate.prototype, "renderOn", void 0);
-__decorate([
-    property({ type: String })
-], FacetsTemplate.prototype, "collectionPagePath", void 0);
 __decorate([
     property({ type: Object })
 ], FacetsTemplate.prototype, "collectionNameCache", void 0);