@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-webdev-9227.1

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

@@ -0,0 +1,38 @@
+import { TemplateResult } from 'lit';
+import type { FacetOption, FacetBucket, FacetState } from '../models';
+import type { CollectionTitles } from '../data-source/models';
+export type FacetRowTemplateOptions = {
+    /** The name of the facet group to which this facet belongs (e.g., "mediatype") */
+    facetType: FacetOption;
+    /** The facet bucket containing details about the state, count, and key for this row */
+    bucket: FacetBucket;
+    /** The collection name cache for converting collection identifiers to titles */
+    collectionTitles?: CollectionTitles;
+    /**
+     * Whether to omit the negative/hide button from this facet row if possible.
+     * Has no effect if the facet bucket is itself hidden, in which case the hide
+     * button *must* be shown to represent the state accurately.
+     */
+    omitHideButton?: boolean;
+    /**
+     * Called when either checkbox is clicked. Leave it out when an ancestor
+     * handles the rows' clicks by delegation instead.
+     */
+    onCheckboxClick?: (e: Event, negative: boolean) => void;
+};
+/**
+ * Returns the composed facet state corresponding to a positive or negative facet's checked state
+ */
+export declare function getFacetState(checked: boolean, negative: boolean): FacetState;
+/**
+ * Template for a full facet row, including the positive/negative checks,
+ * the display name, and the count. The row is plain DOM so that long lists
+ * (e.g. the More... dialog) can render many rows without creating an
+ * element per row. Render it inside a shadow root that includes
+ * `facetRowStyles`.
+ */
+export declare function facetRowTemplate({ facetType, bucket, collectionTitles, omitHideButton, onCheckboxClick, }: FacetRowTemplateOptions): TemplateResult;
+/**
+ * Styles for `facetRowTemplate`. Include `srOnlyStyle` alongside these.
+ */
+export declare const facetRowStyles: import("lit").CSSResult;

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

