@internetarchive/collection-browser 0.3.0-alpha.4 → 0.3.0

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

@@ -1,106 +1,106 @@
-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 { defaultSelectedFacets, } from '../models';
-let FacetsTemplate = class FacetsTemplate extends LitElement {
-    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);
-        }
-    }
-    facetChecked(key, value, count, negative) {
-        const { selectedFacets } = this;
-        let newFacets;
-        if (selectedFacets) {
-            newFacets = {
-                ...selectedFacets,
-            };
-        }
-        else {
-            newFacets = defaultSelectedFacets;
-        }
-        newFacets[key][value] = {
-            state: negative ? 'hidden' : 'selected',
-            count,
-        };
-        this.selectedFacets = newFacets;
-        this.dispatchSelectedFacetsChanged();
-    }
-    facetUnchecked(key, value) {
-        const { selectedFacets } = this;
-        let newFacets;
-        if (selectedFacets) {
-            newFacets = {
-                ...selectedFacets,
-            };
-        }
-        else {
-            newFacets = defaultSelectedFacets;
-        }
-        delete newFacets[key][value];
-        this.selectedFacets = newFacets;
-        this.dispatchSelectedFacetsChanged();
-    }
-    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 } 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 { defaultSelectedFacets, } from '../models';
+let FacetsTemplate = class FacetsTemplate extends LitElement {
+    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);
+        }
+    }
+    facetChecked(key, value, count, negative) {
+        const { selectedFacets } = this;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = defaultSelectedFacets;
+        }
+        newFacets[key][value] = {
+            state: negative ? 'hidden' : 'selected',
+            count,
+        };
+        this.selectedFacets = newFacets;
+        this.dispatchSelectedFacetsChanged();
+    }
+    facetUnchecked(key, value) {
+        const { selectedFacets } = this;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = defaultSelectedFacets;
+        }
+        delete newFacets[key][value];
+        this.selectedFacets = newFacets;
+        this.dispatchSelectedFacetsChanged();
+    }
+    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'),
+        ];
         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}`
+        ${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="/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 = `${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;
+                  </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;
             return html `
               <div class="facet-row">
                 <div class="facet-checkbox">
@@ -108,8 +108,8 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
                     type="checkbox"
                     .name=${facetGroup.key}
                     .value=${bucket.key}
-                    @click=${(e) => {
-                this.facetClicked(e, bucket.count, false);
+                    @click=${(e) => {
+                this.facetClicked(e, bucket.count, false);
             }}
                     .checked=${facetSelected}
                     class="select-facet-checkbox"
@@ -121,8 +121,8 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
                     id=${negativeCheckboxId}
                     .name=${facetGroup.key}
                     .value=${bucket.key}
-                    @click=${(e) => {
-                this.facetClicked(e, bucket.count, true);
+                    @click=${(e) => {
+                this.facetClicked(e, bucket.count, true);
             }}
                     .checked=${facetHidden}
                     class="hide-facet-checkbox"
@@ -145,15 +145,15 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
                   <div class="facet-count">${bucket.count}</div>
                 </div>
               </div>
-            `;
+            `;
         })}
       </div>
-    `;
-    }
-    render() {
-        return html `${this.getFacetsTemplate(this.facetGroup)}`;
-    }
-    static get styles() {
+    `;
+    }
+    render() {
+        return html `${this.getFacetsTemplate(this.facetGroup)}`;
+    }
+    static get styles() {
         return css `
       .facets-on-modal {
         /* For Chrome, Safari, Opera browsers */
@@ -163,9 +163,6 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         column-width: 25rem;
         column-gap: 15px;
       }
-      .facets-on-page .select-facet-checkbox {
-        margin-left: 0;
-      }
       async-collection-name {
         display: contents;
       }
@@ -180,20 +177,31 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
       }
       .facet-checkbox {
         margin: 0 5px 0 0;
-        display: inline-block;
-        align-items: baseline;
+        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;
         font-size: 1.2rem;
+        margin: 2.5px auto;
+        height: auto;
+        border-top: var(--facet-row-border-top, 1px solid transparent);
+        border-bottom: var(--facet-row-border-bottom, 1px solid transparent);
       }
       .facet-info-display {
         display: flex;
         flex: 1 1 0%;
         cursor: pointer;
         flex-wrap: wrap;
-        align-content: center;
       }
       .facet-title {
         word-break: break-word;
@@ -244,23 +252,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: 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  defaultSelectedFacets,\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: 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\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 = defaultSelectedFacets;\n    }\n    newFacets[key][value] = {\n      state: negative ? 'hidden' : 'selected',\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 = defaultSelectedFacets;\n    }\n    delete newFacets[key][value];\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\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=\"/details/${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            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                <div\n                  for=${showOnlyCheckboxId}\n                  class=\"facet-info-display\"\n                  title=${onlyShowText}\n                >\n                  <div class=\"facet-title\">${bucketTextDisplay}</div>\n                  <div class=\"facet-count\">${bucket.count}</div>\n                </div>\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      .facets-on-modal {\n        /* For Chrome, Safari, Opera browsers */\n        -webkit-column-width: 100px;\n        /* For Firefox browser */\n        -moz-column-width: 100px;\n        column-width: 25rem;\n        column-gap: 15px;\n      }\n      .facets-on-page .select-facet-checkbox {\n        margin-left: 0;\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: inline-block;\n        align-items: baseline;\n      }\n      .facet-row {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n      }\n      .facet-info-display {\n        display: flex;\n        flex: 1 1 0%;\n        cursor: pointer;\n        flex-wrap: wrap;\n        align-content: center;\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 { 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  defaultSelectedFacets,\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: 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\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 = defaultSelectedFacets;\n    }\n    newFacets[key][value] = {\n      state: negative ? 'hidden' : 'selected',\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 = defaultSelectedFacets;\n    }\n    delete newFacets[key][value];\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\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=\"/details/${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            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                <div\n                  for=${showOnlyCheckboxId}\n                  class=\"facet-info-display\"\n                  title=${onlyShowText}\n                >\n                  <div class=\"facet-title\">${bucketTextDisplay}</div>\n                  <div class=\"facet-count\">${bucket.count}</div>\n                </div>\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      .facets-on-modal {\n        /* For Chrome, Safari, Opera browsers */\n        -webkit-column-width: 100px;\n        /* For Firefox browser */\n        -moz-column-width: 100px;\n        column-width: 25rem;\n        column-gap: 15px;\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      }\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-util.d.ts

