npm - @internetarchive/collection-browser - Versions diffs - 0.4.10 → 0.4.12 - Mend

@internetarchive/collection-browser 0.4.10 → 0.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/src/collection-browser.d.ts +1 -0
package/dist/src/collection-browser.js +24 -5
package/dist/src/collection-browser.js.map +1 -1
package/dist/src/collection-facets/more-facets-content.d.ts +3 -2
package/dist/src/collection-facets/more-facets-content.js +24 -47
package/dist/src/collection-facets/more-facets-content.js.map +1 -1
package/dist/src/collection-facets/more-facets-pagination.js +5 -3
package/dist/src/collection-facets/more-facets-pagination.js.map +1 -1
package/dist/src/collection-facets/toggle-switch.d.ts +41 -0
package/dist/src/collection-facets/toggle-switch.js +184 -0
package/dist/src/collection-facets/toggle-switch.js.map +1 -0
package/dist/src/empty-placeholder.d.ts +5 -3
package/dist/src/empty-placeholder.js +39 -3
package/dist/src/empty-placeholder.js.map +1 -1
package/dist/src/sort-filter-bar/alpha-bar.js +8 -0
package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
package/dist/src/tiles/list/tile-list-compact.d.ts +1 -0
package/dist/src/tiles/list/tile-list-compact.js +15 -2
package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
package/dist/src/tiles/list/tile-list.js +3 -0
package/dist/src/tiles/list/tile-list.js.map +1 -1
package/dist/test/collection-facets/toggle-switch.test.d.ts +1 -0
package/dist/test/collection-facets/toggle-switch.test.js +87 -0
package/dist/test/collection-facets/toggle-switch.test.js.map +1 -0
package/dist/test/tiles/list/tile-list-compact.test.js +12 -0
package/dist/test/tiles/list/tile-list-compact.test.js.map +1 -1
package/dist/test/tiles/list/tile-list.test.js +12 -0
package/dist/test/tiles/list/tile-list.test.js.map +1 -1
package/package.json +3 -3
package/src/collection-browser.ts +25 -1
package/src/collection-facets/more-facets-content.ts +25 -48
package/src/collection-facets/more-facets-pagination.ts +5 -3
package/src/collection-facets/toggle-switch.ts +184 -0
package/src/empty-placeholder.ts +53 -7
package/src/sort-filter-bar/alpha-bar.ts +8 -0
package/src/tiles/list/tile-list-compact.ts +15 -2
package/src/tiles/list/tile-list.ts +3 -0
package/test/collection-facets/toggle-switch.test.ts +154 -0
package/test/tiles/list/tile-list-compact.test.ts +14 -0
package/test/tiles/list/tile-list.test.ts +14 -0

package/dist/src/empty-placeholder.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import emptyQueryIcon from './assets/img/icons/empty-query';
@@ -8,6 +8,7 @@ let EmptyPlaceholder = class EmptyPlaceholder extends LitElement {
     constructor() {
         super(...arguments);
         this.placeholderType = null;
+        this.detailMessage = '';
     }
     render() {
         return this.placeholderType ? html `${this.placeholderTemplate}` : nothing;
@@ -22,6 +23,7 @@ let EmptyPlaceholder = class EmptyPlaceholder extends LitElement {
         ${choose(this.placeholderType, [
             ['empty-query', () => this.emptyQueryTemplate],
             ['null-result', () => this.nullResultTemplate],
+            ['query-error', () => this.queryErrorTemplate],
         ])}
       </div>
     `;
@@ -43,6 +45,21 @@ let EmptyPlaceholder = class EmptyPlaceholder extends LitElement {
       <div>${nullResultIcon}</div>
     `;
     }
+    get queryErrorTemplate() {
+        return html `
+      <h2 class="title">
+        The search engine encountered an error, which might be related to your
+        search query.
+        <a
+          href="https://help.archive.org/help/search-building-powerful-complex-queries/"
+        >
+          Tips for constructing search queries.
+        </a>
+      </h2>
+      <div>${nullResultIcon}</div>
+      <p class="error-details">Error details: ${this.detailMessage}</p>
+    `;
+    }
     static get styles() {
         return css `
       :host {
@@ -50,6 +67,16 @@ let EmptyPlaceholder = class EmptyPlaceholder extends LitElement {
         width: 100%;
       }
+      a {
+        text-decoration: none;
+      }
+      a:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
       .placeholder {
         display: block;
       }
@@ -57,16 +84,22 @@ let EmptyPlaceholder = class EmptyPlaceholder extends LitElement {
       .desktop svg {
         max-height: 40rem;
       }
-      .desktop .title {
+      .desktop .title,
+      .desktop .error-details {
         margin: 4rem 0;
       }
       .mobile svg {
         max-height: 20rem;
       }
-      .mobile .title {
+      .mobile .title,
+      .mobile .error-details {
         margin: 2rem 0.5;
       }
+      .error-details {
+        font-size: 1.2rem;
+      }
     `;
     }
 };
@@ -76,6 +109,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], EmptyPlaceholder.prototype, "isMobileView", void 0);
+__decorate([
+    property({ type: String })
+], EmptyPlaceholder.prototype, "detailMessage", void 0);
 EmptyPlaceholder = __decorate([
     customElement('empty-placeholder')
 ], EmptyPlaceholder);

