npm - @internetarchive/collection-browser - Versions diffs - 2.14.1-alpha-webdev7680.6 → 2.14.1-alpha-webdev7568.1 - Mend

@internetarchive/collection-browser 2.14.1-alpha-webdev7680.6 → 2.14.1-alpha-webdev7568.1

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 (16) hide show

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +1 -10
package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
package/dist/src/tiles/grid/item-tile.d.ts +5 -0
package/dist/src/tiles/grid/item-tile.js +56 -20
package/dist/src/tiles/grid/item-tile.js.map +1 -1
package/dist/src/tiles/grid/tile-stats.d.ts +0 -4
package/dist/src/tiles/grid/tile-stats.js +0 -8
package/dist/src/tiles/grid/tile-stats.js.map +1 -1
package/dist/src/tiles/tile-dispatcher.d.ts +2 -0
package/dist/src/tiles/tile-dispatcher.js +6 -0
package/dist/src/tiles/tile-dispatcher.js.map +1 -1
package/package.json +2 -2
package/src/collection-facets/smart-facets/smart-facet-bar.ts +1 -9
package/src/tiles/grid/item-tile.ts +55 -20
package/src/tiles/grid/tile-stats.ts +0 -6
package/src/tiles/tile-dispatcher.ts +4 -0

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js CHANGED Viewed

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { customElement, property, state } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
 import { updateSelectedFacetBucket } from '../../utils/facet-utils';
 import { SmartQueryHeuristicGroup } from './smart-facet-heuristics';
 import { smartFacetEquals } from './smart-facet-equals';
@@ -35,9 +34,6 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
         return html `
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
-        ${this.smartFacets.length > 0
-            ? html `<p id="filters-label">${msg('Insights:')}</p>`
-            : nothing}
         ${repeat(this.smartFacets, f => `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`, facet => this.makeSmartFacet(facet))}
       </div>
     `;
@@ -261,7 +257,7 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
         margin: 0;
         border: 0;
         padding: 5px 8px;
-        border-radius: 50%;
+        border-radius: 5px;
         background: white;
         color: #2c2c2c;
         border: 1px solid #194880;
@@ -285,11 +281,6 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
       #filters-toggle.active > svg {
         filter: invert(1);
       }