@@ -0,0 +1,200 @@
+import { css, html, nothing } from 'lit';
+import eyeIcon from '../assets/img/icons/eye';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+/**
+ * Returns the composed facet state corresponding to a positive or negative facet's checked state
+ */
+export function getFacetState(checked, negative) {
+    if (!checked)
+        return 'none';
+    return negative ? 'hidden' : 'selected';
+}
+/**
+ * Template for a full facet row, including the positive/negative checks,
+ * the display name, and the count. The row is plain DOM so that long lists
+ * (e.g. the More... dialog) can render many rows without creating an
+ * element per row. Render it inside a shadow root that includes
+ * `facetRowStyles`.
+ */
+export function facetRowTemplate({ facetType, bucket, collectionTitles, omitHideButton = false, onCheckboxClick, }) {
+    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
+    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
+    const extraNoteSpan = bucket.extraNote
+        ? html `<span class="facet-note">${bucket.extraNote}</span>`
+        : nothing;
+    // For collections, we render the collection title as a link.
+    // For other facet types, we just have a static value to use.
+    const bucketTextDisplay = facetType !== 'collection'
+        ? html `${bucket.displayText ?? bucket.key} ${extraNoteSpan}`
+        : html `<a href="/details/${bucket.key}">
+          ${collectionTitles?.get(bucket.key) ?? bucket.key}
+        </a> `;
+    const bucketCountText = bucket.count > 0 ? bucket.count.toLocaleString() : '';
+    const facetHidden = bucket.state === 'hidden';
+    const facetSelected = bucket.state === 'selected';
+    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;
+    const onlyShowText = facetSelected
+        ? `Show all ${facetType}s`
+        : `Only show ${titleText}`;
+    const hideText = `Hide ${titleText}`;
+    const unhideText = `Unhide ${titleText}`;
+    const showHideText = facetHidden ? unhideText : hideText;
+    const ariaLabel = `${titleText}, ${bucket.count} results`;
+    const showOnlyClicked = onCheckboxClick
+        ? (e) => onCheckboxClick(e, false)
+        : undefined;
+    const hideClicked = onCheckboxClick
+        ? (e) => onCheckboxClick(e, true)
+        : undefined;
+    // Added data-testid for Playwright testing
+    return html `
+    <div class="facet-row-container">
+      <div class="facet-checkboxes">
+        <input
+          type="checkbox"
+          .name=${facetType}
+          .value=${bucket.key}
+          @click=${showOnlyClicked}
+          .checked=${facetSelected}
+          class="select-facet-checkbox"
+          title=${onlyShowText}
+          id=${showOnlyCheckboxId}
+          data-testid=${showOnlyCheckboxId}
+        />
+        <div
+          class="hide-facet-container"
+          ?hidden=${omitHideButton && !facetHidden}
+        >
+          <input
+            type="checkbox"
+            id=${negativeCheckboxId}
+            .name=${facetType}
+            .value=${bucket.key}
+            @click=${hideClicked}
+            .checked=${facetHidden}
+            class="hide-facet-checkbox"
+          />
+          <label
+            for=${negativeCheckboxId}
+            class="hide-facet-icon${facetHidden ? ' active' : ''}"
+            title=${showHideText}
+            data-testid=${negativeCheckboxId}
+          >
+            <span class="sr-only">${showHideText}</span>
+            <span class="eye eye-open">${eyeIcon}</span>
+            <span class="eye eye-closed">${eyeClosedIcon}</span>
+          </label>
+        </div>
+      </div>
+      <label
+        for=${showOnlyCheckboxId}
+        class="facet-info-display"
+        title=${onlyShowText}
+        aria-label=${ariaLabel}
+      >
+        <div class="facet-title">${bucketTextDisplay}</div>
+        <div class="facet-count">${bucketCountText}</div>
+      </label>
+    </div>
+  `;
+}
+const facetRowBorderTop = css `var(--facet-row-border-top, 1px solid transparent)`;
+const facetRowBorderBottom = css `var(--facet-row-border-bottom, 1px solid transparent)`;
+const checkboxHeight = css `15px`;
+/**
+ * Styles for `facetRowTemplate`. Include `srOnlyStyle` alongside these.
+ */
+export const facetRowStyles = css `
+  .facet-checkboxes {
+    margin: 0 5px 0 0;
+    display: flex;
+    height: ${checkboxHeight};
+  }
+  .facet-checkboxes input:first-child {
+    margin-right: 5px;
+  }
+  .facet-checkboxes input {
+    height: ${checkboxHeight};
+    width: ${checkboxHeight};
+    margin: 0;
+  }
+  .facet-row-container {
+    display: flex;
+    font-weight: 500;
+    font-size: 1.2rem;
+    margin: 0 auto;
+    padding: 0.25rem 0;
+    height: auto;
+    border-top: ${facetRowBorderTop};
+    border-bottom: ${facetRowBorderBottom};
+  }
+  .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-note {
+    color: #bbb;
+  }
+  .facet-count {
+    text-align: right;
+  }
+  .select-facet-checkbox {
+    cursor: pointer;
+    display: inline-block;
+  }
+  .hide-facet-checkbox {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none;
+  }
+  .hide-facet-checkbox:focus-visible + .hide-facet-icon {
+    outline-style: auto;
+    outline-offset: 2px;
+  }
+  .hide-facet-icon {
+    width: ${checkboxHeight};
+    height: ${checkboxHeight};
+    cursor: pointer;
+    display: flex;
+  }
+  .eye {
+    width: ${checkboxHeight};
+    height: ${checkboxHeight};
+    opacity: 0.3;
+  }
+  .hide-facet-icon:hover .eye,
+  .active .eye {
+    opacity: 1;
+  }
+  .hide-facet-icon:hover .eye-open,
+  .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-open {
+    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;
+  }
+`;
+//# sourceMappingURL=facet-row-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"facet-row-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row-template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,aAAa,MAAM,gCAAgC,CAAC;AA4B3D;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,OAAgB,EAAE,QAAiB;IAC/D,IAAI,CAAC,OAAO;QAAE,OAAO,MAAM,CAAC;IAC5B,OAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;AAC1C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,eAAe,GACS;IACxB,MAAM,kBAAkB,GAAG,GAAG,SAAS,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC;IAClE,MAAM,kBAAkB,GAAG,GAAG,SAAS,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC;IAEjE,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS;QACpC,CAAC,CAAC,IAAI,CAAA,4BAA4B,MAAM,CAAC,SAAS,SAAS;QAC3D,CAAC,CAAC,OAAO,CAAC;IAEZ,6DAA6D;IAC7D,6DAA6D;IAC7D,MAAM,iBAAiB,GACrB,SAAS,KAAK,YAAY;QACxB,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,GAAG,IAAI,aAAa,EAAE;QAC5D,CAAC,CAAC,IAAI,CAAA,qBAAqB,MAAM,CAAC,GAAG;YAC/B,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG;cAC7C,CAAC;IAEb,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE9E,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IAElD,MAAM,SAAS,GAAG,GAAG,SAAS,KAAK,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,GAAG,EAAE,CAAC;IACtE,MAAM,YAAY,GAAG,aAAa;QAChC,CAAC,CAAC,YAAY,SAAS,GAAG;QAC1B,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC;IAC7B,MAAM,QAAQ,GAAG,QAAQ,SAAS,EAAE,CAAC;IACrC,MAAM,UAAU,GAAG,UAAU,SAAS,EAAE,CAAC;IACzC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzD,MAAM,SAAS,GAAG,GAAG,SAAS,KAAK,MAAM,CAAC,KAAK,UAAU,CAAC;IAE1D,MAAM,eAAe,GAAG,eAAe;QACrC,CAAC,CAAC,CAAC,CAAQ,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC;QACzC,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,WAAW,GAAG,eAAe;QACjC,CAAC,CAAC,CAAC,CAAQ,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC;QACxC,CAAC,CAAC,SAAS,CAAC;IAEd,2CAA2C;IAC3C,OAAO,IAAI,CAAA;;;;;kBAKK,SAAS;mBACR,MAAM,CAAC,GAAG;mBACV,eAAe;qBACb,aAAa;;kBAEhB,YAAY;eACf,kBAAkB;wBACT,kBAAkB;;;;oBAItB,cAAc,IAAI,CAAC,WAAW;;;;iBAIjC,kBAAkB;oBACf,SAAS;qBACR,MAAM,CAAC,GAAG;qBACV,WAAW;uBACT,WAAW;;;;kBAIhB,kBAAkB;oCACA,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;oBAC5C,YAAY;0BACN,kBAAkB;;oCAER,YAAY;yCACP,OAAO;2CACL,aAAa;;;;;cAK1C,kBAAkB;;gBAEhB,YAAY;qBACP,SAAS;;mCAEK,iBAAiB;mCACjB,eAAe;;;GAG/C,CAAC;AACJ,CAAC;AAED,MAAM,iBAAiB,GAAG,GAAG,CAAA,oDAAoD,CAAC;AAClF,MAAM,oBAAoB,GAAG,GAAG,CAAA,uDAAuD,CAAC;AACxF,MAAM,cAAc,GAAG,GAAG,CAAA,MAAM,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;cAInB,cAAc;;;;;;cAMd,cAAc;aACf,cAAc;;;;;;;;;;kBAUT,iBAAiB;qBACd,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAiC5B,cAAc;cACb,cAAc;;;;;aAKf,cAAc;cACb,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B3B,CAAC","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport type { FacetOption, FacetBucket, FacetState } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\n\nexport type FacetRowTemplateOptions = {\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n  facetType: FacetOption;\n\n  /** The facet bucket containing details about the state, count, and key for this row */\n  bucket: FacetBucket;\n\n  /** The collection name cache for converting collection identifiers to titles */\n  collectionTitles?: CollectionTitles;\n\n  /**\n   * Whether to omit the negative/hide button from this facet row if possible.\n   * Has no effect if the facet bucket is itself hidden, in which case the hide\n   * button *must* be shown to represent the state accurately.\n   */\n  omitHideButton?: boolean;\n\n  /**\n   * Called when either checkbox is clicked. Leave it out when an ancestor\n   * handles the rows' clicks by delegation instead.\n   */\n  onCheckboxClick?: (e: Event, negative: boolean) => void;\n};\n\n/**\n * Returns the composed facet state corresponding to a positive or negative facet's checked state\n */\nexport function getFacetState(checked: boolean, negative: boolean): FacetState {\n  if (!checked) return 'none';\n  return negative ? 'hidden' : 'selected';\n}\n\n/**\n * Template for a full facet row, including the positive/negative checks,\n * the display name, and the count. The row is plain DOM so that long lists\n * (e.g. the More... dialog) can render many rows without creating an\n * element per row. Render it inside a shadow root that includes\n * `facetRowStyles`.\n */\nexport function facetRowTemplate({\n  facetType,\n  bucket,\n  collectionTitles,\n  omitHideButton = false,\n  onCheckboxClick,\n}: FacetRowTemplateOptions): TemplateResult {\n  const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\n  const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\n\n  const extraNoteSpan = bucket.extraNote\n    ? html`<span class=\"facet-note\">${bucket.extraNote}</span>`\n    : nothing;\n\n  // For collections, we render the collection title as a link.\n  // For other facet types, we just have a static value to use.\n  const bucketTextDisplay =\n    facetType !== 'collection'\n      ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`\n      : html`<a href=\"/details/${bucket.key}\">\n          ${collectionTitles?.get(bucket.key) ?? bucket.key}\n        </a> `;\n\n  const bucketCountText = bucket.count > 0 ? bucket.count.toLocaleString() : '';\n\n  const facetHidden = bucket.state === 'hidden';\n  const facetSelected = bucket.state === 'selected';\n\n  const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\n  const onlyShowText = facetSelected\n    ? `Show all ${facetType}s`\n    : `Only show ${titleText}`;\n  const hideText = `Hide ${titleText}`;\n  const unhideText = `Unhide ${titleText}`;\n  const showHideText = facetHidden ? unhideText : hideText;\n  const ariaLabel = `${titleText}, ${bucket.count} results`;\n\n  const showOnlyClicked = onCheckboxClick\n    ? (e: Event) => onCheckboxClick(e, false)\n    : undefined;\n  const hideClicked = onCheckboxClick\n    ? (e: Event) => onCheckboxClick(e, true)\n    : undefined;\n\n  // Added data-testid for Playwright testing\n  return html`\n    <div class=\"facet-row-container\">\n      <div class=\"facet-checkboxes\">\n        <input\n          type=\"checkbox\"\n          .name=${facetType}\n          .value=${bucket.key}\n          @click=${showOnlyClicked}\n          .checked=${facetSelected}\n          class=\"select-facet-checkbox\"\n          title=${onlyShowText}\n          id=${showOnlyCheckboxId}\n          data-testid=${showOnlyCheckboxId}\n        />\n        <div\n          class=\"hide-facet-container\"\n          ?hidden=${omitHideButton && !facetHidden}\n        >\n          <input\n            type=\"checkbox\"\n            id=${negativeCheckboxId}\n            .name=${facetType}\n            .value=${bucket.key}\n            @click=${hideClicked}\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            data-testid=${negativeCheckboxId}\n          >\n            <span class=\"sr-only\">${showHideText}</span>\n            <span class=\"eye eye-open\">${eyeIcon}</span>\n            <span class=\"eye eye-closed\">${eyeClosedIcon}</span>\n          </label>\n        </div>\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\">${bucketCountText}</div>\n      </label>\n    </div>\n  `;\n}\n\nconst facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\nconst facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\nconst checkboxHeight = css`15px`;\n\n/**\n * Styles for `facetRowTemplate`. Include `srOnlyStyle` alongside these.\n */\nexport const facetRowStyles = css`\n  .facet-checkboxes {\n    margin: 0 5px 0 0;\n    display: flex;\n    height: ${checkboxHeight};\n  }\n  .facet-checkboxes input:first-child {\n    margin-right: 5px;\n  }\n  .facet-checkboxes input {\n    height: ${checkboxHeight};\n    width: ${checkboxHeight};\n    margin: 0;\n  }\n  .facet-row-container {\n    display: flex;\n    font-weight: 500;\n    font-size: 1.2rem;\n    margin: 0 auto;\n    padding: 0.25rem 0;\n    height: auto;\n    border-top: ${facetRowBorderTop};\n    border-bottom: ${facetRowBorderBottom};\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-note {\n    color: #bbb;\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    position: absolute;\n    clip: rect(0, 0, 0, 0);\n    pointer-events: none;\n  }\n  .hide-facet-checkbox:focus-visible + .hide-facet-icon {\n    outline-style: auto;\n    outline-offset: 2px;\n  }\n  .hide-facet-icon {\n    width: ${checkboxHeight};\n    height: ${checkboxHeight};\n    cursor: pointer;\n    display: flex;\n  }\n  .eye {\n    width: ${checkboxHeight};\n    height: ${checkboxHeight};\n    opacity: 0.3;\n  }\n  .hide-facet-icon:hover .eye,\n  .active .eye {\n    opacity: 1;\n  }\n  .hide-facet-icon:hover .eye-open,\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-open {\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"]}

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

