@internetarchive/collection-browser 1.14.9-alpha.2 → 1.14.9-alpha10

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

@@ -1,186 +1,107 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } 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';
-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);
-        }
-        else {
-            this.facetUnchecked(name, value);
-        }
-        this.dispatchFacetClickEvent(name, this.getFacetState(checked, negative), negative);
-    }
-    facetChecked(key, value, count, negative) {
-        const { selectedFacets } = this;
-        let newFacets;
-        if (selectedFacets) {
-            newFacets = {
-                ...selectedFacets,
-            };
-        }
-        else {
-            newFacets = getDefaultSelectedFacets();
-        }
-        newFacets[key][value] = {
-            state: this.getFacetState(true, negative),
-            count,
-        };
-        this.selectedFacets = newFacets;
-        this.dispatchSelectedFacetsChanged();
-    }
-    facetUnchecked(key, value) {
-        const { selectedFacets } = this;
-        let newFacets;
-        if (selectedFacets) {
-            newFacets = {
-                ...selectedFacets,
-            };
-        }
-        else {
-            newFacets = getDefaultSelectedFacets();
-        }
-        delete newFacets[key][value];
-        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) {
-        const event = new CustomEvent('facetClick', {
-            detail: { key, state, negative },
-            composed: true,
-        });
-        this.dispatchEvent(event);
-    }
-    dispatchSelectedFacetsChanged() {
-        const event = new CustomEvent('selectedFacetsChanged', {
-            detail: this.selectedFacets,
-            bubbles: true,
-            composed: true,
-        });
-        this.dispatchEvent(event);
-    }
-    getFacetsTemplate(facetGroup) {
-        let facetsBucket = facetGroup === null || facetGroup === void 0 ? void 0 : 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
-                .filter(x => x.state === 'selected')
-                .sort((a, b) => (a.count < b.count ? 1 : -1)),
-            ...facetsBucket
-                .filter(x => x.state === 'hidden')
-                .sort((a, b) => (a.count < b.count ? 1 : -1)),
-            ...facetsBucket.filter(x => x.state === 'none'),
-        ];
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { getDefaultSelectedFacets, } from '../models';
+import { FacetRow } from './facet-row';
+let FacetsTemplate = class FacetsTemplate extends LitElement {
+    facetClicked(e) {
+        const { bucket, negative } = e.detail;
+        if (bucket.state === 'none') {
+            this.facetUnchecked(bucket);
+        }
+        else {
+            this.facetChecked(bucket, negative);
+        }
+        this.dispatchFacetClickEvent(e.detail);
+    }
+    facetChecked(bucket, negative) {
+        const { facetGroup, selectedFacets } = this;
+        if (!facetGroup)
+            return;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = getDefaultSelectedFacets();
+        }
+        newFacets[facetGroup.key][bucket.key] = {
+            ...bucket,
+            state: FacetRow.getFacetState(true, negative),
+        };
+        this.selectedFacets = newFacets;
+        this.dispatchSelectedFacetsChanged();
+    }
+    facetUnchecked(bucket) {
+        const { facetGroup, selectedFacets } = this;
+        if (!facetGroup)
+            return;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = getDefaultSelectedFacets();
+        }
+        delete newFacets[facetGroup.key][bucket.key];
+        this.selectedFacets = newFacets;
+        this.dispatchSelectedFacetsChanged();
+    }
+    dispatchFacetClickEvent(detail) {
+        const event = new CustomEvent('facetClick', {
+            detail,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    dispatchSelectedFacetsChanged() {
+        const event = new CustomEvent('selectedFacetsChanged', {
+            detail: this.selectedFacets,
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    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
+         */
+        facetBuckets = [
+            ...facetBuckets
+                .filter(x => x.state === 'selected')
+                .sort((a, b) => (a.count < b.count ? 1 : -1)),
+            ...facetBuckets
+                .filter(x => x.state === 'hidden')
+                .sort((a, b) => (a.count < b.count ? 1 : -1)),
+            ...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)}`;
-    }
-    static get styles() {
+    `;
+    }
+    render() {
+        return html `${this.facetsTemplate}`;
+    }
+    static get styles() {
         return css `
       @media (max-width: 560px) {
         .facets-on-modal {
@@ -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 {
@@ -281,26 +142,23 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
       a:hover {
         text-decoration: underline;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], FacetsTemplate.prototype, "facetGroup", void 0);
-__decorate([
-    property({ type: Object })
-], FacetsTemplate.prototype, "selectedFacets", void 0);
-__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);
-FacetsTemplate = __decorate([
-    customElement('facets-template')
-], FacetsTemplate);
-export { FacetsTemplate };
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "facetGroup", void 0);
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: String })
+], FacetsTemplate.prototype, "renderOn", void 0);
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "collectionNameCache", void 0);
+FacetsTemplate = __decorate([
+    customElement('facets-template')
+], FacetsTemplate);
+export { FacetsTemplate };
 //# sourceMappingURL=facets-template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.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 {\n  FacetGroup,\n  FacetOption,\n  FacetBucket,\n  SelectedFacets,\n  getDefaultSelectedFacets,\n  FacetEventDetails,\n  FacetState,\n} from '../models';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) renderOn?: string;\n\n  @property({ type: String }) collectionPagePath: string = '/details/';\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  private facetClicked(e: Event, count: number, negative: boolean) {\n    const target = e.target as HTMLInputElement;\n    const { checked, name, value } = target;\n    if (checked) {\n      this.facetChecked(name as FacetOption, value, count, negative);\n    } else {\n      this.facetUnchecked(name as FacetOption, value);\n    }\n\n    this.dispatchFacetClickEvent(\n      name as FacetOption,\n      this.getFacetState(checked, negative),\n      negative\n    );\n  }\n\n  private facetChecked(\n    key: FacetOption,\n    value: string,\n    count: number,\n    negative: boolean\n  ) {\n    const { selectedFacets } = this;\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = getDefaultSelectedFacets();\n    }\n    newFacets[key][value] = {\n      state: this.getFacetState(true, negative),\n      count,\n    } as FacetBucket;\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  private facetUnchecked(key: FacetOption, value: string) {\n    const { selectedFacets } = this;\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = getDefaultSelectedFacets();\n    }\n    delete newFacets[key][value];\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  /** Returns the composed facet state corresponding to a positive or negative facet's checked state */\n  private 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  private dispatchFacetClickEvent(\n    key: FacetOption,\n    state: FacetState,\n    negative: boolean\n  ) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail: { key, state, negative },\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private dispatchSelectedFacetsChanged() {\n    const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n      detail: this.selectedFacets,\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\n    let facetsBucket = facetGroup?.buckets as FacetBucket[];\n\n    /**\n     * sorting FacetBucket before render page / modal\n     * - first, selected items should be at top having sorted\n     * - second, suppressed/hidden items should be after selected having sorted\n     * - and then no-selected / not suppressed items should render having sorted\n     */\n    facetsBucket = [\n      ...facetsBucket\n        .filter(x => x.state === 'selected')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetsBucket\n        .filter(x => x.state === 'hidden')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetsBucket.filter(x => x.state === 'none'),\n    ];\n\n    return html`\n      <div class=\"facets-on-${this.renderOn}\">\n        ${repeat(\n          facetsBucket,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket => {\n            const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\n            const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\n            // for collections, we need to asynchronously load the collection name\n            // so we use the `async-collection-name` widget and for the rest, we have\n            // a static value to use\n            const bucketTextDisplay =\n              facetGroup.key !== 'collection'\n                ? html`${bucket.displayText ?? bucket.key}`\n                : html`<a href=\"${this.collectionPagePath}${bucket.key}\">\n                    <async-collection-name\n                      .collectionNameCache=${this.collectionNameCache}\n                      .identifier=${bucket.key}\n                      placeholder=\"-\"\n                    ></async-collection-name>\n                  </a> `;\n            const facetHidden = bucket.state === 'hidden';\n            const facetSelected = bucket.state === 'selected';\n            const titleText = `${facetGroup.key}: ${\n              bucket.displayText ?? bucket.key\n            }`;\n            const onlyShowText = facetSelected\n              ? `Show all ${facetGroup.key}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            return html`\n              <div class=\"facet-row\">\n                <div class=\"facet-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    .name=${facetGroup.key}\n                    .value=${bucket.key}\n                    @click=${(e: Event) => {\n                      this.facetClicked(e, bucket.count, 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=${facetGroup.key}\n                    .value=${bucket.key}\n                    @click=${(e: Event) => {\n                      this.facetClicked(e, bucket.count, 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\">\n                    ${bucket.count.toLocaleString()}\n                  </div>\n                </label>\n              </div>\n            `;\n          }\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      @media (max-width: 560px) {\n        .facets-on-modal {\n          column-count: 1 !important;\n        }\n      }\n      .facets-on-modal {\n        column-gap: 15px;\n        column-count: 3;\n      }\n      async-collection-name {\n        display: contents;\n      }\n      ul.facet-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      ul.facet-list li {\n        margin-bottom: 0.2rem;\n        display: grid;\n      }\n      .facet-checkbox {\n        margin: 0 5px 0 0;\n        display: flex;\n        height: 15px;\n      }\n      .facet-checkbox input:first-child {\n        margin-right: 5px;\n      }\n      .facet-checkbox input {\n        height: 15px;\n        width: 15px;\n        margin: 0;\n      }\n      .facet-row {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 2.5px auto;\n        height: auto;\n        border-top: var(--facet-row-border-top, 1px solid transparent);\n        border-bottom: var(--facet-row-border-bottom, 1px solid transparent);\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"]}
+{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.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 { repeat } from 'lit/directives/repeat.js';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport {\n  FacetGroup,\n  FacetBucket,\n  SelectedFacets,\n  getDefaultSelectedFacets,\n  FacetEventDetails,\n} from '../models';\nimport { FacetRow } from './facet-row';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) renderOn?: string;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\n    const { bucket, negative } = e.detail;\n    if (bucket.state === 'none') {\n      this.facetUnchecked(bucket);\n    } else {\n      this.facetChecked(bucket, negative);\n    }\n\n    this.dispatchFacetClickEvent(e.detail);\n  }\n\n  private facetChecked(bucket: FacetBucket, negative: boolean) {\n    const { facetGroup, selectedFacets } = this;\n    if (!facetGroup) return;\n\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = getDefaultSelectedFacets();\n    }\n    newFacets[facetGroup.key][bucket.key] = {\n      ...bucket,\n      state: FacetRow.getFacetState(true, negative),\n    };\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  private facetUnchecked(bucket: FacetBucket) {\n    const { facetGroup, selectedFacets } = this;\n    if (!facetGroup) return;\n\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = getDefaultSelectedFacets();\n    }\n    delete newFacets[facetGroup.key][bucket.key];\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private dispatchSelectedFacetsChanged() {\n    const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n      detail: this.selectedFacets,\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get facetsTemplate(): TemplateResult | typeof nothing {\n    const { facetGroup } = this;\n    if (!facetGroup) return nothing;\n\n    let facetBuckets = facetGroup.buckets as FacetBucket[];\n\n    /**\n     * sorting FacetBucket before render page / modal\n     * - first, selected items should be at top having sorted\n     * - second, suppressed/hidden items should be after selected having sorted\n     * - and then no-selected / not suppressed items should render having sorted\n     */\n    facetBuckets = [\n      ...facetBuckets\n        .filter(x => x.state === 'selected')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetBuckets\n        .filter(x => x.state === 'hidden')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetBuckets.filter(x => x.state === 'none'),\n    ];\n\n    return html`\n      <div class=\"facets-on-${this.renderOn}\">\n        ${repeat(\n          facetBuckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket => html`<facet-row\n            .facetType=${facetGroup.key}\n            .bucket=${bucket}\n            .collectionNameCache=${this.collectionNameCache}\n            @facetClick=${this.facetClicked}\n          ></facet-row>`\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.facetsTemplate}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      @media (max-width: 560px) {\n        .facets-on-modal {\n          column-count: 1 !important;\n        }\n      }\n      .facets-on-modal {\n        column-gap: 15px;\n        column-count: 3;\n      }\n\n      ul.facet-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      ul.facet-list li {\n        margin-bottom: 0.2rem;\n        display: grid;\n      }\n\n      .facet-row {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 2.5px auto;\n        height: auto;\n        border-top: var(--facet-row-border-top, 1px solid transparent);\n        border-bottom: var(--facet-row-border-bottom, 1px solid transparent);\n        overflow: hidden;\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/more-facets-content.d.ts

@@ -1,77 +1,77 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { Aggregation, SearchServiceInterface, SearchType, AggregationSortType, FilterMap } from '@internetarchive/search-service';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import type { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import { SelectedFacets, FacetGroup, FacetOption } from '../models';
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import './more-facets-pagination';
-import './facets-template';
-import './toggle-switch';
-export declare class MoreFacetsContent extends LitElement {
-    facetKey?: FacetOption;
-    facetAggregationKey?: FacetOption;
-    query?: string;
-    filterMap?: FilterMap;
-    modalManager?: ModalManagerInterface;
-    searchService?: SearchServiceInterface;
-    searchType?: SearchType;
-    withinCollection?: string;
-    collectionNameCache?: CollectionNameCacheInterface;
-    selectedFacets?: SelectedFacets;
-    sortedBy: AggregationSortType;
-    analyticsHandler?: AnalyticsManagerInterface;
-    aggregations?: Record<string, Aggregation>;
-    facetGroup?: FacetGroup[];
-    facetGroupTitle?: String;
-    pageNumber: number;
-    /**
-     * Facets are loading on popup
-     */
-    facetsLoading: boolean;
-    paginationSize: number;
-    facetsType: string;
-    private facetsPerPage;
-    updated(changed: PropertyValues): void;
-    firstUpdated(): void;
-    /**
-     * Close more facets modal on Escape click
-     */
-    private setupEscapeListeners;
-    /**
-     * Get specific facets data from search-service API based of currently query params
-     * - this.aggregations - hold result of search service and being used for further processing.
-     */
-    updateSpecificFacets(): Promise<void>;
-    private pageNumberClicked;
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    private get mergedFacets();
-    /**
-     * Converts the selected facets to a `FacetGroup` array,
-     * which is easier to work with
-     */
-    private get selectedFacetGroups();
-    /**
-     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-     */
-    private get aggregationFacetGroups();
-    /**
-     * 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
-     *
-     * @param castedBuckets
-     */
-    private preloadCollectionNames;
-    private get getMoreFacetsTemplate();
-    private get loaderTemplate();
-    private get facetsPaginationTemplate();
-    private get footerTemplate();
-    private sortFacetAggregation;
-    private get getModalHeaderTemplate();
-    render(): TemplateResult<1>;
-    private applySearchFacetsClicked;
-    private cancelClick;
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { Aggregation, SearchServiceInterface, SearchType, AggregationSortType, FilterMap } from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import { SelectedFacets, FacetGroup, FacetOption } from '../models';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+import './toggle-switch';
+export declare class MoreFacetsContent extends LitElement {
+    facetKey?: FacetOption;
+    facetAggregationKey?: FacetOption;
+    query?: string;
+    filterMap?: FilterMap;
+    modalManager?: ModalManagerInterface;
+    searchService?: SearchServiceInterface;
+    searchType?: SearchType;
+    withinCollection?: string;
+    collectionNameCache?: CollectionNameCacheInterface;
+    selectedFacets?: SelectedFacets;
+    sortedBy: AggregationSortType;
+    analyticsHandler?: AnalyticsManagerInterface;
+    aggregations?: Record<string, Aggregation>;
+    facetGroup?: FacetGroup[];
+    facetGroupTitle?: String;
+    pageNumber: number;
+    /**
+     * Facets are loading on popup
+     */
+    facetsLoading: boolean;
+    paginationSize: number;
+    facetsType: string;
+    private facetsPerPage;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    /**
+     * Close more facets modal on Escape click
+     */
+    private setupEscapeListeners;
+    /**
+     * Get specific facets data from search-service API based of currently query params
+     * - this.aggregations - hold result of search service and being used for further processing.
+     */
+    updateSpecificFacets(): Promise<void>;
+    private pageNumberClicked;
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    private get selectedFacetGroups();
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    private get aggregationFacetGroups();
+    /**
+     * 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
+     *
+     * @param castedBuckets
+     */
+    private preloadCollectionNames;
+    private get getMoreFacetsTemplate();
+    private get loaderTemplate();
+    private get facetsPaginationTemplate();
+    private get footerTemplate();
+    private sortFacetAggregation;
+    private get getModalHeaderTemplate();
+    render(): TemplateResult<1>;
+    private applySearchFacetsClicked;
+    private cancelClick;
+    static get styles(): CSSResultGroup;
+}