-      #filters-label {
-        font-weight: bold;
-        margin: 0 -5px 0 0;
-      }
     `;
     }
 };

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n nothing,\n PropertyValues,\n} from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { CollectionTitles } from '../../data-source/models';\nimport type { FacetOption, SelectedFacets } from '../../models';\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\nimport type { SmartFacet, SmartFacetEvent } from './models';\nimport { smartFacetEquals } from './smart-facet-equals';\nimport { dedupe } from './dedupe';\nimport { log } from '../../utils/log';\nimport filterIcon from '../../assets/img/icons/filter';\n\nimport './smart-facet-button';\nimport './smart-facet-dropdown';\n\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\n collection: 'Collection: ',\n creator: 'By: ',\n subject: 'About: ',\n};\n\nfunction capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n @property({ type: String }) query?: string;\n\n @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n /** The map from collection identifiers to their titles */\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) filterToggleActive = false;\n\n @state() private heuristicRecs: SmartFacet[] = [];\n\n @state() private smartFacets: SmartFacet[][] = [];\n\n @state() private lastAggregations?: Record<string, Aggregation>;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.query) return nothing;\n\n return html`\n <div id=\"smart-facets-container\">\n ${this.filtersToggleTemplate}\n ${this.smartFacets.length > 0\n ? html`<p id=\"filters-label\">${msg('Insights:')}</p>`\n : nothing}\n ${repeat(\n this.smartFacets,\n f =>\n `${f[0].label}\|${f[0].facets[0].facetType}\|${f[0].facets[0].bucketKey}`,\n facet => this.makeSmartFacet(facet),\n )}\n </div>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n let shouldUpdateSmartFacets = false;\n\n if (changed.has('query')) {\n log('query change', changed.get('query'), this.query);\n this.lastAggregations = undefined;\n shouldUpdateSmartFacets = true;\n }\n\n if (\n changed.has('aggregations') &&\n !this.lastAggregations &&\n this.aggregations &&\n Object.keys(this.aggregations).length > 0\n ) {\n log('aggs change', changed.get('aggregations'), this.aggregations);\n this.lastAggregations = this.aggregations;\n shouldUpdateSmartFacets = true;\n }\n\n if (shouldUpdateSmartFacets) {\n log('should update smart facets, doing so...');\n this.updateSmartFacets();\n }\n }\n\n refresh(): void {\n this.lastAggregations = this.aggregations;\n this.updateSmartFacets();\n }\n\n private async updateSmartFacets(): Promise<void> {\n log('updating smart facets');\n if (this.query) {\n this.heuristicRecs =\n await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\n log('heuristic recs are', this.heuristicRecs);\n this.smartFacets = dedupe(this.facetsToDisplay);\n log('smart facets are', this.smartFacets);\n }\n }\n\n //\n // OTHER METHODS\n //\n\n private makeSmartFacet(facets: SmartFacet[]) {\n if (facets.length === 0) {\n return nothing;\n }\n if (facets.length === 1) {\n return this.smartFacetButton(facets[0]);\n }\n return this.smartFacetDropdown(facets);\n }\n\n private smartFacetButton(facet: SmartFacet) {\n return html`\n <smart-facet-button\n .facetInfo=${facet}\n .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\n .selected=${facet.selected ?? false}\n @facetClick=${this.facetClicked}\n ></smart-facet-button>\n `;\n }\n\n private smartFacetDropdown(facets: SmartFacet[]) {\n return html`\n <smart-facet-dropdown\n .facetInfo=${facets}\n .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\n .activeFacetRef=${facets[0].facets[0]}\n @facetClick=${this.facetDropdownClicked}\n @dropdownClick=${this.onDropdownClick}\n ></smart-facet-dropdown>\n `;\n }\n\n private get filtersToggleTemplate(): TemplateResult {\n return html`\n <button\n id=\"filters-toggle\"\n class=${this.filterToggleActive ? 'active' : ''}\n title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\n @click=${this.filterToggleClicked}\n >\n ${filterIcon}\n </button>\n `;\n }\n\n private get facetsToDisplay(): SmartFacet[][] {\n const facets: SmartFacet[][] = [];\n\n if (this.heuristicRecs.length > 0) {\n for (const rec of this.heuristicRecs) {\n // Suppress mediatype-only facets for now.\n if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\n continue;\n\n facets.push([rec]);\n }\n }\n\n if (this.lastAggregations) {\n const keys = [\n 'mediatype',\n 'year',\n 'language',\n 'creator',\n 'subject',\n 'collection',\n ];\n for (const key of keys) {\n const agg = this.lastAggregations[key];\n if (!agg) continue;\n if (agg.buckets.length === 0) continue;\n if (['lending', 'year_histogram'].includes(key)) continue;\n if (typeof agg.buckets[0] === 'number') continue;\n\n if (\n key === 'mediatype' &&\n this.selectedFacets &&\n Object.values(this.selectedFacets.mediatype ?? {}).some(\n bucket => bucket.state !== 'none',\n )\n ) {\n continue;\n }\n\n const facetType = key as FacetOption;\n const buckets = agg.buckets as Bucket[];\n\n const unusedBuckets = buckets.filter(b => {\n const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\n if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\n return false;\n }\n return true;\n });\n\n if (facetType === 'mediatype') {\n continue;\n // Don't include mediatype bubbles\n } else if (facetType === 'collection' \|\| facetType === 'subject') {\n const topBuckets = unusedBuckets.slice(0, 5);\n facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\n } else {\n facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\n }\n }\n }\n\n return facets;\n }\n\n private toSmartFacet(\n facetType: FacetOption,\n buckets: Bucket[],\n // prefix = true\n ): SmartFacet {\n return {\n facets: buckets.map(bucket => {\n let displayText = capitalize(bucket.key.toString());\n if (facetType === 'collection') {\n const title = this.collectionTitles?.get(bucket.key.toString());\n if (title) displayText = title;\n }\n\n return {\n facetType,\n bucketKey: bucket.key.toString(),\n displayText,\n };\n }),\n } as SmartFacet;\n }\n\n private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\n if (!e.detail.smartFacet.selected) {\n this.smartFacets = [\n [{ ...e.detail.smartFacet, selected: true }],\n ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),\n ];\n }\n\n for (const facet of e.detail.details) {\n this.selectedFacets = updateSelectedFacetBucket(\n this.selectedFacets,\n facet.facetType,\n facet.bucket,\n true,\n );\n }\n\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n detail: this.selectedFacets,\n });\n this.dispatchEvent(event);\n }\n\n private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {\n if (\n this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))\n ) {\n return;\n }\n\n this.smartFacets = [\n [{ ...e.detail.smartFacet, selected: true }],\n ...this.smartFacets,\n ];\n\n for (const facet of e.detail.details) {\n this.selectedFacets = updateSelectedFacetBucket(\n this.selectedFacets,\n facet.facetType,\n facet.bucket,\n true,\n );\n }\n\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n detail: this.selectedFacets,\n });\n this.dispatchEvent(event);\n }\n\n private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {\n log('smart bar: onDropdownClick', e.detail);\n this.shadowRoot\n ?.querySelectorAll('smart-facet-dropdown')\n .forEach(dropdown => {\n if (dropdown !== e.detail) {\n log('closing', dropdown);\n (dropdown as SmartFacetDropdown).close();\n }\n });\n }\n\n private filterToggleClicked(): void {\n this.dispatchEvent(new CustomEvent('filtersToggled'));\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n #smart-facets-container {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 5px 10px;\n padding: 10px 0;\n }\n\n #filters-toggle {\n margin: 0;\n border: 0;\n padding: 5px 8px;\n border-radius: 50%;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n }\n\n #filters-toggle.active {\n background: #194880;\n color: white;\n }\n\n #filters-toggle > svg {\n width: 12px;\n filter: invert(0.16667);\n vertical-align: -1px;\n }\n\n #filters-toggle.active > svg {\n filter: invert(1);\n }\n\n #filters-label {\n font-weight: bold;\n margin: 0 -5px 0 0;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n nothing,\n PropertyValues,\n} from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { CollectionTitles } from '../../data-source/models';\nimport type { FacetOption, SelectedFacets } from '../../models';\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\nimport type { SmartFacet, SmartFacetEvent } from './models';\nimport { smartFacetEquals } from './smart-facet-equals';\nimport { dedupe } from './dedupe';\nimport { log } from '../../utils/log';\nimport filterIcon from '../../assets/img/icons/filter';\n\nimport './smart-facet-button';\nimport './smart-facet-dropdown';\n\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\n collection: 'Collection: ',\n creator: 'By: ',\n subject: 'About: ',\n};\n\nfunction capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n @property({ type: String }) query?: string;\n\n @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n /** The map from collection identifiers to their titles */\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) filterToggleActive = false;\n\n @state() private heuristicRecs: SmartFacet[] = [];\n\n @state() private smartFacets: SmartFacet[][] = [];\n\n @state() private lastAggregations?: Record<string, Aggregation>;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.query) return nothing;\n\n return html`\n <div id=\"smart-facets-container\">\n ${this.filtersToggleTemplate}\n ${repeat(\n this.smartFacets,\n f =>\n `${f[0].label}\|${f[0].facets[0].facetType}\|${f[0].facets[0].bucketKey}`,\n facet => this.makeSmartFacet(facet),\n )}\n </div>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n let shouldUpdateSmartFacets = false;\n\n if (changed.has('query')) {\n log('query change', changed.get('query'), this.query);\n this.lastAggregations = undefined;\n shouldUpdateSmartFacets = true;\n }\n\n if (\n changed.has('aggregations') &&\n !this.lastAggregations &&\n this.aggregations &&\n Object.keys(this.aggregations).length > 0\n ) {\n log('aggs change', changed.get('aggregations'), this.aggregations);\n this.lastAggregations = this.aggregations;\n shouldUpdateSmartFacets = true;\n }\n\n if (shouldUpdateSmartFacets) {\n log('should update smart facets, doing so...');\n this.updateSmartFacets();\n }\n }\n\n refresh(): void {\n this.lastAggregations = this.aggregations;\n this.updateSmartFacets();\n }\n\n private async updateSmartFacets(): Promise<void> {\n log('updating smart facets');\n if (this.query) {\n this.heuristicRecs =\n await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\n log('heuristic recs are', this.heuristicRecs);\n this.smartFacets = dedupe(this.facetsToDisplay);\n log('smart facets are', this.smartFacets);\n }\n }\n\n //\n // OTHER METHODS\n //\n\n private makeSmartFacet(facets: SmartFacet[]) {\n if (facets.length === 0) {\n return nothing;\n }\n if (facets.length === 1) {\n return this.smartFacetButton(facets[0]);\n }\n return this.smartFacetDropdown(facets);\n }\n\n private smartFacetButton(facet: SmartFacet) {\n return html`\n <smart-facet-button\n .facetInfo=${facet}\n .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\n .selected=${facet.selected ?? false}\n @facetClick=${this.facetClicked}\n ></smart-facet-button>\n `;\n }\n\n private smartFacetDropdown(facets: SmartFacet[]) {\n return html`\n <smart-facet-dropdown\n .facetInfo=${facets}\n .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\n .activeFacetRef=${facets[0].facets[0]}\n @facetClick=${this.facetDropdownClicked}\n @dropdownClick=${this.onDropdownClick}\n ></smart-facet-dropdown>\n `;\n }\n\n private get filtersToggleTemplate(): TemplateResult {\n return html`\n <button\n id=\"filters-toggle\"\n class=${this.filterToggleActive ? 'active' : ''}\n title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\n @click=${this.filterToggleClicked}\n >\n ${filterIcon}\n </button>\n `;\n }\n\n private get facetsToDisplay(): SmartFacet[][] {\n const facets: SmartFacet[][] = [];\n\n if (this.heuristicRecs.length > 0) {\n for (const rec of this.heuristicRecs) {\n // Suppress mediatype-only facets for now.\n if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\n continue;\n\n facets.push([rec]);\n }\n }\n\n if (this.lastAggregations) {\n const keys = [\n 'mediatype',\n 'year',\n 'language',\n 'creator',\n 'subject',\n 'collection',\n ];\n for (const key of keys) {\n const agg = this.lastAggregations[key];\n if (!agg) continue;\n if (agg.buckets.length === 0) continue;\n if (['lending', 'year_histogram'].includes(key)) continue;\n if (typeof agg.buckets[0] === 'number') continue;\n\n if (\n key === 'mediatype' &&\n this.selectedFacets &&\n Object.values(this.selectedFacets.mediatype ?? {}).some(\n bucket => bucket.state !== 'none',\n )\n ) {\n continue;\n }\n\n const facetType = key as FacetOption;\n const buckets = agg.buckets as Bucket[];\n\n const unusedBuckets = buckets.filter(b => {\n const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\n if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\n return false;\n }\n return true;\n });\n\n if (facetType === 'mediatype') {\n continue;\n // Don't include mediatype bubbles\n } else if (facetType === 'collection' \|\| facetType === 'subject') {\n const topBuckets = unusedBuckets.slice(0, 5);\n facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\n } else {\n facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\n }\n }\n }\n\n return facets;\n }\n\n private toSmartFacet(\n facetType: FacetOption,\n buckets: Bucket[],\n // prefix = true\n ): SmartFacet {\n return {\n facets: buckets.map(bucket => {\n let displayText = capitalize(bucket.key.toString());\n if (facetType === 'collection') {\n const title = this.collectionTitles?.get(bucket.key.toString());\n if (title) displayText = title;\n }\n\n return {\n facetType,\n bucketKey: bucket.key.toString(),\n displayText,\n };\n }),\n } as SmartFacet;\n }\n\n private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\n if (!e.detail.smartFacet.selected) {\n this.smartFacets = [\n [{ ...e.detail.smartFacet, selected: true }],\n ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),\n ];\n }\n\n for (const facet of e.detail.details) {\n this.selectedFacets = updateSelectedFacetBucket(\n this.selectedFacets,\n facet.facetType,\n facet.bucket,\n true,\n );\n }\n\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n detail: this.selectedFacets,\n });\n this.dispatchEvent(event);\n }\n\n private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {\n if (\n this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))\n ) {\n return;\n }\n\n this.smartFacets = [\n [{ ...e.detail.smartFacet, selected: true }],\n ...this.smartFacets,\n ];\n\n for (const facet of e.detail.details) {\n this.selectedFacets = updateSelectedFacetBucket(\n this.selectedFacets,\n facet.facetType,\n facet.bucket,\n true,\n );\n }\n\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n detail: this.selectedFacets,\n });\n this.dispatchEvent(event);\n }\n\n private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {\n log('smart bar: onDropdownClick', e.detail);\n this.shadowRoot\n ?.querySelectorAll('smart-facet-dropdown')\n .forEach(dropdown => {\n if (dropdown !== e.detail) {\n log('closing', dropdown);\n (dropdown as SmartFacetDropdown).close();\n }\n });\n }\n\n private filterToggleClicked(): void {\n this.dispatchEvent(new CustomEvent('filtersToggled'));\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n #smart-facets-container {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 5px 10px;\n padding: 10px 0;\n }\n\n #filters-toggle {\n margin: 0;\n border: 0;\n padding: 5px 8px;\n border-radius: 5px;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n }\n\n #filters-toggle.active {\n background: #194880;\n color: white;\n }\n\n #filters-toggle > svg {\n width: 12px;\n filter: invert(0.16667);\n vertical-align: -1px;\n }\n\n #filters-toggle.active > svg {\n filter: invert(1);\n }\n `;\n }\n}\n"]}