@@ -1,10 +1,10 @@
-import { FacetOption } from '../models';
-/**
- * Parse the aggregate key title into the human readable title
- *
- * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
- *
- * @param key
- * @returns
- */
-export declare function getFacetOptionFromKey(key: string): FacetOption;
+import { FacetOption } from '../models';
+/**
+ * Parse the aggregate key title into the human readable title
+ *
+ * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
+ *
+ * @param key
+ * @returns
+ */
+export declare function getFacetOptionFromKey(key: string): FacetOption;

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

@@ -1,20 +1,20 @@
-import { aggregationToFacetOption } from '../models';
-/**
- * Parse the aggregate key title into the human readable title
- *
- * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
- *
- * @param key
- * @returns
- */
-export function getFacetOptionFromKey(key) {
-    const parts = key.split('__');
-    const fieldNamePart = parts[2];
-    const fieldName = fieldNamePart.split(':')[1];
-    const facetMatch = Object.entries(aggregationToFacetOption).find(([key2]) => fieldName.includes(key2));
-    const option = facetMatch === null || facetMatch === void 0 ? void 0 : facetMatch[1];
-    if (!option)
-        throw new Error(`Could not find facet option for key: ${key}`);
-    return option;
-}
+import { aggregationToFacetOption } from '../models';
+/**
+ * Parse the aggregate key title into the human readable title
+ *
+ * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
+ *
+ * @param key
+ * @returns
+ */
+export function getFacetOptionFromKey(key) {
+    const parts = key.split('__');
+    const fieldNamePart = parts[2];
+    const fieldName = fieldNamePart.split(':')[1];
+    const facetMatch = Object.entries(aggregationToFacetOption).find(([key2]) => fieldName.includes(key2));
+    const option = facetMatch === null || facetMatch === void 0 ? void 0 : facetMatch[1];
+    if (!option)
+        throw new Error(`Could not find facet option for key: ${key}`);
+    return option;
+}
 //# sourceMappingURL=facets-util.js.map

package/dist/src/collection-facets/more-facets-content.d.ts

@@ -1,84 +1,74 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { Aggregation, SearchServiceInterface } from '@internetarchive/search-service';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import type { ModalManagerInterface } from '@internetarchive/modal-manager';
-import { SelectedFacets, FacetGroup, SearchTarget } from '../models';
-import type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import './more-facets-pagination';
-import './facets-template';
-export declare class MoreFacetsContent extends LitElement {
-    facetKey?: string;
-    facetAggregationKey?: string;
-    fullQuery?: string;
-    modalManager?: ModalManagerInterface;
-    searchService?: SearchServiceInterface;
-    searchTarget?: SearchTarget;
-    collectionNameCache?: CollectionNameCacheInterface;
-    languageCodeHandler?: LanguageCodeHandlerInterface;
-    selectedFacets?: SelectedFacets;
-    sortedBy: string;
-    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;
-    /**
-     * sort the facets on modal
-     * - alpha sort perform in ascending order
-     * - count/frequency sort perform in descending order
-     *
-     * @param facetBucket as Bucket[]
-     *
-     * @return sortedFacetBucket as Bucket
-     */
-    private sortedFacets;
-    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 } from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { SelectedFacets, FacetGroup } from '../models';
+import type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+export declare class MoreFacetsContent extends LitElement {
+    facetKey?: string;
+    facetAggregationKey?: string;
+    fullQuery?: string;
+    modalManager?: ModalManagerInterface;
+    searchService?: SearchServiceInterface;
+    searchType?: SearchType;
+    collectionNameCache?: CollectionNameCacheInterface;
+    languageCodeHandler?: LanguageCodeHandlerInterface;
+    selectedFacets?: SelectedFacets;
+    sortedBy: string;
+    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;
+}