@@ -1,10 +1,9 @@
 var FacetRow_1;
 import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import eyeIcon from '../assets/img/icons/eye';
-import eyeClosedIcon from '../assets/img/icons/eye-closed';
 import { srOnlyStyle } from '../styles/sr-only';
+import { facetRowStyles, facetRowTemplate, getFacetState, } from './facet-row-template';
 let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
     constructor() {
         //
@@ -35,84 +34,13 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
         const { bucket, facetType } = this;
         if (!bucket || !facetType)
             return nothing;
-        const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
-        const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
-        const extraNoteSpan = bucket.extraNote
-            ? html `<span class="facet-note">${bucket.extraNote}</span>`
-            : nothing;
-        // For collections, we render the collection title as a link.
-        // For other facet types, we just have a static value to use.
-        const bucketTextDisplay = facetType !== 'collection'
-            ? html `${bucket.displayText ?? bucket.key} ${extraNoteSpan}`
-            : html `<a href="/details/${bucket.key}">
-            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
-          </a> `;
-        const bucketCountText = bucket.count > 0 ? bucket.count.toLocaleString() : '';
-        const facetHidden = bucket.state === 'hidden';
-        const facetSelected = bucket.state === 'selected';
-        const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;
-        const onlyShowText = facetSelected
-            ? `Show all ${facetType}s`
-            : `Only show ${titleText}`;
-        const hideText = `Hide ${titleText}`;
-        const unhideText = `Unhide ${titleText}`;
-        const showHideText = facetHidden ? unhideText : hideText;
-        const ariaLabel = `${titleText}, ${bucket.count} results`;
-        // Added data-testid for Playwright testing
-        return html `
-      <div class="facet-row-container">
-        <div class="facet-checkboxes">
-          <input
-            type="checkbox"
-            .name=${facetType}
-            .value=${bucket.key}
-            @click=${(e) => {
-            this.facetClicked(e, false);
-        }}
-            .checked=${facetSelected}
-            class="select-facet-checkbox"
-            title=${onlyShowText}
-            id=${showOnlyCheckboxId}
-            data-testid=${showOnlyCheckboxId}
-          />
-          <div
-            class="hide-facet-container"
-            ?hidden=${this.omitHideButton && !facetHidden}
-          >
-            <input
-              type="checkbox"
-              id=${negativeCheckboxId}
-              .name=${facetType}
-              .value=${bucket.key}
-              @click=${(e) => {
-            this.facetClicked(e, true);
-        }}
-              .checked=${facetHidden}
-              class="hide-facet-checkbox"
-            />
-            <label
-              for=${negativeCheckboxId}
-              class="hide-facet-icon${facetHidden ? ' active' : ''}"
-              title=${showHideText}
-              data-testid=${negativeCheckboxId}
-            >
-              <span class="sr-only">${showHideText}</span>
-              <span class="eye eye-open">${eyeIcon}</span>
-              <span class="eye eye-closed">${eyeClosedIcon}</span>
-            </label>
-          </div>
-        </div>
-        <label
-          for=${showOnlyCheckboxId}
-          class="facet-info-display"
-          title=${onlyShowText}
-          aria-label=${ariaLabel}
-        >
-          <div class="facet-title">${bucketTextDisplay}</div>
-          <div class="facet-count">${bucketCountText}</div>
-        </label>
-      </div>
-    `;
+        return facetRowTemplate({
+            facetType,
+            bucket,
+            collectionTitles: this.collectionTitles,
+            omitHideButton: this.omitHideButton,
+            onCheckboxClick: (e, negative) => this.facetClicked(e, negative),
+        });
     }
     //
     // EVENT HANDLERS & DISPATCHERS