package/dist/src/empty-placeholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-placeholder.js","sourceRoot":"","sources":["../../src/empty-placeholder.ts"],"names":[],"mappings":";AAAA,OAAO,~~EAAE~~,GAAG,~~EAAE~~,IAAI,~~EAAE~~,UAAU,~~EAAkB~~,OAAO,~~EAAE~~,MAAM,KAAK,CAAC;~~AACrE~~,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,cAAc,MAAM,gCAAgC,CAAC;~~AAI5D~~,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC8B,oBAAe,GAAoB,IAAI,CAAC;~~IAoEtE~~,CAAC;~~IAhEC~~,MAAM;QACJ,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5E,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAA;;6BAEc,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY;YAC5D,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,SAAS;;UAEX,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE;YAC7B,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC;YAC9C,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC;SAC/C,CAAC;;KAEL,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;;;aAIF,cAAc;KACtB,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;;;;aAKF,cAAc;KACtB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;KAuBT~~,CAAC;IACJ,CAAC;CACF,CAAA;~~AApE6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAyC;AAEvC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAsB;~~AAHvC~~,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,~~CAqE5B~~;~~SArEY~~,gBAAgB","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { choose } from 'lit/directives/choose.js';\n\nimport emptyQueryIcon from './assets/img/icons/empty-query';\nimport nullResultIcon from './assets/img/icons/null-result';\n\nexport type PlaceholderType = 'empty-query' \| 'null-result' \| null;\n@customElement('empty-placeholder')\nexport class EmptyPlaceholder extends LitElement {\n @property({ type: String }) placeholderType: PlaceholderType = null;\n\n @property({ type: Boolean }) isMobileView?: false;\n\n render() {\n return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;\n }\n\n private get placeholderTemplate() {\n return html`\n <div\n class=\"placeholder ${this.placeholderType} ${this.isMobileView\n ? 'mobile'\n : 'desktop'}\"\n >\n ${choose(this.placeholderType, [\n ['empty-query', () => this.emptyQueryTemplate],\n ['null-result', () => this.nullResultTemplate],\n ])}\n </div>\n `;\n }\n\n private get emptyQueryTemplate() {\n return html`\n <h2 class=\"title\">\n To begin searching, enter a search term in the box above and hit \"Go\".\n </h2>\n <div>${emptyQueryIcon}</div>\n `;\n }\n\n private get nullResultTemplate() {\n return html`\n <h2 class=\"title\">\n Your search did not match any items in the Archive. Try different\n keywords or a more general search.\n </h2>\n <div>${nullResultIcon}</div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n text-align: center;\n width: 100%;\n }\n\n .placeholder {\n display: block;\n }\n\n .desktop svg {\n max-height: 40rem;\n }\n .desktop .title {\n margin: 4rem 0;\n }\n\n .mobile svg {\n max-height: 20rem;\n }\n .mobile .title {\n margin: 2rem 0.5;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"empty-placeholder.js","sourceRoot":"","sources":["../../src/empty-placeholder.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAEV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAQ5D,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC8B,oBAAe,GAAoB,IAAI,CAAC;QAIxC,kBAAa,GAAY,EAAE,CAAC;IAmG1D,CAAC;IAjGC,MAAM;QACJ,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5E,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAA;;6BAEc,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY;YAC5D,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,SAAS;;UAEX,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE;YAC7B,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC;YAC9C,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC;YAC9C,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC;SAC/C,CAAC;;KAEL,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;;;aAIF,cAAc;KACtB,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;;;;aAKF,cAAc;KACtB,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;;;;;;;;;aAUF,cAAc;gDACqB,IAAI,CAAC,aAAa;KAC7D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AAvG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAyC;AAEvC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAsB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA6B;AAL7C,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAwG5B;SAxGY,gBAAgB","sourcesContent":["import {\n css,\n html,\n LitElement,\n CSSResultGroup,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { choose } from 'lit/directives/choose.js';\n\nimport emptyQueryIcon from './assets/img/icons/empty-query';\nimport nullResultIcon from './assets/img/icons/null-result';\n\nexport type PlaceholderType =\n \| 'empty-query'\n \| 'null-result'\n \| 'query-error'\n \| null;\n@customElement('empty-placeholder')\nexport class EmptyPlaceholder extends LitElement {\n @property({ type: String }) placeholderType: PlaceholderType = null;\n\n @property({ type: Boolean }) isMobileView?: false;\n\n @property({ type: String }) detailMessage?: string = '';\n\n render() {\n return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;\n }\n\n private get placeholderTemplate(): TemplateResult {\n return html`\n <div\n class=\"placeholder ${this.placeholderType} ${this.isMobileView\n ? 'mobile'\n : 'desktop'}\"\n >\n ${choose(this.placeholderType, [\n ['empty-query', () => this.emptyQueryTemplate],\n ['null-result', () => this.nullResultTemplate],\n ['query-error', () => this.queryErrorTemplate],\n ])}\n </div>\n `;\n }\n\n private get emptyQueryTemplate(): TemplateResult {\n return html`\n <h2 class=\"title\">\n To begin searching, enter a search term in the box above and hit \"Go\".\n </h2>\n <div>${emptyQueryIcon}</div>\n `;\n }\n\n private get nullResultTemplate(): TemplateResult {\n return html`\n <h2 class=\"title\">\n Your search did not match any items in the Archive. Try different\n keywords or a more general search.\n </h2>\n <div>${nullResultIcon}</div>\n `;\n }\n\n private get queryErrorTemplate(): TemplateResult {\n return html`\n <h2 class=\"title\">\n The search engine encountered an error, which might be related to your\n search query.\n <a\n href=\"https://help.archive.org/help/search-building-powerful-complex-queries/\"\n >\n Tips for constructing search queries.\n </a>\n </h2>\n <div>${nullResultIcon}</div>\n <p class=\"error-details\">Error details: ${this.detailMessage}</p>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n text-align: center;\n width: 100%;\n }\n\n a {\n text-decoration: none;\n }\n a:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n\n .placeholder {\n display: block;\n }\n\n .desktop svg {\n max-height: 40rem;\n }\n .desktop .title,\n .desktop .error-details {\n margin: 4rem 0;\n }\n\n .mobile svg {\n max-height: 20rem;\n }\n .mobile .title,\n .mobile .error-details {\n margin: 2rem 0.5;\n }\n\n .error-details {\n font-size: 1.2rem;\n }\n `;\n }\n}\n"]}

package/dist/src/sort-filter-bar/alpha-bar.js CHANGED Viewed