package/dist/src/tiles/grid/item-tile.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import './tile-stats';
 export declare class ItemTile extends BaseTileComponent {
     showInfoButton: boolean;
     showTvClips: boolean;
+    useSimpleLayout: boolean;
     render(): TemplateResult<1>;
     /**
      * Templates
@@ -21,6 +22,10 @@ export declare class ItemTile extends BaseTileComponent {
     private get textSnippetsTemplate();
     private get volumeIssueTemplate();
     private get webArchivesCaptureDatesTemplate();
+    /**
+     * Template for the stats row along the bottom of the tile.
+     */
+    private get tileStatsTemplate();
     private get isSortedByDate();
     /**
      * Returns the active sort param if one is set, or the default sort param otherwise.

package/dist/src/tiles/grid/item-tile.js CHANGED Viewed

@@ -2,8 +2,9 @@ import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { msg } from '@lit/localize';
 import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
 import { formatDate } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { BaseTileComponent } from '../base-tile-component';
@@ -33,16 +34,17 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         super(...arguments);
         this.showInfoButton = false;
         this.showTvClips = false;
+        this.useSimpleLayout = false;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a;
         const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
-        const effectiveSort = (_b = this.sortParam) !== null && _b !== void 0 ? _b : this.defaultSortParam;
-        const [viewCount, viewLabel] = (effectiveSort === null || effectiveSort === void 0 ? void 0 : effectiveSort.field) === 'week'
-            ? [(_c = this.model) === null || _c === void 0 ? void 0 : _c.weeklyViewCount, 'weekly views']
-            : [(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount, 'all-time views'];
+        const containerClasses = classMap({
+            container: true,
+            simple: this.useSimpleLayout,
+        });
         return html `
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -62,19 +64,7 @@ let ItemTile = class ItemTile extends BaseTileComponent {
             ${this.reviewBlockTemplate}
           </div>
-          <tile-stats
-            .model=${this.model}
-            .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
-            .collections=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.collections}
-            .viewCount=${viewCount}
-            .viewLabel=${viewLabel}
-            .favCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount}
-            .commentCount=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.commentCount}
-            ?isTvSearchResult=${(_j = this.model) === null || _j === void 0 ? void 0 : _j.isTvSearchResult}
-            .tvClipCount=${(_k = this.model) === null || _k === void 0 ? void 0 : _k.tvClipCount}
-            .showTvClips=${this.showTvClips}
-          >
-          </tile-stats>
+          ${this.tileStatsTemplate}
         </div>
       </div>
     `;
@@ -200,6 +190,31 @@ let ItemTile = class ItemTile extends BaseTileComponent {
       </ul>
     `;
     }
+    /**
+     * Template for the stats row along the bottom of the tile.
+     */
+    get tileStatsTemplate() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (this.useSimpleLayout)
+            return nothing;
+        const effectiveSort = (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
+        const [viewCount, viewLabel] = (effectiveSort === null || effectiveSort === void 0 ? void 0 : effectiveSort.field) === 'week'
+            ? [(_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount, 'weekly views']
+            : [(_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount, 'all-time views'];
+        return html `
+      <tile-stats
+        .model=${this.model}
+        .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
+        .viewCount=${viewCount}
+        .viewLabel=${viewLabel}
+        .favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
+        .commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}
+        .tvClipCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.tvClipCount}
+        .showTvClips=${this.showTvClips}
+      >
+      </tile-stats>
+    `;
+    }
     get isSortedByDate() {
         var _a;
         return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field);
@@ -240,6 +255,24 @@ let ItemTile = class ItemTile extends BaseTileComponent {
           border: 1px solid ${tileBorderColor};
         }
+        .simple .item-info {
+          padding-bottom: 5px;
+        }
+        .simple #title > .truncated {
+          -webkit-line-clamp: 2;
+        }
+        .simple .created-by > .truncated,
+        .simple .date-sorted-by > .truncated,
+        .simple .volume-issue > .truncated {
+          -webkit-line-clamp: 1;
+        }
+        .simple text-snippet-block {
+          margin-top: auto; /* Force the snippets to the bottom of the tile */
+        }
         .capture-dates {
           margin: 0;
           padding: 0 5px;
@@ -275,6 +308,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ItemTile.prototype, "showTvClips", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemTile.prototype, "useSimpleLayout", void 0);
 ItemTile = __decorate([
     customElement('item-tile')
 ], ItemTile);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\n\nimport { map } from 'lit/directives/map.js';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends BaseTileComponent {\n /\n Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam \| null = null;\n * - defaultSortParam: SortParam \| null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n /\n\n @property({ type: Boolean }) showInfoButton = false;\n\n @property({ type: Boolean }) showTvClips = false;\n\n render() {\n const itemTitle = this.model?.title;\n const effectiveSort = this.sortParam ?? this.defaultSortParam;\n const [viewCount, viewLabel] =\n effectiveSort?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h4 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h4>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.isSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n </div>\n\n <tile-stats\n .model=${this.model}\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n ?isTvSearchResult=${this.model?.isTvSearchResult}\n .tvClipCount=${this.model?.tvClipCount}\n .showTvClips=${this.showTvClips}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /\n Templates\n /\n private get creatorTemplate(): TemplateResult \| typeof nothing {\n const displayedCreator =\n this.displayValueProvider.firstCreatorMatchingFilter;\n if (!displayedCreator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${displayedCreator}>\n by ${displayedCreator}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.effectiveSort?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n </span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult \| typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private get reviewBlockTemplate(): TemplateResult \| typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { title, body, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"grid\"\n .title=${title}\n .body=${body}\n .starRating=${stars}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult \| typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult \| typeof nothing {\n if (!this.model?.volume \|\| !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=\"volume\|issue\">\n Volume ${this.model?.volume}, Issue ${this.model?.issue}\n </span>\n </div>\n `;\n }\n\n private get webArchivesCaptureDatesTemplate():\n \| TemplateResult\n \| typeof nothing {\n if (!this.model?.captureDates \|\| !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date =>\n html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date,\n )}\n </li>`,\n )}\n </ul>\n `;\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.effectiveSort?.field as string,\n );\n }\n\n /\n Returns the active sort param if one is set, or the default sort param otherwise.\n /\n private get effectiveSort(): SortParam \| null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } },\n );\n this.dispatchEvent(event);\n }\n\n /\n CSS\n /\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n .capture-dates {\n margin: 0;\n padding: 0 5px;\n list-style-type: none;\n }\n\n review-block,\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /\n iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}
1	+ {"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends BaseTileComponent {\n /\n Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam \| null = null;\n * - defaultSortParam: SortParam \| null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n /\n\n @property({ type: Boolean }) showInfoButton = false;\n\n @property({ type: Boolean }) showTvClips = false;\n\n @property({ type: Boolean }) useSimpleLayout = false;\n\n render() {\n const itemTitle = this.model?.title;\n const containerClasses = classMap({\n container: true,\n simple: this.useSimpleLayout,\n });\n\n return html`\n <div class=${containerClasses}>\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h4 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h4>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.isSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n </div>\n\n ${this.tileStatsTemplate}\n </div>\n </div>\n `;\n }\n\n /\n Templates\n /\n private get creatorTemplate(): TemplateResult \| typeof nothing {\n const displayedCreator =\n this.displayValueProvider.firstCreatorMatchingFilter;\n if (!displayedCreator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${displayedCreator}>\n by ${displayedCreator}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.effectiveSort?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n </span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult \| typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private get reviewBlockTemplate(): TemplateResult \| typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { title, body, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"grid\"\n .title=${title}\n .body=${body}\n .starRating=${stars}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult \| typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult \| typeof nothing {\n if (!this.model?.volume \|\| !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=\"volume\|issue\">\n Volume ${this.model?.volume}, Issue ${this.model?.issue}\n </span>\n </div>\n `;\n }\n\n private get webArchivesCaptureDatesTemplate():\n \| TemplateResult\n \| typeof nothing {\n if (!this.model?.captureDates \|\| !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date =>\n html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date,\n )}\n </li>`,\n )}\n </ul>\n `;\n }\n\n /\n Template for the stats row along the bottom of the tile.\n /\n private get tileStatsTemplate(): TemplateResult \| typeof nothing {\n if (this.useSimpleLayout) return nothing;\n\n const effectiveSort = this.sortParam ?? this.defaultSortParam;\n const [viewCount, viewLabel] =\n effectiveSort?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <tile-stats\n .model=${this.model}\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n .tvClipCount=${this.model?.tvClipCount}\n .showTvClips=${this.showTvClips}\n >\n </tile-stats>\n `;\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.effectiveSort?.field as string,\n );\n }\n\n /\n Returns the active sort param if one is set, or the default sort param otherwise.\n /\n private get effectiveSort(): SortParam \| null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } },\n );\n this.dispatchEvent(event);\n }\n\n /\n CSS\n /\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n .simple .item-info {\n padding-bottom: 5px;\n }\n\n .simple #title > .truncated {\n -webkit-line-clamp: 2;\n }\n\n .simple .created-by > .truncated,\n .simple .date-sorted-by > .truncated,\n .simple .volume-issue > .truncated {\n -webkit-line-clamp: 1;\n }\n\n .simple text-snippet-block {\n margin-top: auto; / Force the snippets to the bottom of the tile /\n }\n\n .capture-dates {\n margin: 0;\n padding: 0 5px;\n list-style-type: none;\n }\n\n review-block,\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /\n iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}

package/dist/src/tiles/grid/tile-stats.d.ts CHANGED Viewed

@@ -5,8 +5,6 @@ export declare class TileStats extends LitElement {
     model?: TileModel;
     /** The mediatype of the item these stats represent */
     mediatype?: string;
-    /** The collections this item is part of */
-    collections?: string[];
     /** The number of uploaded items, if representing an account */
     itemCount?: number;
     /** The number of times the item has been viewed */
@@ -17,8 +15,6 @@ export declare class TileStats extends LitElement {
     favCount?: number;
     /** The number of times the item has been reviewed */
     commentCount?: number;
-    /** Whether the tile represents the result of a search */
-    isTvSearchResult: boolean;
     /** Whether to show the number of TV clips in place of reviews */
     showTvClips: boolean;
     /** The number of times the TV item has been clipped */

package/dist/src/tiles/grid/tile-stats.js CHANGED Viewed

@@ -12,8 +12,6 @@ import { formatCount } from '../../utils/format-count';
 let TileStats = class TileStats extends LitElement {
     constructor() {
         super(...arguments);
-        /** Whether the tile represents the result of a search */
-        this.isTvSearchResult = false;
         /** Whether to show the number of TV clips in place of reviews */
         this.showTvClips = false;
     }
@@ -178,9 +176,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TileStats.prototype, "mediatype", void 0);
-__decorate([
-    property({ type: Array })
-], TileStats.prototype, "collections", void 0);
 __decorate([
     property({ type: Number })
 ], TileStats.prototype, "itemCount", void 0);
@@ -196,9 +191,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TileStats.prototype, "commentCount", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileStats.prototype, "isTvSearchResult", void 0);
 __decorate([
     property({ type: Boolean })
 ], TileStats.prototype, "showTvClips", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIhD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;~~QAyBL~~,~~yDAAyD;QAC5B,qBAAgB,GAAG,KAAK,CAAC;QAEtD,~~iEAAiE;QACpC,gBAAW,GAAG,KAAK,CAAC;IA4KnD,CAAC;IAvKC,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;YAG7D,IAAI,CAAC,2BAA2B;YAChC,IAAI,CAAC,SAAS,KAAK,SAAS;YAC5B,CAAC,CAAC,IAAI,CAAC,qBAAqB;YAC5B,CAAC,CAAC,IAAI,CAAC,mBAAmB;YAC1B,IAAI,CAAC,uBAAuB;YAC5B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAC,qBAAqB;YAC5B,CAAC,CAAC,IAAI,CAAC,qBAAqB;;;KAGnC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,2BAA2B;QACrC,OAAO,IAAI,CAAA;;6BAEc,GAAG,CAAC,YAAY,CAAC;sCACR,IAAI,CAAC,KAAK;;KAE3C,CAAC;IACJ,CAAC;IAED;;;;;;;;OAQG;IACK,cAAc,CACpB,KAAyB,EACzB,KAAa,EACb,IAAoB,EACpB,UAAoB,EAAE;QAEtB,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QACjE,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAA,GAAG,cAAc,IAAI,KAAK,EAAE,CAAC,CAAC;QACnD,MAAM,OAAO,GAAG,KAAK,GAAG,GAAG,CAAC;QAE5B,OAAO,IAAI,CAAA;uBACQ,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK;UAC9C,IAAI;;kCAEoB,OAAO;YAC7B,cAAc;;;KAGrB,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,mBAAmB;;QAC7B,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,SAAS,mCAAI,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACtD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;IAC/D,CAAC;IAED;;OAEG;IACH,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACzE,CAAC;IAED;;OAEG;IACH,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACvE,CAAC;IAED;;OAEG;IACH,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE;YACzE,SAAS;SACV,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;IACxE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6DF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;~~AAvM6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAmB;AAGlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;~~AAGpB~~;~~IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAwB;AAGtB;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAGlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AAGrB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;~~mDAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;~~8CAAqB;AAGrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;~~AAhCtC~~,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,~~CAyMrB~~","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg, str } from '@lit/localize';\nimport { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { quoteIcon } from '../../assets/img/icons/quote';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\nimport { TileModel } from '../../models';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n /** The tile model these stats represent /\n @property({ type: Object }) model?: TileModel;\n\n /* The mediatype of the item these stats represent /\n @property({ type: String }) mediatype?: string;\n\n /* The ~~collections this item is part of /\n @property({ type: Array }) collections?: string[];\n\n /* The~~ number of uploaded items, if representing an account /\n @property({ type: Number }) itemCount?: number;\n\n /* The number of times the item has been viewed /\n @property({ type: Number }) viewCount?: number;\n\n /* The text label describing the type of views (default \"all-time views\") /\n @property({ type: String }) viewLabel?: string;\n\n /* The number of times the item has been favorited /\n @property({ type: Number }) favCount?: number;\n\n /* The number of times the item has been reviewed /\n @property({ type: Number }) commentCount?: number;\n\n /* Whether ~~the tile represents the result of a search /\n @property({ type: Boolean }) isTvSearchResult = false;\n\n /* Whether~~ to show the number of TV clips in place of reviews /\n @property({ type: Boolean }) showTvClips = false;\n\n /* The number of times the TV item has been clipped /\n @property({ type: Number }) tvClipCount?: number;\n\n render() {\n return html`\n <div class=\"item-stats\">\n <p class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n </p>\n <ul id=\"stats-row\">\n ${this.mediatypeIconColumnTemplate}\n ${this.mediatype === 'account'\n ? this.uploadsColumnTemplate\n : this.viewsColumnTemplate}\n ${this.favoritesColumnTemplate}\n ${this.showTvClips\n ? this.tvClipsColumnTemplate\n : this.reviewsColumnTemplate}\n </ul>\n </div>\n `;\n }\n\n /\n Template for the mediatype icon column.\n /\n private get mediatypeIconColumnTemplate(): TemplateResult {\n return html`\n <li class=\"col\">\n <p class=\"sr-only\">${msg('Mediatype:')}</p>\n <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>\n </li>\n `;\n }\n\n /\n Helper method to construct a template for one of the tile stat columns,\n * given its stat count, labels, and icon.\n \n @param count The numeric count to show for the stat. If undefined, will be treated as 0.\n * @param label The textual label describing the stat (used in the title and screenreader text).\n * @param icon The icon visually representing the stat.\n * @param classes Any additional CSS classes the stat column should have (optional).\n /\n private columnTemplate(\n count: number \| undefined,\n label: string,\n icon: TemplateResult,\n classes: string[] = [],\n ): TemplateResult {\n const formattedCount = formatCount(count ?? 0, 'short', 'short');\n const title = msg(str`${formattedCount} ${label}`);\n const srLabel = label + ':';\n\n return html`\n <li class=\"col ${classes.join(' ')}\" title=${title}>\n ${icon}\n <p class=\"status-text\">\n <span class=\"sr-only\">${srLabel}</span>\n ${formattedCount}\n </p>\n </li>\n `;\n }\n\n /\n Template for the views count column.\n /\n private get viewsColumnTemplate(): TemplateResult {\n const label = this.viewLabel ?? msg('all-time views');\n return this.columnTemplate(this.viewCount, label, viewsIcon);\n }\n\n /\n Template for the uploads count column (replaces views for account tiles).\n /\n private get uploadsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);\n }\n\n /\n Template for the favorites count column.\n /\n private get favoritesColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.favCount, msg('favorites'), favIcon);\n }\n\n /\n Template for the reviews count column.\n /\n private get reviewsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [\n 'reviews',\n ]);\n }\n\n /\n Template for the TV clips count column (replaces reviews for TV tiles).\n /\n private get tvClipsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);\n }\n\n static get styles(): CSSResultGroup {\n return [\n srOnlyStyle,\n css`\n tile-mediatype-icon {\n --iconHeight: 25px;\n --iconWidth: 25px;\n }\n\n ul {\n all: unset;\n list-style-type: none;\n }\n\n li {\n list-style-type: none;\n }\n\n svg {\n height: 13px;\n width: 13px;\n display: block;\n margin: auto;\n pointer-events: none;\n }\n\n / Make the reviews icon slightly smaller/lower, for even visual weight */\n .reviews svg {\n height: 11px;\n width: 11px;\n margin-top: 2px;\n }\n\n .item-stats {\n height: 30px;\n padding-left: 5px;\n padding-right: 5px;\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n text-align: center;\n }\n\n #stats-row {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n width: 100%;\n padding-bottom: 5px;\n }\n\n .col {\n min-width: 15px;\n max-width: 25%;\n height: 25px;\n }\n\n .status-text {\n font-size: 14px;\n height: 15px;\n color: #2c2c2c;\n line-height: 17px;\n margin: auto;\n display: block;\n text-align: center;\n }\n `,\n ];\n }\n}\n"]}
1	+ {"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg, str } from '@lit/localize';\nimport { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { quoteIcon } from '../../assets/img/icons/quote';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\nimport { TileModel } from '../../models';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n /** The tile model these stats represent /\n @property({ type: Object }) model?: TileModel;\n\n /* The mediatype of the item these stats represent /\n @property({ type: String }) mediatype?: string;\n\n /* The number of uploaded items, if representing an account /\n @property({ type: Number }) itemCount?: number;\n\n /* The number of times the item has been viewed /\n @property({ type: Number }) viewCount?: number;\n\n /* The text label describing the type of views (default \"all-time views\") /\n @property({ type: String }) viewLabel?: string;\n\n /* The number of times the item has been favorited /\n @property({ type: Number }) favCount?: number;\n\n /* The number of times the item has been reviewed /\n @property({ type: Number }) commentCount?: number;\n\n /* Whether to show the number of TV clips in place of reviews /\n @property({ type: Boolean }) showTvClips = false;\n\n /* The number of times the TV item has been clipped /\n @property({ type: Number }) tvClipCount?: number;\n\n render() {\n return html`\n <div class=\"item-stats\">\n <p class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n </p>\n <ul id=\"stats-row\">\n ${this.mediatypeIconColumnTemplate}\n ${this.mediatype === 'account'\n ? this.uploadsColumnTemplate\n : this.viewsColumnTemplate}\n ${this.favoritesColumnTemplate}\n ${this.showTvClips\n ? this.tvClipsColumnTemplate\n : this.reviewsColumnTemplate}\n </ul>\n </div>\n `;\n }\n\n /\n Template for the mediatype icon column.\n /\n private get mediatypeIconColumnTemplate(): TemplateResult {\n return html`\n <li class=\"col\">\n <p class=\"sr-only\">${msg('Mediatype:')}</p>\n <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>\n </li>\n `;\n }\n\n /\n Helper method to construct a template for one of the tile stat columns,\n * given its stat count, labels, and icon.\n \n @param count The numeric count to show for the stat. If undefined, will be treated as 0.\n * @param label The textual label describing the stat (used in the title and screenreader text).\n * @param icon The icon visually representing the stat.\n * @param classes Any additional CSS classes the stat column should have (optional).\n /\n private columnTemplate(\n count: number \| undefined,\n label: string,\n icon: TemplateResult,\n classes: string[] = [],\n ): TemplateResult {\n const formattedCount = formatCount(count ?? 0, 'short', 'short');\n const title = msg(str`${formattedCount} ${label}`);\n const srLabel = label + ':';\n\n return html`\n <li class=\"col ${classes.join(' ')}\" title=${title}>\n ${icon}\n <p class=\"status-text\">\n <span class=\"sr-only\">${srLabel}</span>\n ${formattedCount}\n </p>\n </li>\n `;\n }\n\n /\n Template for the views count column.\n /\n private get viewsColumnTemplate(): TemplateResult {\n const label = this.viewLabel ?? msg('all-time views');\n return this.columnTemplate(this.viewCount, label, viewsIcon);\n }\n\n /\n Template for the uploads count column (replaces views for account tiles).\n /\n private get uploadsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);\n }\n\n /\n Template for the favorites count column.\n /\n private get favoritesColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.favCount, msg('favorites'), favIcon);\n }\n\n /\n Template for the reviews count column.\n /\n private get reviewsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [\n 'reviews',\n ]);\n }\n\n /\n Template for the TV clips count column (replaces reviews for TV tiles).\n /\n private get tvClipsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);\n }\n\n static get styles(): CSSResultGroup {\n return [\n srOnlyStyle,\n css`\n tile-mediatype-icon {\n --iconHeight: 25px;\n --iconWidth: 25px;\n }\n\n ul {\n all: unset;\n list-style-type: none;\n }\n\n li {\n list-style-type: none;\n }\n\n svg {\n height: 13px;\n width: 13px;\n display: block;\n margin: auto;\n pointer-events: none;\n }\n\n / Make the reviews icon slightly smaller/lower, for even visual weight */\n .reviews svg {\n height: 11px;\n width: 11px;\n margin-top: 2px;\n }\n\n .item-stats {\n height: 30px;\n padding-left: 5px;\n padding-right: 5px;\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n text-align: center;\n }\n\n #stats-row {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n width: 100%;\n padding-bottom: 5px;\n }\n\n .col {\n min-width: 15px;\n max-width: 25%;\n height: 25px;\n }\n\n .status-text {\n font-size: 14px;\n height: 15px;\n color: #2c2c2c;\n line-height: 17px;\n margin: auto;\n display: block;\n text-align: center;\n }\n `,\n ];\n }\n}\n"]}

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

@@ -19,6 +19,8 @@ export declare class TileDispatcher extends BaseTileComponent implements SharedR
     resizeObserver?: SharedResizeObserverInterface;
     collectionTitles?: CollectionTitles;
     showTvClips: boolean;
+    /** Whether to use the simple layout in grid mode */
+    useSimpleLayout: boolean;
     /** Whether this tile should include a hover pane at all (for applicable tile modes) */
     enableHoverPane: boolean;
     manageCheckTitle: string;

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

@@ -33,6 +33,8 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
         super(...arguments);
         this.isManageView = false;
         this.showTvClips = false;
+        /** Whether to use the simple layout in grid mode */
+        this.useSimpleLayout = false;
         /** Whether this tile should include a hover pane at all (for applicable tile modes) */
         this.enableHoverPane = false;
         this.manageCheckTitle = msg('Remove this item from the list');
@@ -258,6 +260,7 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
               .isManageView=${this.isManageView}
+              ?useSimpleLayout=${this.useSimpleLayout}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -409,6 +412,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TileDispatcher.prototype, "showTvClips", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "useSimpleLayout", void 0);
 __decorate([
     property({ type: Boolean })
 ], TileDispatcher.prototype, "enableHoverPane", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends BaseTileComponent\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n /\n Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam \| null = null;\n * - defaultSortParam: SortParam \| null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n /\n\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Boolean }) isManageView = false;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) showTvClips = false;\n\n /* Whether this tile should include a hover pane at all (for applicable tile modes) /\n @property({ type: Boolean }) enableHoverPane = false;\n\n @property({ type: String }) manageCheckTitle = msg(\n 'Remove this item from the list',\n );\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n /* Maps each display mode to whether hover panes should appear in that mode /\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam ?? defaultSortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=${this.linkTileHref}\n aria-label=${this.model?.title ?? 'Untitled item'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${this.handleLinkClicked}\n @contextmenu=${this.handleLinkContextMenu}\n >\n ${this.tile}\n </a>\n `;\n }\n\n private get linkTileHref(): string \| typeof nothing {\n if (!this.model?.identifier \|\| this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection',\n );\n }\n\n private get manageCheckTemplate() {\n if (!this.isManageView \|\| this.tileDisplayMode !== 'grid') return nothing;\n\n return html`\n <div class=\"manage-check\">\n <input\n type=\"checkbox\"\n title=${this.manageCheckTitle}\n .checked=${this.model?.checked}\n @change=${this.handleLinkClicked}\n />\n </div>\n `;\n }\n\n /\n Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n /\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n !this.model?.captureDates // don't show hover panes on web archive tiles\n );\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /* @inheritdoc /\n getHoverPane(): TileHoverPane \| undefined {\n return this.hoverPane;\n }\n\n /* @inheritdoc /\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver',\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n /\n Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n * In manage view, it also checks/unchecks the tile.\n /\n private handleLinkClicked(e: Event): void {\n if (this.isManageView) {\n e.preventDefault();\n if (this.model) this.model.checked = !this.model.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model }),\n );\n }\n\n /\n Handler for when the tile link is right-clicked.\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n */\n private handleLinkContextMenu(e: Event): void {\n if (this.isManageView && this.linkTileHref !== nothing) {\n e.preventDefault();\n window.open(this.linkTileHref, '_blank');\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>,\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n collectionPagePath,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n creatorFilter,\n mobileBreakpoint,\n defaultSortParam,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .isManageView=${this.isManageView}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .isManageView=${this.isManageView}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n case 'search':\n return html`<search-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .isManageView=${this.isManageView}\n ?showInfoButton=${false}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </search-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .loggedIn=${this.loggedIn}\n .isManageView=${this.isManageView}\n ?showTvClips=${this.showTvClips}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .collectionTitles=${this.collectionTitles}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n search-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n --iconFillColor: #2c2c2c;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable:hover {\n box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n .manage-check {\n position: absolute;\n right: 0;\n top: 0;\n border: 5px solid #2c2c2c;\n border-radius: 3px;\n background-color: #2c2c2c;\n z-index: 1;\n }\n\n .manage-check > input[type='checkbox'] {\n display: block;\n margin: 0;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends BaseTileComponent\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n /\n Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam \| null = null;\n * - defaultSortParam: SortParam \| null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n /\n\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Boolean }) isManageView = false;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) showTvClips = false;\n\n /* Whether to use the simple layout in grid mode /\n @property({ type: Boolean }) useSimpleLayout = false;\n\n /* Whether this tile should include a hover pane at all (for applicable tile modes) /\n @property({ type: Boolean }) enableHoverPane = false;\n\n @property({ type: String }) manageCheckTitle = msg(\n 'Remove this item from the list',\n );\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n /* Maps each display mode to whether hover panes should appear in that mode /\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam ?? defaultSortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=${this.linkTileHref}\n aria-label=${this.model?.title ?? 'Untitled item'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${this.handleLinkClicked}\n @contextmenu=${this.handleLinkContextMenu}\n >\n ${this.tile}\n </a>\n `;\n }\n\n private get linkTileHref(): string \| typeof nothing {\n if (!this.model?.identifier \|\| this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection',\n );\n }\n\n private get manageCheckTemplate() {\n if (!this.isManageView \|\| this.tileDisplayMode !== 'grid') return nothing;\n\n return html`\n <div class=\"manage-check\">\n <input\n type=\"checkbox\"\n title=${this.manageCheckTitle}\n .checked=${this.model?.checked}\n @change=${this.handleLinkClicked}\n />\n </div>\n `;\n }\n\n /\n Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n /\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n !this.model?.captureDates // don't show hover panes on web archive tiles\n );\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /* @inheritdoc /\n getHoverPane(): TileHoverPane \| undefined {\n return this.hoverPane;\n }\n\n /* @inheritdoc /\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver',\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n /\n Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n * In manage view, it also checks/unchecks the tile.\n /\n private handleLinkClicked(e: Event): void {\n if (this.isManageView) {\n e.preventDefault();\n if (this.model) this.model.checked = !this.model.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model }),\n );\n }\n\n /\n Handler for when the tile link is right-clicked.\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n */\n private handleLinkContextMenu(e: Event): void {\n if (this.isManageView && this.linkTileHref !== nothing) {\n e.preventDefault();\n window.open(this.linkTileHref, '_blank');\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>,\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n collectionPagePath,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n creatorFilter,\n mobileBreakpoint,\n defaultSortParam,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .isManageView=${this.isManageView}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .isManageView=${this.isManageView}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n case 'search':\n return html`<search-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .isManageView=${this.isManageView}\n ?showInfoButton=${false}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </search-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .loggedIn=${this.loggedIn}\n .isManageView=${this.isManageView}\n ?useSimpleLayout=${this.useSimpleLayout}\n ?showTvClips=${this.showTvClips}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .collectionTitles=${this.collectionTitles}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n search-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n --iconFillColor: #2c2c2c;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable:hover {\n box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n .manage-check {\n position: absolute;\n right: 0;\n top: 0;\n border: 5px solid #2c2c2c;\n border-radius: 3px;\n background-color: #2c2c2c;\n z-index: 1;\n }\n\n .manage-check > input[type='checkbox'] {\n display: block;\n margin: 0;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `;\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.14.1-alpha-webdev7680.6",
+  "version": "2.14.1-alpha-webdev7568.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -24,7 +24,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@internetarchive/analytics-manager": "^0.1.4",
-    "@internetarchive/feature-feedback": "1.1.0-alpha-webdev7680.7",
+    "@internetarchive/feature-feedback": "^1.0.0",
     "@internetarchive/field-parsers": "^1.0.0",
     "@internetarchive/histogram-date-range": "^1.2.1",
     "@internetarchive/ia-activity-indicator": "^0.0.6",

package/src/collection-facets/smart-facets/smart-facet-bar.ts CHANGED Viewed

@@ -65,9 +65,6 @@ export class SmartFacetBar extends LitElement {
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
-        ${this.smartFacets.length > 0
-          ? html`<p id="filters-label">${msg('Insights:')}</p>`
-          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -341,7 +338,7 @@ export class SmartFacetBar extends LitElement {
         margin: 0;
         border: 0;
         padding: 5px 8px;
-        border-radius: 50%;
+        border-radius: 5px;
         background: white;
         color: #2c2c2c;
         border: 1px solid #194880;
@@ -365,11 +362,6 @@ export class SmartFacetBar extends LitElement {
       #filters-toggle.active > svg {
         filter: invert(1);
       }
-      #filters-label {
-        font-weight: bold;
-        margin: 0 -5px 0 0;
-      }
     `;
   }
 }

package/src/tiles/grid/item-tile.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
-import { map } from 'lit/directives/map.js';
 import type { SortParam } from '@internetarchive/search-service';
 import { DateFormat, formatDate } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
@@ -38,16 +39,17 @@ export class ItemTile extends BaseTileComponent {
   @property({ type: Boolean }) showTvClips = false;
+  @property({ type: Boolean }) useSimpleLayout = false;
   render() {
     const itemTitle = this.model?.title;
-    const effectiveSort = this.sortParam ?? this.defaultSortParam;
-    const [viewCount, viewLabel] =
-      effectiveSort?.field === 'week'
-        ? [this.model?.weeklyViewCount, 'weekly views']
-        : [this.model?.viewCount, 'all-time views'];
+    const containerClasses = classMap({
+      container: true,
+      simple: this.useSimpleLayout,
+    });
     return html`
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -67,19 +69,7 @@ export class ItemTile extends BaseTileComponent {
             ${this.reviewBlockTemplate}
           </div>
-          <tile-stats
-            .model=${this.model}
-            .mediatype=${this.model?.mediatype}
-            .collections=${this.model?.collections}
-            .viewCount=${viewCount}
-            .viewLabel=${viewLabel}
-            .favCount=${this.model?.favCount}
-            .commentCount=${this.model?.commentCount}
-            ?isTvSearchResult=${this.model?.isTvSearchResult}
-            .tvClipCount=${this.model?.tvClipCount}
-            .showTvClips=${this.showTvClips}
-          >
-          </tile-stats>
+          ${this.tileStatsTemplate}
         </div>
       </div>
     `;
@@ -220,6 +210,33 @@ export class ItemTile extends BaseTileComponent {
     `;
   }
+  /**
+   * Template for the stats row along the bottom of the tile.
+   */
+  private get tileStatsTemplate(): TemplateResult | typeof nothing {
+    if (this.useSimpleLayout) return nothing;
+    const effectiveSort = this.sortParam ?? this.defaultSortParam;
+    const [viewCount, viewLabel] =
+      effectiveSort?.field === 'week'
+        ? [this.model?.weeklyViewCount, 'weekly views']
+        : [this.model?.viewCount, 'all-time views'];
+    return html`
+      <tile-stats
+        .model=${this.model}
+        .mediatype=${this.model?.mediatype}
+        .viewCount=${viewCount}
+        .viewLabel=${viewLabel}
+        .favCount=${this.model?.favCount}
+        .commentCount=${this.model?.commentCount}
+        .tvClipCount=${this.model?.tvClipCount}
+        .showTvClips=${this.showTvClips}
+      >
+      </tile-stats>
+    `;
+  }
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
       this.effectiveSort?.field as string,
@@ -267,6 +284,24 @@ export class ItemTile extends BaseTileComponent {
           border: 1px solid ${tileBorderColor};
         }
+        .simple .item-info {
+          padding-bottom: 5px;
+        }
+        .simple #title > .truncated {
+          -webkit-line-clamp: 2;
+        }
+        .simple .created-by > .truncated,
+        .simple .date-sorted-by > .truncated,
+        .simple .volume-issue > .truncated {
+          -webkit-line-clamp: 1;
+        }
+        .simple text-snippet-block {
+          margin-top: auto; /* Force the snippets to the bottom of the tile */
+        }
         .capture-dates {
           margin: 0;
           padding: 0 5px;

package/src/tiles/grid/tile-stats.ts CHANGED Viewed

@@ -20,9 +20,6 @@ export class TileStats extends LitElement {
   /** The mediatype of the item these stats represent */
   @property({ type: String }) mediatype?: string;
-  /** The collections this item is part of */
-  @property({ type: Array }) collections?: string[];
   /** The number of uploaded items, if representing an account */
   @property({ type: Number }) itemCount?: number;
@@ -38,9 +35,6 @@ export class TileStats extends LitElement {
   /** The number of times the item has been reviewed */
   @property({ type: Number }) commentCount?: number;
-  /** Whether the tile represents the result of a search */
-  @property({ type: Boolean }) isTvSearchResult = false;
   /** Whether to show the number of TV clips in place of reviews */
   @property({ type: Boolean }) showTvClips = false;

package/src/tiles/tile-dispatcher.ts CHANGED Viewed

@@ -58,6 +58,9 @@ export class TileDispatcher
   @property({ type: Boolean }) showTvClips = false;
+  /** Whether to use the simple layout in grid mode */
+  @property({ type: Boolean }) useSimpleLayout = false;
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
@@ -342,6 +345,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
               .isManageView=${this.isManageView}
+              ?useSimpleLayout=${this.useSimpleLayout}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}