@@ -152,116 +80,13 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
      * Returns the composed facet state corresponding to a positive or negative facet's checked state
      */
     static getFacetState(checked, negative) {
-        let state;
-        if (checked) {
-            state = negative ? 'hidden' : 'selected';
-        }
-        else {
-            state = 'none';
-        }
-        return state;
+        return getFacetState(checked, negative);
     }
     //
     // STYLES
     //
     static get styles() {
-        const facetRowBorderTop = css `var(--facet-row-border-top, 1px solid transparent)`;
-        const facetRowBorderBottom = css `var(--facet-row-border-bottom, 1px solid transparent)`;
-        const checkboxHeight = css `15px`;
-        const ownCss = css `
-      .facet-checkboxes {
-        margin: 0 5px 0 0;
-        display: flex;
-        height: ${checkboxHeight};
-      }
-      .facet-checkboxes input:first-child {
-        margin-right: 5px;
-      }
-      .facet-checkboxes input {
-        height: ${checkboxHeight};
-        width: ${checkboxHeight};
-        margin: 0;
-      }
-      .facet-row-container {
-        display: flex;
-        font-weight: 500;
-        font-size: 1.2rem;
-        margin: 0 auto;
-        padding: 0.25rem 0;
-        height: auto;
-        border-top: ${facetRowBorderTop};
-        border-bottom: ${facetRowBorderBottom};
-      }
-      .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-note {
-        color: #bbb;
-      }
-      .facet-count {
-        text-align: right;
-      }
-      .select-facet-checkbox {
-        cursor: pointer;
-        display: inline-block;
-      }
-      .hide-facet-checkbox {
-        position: absolute;
-        clip: rect(0, 0, 0, 0);
-        pointer-events: none;
-      }
-      .hide-facet-checkbox:focus-visible + .hide-facet-icon {
-        outline-style: auto;
-        outline-offset: 2px;
-      }
-      .hide-facet-icon {
-        width: ${checkboxHeight};
-        height: ${checkboxHeight};
-        cursor: pointer;
-        display: flex;
-      }
-      .eye {
-        width: ${checkboxHeight};
-        height: ${checkboxHeight};
-        opacity: 0.3;
-      }
-      .hide-facet-icon:hover .eye,
-      .active .eye {
-        opacity: 1;
-      }
-      .hide-facet-icon:hover .eye-open,
-      .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-open {
-        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;
-      }
-    `;
-        return [srOnlyStyle, ownCss];
+        return [srOnlyStyle, facetRowStyles];
     }
 };
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport type {\n  FacetOption,\n  FacetBucket,\n  FacetEventDetails,\n  FacetState,\n} from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('facet-row')\nexport class FacetRow extends LitElement {\n  //\n  // UI STATE\n  //\n\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n  @property({ type: String }) facetType?: FacetOption;\n\n  /** The facet bucket containing details about the state, count, and key for this row */\n  @property({ type: Object }) bucket?: FacetBucket;\n\n  /**\n   * Whether to omit the negative/hide button from this facet row if possible.\n   * Has no effect if the facet bucket is itself hidden, in which case the hide\n   * button *must* be shown to represent the state accurately.\n   */\n  @property({ type: Boolean, reflect: true }) omitHideButton = false;\n\n  /** The collection name cache for converting collection identifiers to titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    return html`${this.facetRowTemplate}`;\n  }\n\n  //\n  // TEMPLATE GETTERS\n  //\n\n  /**\n   * Template for the full facet row, including the positive/negative checks,\n   * the display name, and the count.\n   */\n  private get facetRowTemplate(): TemplateResult | typeof nothing {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return nothing;\n\n    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\n    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\n\n    const extraNoteSpan = bucket.extraNote\n      ? html`<span class=\"facet-note\">${bucket.extraNote}</span>`\n      : nothing;\n\n    // For collections, we render the collection title as a link.\n    // For other facet types, we just have a static value to use.\n    const bucketTextDisplay =\n      facetType !== 'collection'\n        ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`\n        : html`<a href=\"/details/${bucket.key}\">\n            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}\n          </a> `;\n\n    const bucketCountText =\n      bucket.count > 0 ? bucket.count.toLocaleString() : '';\n\n    const facetHidden = bucket.state === 'hidden';\n    const facetSelected = bucket.state === 'selected';\n\n    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\n    const onlyShowText = facetSelected\n      ? `Show all ${facetType}s`\n      : `Only show ${titleText}`;\n    const hideText = `Hide ${titleText}`;\n    const unhideText = `Unhide ${titleText}`;\n    const showHideText = facetHidden ? unhideText : hideText;\n    const ariaLabel = `${titleText}, ${bucket.count} results`;\n\n    // Added data-testid for Playwright testing\n    return html`\n      <div class=\"facet-row-container\">\n        <div class=\"facet-checkboxes\">\n          <input\n            type=\"checkbox\"\n            .name=${facetType}\n            .value=${bucket.key}\n            @click=${(e: Event) => {\n              this.facetClicked(e, false);\n            }}\n            .checked=${facetSelected}\n            class=\"select-facet-checkbox\"\n            title=${onlyShowText}\n            id=${showOnlyCheckboxId}\n            data-testid=${showOnlyCheckboxId}\n          />\n          <div\n            class=\"hide-facet-container\"\n            ?hidden=${this.omitHideButton && !facetHidden}\n          >\n            <input\n              type=\"checkbox\"\n              id=${negativeCheckboxId}\n              .name=${facetType}\n              .value=${bucket.key}\n              @click=${(e: Event) => {\n                this.facetClicked(e, true);\n              }}\n              .checked=${facetHidden}\n              class=\"hide-facet-checkbox\"\n            />\n            <label\n              for=${negativeCheckboxId}\n              class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n              title=${showHideText}\n              data-testid=${negativeCheckboxId}\n            >\n              <span class=\"sr-only\">${showHideText}</span>\n              <span class=\"eye eye-open\">${eyeIcon}</span>\n              <span class=\"eye eye-closed\">${eyeClosedIcon}</span>\n            </label>\n          </div>\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\">${bucketCountText}</div>\n        </label>\n      </div>\n    `;\n  }\n\n  //\n  // EVENT HANDLERS & DISPATCHERS\n  //\n\n  /**\n   * Handler for whenever this facet is clicked & its state changes\n   */\n  private facetClicked(e: Event, negative: boolean) {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return;\n\n    const target = e.target as HTMLInputElement;\n    const { checked } = target;\n    this.bucket = {\n      ...bucket,\n      state: FacetRow.getFacetState(checked, negative),\n    };\n\n    this.dispatchFacetClickEvent({\n      facetType,\n      bucket: this.bucket,\n      negative,\n    });\n  }\n\n  /**\n   * Emits a `facetClick` event with details about this facet & its current state\n   */\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  /**\n   * Returns the composed facet state corresponding to a positive or negative facet's checked state\n   */\n  static getFacetState(checked: boolean, negative: boolean): FacetState {\n    let state: FacetState;\n    if (checked) {\n      state = negative ? 'hidden' : 'selected';\n    } else {\n      state = 'none';\n    }\n    return state;\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\n    const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\n    const checkboxHeight = css`15px`;\n\n    const ownCss = css`\n      .facet-checkboxes {\n        margin: 0 5px 0 0;\n        display: flex;\n        height: ${checkboxHeight};\n      }\n      .facet-checkboxes input:first-child {\n        margin-right: 5px;\n      }\n      .facet-checkboxes input {\n        height: ${checkboxHeight};\n        width: ${checkboxHeight};\n        margin: 0;\n      }\n      .facet-row-container {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 0 auto;\n        padding: 0.25rem 0;\n        height: auto;\n        border-top: ${facetRowBorderTop};\n        border-bottom: ${facetRowBorderBottom};\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-note {\n        color: #bbb;\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        position: absolute;\n        clip: rect(0, 0, 0, 0);\n        pointer-events: none;\n      }\n      .hide-facet-checkbox:focus-visible + .hide-facet-icon {\n        outline-style: auto;\n        outline-offset: 2px;\n      }\n      .hide-facet-icon {\n        width: ${checkboxHeight};\n        height: ${checkboxHeight};\n        cursor: pointer;\n        display: flex;\n      }\n      .eye {\n        width: ${checkboxHeight};\n        height: ${checkboxHeight};\n        opacity: 0.3;\n      }\n      .hide-facet-icon:hover .eye,\n      .active .eye {\n        opacity: 1;\n      }\n      .hide-facet-icon:hover .eye-open,\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-open {\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    return [srOnlyStyle, ownCss];\n  }\n}\n"]}
+{"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n  FacetOption,\n  FacetBucket,\n  FacetEventDetails,\n  FacetState,\n} from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport { srOnlyStyle } from '../styles/sr-only';\nimport {\n  facetRowStyles,\n  facetRowTemplate,\n  getFacetState,\n} from './facet-row-template';\n\n@customElement('facet-row')\nexport class FacetRow extends LitElement {\n  //\n  // UI STATE\n  //\n\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n  @property({ type: String }) facetType?: FacetOption;\n\n  /** The facet bucket containing details about the state, count, and key for this row */\n  @property({ type: Object }) bucket?: FacetBucket;\n\n  /**\n   * Whether to omit the negative/hide button from this facet row if possible.\n   * Has no effect if the facet bucket is itself hidden, in which case the hide\n   * button *must* be shown to represent the state accurately.\n   */\n  @property({ type: Boolean, reflect: true }) omitHideButton = false;\n\n  /** The collection name cache for converting collection identifiers to titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    return html`${this.facetRowTemplate}`;\n  }\n\n  //\n  // TEMPLATE GETTERS\n  //\n\n  /**\n   * Template for the full facet row, including the positive/negative checks,\n   * the display name, and the count.\n   */\n  private get facetRowTemplate(): TemplateResult | typeof nothing {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return nothing;\n\n    return facetRowTemplate({\n      facetType,\n      bucket,\n      collectionTitles: this.collectionTitles,\n      omitHideButton: this.omitHideButton,\n      onCheckboxClick: (e, negative) => this.facetClicked(e, negative),\n    });\n  }\n\n  //\n  // EVENT HANDLERS & DISPATCHERS\n  //\n\n  /**\n   * Handler for whenever this facet is clicked & its state changes\n   */\n  private facetClicked(e: Event, negative: boolean) {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return;\n\n    const target = e.target as HTMLInputElement;\n    const { checked } = target;\n    this.bucket = {\n      ...bucket,\n      state: FacetRow.getFacetState(checked, negative),\n    };\n\n    this.dispatchFacetClickEvent({\n      facetType,\n      bucket: this.bucket,\n      negative,\n    });\n  }\n\n  /**\n   * Emits a `facetClick` event with details about this facet & its current state\n   */\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  /**\n   * Returns the composed facet state corresponding to a positive or negative facet's checked state\n   */\n  static getFacetState(checked: boolean, negative: boolean): FacetState {\n    return getFacetState(checked, negative);\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return [srOnlyStyle, facetRowStyles];\n  }\n}\n"]}

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

