@internetarchive/collection-browser 0.3.1-alpha.3 → 0.3.1

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

@@ -1,276 +1,276 @@
-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}`
-                : 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;
-            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>
-                <div
-                  for=${showOnlyCheckboxId}
-                  class="facet-info-display"
-                  title=${onlyShowText}
-                >
-                  <div class="facet-title">${bucketTextDisplay}</div>
-                  <div class="facet-count">${bucket.count}</div>
-                </div>
-              </div>
-            `;
-        })}
-      </div>
-    `;
-    }
-    render() {
-        return html `${this.getFacetsTemplate(this.facetGroup)}`;
-    }
-    static get styles() {
-        return css `
-      @media (max-width: 560px) {
-        .facets-on-modal {
-          column-count: 1 !important;
-        }
-      }
-      .facets-on-modal {
-        column-gap: 15px;
-        column-count: 3;
-      }
-      async-collection-name {
-        display: contents;
-      }
-      ul.facet-list {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      ul.facet-list li {
-        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;
-        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);
-        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: 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 };
+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}`
+                : 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;
+            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>
+                <div
+                  for=${showOnlyCheckboxId}
+                  class="facet-info-display"
+                  title=${onlyShowText}
+                >
+                  <div class="facet-title">${bucketTextDisplay}</div>
+                  <div class="facet-count">${bucket.count}</div>
+                </div>
+              </div>
+            `;
+        })}
+      </div>
+    `;
+    }
+    render() {
+        return html `${this.getFacetsTemplate(this.facetGroup)}`;
+    }
+    static get styles() {
+        return css `
+      @media (max-width: 560px) {
+        .facets-on-modal {
+          column-count: 1 !important;
+        }
+      }
+      .facets-on-modal {
+        column-gap: 15px;
+        column-count: 3;
+      }
+      async-collection-name {
+        display: contents;
+      }
+      ul.facet-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      ul.facet-list li {
+        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;
+        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);
+        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: 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';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\r\nimport eyeIcon from '../assets/img/icons/eye';\r\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\r\nimport {\r\n  FacetGroup,\r\n  FacetOption,\r\n  FacetBucket,\r\n  SelectedFacets,\r\n  defaultSelectedFacets,\r\n} from '../models';\r\n\r\n@customElement('facets-template')\r\nexport class FacetsTemplate extends LitElement {\r\n  @property({ type: Object }) facetGroup?: FacetGroup;\r\n\r\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n  @property({ type: String }) renderOn?: string;\r\n\r\n  @property({ type: Object })\r\n  collectionNameCache?: CollectionNameCacheInterface;\r\n\r\n  private facetClicked(e: Event, count: number, negative: boolean) {\r\n    const target = e.target as HTMLInputElement;\r\n    const { checked, name, value } = target;\r\n    if (checked) {\r\n      this.facetChecked(name as FacetOption, value, count, negative);\r\n    } else {\r\n      this.facetUnchecked(name as FacetOption, value);\r\n    }\r\n  }\r\n\r\n  private facetChecked(\r\n    key: FacetOption,\r\n    value: string,\r\n    count: number,\r\n    negative: boolean\r\n  ) {\r\n    const { selectedFacets } = this;\r\n    let newFacets: SelectedFacets;\r\n    if (selectedFacets) {\r\n      newFacets = {\r\n        ...selectedFacets,\r\n      };\r\n    } else {\r\n      newFacets = defaultSelectedFacets;\r\n    }\r\n    newFacets[key][value] = {\r\n      state: negative ? 'hidden' : 'selected',\r\n      count,\r\n    } as FacetBucket;\r\n\r\n    this.selectedFacets = newFacets;\r\n    this.dispatchSelectedFacetsChanged();\r\n  }\r\n\r\n  private facetUnchecked(key: FacetOption, value: string) {\r\n    const { selectedFacets } = this;\r\n    let newFacets: SelectedFacets;\r\n    if (selectedFacets) {\r\n      newFacets = {\r\n        ...selectedFacets,\r\n      };\r\n    } else {\r\n      newFacets = defaultSelectedFacets;\r\n    }\r\n    delete newFacets[key][value];\r\n\r\n    this.selectedFacets = newFacets;\r\n    this.dispatchSelectedFacetsChanged();\r\n  }\r\n\r\n  private dispatchSelectedFacetsChanged() {\r\n    const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\r\n      detail: this.selectedFacets,\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\r\n    let facetsBucket = facetGroup?.buckets as FacetBucket[];\r\n\r\n    /**\r\n     * sorting FacetBucket before render page / modal\r\n     * - first, selected items should be at top having sorted\r\n     * - second, suppressed/hidden items should be after selected having sorted\r\n     * - and then no-selected / not suppressed items should render having sorted\r\n     */\r\n    facetsBucket = [\r\n      ...facetsBucket\r\n        .filter(x => x.state === 'selected')\r\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\r\n      ...facetsBucket\r\n        .filter(x => x.state === 'hidden')\r\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\r\n      ...facetsBucket.filter(x => x.state === 'none'),\r\n    ];\r\n\r\n    return html`\r\n      <div class=\"facets-on-${this.renderOn}\">\r\n        ${repeat(\r\n          facetsBucket,\r\n          bucket => `${facetGroup.key}:${bucket.key}`,\r\n          bucket => {\r\n            const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\r\n            const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\r\n            // for collections, we need to asynchronously load the collection name\r\n            // so we use the `async-collection-name` widget and for the rest, we have\r\n            // a static value to use\r\n            const bucketTextDisplay =\r\n              facetGroup.key !== 'collection'\r\n                ? html`${bucket.displayText ?? bucket.key}`\r\n                : html`<a href=\"/details/${bucket.key}\">\r\n                    <async-collection-name\r\n                      .collectionNameCache=${this.collectionNameCache}\r\n                      .identifier=${bucket.key}\r\n                      placeholder=\"-\"\r\n                    ></async-collection-name>\r\n                  </a> `;\r\n            const facetHidden = bucket.state === 'hidden';\r\n            const facetSelected = bucket.state === 'selected';\r\n            const titleText = `${facetGroup.key}: ${\r\n              bucket.displayText ?? bucket.key\r\n            }`;\r\n            const onlyShowText = facetSelected\r\n              ? `Show all ${facetGroup.key}s`\r\n              : `Only show ${titleText}`;\r\n            const hideText = `Hide ${titleText}`;\r\n            const unhideText = `Unhide ${titleText}`;\r\n            const showHideText = facetHidden ? unhideText : hideText;\r\n            return html`\r\n              <div class=\"facet-row\">\r\n                <div class=\"facet-checkbox\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    .name=${facetGroup.key}\r\n                    .value=${bucket.key}\r\n                    @click=${(e: Event) => {\r\n                      this.facetClicked(e, bucket.count, false);\r\n                    }}\r\n                    .checked=${facetSelected}\r\n                    class=\"select-facet-checkbox\"\r\n                    title=${onlyShowText}\r\n                    id=${showOnlyCheckboxId}\r\n                  />\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    id=${negativeCheckboxId}\r\n                    .name=${facetGroup.key}\r\n                    .value=${bucket.key}\r\n                    @click=${(e: Event) => {\r\n                      this.facetClicked(e, bucket.count, true);\r\n                    }}\r\n                    .checked=${facetHidden}\r\n                    class=\"hide-facet-checkbox\"\r\n                  />\r\n                  <label\r\n                    for=${negativeCheckboxId}\r\n                    class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\r\n                    title=${showHideText}\r\n                  >\r\n                    <span class=\"eye\">${eyeIcon}</span>\r\n                    <span class=\"eye-closed\">${eyeClosedIcon}</span>\r\n                  </label>\r\n                </div>\r\n                <div\r\n                  for=${showOnlyCheckboxId}\r\n                  class=\"facet-info-display\"\r\n                  title=${onlyShowText}\r\n                >\r\n                  <div class=\"facet-title\">${bucketTextDisplay}</div>\r\n                  <div class=\"facet-count\">${bucket.count}</div>\r\n                </div>\r\n              </div>\r\n            `;\r\n          }\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return css`\r\n      @media (max-width: 560px) {\r\n        .facets-on-modal {\r\n          column-count: 1 !important;\r\n        }\r\n      }\r\n      .facets-on-modal {\r\n        column-gap: 15px;\r\n        column-count: 3;\r\n      }\r\n      async-collection-name {\r\n        display: contents;\r\n      }\r\n      ul.facet-list {\r\n        list-style: none;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n      ul.facet-list li {\r\n        margin-bottom: 0.2rem;\r\n        display: grid;\r\n      }\r\n      .facet-checkbox {\r\n        margin: 0 5px 0 0;\r\n        display: flex;\r\n        height: 15px;\r\n      }\r\n      .facet-checkbox input:first-child {\r\n        margin-right: 5px;\r\n      }\r\n      .facet-checkbox input {\r\n        height: 15px;\r\n        width: 15px;\r\n        margin: 0;\r\n      }\r\n      .facet-row {\r\n        display: flex;\r\n        font-weight: 500;\r\n        font-size: 1.2rem;\r\n        margin: 2.5px auto;\r\n        height: auto;\r\n        border-top: var(--facet-row-border-top, 1px solid transparent);\r\n        border-bottom: var(--facet-row-border-bottom, 1px solid transparent);\r\n        overflow: hidden;\r\n      }\r\n      .facet-info-display {\r\n        display: flex;\r\n        flex: 1 1 0%;\r\n        cursor: pointer;\r\n        flex-wrap: wrap;\r\n      }\r\n      .facet-title {\r\n        word-break: break-word;\r\n        display: inline-block;\r\n        flex: 1 1 0%;\r\n      }\r\n      .facet-count {\r\n        text-align: right;\r\n      }\r\n      .select-facet-checkbox {\r\n        cursor: pointer;\r\n        display: inline-block;\r\n      }\r\n      .hide-facet-checkbox {\r\n        display: none;\r\n      }\r\n      .hide-facet-icon {\r\n        width: 15px;\r\n        height: 15px;\r\n        cursor: pointer;\r\n        opacity: 0.3;\r\n        display: inline-block;\r\n      }\r\n      .hide-facet-icon:hover,\r\n      .active {\r\n        opacity: 1;\r\n      }\r\n      .hide-facet-icon:hover .eye,\r\n      .hide-facet-icon .eye-closed {\r\n        display: none;\r\n      }\r\n      .hide-facet-icon:hover .eye-closed,\r\n      .hide-facet-icon.active .eye-closed {\r\n        display: inline;\r\n      }\r\n      .hide-facet-icon.active .eye {\r\n        display: none;\r\n      }\r\n      .sorting-icon {\r\n        cursor: pointer;\r\n      }\r\n\r\n      a:link,\r\n      a:visited {\r\n        text-decoration: none;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  }\r\n}\r\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      @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"]}