@@ -202,6 +202,14 @@ AlphaBar.styles = css `
     alpha-bar-tooltip.fade-in {
       opacity: 1;
     }
+    /* Make alphabet bar a 2-row container in small screen widths */
+    @media screen and (max-width: 768px) {
+      ul {
+        display: grid;
+        grid-template-columns: repeat(13, 1fr);
+      }
+    }
   `;
 __decorate([
     property({ type: String })

package/dist/src/sort-filter-bar/alpha-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alpha-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/alpha-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport type { PrefixFilterCounts } from '../models';\n\nimport './alpha-bar-tooltip';\nimport type { AlphaBarTooltip } from './alpha-bar-tooltip';\n\n@customElement('alpha-bar')\nexport class AlphaBar extends LitElement {\n @property({ type: String }) selectedLetter: string \| null = null;\n\n @property({ type: Object }) letterCounts?: PrefixFilterCounts;\n\n @state()\n private tooltipShown: boolean = false;\n\n @state()\n private hoveredLetter?: string;\n\n @query('alpha-bar-tooltip')\n private tooltip?: AlphaBarTooltip;\n\n private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\n\n private get selectedUppercaseLetter(): string \| undefined {\n return this.selectedLetter?.toUpperCase();\n }\n\n render() {\n return html`\n <div id=\"container\">\n <ul>\n ${this.alphabet.map(\n letter =>\n html`\n <li\n class=${letter === this.selectedUppercaseLetter\n ? 'selected'\n : nothing}\n @mousemove=${this.handleMouseMove}\n @mouseleave=${this.handleMouseLeave}\n >\n ${this.letterCounts?.[letter]\n ? this.letterLinkTemplate(letter)\n : html`<span>${letter}</span>`}\n ${this.tooltipTemplate(letter)}\n </li>\n `\n )}\n </ul>\n </div>\n `;\n }\n\n private letterLinkTemplate(letter: string) {\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n this.letterClicked(letter);\n }}\n >\n ${letter}\n </a>\n `;\n }\n\n private tooltipTemplate(letter: string): TemplateResult \| typeof nothing {\n if (this.hoveredLetter !== letter) return nothing;\n\n return this.tooltipShown\n ? html`<alpha-bar-tooltip\n data-letter=${letter}\n .numResults=${this.letterCounts?.[this.hoveredLetter] ?? 0}\n ></alpha-bar-tooltip>`\n : nothing;\n }\n\n private letterClicked(letter: string) {\n if (letter === this.selectedUppercaseLetter) {\n this.selectedLetter = null;\n } else {\n this.selectedLetter = letter;\n }\n this.dispatchEvent(\n new CustomEvent('letterChanged', {\n detail: { selectedLetter: this.selectedUppercaseLetter },\n })\n );\n }\n\n private async handleMouseMove(e: MouseEvent) {\n const target = e.target as HTMLLIElement;\n if (target && !this.tooltipShown) {\n const targetLetter = target.textContent?.trim() ?? undefined;\n this.tooltipShown = true;\n this.hoveredLetter = targetLetter;\n\n await this.updateComplete;\n await new Promise(resolve => {\n setTimeout(resolve, 0);\n });\n\n if (this.tooltip && this.tooltip.dataset.letter === targetLetter) {\n this.positionTooltip(target);\n }\n }\n }\n\n private handleMouseLeave() {\n this.tooltipShown = false;\n this.hoveredLetter = undefined;\n }\n\n private positionTooltip(targetElmt: HTMLElement) {\n if (!this.tooltip) return;\n\n // Basic positioning is just to center the whole tooltip on the letter box.\n const tooltipWidth = this.tooltip.clientWidth;\n const letterWidth = targetElmt.clientWidth;\n let left = letterWidth / 2 - tooltipWidth / 2;\n\n // But we also need to ensure the tooltip doesn't flow outside the viewport.\n // First, calculate the full width of the document body, including margins\n // (but not including any scrollbar).\n const bodyStyle = getComputedStyle(document.body);\n const bodyMarginLeft = parseFloat(\n bodyStyle.getPropertyValue('margin-left')\n );\n const bodyMarginRight = parseFloat(\n bodyStyle.getPropertyValue('margin-right')\n );\n const bodyWidthWithMargin =\n document.body.clientWidth + bodyMarginLeft + bodyMarginRight;\n\n // Calculate the positions of the tooltip's left/right edges, and determine\n // how much they overflow the viewport by (if at all).\n const targetRect = targetElmt.getBoundingClientRect();\n const tooltipLeft = targetRect.left + left;\n const tooltipRight = tooltipLeft + tooltipWidth;\n const offset = 1; // How many pixels the tooltip must be offset from the left/right edges\n let overflowAmt;\n if (tooltipLeft < offset) {\n // Tooltip overflows left edge of viewport\n overflowAmt = tooltipLeft - offset;\n } else if (tooltipRight > bodyWidthWithMargin - offset) {\n // Tooltip overflows right edge of viewport\n overflowAmt = tooltipRight - bodyWidthWithMargin + offset;\n }\n\n // Apply any needed adjustment to the tooltip and its arrow to keep it in the viewport\n if (overflowAmt) {\n left -= overflowAmt;\n this.tooltip.style.setProperty(\n '--tooltipArrowOffset',\n `${overflowAmt}px`\n );\n }\n\n this.tooltip.style.left = `${left}px`;\n this.tooltip.classList.add('fade-in');\n }\n\n static styles = css`\n h1 {\n font-size: 1.2rem;\n }\n\n #container {\n background-color: #ddd;\n color: #333;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0.5rem 1rem;\n justify-content: space-between;\n }\n\n ul li {\n position: relative;\n flex: 1;\n text-align: center;\n max-width: 2.5rem;\n border-radius: 4px;\n }\n\n li:hover:not(.selected) a {\n background-color: #c0c0c0;\n }\n\n a,\n span {\n display: flex;\n justify-content: center;\n align-items: center;\n aspect-ratio: 1 / 1;\n }\n\n a {\n color: #333;\n text-decoration: none;\n border-radius: 4px;\n }\n\n span {\n color: #aaa;\n cursor: default;\n }\n\n .selected {\n background-color: #2c2c2c;\n }\n\n .selected a {\n color: white;\n }\n\n alpha-bar-tooltip {\n position: absolute;\n top: 100%;\n left: -9999px;\n margin-top: 3px;\n\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n alpha-bar-tooltip.fade-in {\n opacity: 1;\n }\n `;\n}\n"]}
1	+ {"version":3,"file":"alpha-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/alpha-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport type { PrefixFilterCounts } from '../models';\n\nimport './alpha-bar-tooltip';\nimport type { AlphaBarTooltip } from './alpha-bar-tooltip';\n\n@customElement('alpha-bar')\nexport class AlphaBar extends LitElement {\n @property({ type: String }) selectedLetter: string \| null = null;\n\n @property({ type: Object }) letterCounts?: PrefixFilterCounts;\n\n @state()\n private tooltipShown: boolean = false;\n\n @state()\n private hoveredLetter?: string;\n\n @query('alpha-bar-tooltip')\n private tooltip?: AlphaBarTooltip;\n\n private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\n\n private get selectedUppercaseLetter(): string \| undefined {\n return this.selectedLetter?.toUpperCase();\n }\n\n render() {\n return html`\n <div id=\"container\">\n <ul>\n ${this.alphabet.map(\n letter =>\n html`\n <li\n class=${letter === this.selectedUppercaseLetter\n ? 'selected'\n : nothing}\n @mousemove=${this.handleMouseMove}\n @mouseleave=${this.handleMouseLeave}\n >\n ${this.letterCounts?.[letter]\n ? this.letterLinkTemplate(letter)\n : html`<span>${letter}</span>`}\n ${this.tooltipTemplate(letter)}\n </li>\n `\n )}\n </ul>\n </div>\n `;\n }\n\n private letterLinkTemplate(letter: string) {\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n this.letterClicked(letter);\n }}\n >\n ${letter}\n </a>\n `;\n }\n\n private tooltipTemplate(letter: string): TemplateResult \| typeof nothing {\n if (this.hoveredLetter !== letter) return nothing;\n\n return this.tooltipShown\n ? html`<alpha-bar-tooltip\n data-letter=${letter}\n .numResults=${this.letterCounts?.[this.hoveredLetter] ?? 0}\n ></alpha-bar-tooltip>`\n : nothing;\n }\n\n private letterClicked(letter: string) {\n if (letter === this.selectedUppercaseLetter) {\n this.selectedLetter = null;\n } else {\n this.selectedLetter = letter;\n }\n this.dispatchEvent(\n new CustomEvent('letterChanged', {\n detail: { selectedLetter: this.selectedUppercaseLetter },\n })\n );\n }\n\n private async handleMouseMove(e: MouseEvent) {\n const target = e.target as HTMLLIElement;\n if (target && !this.tooltipShown) {\n const targetLetter = target.textContent?.trim() ?? undefined;\n this.tooltipShown = true;\n this.hoveredLetter = targetLetter;\n\n await this.updateComplete;\n await new Promise(resolve => {\n setTimeout(resolve, 0);\n });\n\n if (this.tooltip && this.tooltip.dataset.letter === targetLetter) {\n this.positionTooltip(target);\n }\n }\n }\n\n private handleMouseLeave() {\n this.tooltipShown = false;\n this.hoveredLetter = undefined;\n }\n\n private positionTooltip(targetElmt: HTMLElement) {\n if (!this.tooltip) return;\n\n // Basic positioning is just to center the whole tooltip on the letter box.\n const tooltipWidth = this.tooltip.clientWidth;\n const letterWidth = targetElmt.clientWidth;\n let left = letterWidth / 2 - tooltipWidth / 2;\n\n // But we also need to ensure the tooltip doesn't flow outside the viewport.\n // First, calculate the full width of the document body, including margins\n // (but not including any scrollbar).\n const bodyStyle = getComputedStyle(document.body);\n const bodyMarginLeft = parseFloat(\n bodyStyle.getPropertyValue('margin-left')\n );\n const bodyMarginRight = parseFloat(\n bodyStyle.getPropertyValue('margin-right')\n );\n const bodyWidthWithMargin =\n document.body.clientWidth + bodyMarginLeft + bodyMarginRight;\n\n // Calculate the positions of the tooltip's left/right edges, and determine\n // how much they overflow the viewport by (if at all).\n const targetRect = targetElmt.getBoundingClientRect();\n const tooltipLeft = targetRect.left + left;\n const tooltipRight = tooltipLeft + tooltipWidth;\n const offset = 1; // How many pixels the tooltip must be offset from the left/right edges\n let overflowAmt;\n if (tooltipLeft < offset) {\n // Tooltip overflows left edge of viewport\n overflowAmt = tooltipLeft - offset;\n } else if (tooltipRight > bodyWidthWithMargin - offset) {\n // Tooltip overflows right edge of viewport\n overflowAmt = tooltipRight - bodyWidthWithMargin + offset;\n }\n\n // Apply any needed adjustment to the tooltip and its arrow to keep it in the viewport\n if (overflowAmt) {\n left -= overflowAmt;\n this.tooltip.style.setProperty(\n '--tooltipArrowOffset',\n `${overflowAmt}px`\n );\n }\n\n this.tooltip.style.left = `${left}px`;\n this.tooltip.classList.add('fade-in');\n }\n\n static styles = css`\n h1 {\n font-size: 1.2rem;\n }\n\n #container {\n background-color: #ddd;\n color: #333;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0.5rem 1rem;\n justify-content: space-between;\n }\n\n ul li {\n position: relative;\n flex: 1;\n text-align: center;\n max-width: 2.5rem;\n border-radius: 4px;\n }\n\n li:hover:not(.selected) a {\n background-color: #c0c0c0;\n }\n\n a,\n span {\n display: flex;\n justify-content: center;\n align-items: center;\n aspect-ratio: 1 / 1;\n }\n\n a {\n color: #333;\n text-decoration: none;\n border-radius: 4px;\n }\n\n span {\n color: #aaa;\n cursor: default;\n }\n\n .selected {\n background-color: #2c2c2c;\n }\n\n .selected a {\n color: white;\n }\n\n alpha-bar-tooltip {\n position: absolute;\n top: 100%;\n left: -9999px;\n margin-top: 3px;\n\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n alpha-bar-tooltip.fade-in {\n opacity: 1;\n }\n\n /* Make alphabet bar a 2-row container in small screen widths */\n @media screen and (max-width: 768px) {\n ul {\n display: grid;\n grid-template-columns: repeat(13, 1fr);\n }\n }\n `;\n}\n"]}

package/dist/src/tiles/list/tile-list-compact.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ export declare class TileListCompact extends LitElement {
     baseImageUrl?: string;
     loggedIn: boolean;
     render(): import("lit-html").TemplateResult<1>;
+    private get href();
     private get date();
     private get views();
     private get classSize();

package/dist/src/tiles/list/tile-list-compact.js CHANGED Viewed

@@ -26,7 +26,9 @@ let TileListCompact = class TileListCompact extends LitElement {
           .loggedIn=${this.loggedIn}
         >
         </image-block>
-        <div id="title">${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</div>
+        <a href=${this.href} id="title"
+          >${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</a
+        >
         <div id="creator">
           ${((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'account'
             ? accountLabel((_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded)
@@ -44,6 +46,14 @@ let TileListCompact = class TileListCompact extends LitElement {
       </div>
     `;
     }
+    get href() {
+        var _a, _b;
+        // Use the server-specified href if available.
+        // Otherwise, construct a details page URL from the item identifier.
+        return ((_a = this.model) === null || _a === void 0 ? void 0 : _a.href)
+            ? `${this.baseNavigationUrl}${this.model.href}`
+            : `${this.baseNavigationUrl}/details/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}`;
+    }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
      * private get dateSortSelector()
@@ -123,10 +133,13 @@ let TileListCompact = class TileListCompact extends LitElement {
       }
       #title {
-        color: #4b64ff;
         text-decoration: none;
       }
+      #title:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
       #title,
       #creator {
         text-overflow: ellipsis;

package/dist/src/tiles/list/tile-list-compact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,SAAS,MAAM,WAAW,CAAC;AAIlC,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAG3B,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAS8B,cAAS,GAAqB,IAAI,CAAC;QAMlC,aAAQ,GAAG,KAAK,CAAC;~~IA8JhD~~,CAAC;~~IA5JC~~,MAAM;;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,SAAS;;mBAE9B,IAAI,CAAC,KAAK;0BACH,IAAI,CAAC,YAAY;2BAChB,IAAI;wBACP,IAAI;sBACN,IAAI,CAAC,SAAS;sBACd,IAAI,CAAC,QAAQ;;;~~0BAGT~~,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,mCAAI,EAAE,CAAC~~;;YAEzD~~,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,SAAS;YACnC,CAAC,CAAC,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YACrC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,mCAAI,EAAE,CAAC;;yBAElC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;;;yBAGtC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;2BACnB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;0BAIxB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;KAElE,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,mCAAmC;QACnC,gFAAgF;QAChF,iFAAiF;QACjF,6EAA6E;QAC7E,yEAAyE;QACzE,mDAAmD;QACnD,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;SACpC;IACH,CAAC;IAED,IAAY,KAAK;;QACf,OAAO,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,MAAK,MAAM;YACrC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,eAAe,CAAC,eAAe;YAC7C,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC,CAAC,iBAAiB;IAC9C,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,UAAU;QACpB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsET~~,CAAC;IACJ,CAAC;CACF,CAAA;~~AA5K6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkB;AAfnC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,~~CA6K3B~~;~~SA7KY~~,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../../models';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${true}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n <~~div~~ id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</~~div~~>\n <div id=\"creator\">\n ${this.model?.mediatype === 'account'\n ? accountLabel(this.model?.dateAdded)\n : DOMPurify.sanitize(this.model?.creator ?? '')}\n </div>\n <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n <div id=\"icon\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </div>\n <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n </div>\n `;\n }\n\n /\n TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date \| undefined {\n // Note on 'publicdate' vs. 'date':\n // The search engine metadata uses 'publicdate' as the key for the date the item\n // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n // In contrast, the search engine metadata uses 'date' to refer to the actual\n // publication date of the underlying media (\"Date Published\" in the UI).\n // Refer to the full metadata schema for more info.\n switch (this.sortParam?.field) {\n case 'publicdate':\n return this.model?.dateArchived;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.datePublished;\n }\n }\n\n private get views(): number \| undefined {\n return this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n #list-line {\n display: grid;\n column-gap: 10px;\n border-top: 1px solid #ddd;\n align-items: center;\n line-height: 20px;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n #list-line.mobile {\n grid-template-columns: 36px 3fr 2fr 68px 35px;\n }\n\n #list-line.desktop {\n grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n }\n\n #list-line:hover #title {\n text-decoration: underline;\n }\n\n #title {\n ~~color~~: ~~#4b64ff~~;\n ~~text-decoration~~: ~~none~~;\n }\n\n #title,\n #creator {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n #icon {\n margin-left: 2px;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n .mobile #views {\n display: none;\n }\n\n .mobile mediatype-icon {\n --iconHeight: 14px;\n --iconWidth: 14px;\n }\n\n .desktop #icon {\n --iconHeight: 20px;\n --iconWidth: 20px;\n }\n\n item-image {\n --imgHeight: 100%;\n --imgWidth: 100%;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../../models';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${true}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n <a href=${this.href} id=\"title\"\n >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n >\n <div id=\"creator\">\n ${this.model?.mediatype === 'account'\n ? accountLabel(this.model?.dateAdded)\n : DOMPurify.sanitize(this.model?.creator ?? '')}\n </div>\n <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n <div id=\"icon\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </div>\n <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n </div>\n `;\n }\n\n private get href(): string {\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n return this.model?.href\n ? `${this.baseNavigationUrl}${this.model.href}`\n : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;\n }\n\n /\n TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date \| undefined {\n // Note on 'publicdate' vs. 'date':\n // The search engine metadata uses 'publicdate' as the key for the date the item\n // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n // In contrast, the search engine metadata uses 'date' to refer to the actual\n // publication date of the underlying media (\"Date Published\" in the UI).\n // Refer to the full metadata schema for more info.\n switch (this.sortParam?.field) {\n case 'publicdate':\n return this.model?.dateArchived;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.datePublished;\n }\n }\n\n private get views(): number \| undefined {\n return this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n #list-line {\n display: grid;\n column-gap: 10px;\n border-top: 1px solid #ddd;\n align-items: center;\n line-height: 20px;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n #list-line.mobile {\n grid-template-columns: 36px 3fr 2fr 68px 35px;\n }\n\n #list-line.desktop {\n grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n }\n\n #list-line:hover #title {\n text-decoration: underline;\n }\n\n #title {\n text-decoration: none;\n }\n\n #title:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n #title,\n #creator {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n #icon {\n margin-left: 2px;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n .mobile #views {\n display: none;\n }\n\n .mobile mediatype-icon {\n --iconHeight: 14px;\n --iconWidth: 14px;\n }\n\n .desktop #icon {\n --iconHeight: 20px;\n --iconWidth: 20px;\n }\n\n item-image {\n --imgHeight: 100%;\n --imgWidth: 100%;\n }\n `;\n }\n}\n"]}

package/dist/src/tiles/list/tile-list.js CHANGED Viewed

@@ -368,6 +368,9 @@ let TileList = class TileList extends LitElement {
       div a {
         text-decoration: none;
+      }
+      div a:link {
         color: var(--ia-theme-link-color, #4b64ff);
       }

package/dist/src/tiles/list/tile-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\n\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { suppressedCollections, TileModel } from '../../models';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @state() private collectionLinks: TemplateResult[] = [];\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n /*\n Templates\n /\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get imageBlockTemplate() {\n if (!this.model) return nothing;\n\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(\n this.model.identifier\n )}\"\n >\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n </a> `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n `;\n }\n\n // Data templates\n private get iconRightTemplate() {\n return html`\n <a id=\"icon-right\" href=${this.mediatypeURL} target=\"_blank\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </a>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n\n // If the model has a server-specified href, use it\n // Otherwise construct a details link using the identifier\n return this.model?.href\n ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n >${this.model.title ?? this.model.identifier}</a\n >`\n : this.detailsLink(this.model.identifier, this.model.title);\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get creatorTemplate() {\n // \"Archivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators \|\| this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' \|\|\n this.sortParam.field === 'reviewdate' \|\|\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n const viewCount =\n this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n\n return this.metadataTemplate(\n `${formatCount(viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects \|\| this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks \|\| this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections')}\n ${join(this.collectionLinks, html`, `)}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n // Sanitize away any HTML tags and convert line breaks to spaces.\n unsafeHTML(\n DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n ),\n '',\n 'description'\n );\n }\n\n private get textSnippetsTemplate(): TemplateResult \| typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`<text-snippet-block\n viewsize=\"list\"\n .snippets=${this.model?.snippets}\n ></text-snippet-block>`;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n // Utility functions\n // eslint-disable-next-line default-param-last\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field \|\| !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n / eslint-disable lit/no-invalid-html /\n return html`<a\n href=\"${this.baseNavigationUrl}/search?query=${query}\"\n rel=\"nofollow\"\n >\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n / eslint-enable lit/no-invalid-html /\n }\n\n private detailsLink(identifier: string, text?: string): TemplateResult {\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n /* The URL of this item's mediatype collection, if defined. /\n private get mediatypeURL(): string \| typeof nothing {\n // NB: baseNavigationUrl can be an empty string\n if (this.baseNavigationUrl === undefined \|\| !this.model?.mediatype)\n return nothing;\n\n // Need special handling for certain mediatypes that don't have a top-level collection page\n switch (this.model.mediatype) {\n case 'collection':\n return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n case 'account':\n return nothing;\n default:\n return `${this.baseNavigationUrl}/details/${encodeURI(\n this.model.mediatype\n )}`;\n }\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.fetchCollectionNames();\n }\n }\n\n private async fetchCollectionNames() {\n if (\n !this.model?.collections \|\|\n this.model.collections.length === 0 \|\|\n !this.collectionNameCache\n ) {\n return;\n }\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollectionLinks: TemplateResult[] = [];\n const promises: Promise<void>[] = [];\n for (const collection of this.model.collections) {\n // Don't include favorites or collections that are meant to be suppressed\n if (\n !suppressedCollections[collection] &&\n !collection.startsWith('fav-')\n ) {\n promises.push(\n this.collectionNameCache?.collectionNameFor(collection).then(name => {\n newCollectionLinks.push(\n this.detailsLink(collection, name ?? collection)\n );\n })\n );\n }\n }\n await Promise.all(promises);\n this.collectionLinks = newCollectionLinks;\n }\n\n /\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n /\n private get date(): Date \| undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n / fields /\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n / align top of text with image /\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; / number of lines to show /\n line-clamp: 3;\n }\n\n #collections {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n / Top level container /\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n /\n * If the container becomes very tiny, don't let the thumbnail side take\n * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n /\n #list-line-left {\n max-width: 25%;\n\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n / Lines containing multiple div as row /\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n\n /\n * With the exception of the title line, allow these to wrap if\n * the space becomes too small to accommodate them together.\n * \n * The title line is excluded because it contains the mediatype icon\n * which we don't want to wrap.\n */\n #item-line,\n #dates-line,\n #views-line {\n flex-wrap: wrap;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\n\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { suppressedCollections, TileModel } from '../../models';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @state() private collectionLinks: TemplateResult[] = [];\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n /*\n Templates\n /\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get imageBlockTemplate() {\n if (!this.model) return nothing;\n\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(\n this.model.identifier\n )}\"\n >\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n </a> `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n `;\n }\n\n // Data templates\n private get iconRightTemplate() {\n return html`\n <a id=\"icon-right\" href=${this.mediatypeURL} target=\"_blank\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </a>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n\n // If the model has a server-specified href, use it\n // Otherwise construct a details link using the identifier\n return this.model?.href\n ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n >${this.model.title ?? this.model.identifier}</a\n >`\n : this.detailsLink(this.model.identifier, this.model.title);\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get creatorTemplate() {\n // \"Archivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators \|\| this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' \|\|\n this.sortParam.field === 'reviewdate' \|\|\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n const viewCount =\n this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n\n return this.metadataTemplate(\n `${formatCount(viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects \|\| this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks \|\| this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections')}\n ${join(this.collectionLinks, html`, `)}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n // Sanitize away any HTML tags and convert line breaks to spaces.\n unsafeHTML(\n DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n ),\n '',\n 'description'\n );\n }\n\n private get textSnippetsTemplate(): TemplateResult \| typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`<text-snippet-block\n viewsize=\"list\"\n .snippets=${this.model?.snippets}\n ></text-snippet-block>`;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n // Utility functions\n // eslint-disable-next-line default-param-last\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field \|\| !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n / eslint-disable lit/no-invalid-html /\n return html`<a\n href=\"${this.baseNavigationUrl}/search?query=${query}\"\n rel=\"nofollow\"\n >\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n / eslint-enable lit/no-invalid-html /\n }\n\n private detailsLink(identifier: string, text?: string): TemplateResult {\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n /* The URL of this item's mediatype collection, if defined. /\n private get mediatypeURL(): string \| typeof nothing {\n // NB: baseNavigationUrl can be an empty string\n if (this.baseNavigationUrl === undefined \|\| !this.model?.mediatype)\n return nothing;\n\n // Need special handling for certain mediatypes that don't have a top-level collection page\n switch (this.model.mediatype) {\n case 'collection':\n return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n case 'account':\n return nothing;\n default:\n return `${this.baseNavigationUrl}/details/${encodeURI(\n this.model.mediatype\n )}`;\n }\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.fetchCollectionNames();\n }\n }\n\n private async fetchCollectionNames() {\n if (\n !this.model?.collections \|\|\n this.model.collections.length === 0 \|\|\n !this.collectionNameCache\n ) {\n return;\n }\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollectionLinks: TemplateResult[] = [];\n const promises: Promise<void>[] = [];\n for (const collection of this.model.collections) {\n // Don't include favorites or collections that are meant to be suppressed\n if (\n !suppressedCollections[collection] &&\n !collection.startsWith('fav-')\n ) {\n promises.push(\n this.collectionNameCache?.collectionNameFor(collection).then(name => {\n newCollectionLinks.push(\n this.detailsLink(collection, name ?? collection)\n );\n })\n );\n }\n }\n await Promise.all(promises);\n this.collectionLinks = newCollectionLinks;\n }\n\n /\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n /\n private get date(): Date \| undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n div a:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n / fields /\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n / align top of text with image /\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; / number of lines to show /\n line-clamp: 3;\n }\n\n #collections {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n / Top level container /\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n /\n * If the container becomes very tiny, don't let the thumbnail side take\n * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n /\n #list-line-left {\n max-width: 25%;\n\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n / Lines containing multiple div as row /\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n\n /\n * With the exception of the title line, allow these to wrap if\n * the space becomes too small to accommodate them together.\n * \n * The title line is excluded because it contains the mediatype icon\n * which we don't want to wrap.\n */\n #item-line,\n #dates-line,\n #views-line {\n flex-wrap: wrap;\n }\n `;\n }\n}\n"]}

package/dist/test/collection-facets/toggle-switch.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import '../../src/collection-facets/toggle-switch';

package/dist/test/collection-facets/toggle-switch.test.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import '../../src/collection-facets/toggle-switch';
+describe('Toggle switch', () => {
+    it('renders component', async () => {
+        var _a, _b;
+        const el = await fixture(html `<toggle-switch></toggle-switch>`);
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#switch-button')).to.exist;
+        expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#knob')).to.exist;
+    });
+    it('renders provided L/R values', async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const el = await fixture(html `<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`);
+        expect(el.value).to.equal('L');
+        expect(el.selectedLabel).to.equal('L');
+        expect((_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('label[for=switch-left]')) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('L');
+        expect((_f = (_e = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('label[for=switch-right]')) === null || _e === void 0 ? void 0 : _e.textContent) === null || _f === void 0 ? void 0 : _f.trim()).to.equal('R');
+    });
+    it('renders provided L/R labels instead of values', async () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const el = await fixture(html `<toggle-switch
+        .leftValue=${'L'}
+        .leftLabel=${'L-label'}
+        .rightValue=${'R'}
+        .rightLabel=${'R-label'}
+      ></toggle-switch>`);
+        expect(el.value).to.equal('L');
+        expect(el.selectedLabel).to.equal('L-label');
+        expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#switch-left')) === null || _b === void 0 ? void 0 : _b.value).to.equal('L');
+        expect((_d = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#switch-right')) === null || _d === void 0 ? void 0 : _d.value).to.equal('R');
+        expect((_g = (_f = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('label[for=switch-left]')) === null || _f === void 0 ? void 0 : _f.textContent) === null || _g === void 0 ? void 0 : _g.trim()).to.equal('L-label');
+        expect((_k = (_j = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('label[for=switch-right]')) === null || _j === void 0 ? void 0 : _j.textContent) === null || _k === void 0 ? void 0 : _k.trim()).to.equal('R-label');
+    });
+    it('sets the initial side', async () => {
+        const el = await fixture(html `<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        .side=${'right'}
+      ></toggle-switch>`);
+        expect(el.value).to.equal('R');
+        expect(el.selectedLabel).to.equal('R');
+    });
+    it('toggles on click', async () => {
+        var _a;
+        const el = await fixture(html `<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`);
+        const button = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#switch-button');
+        expect(el.value).to.equal('L');
+        button.click();
+        await el.updateComplete;
+        expect(el.value).to.equal('R');
+        button.click();
+        await el.updateComplete;
+        expect(el.value).to.equal('L');
+    });
+    it('toggles on radio change', async () => {
+        var _a, _b;
+        const el = await fixture(html `<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`);
+        const leftRadio = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#switch-left');
+        const rightRadio = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#switch-right');
+        expect(el.value).to.equal('L');
+        rightRadio.click();
+        await el.updateComplete;
+        expect(el.value).to.equal('R');
+        leftRadio.click();
+        await el.updateComplete;
+        expect(el.value).to.equal('L');
+    });
+    it('emits change event when toggled', async () => {
+        var _a, _b;
+        const changeSpy = sinon.spy();
+        const el = await fixture(html `<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        @change=${changeSpy}
+      ></toggle-switch>`);
+        const button = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#switch-button');
+        button.click();
+        await el.updateComplete;
+        expect(changeSpy.callCount).to.equal(1);
+        const leftRadio = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#switch-left');
+        leftRadio.click();
+        await el.updateComplete;
+        expect(changeSpy.callCount).to.equal(2);
+    });
+});
+//# sourceMappingURL=toggle-switch.test.js.map

package/dist/test/collection-facets/toggle-switch.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-switch.test.js","sourceRoot":"","sources":["../../../test/collection-facets/toggle-switch.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { html } from 'lit';\nimport type { ToggleSwitch } from '../../src/collection-facets/toggle-switch';\n\nimport '../../src/collection-facets/toggle-switch';\n\ndescribe('Toggle switch', () => {\n it('renders component', async () => {\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch></toggle-switch>`\n );\n\n expect(el.shadowRoot?.querySelector('#switch-button')).to.exist;\n expect(el.shadowRoot?.querySelector('#knob')).to.exist;\n });\n\n it('renders provided L/R values', async () => {\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`\n );\n\n expect(el.value).to.equal('L');\n expect(el.selectedLabel).to.equal('L');\n\n expect(\n el.shadowRoot\n ?.querySelector('label[for=switch-left]')\n ?.textContent?.trim()\n ).to.equal('L');\n expect(\n el.shadowRoot\n ?.querySelector('label[for=switch-right]')\n ?.textContent?.trim()\n ).to.equal('R');\n });\n\n it('renders provided L/R labels instead of values', async () => {\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch\n .leftValue=${'L'}\n .leftLabel=${'L-label'}\n .rightValue=${'R'}\n .rightLabel=${'R-label'}\n ></toggle-switch>`\n );\n\n expect(el.value).to.equal('L');\n expect(el.selectedLabel).to.equal('L-label');\n\n expect(\n (el.shadowRoot?.querySelector('#switch-left') as HTMLInputElement)?.value\n ).to.equal('L');\n expect(\n (el.shadowRoot?.querySelector('#switch-right') as HTMLInputElement)?.value\n ).to.equal('R');\n\n expect(\n el.shadowRoot\n ?.querySelector('label[for=switch-left]')\n ?.textContent?.trim()\n ).to.equal('L-label');\n expect(\n el.shadowRoot\n ?.querySelector('label[for=switch-right]')\n ?.textContent?.trim()\n ).to.equal('R-label');\n });\n\n it('sets the initial side', async () => {\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch\n .leftValue=${'L'}\n .rightValue=${'R'}\n .side=${'right'}\n ></toggle-switch>`\n );\n\n expect(el.value).to.equal('R');\n expect(el.selectedLabel).to.equal('R');\n });\n\n it('toggles on click', async () => {\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`\n );\n\n const button = el.shadowRoot?.querySelector(\n '#switch-button'\n ) as HTMLButtonElement;\n\n expect(el.value).to.equal('L');\n button.click();\n await el.updateComplete;\n\n expect(el.value).to.equal('R');\n button.click();\n await el.updateComplete;\n\n expect(el.value).to.equal('L');\n });\n\n it('toggles on radio change', async () => {\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`\n );\n\n const leftRadio = el.shadowRoot?.querySelector(\n '#switch-left'\n ) as HTMLInputElement;\n const rightRadio = el.shadowRoot?.querySelector(\n '#switch-right'\n ) as HTMLInputElement;\n\n expect(el.value).to.equal('L');\n rightRadio.click();\n await el.updateComplete;\n\n expect(el.value).to.equal('R');\n leftRadio.click();\n await el.updateComplete;\n\n expect(el.value).to.equal('L');\n });\n\n it('emits change event when toggled', async () => {\n const changeSpy = sinon.spy();\n const el = await fixture<ToggleSwitch>(\n html`<toggle-switch\n .leftValue=${'L'}\n .rightValue=${'R'}\n @change=${changeSpy}\n ></toggle-switch>`\n );\n\n const button = el.shadowRoot?.querySelector(\n '#switch-button'\n ) as HTMLButtonElement;\n\n button.click();\n await el.updateComplete;\n\n expect(changeSpy.callCount).to.equal(1);\n\n const leftRadio = el.shadowRoot?.querySelector(\n '#switch-left'\n ) as HTMLInputElement;\n\n leftRadio.click();\n await el.updateComplete;\n\n expect(changeSpy.callCount).to.equal(2);\n });\n});\n"]}

package/dist/test/tiles/list/tile-list-compact.test.js CHANGED Viewed

@@ -27,6 +27,18 @@ describe('List Tile Compact', () => {
         const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#creator');
         expect(creator).to.exist;
     });
+    it('should render title link with model href if provided', async () => {
+        var _a;
+        const el = await fixture(html `
+      <tile-list-compact
+        .baseNavigationUrl=${''}
+        .model=${{ title: 'foo', href: '/foo/bar' }}
+      ></tile-list-compact>
+    `);
+        const title = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#title');
+        expect(title).to.exist;
+        expect(title === null || title === void 0 ? void 0 : title.getAttribute('href')).to.equal('/foo/bar');
+    });
     it('should render weekly views when sorting by week', async () => {
         var _a, _b;
         const el = await fixture(html `