@@ -3,7 +3,12 @@
  */
 export declare const MORE_FACETS__MAX_AGGREGATIONS = 10000;
 /**
- * Default number of facets to show per page of the More... facet dialogs.
+ * Width in px of each column of facets in the More... facet dialogs. Every
+ * column is this wide; the number of columns per page is however many fit.
+ */
+export declare const MORE_FACETS__COLUMN_WIDTH = 250;
+/**
+ * Default number of facets stacked in each column of the More... facet dialogs.
  * Can be overridden via component property.
  */
-export declare const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;
+export declare const MORE_FACETS__ROWS_PER_COLUMN = 12;

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

@@ -3,8 +3,13 @@
  */
 export const MORE_FACETS__MAX_AGGREGATIONS = 10000;
 /**
- * Default number of facets to show per page of the More... facet dialogs.
+ * Width in px of each column of facets in the More... facet dialogs. Every
+ * column is this wide; the number of columns per page is however many fit.
+ */
+export const MORE_FACETS__COLUMN_WIDTH = 250;
+/**
+ * Default number of facets stacked in each column of the More... facet dialogs.
  * Can be overridden via component property.
  */
-export const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;
+export const MORE_FACETS__ROWS_PER_COLUMN = 12;
 //# sourceMappingURL=models.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/collection-facets/models.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Maximum number of aggregations to include in the More... facet dialogs.\n */\nexport const MORE_FACETS__MAX_AGGREGATIONS = 10000;\n\n/**\n * Default number of facets to show per page of the More... facet dialogs.\n * Can be overridden via component property.\n */\nexport const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/collection-facets/models.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAE7C;;;GAGG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Maximum number of aggregations to include in the More... facet dialogs.\n */\nexport const MORE_FACETS__MAX_AGGREGATIONS = 10000;\n\n/**\n * Width in px of each column of facets in the More... facet dialogs. Every\n * column is this wide; the number of columns per page is however many fit.\n */\nexport const MORE_FACETS__COLUMN_WIDTH = 250;\n\n/**\n * Default number of facets stacked in each column of the More... facet dialogs.\n * Can be overridden via component property.\n */\nexport const MORE_FACETS__ROWS_PER_COLUMN = 12;\n"]}