npm - @internetarchive/collection-browser - Versions diffs - 0.2.4-rc1 → 0.2.6 - Mend

@internetarchive/collection-browser 0.2.4-rc1 → 0.2.6

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

package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.d.ts RENAMED Viewed

File without changes

package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.js RENAMED Viewed

File without changes

package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.js.map RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"favorite-filled.js","sourceRoot":"","sources":["../../../../../src/~~tiles~~/~~grid~~/icons/favorite-filled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;CAQpC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const favoriteFilledIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z\"\n fill=\"#333\"\n />\n <title>Icon of a star, filled in</title>\n </svg>\n`;\n"]}
1	+ {"version":3,"file":"favorite-filled.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/favorite-filled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;CAQpC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const favoriteFilledIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z\"\n fill=\"#333\"\n />\n <title>Icon of a star, filled in</title>\n </svg>\n`;\n"]}

package/dist/src/{tiles/grid → assets/img}/icons/reviews.d.ts RENAMED Viewed

File without changes

package/dist/src/{tiles/grid → assets/img}/icons/reviews.js RENAMED Viewed

File without changes

package/dist/src/{tiles/grid → assets/img}/icons/reviews.js.map RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"reviews.js","sourceRoot":"","sources":["../../../../../src/~~tiles~~/~~grid~~/icons/reviews.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;CAQ7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const reviewsIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m100 7.78013601c0-2.14552613-.7593357-3.978597-2.278007-5.4992126-1.5186713-1.52061561-3.3493984-2.28092341-5.4921813-2.28092341h-84.54977287c-2.08268321 0-3.88336049.7603078-5.40203183 2.28092341-1.51867133 1.5206156-2.278007 3.35368647-2.278007 5.4992126v51.49262709c0 2.0853495.75933567 3.8883321 2.278007 5.4089477 1.51867134 1.5206156 3.31934862 2.2809234 5.40203183 2.2809234h10.53361537l.3571304 33.0373658 32.4087237-33.0373658h41.2468361c2.1427829 0 3.97351-.7603078 5.4921813-2.2809234s2.278007-3.3235982 2.278007-5.4089477z\"\n fill=\"#333\"\n />\n <title>Icon of a speech bubble</title>\n </svg>\n`;\n"]}
1	+ {"version":3,"file":"reviews.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/reviews.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;CAQ7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const reviewsIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m100 7.78013601c0-2.14552613-.7593357-3.978597-2.278007-5.4992126-1.5186713-1.52061561-3.3493984-2.28092341-5.4921813-2.28092341h-84.54977287c-2.08268321 0-3.88336049.7603078-5.40203183 2.28092341-1.51867133 1.5206156-2.278007 3.35368647-2.278007 5.4992126v51.49262709c0 2.0853495.75933567 3.8883321 2.278007 5.4089477 1.51867134 1.5206156 3.31934862 2.2809234 5.40203183 2.2809234h10.53361537l.3571304 33.0373658 32.4087237-33.0373658h41.2468361c2.1427829 0 3.97351-.7603078 5.4921813-2.2809234s2.278007-3.3235982 2.278007-5.4089477z\"\n fill=\"#333\"\n />\n <title>Icon of a speech bubble</title>\n </svg>\n`;\n"]}

package/dist/src/{tiles/grid → assets/img}/icons/upload.d.ts RENAMED Viewed

File without changes

package/dist/src/{tiles/grid → assets/img}/icons/upload.js RENAMED Viewed

File without changes

package/dist/src/{tiles/grid → assets/img}/icons/upload.js.map RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../../../src/~~tiles~~/~~grid~~/icons/upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;CAS5B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const uploadIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z\"\n fill=\"#333\"\n fill-rule=\"evenodd\"\n />\n <title>Icon of an arrow pointing upwards</title>\n </svg>\n`;\n"]}
1	+ {"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;CAS5B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const uploadIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z\"\n fill=\"#333\"\n fill-rule=\"evenodd\"\n />\n <title>Icon of an arrow pointing upwards</title>\n </svg>\n`;\n"]}

package/dist/src/assets/img/icons/views.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const viewsIcon: import("lit-html").TemplateResult<2>;

package/dist/src/{tiles/grid → assets/img}/icons/views.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { svg } from 'lit';
-export default svg `
+export const viewsIcon = svg `
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

package/dist/src/assets/img/icons/views.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const viewsIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\"\n fill=\"#333\"\n />\n <title>Eye icon</title>\n </svg>\n`;\n"]}

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

@@ -298,7 +298,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.displayMode = 'list-detail';
         }}
             class=${this.displayMode === 'list-detail' ? 'active' : ''}
-            title="Extended list view"
+            title="List view"
           >
             ${listIcon}
           </button>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n CollectionDisplayMode,\n SortField,\n SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\ntype AlphaSelector = 'creator' \| 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n @property({ type: String }) sortDirection: 'asc' \| 'desc' \| null = null;\n\n @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n @property({ type: String }) selectedTitleFilter: string \| null = null;\n\n @property({ type: String }) selectedCreatorFilter: string \| null = null;\n\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @state() alphaSelectorVisible: AlphaSelector \| null = null;\n\n @state() dateSortSelectorVisible = false;\n\n @state() desktopSelectorBarWidth = 0;\n\n @state() selectorBarContainerWidth = 0;\n\n @state() hoveringOverDateSortOptions = false;\n\n @query('#desktop-sort-selector')\n private desktopSortSelector!: HTMLUListElement;\n\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n render() {\n return html`\n <div id=\"container\">\n <div id=\"sort-bar\">\n <div id=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n\n <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n </div>\n\n ${this.dateSortSelectorVisible && !this.mobileSelectorVisible\n ? this.dateSortSelector\n : nothing}\n ${this.alphaBarTemplate}\n\n <div id=\"bottom-shadow\"></div>\n </div>\n `;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedSort') && this.sortDirection === null) {\n this.sortDirection = 'desc';\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.alphaSelectorVisible = 'title';\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.alphaSelectorVisible = 'creator';\n }\n\n if (changed.has('dateSortSelectorVisible')) {\n this.setupEscapeListeners();\n }\n\n if (changed.has('resizeObserver')) {\n const oldObserver = changed.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n if (oldObserver) this.disconnectResizeObserver(oldObserver);\n this.setupResizeObserver();\n }\n }\n\n private setupEscapeListeners() {\n if (this.dateSortSelectorVisible) {\n document.addEventListener(\n 'keydown',\n this.boundDateSelectorEscapeListener\n );\n } else {\n document.removeEventListener(\n 'keydown',\n this.boundDateSelectorEscapeListener\n );\n }\n }\n\n private boundDateSelectorEscapeListener = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.dateSortSelectorVisible = false;\n }\n };\n\n disconnectedCallback(): void {\n if (this.resizeObserver) {\n this.disconnectResizeObserver(this.resizeObserver);\n }\n }\n\n private disconnectResizeObserver(\n resizeObserver: SharedResizeObserverInterface\n ) {\n resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n resizeObserver.removeObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n this.resizeObserver.addObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n }\n\n private get alphaBarTemplate(): TemplateResult \| typeof nothing {\n if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n if (this.alphaSelectorVisible === null) {\n if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n if (this.selectedSort === 'title') return this.titleSelectorBar;\n } else {\n return this.alphaSelectorVisible === 'creator'\n ? this.creatorSelectorBar\n : this.titleSelectorBar;\n }\n\n return nothing;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortSelector) {\n this.desktopSelectorBarWidth = entry.contentRect.width;\n } else if (entry.target === this.sortSelectorContainer) {\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n }\n\n private get sortDirectionSelectorTemplate() {\n return html`\n <div id=\"sort-direction-selector\">\n <button\n id=\"sort-ascending-btn\"\n class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('asc');\n }}\n >\n ${sortIcon}\n </button>\n <button\n id=\"sort-descending-btn\"\n class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('desc');\n }}\n >\n ${sortIcon}\n </button>\n </div>\n `;\n }\n\n private get desktopSortSelectorTemplate() {\n return html`\n <ul\n id=\"desktop-sort-selector\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <li id=\"sort-by-text\">Sort By</li>\n <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance)\n : nothing}\n </li>\n <li>${this.getSortDisplayOption(SortField.views)}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(SortField.title);\n this.emitCreatorLetterChangedEvent();\n },\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.date, {\n clickEvent: () => {\n if (!this.dateOptionSelected)\n this.setSelectedSort(SortField.date);\n this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n displayName: html`${this.dateSortField}`,\n isSelected: () => this.dateOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'creator';\n this.selectedTitleFilter = null;\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(SortField.creator);\n this.emitTitleLetterChangedEvent();\n },\n })}\n </li>\n </ul>\n `;\n }\n\n /*\n This generates each of the sort option links.\n \n It manages the display value and the selected state of the option.\n \n @param sortField\n * @param options {\n * additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.\n * displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n * isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n /\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n clickEvent?: (e: Event) => void;\n isSelected?: () => boolean;\n displayName?: TemplateResult;\n }\n ): TemplateResult {\n const isSelected =\n options?.isSelected ?? (() => this.selectedSort === sortField);\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n if (options?.clickEvent) {\n options.clickEvent(e);\n } else {\n this.alphaSelectorVisible = null;\n this.dateSortSelectorVisible = false;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.setSelectedSort(sortField);\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n }\n }}\n class=${isSelected() ? 'selected' : ''}\n >\n ${displayName}\n </a>\n `;\n }\n\n private get mobileSortSelectorTemplate() {\n return html`\n <select\n id=\"mobile-sort-selector\"\n @change=${this.mobileSortChanged}\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${Object.keys(SortField).map(\n field => html`\n <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n ${SortFieldDisplayName[field as SortField]}\n </option>\n `\n )}\n </select>\n `;\n }\n\n private mobileSortChanged(e: Event) {\n const target = e.target as HTMLSelectElement;\n this.setSelectedSort(target.value as SortField);\n }\n\n private get displayOptionTemplate() {\n return html`\n <ul>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'grid';\n }}\n class=${this.displayMode === 'grid' ? 'active' : ''}\n title=\"Tile view\"\n >\n ${tileIcon}\n </button>\n </li>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'list-detail';\n }}\n class=${this.displayMode === 'list-detail' ? 'active' : ''}\n title=\"Extended list view\"\n >\n ${listIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-button\"\n @click=${() => {\n this.displayMode = 'list-compact';\n }}\n class=${this.displayMode === 'list-compact' ? 'active' : ''}\n title=\"Compact list view\"\n >\n ${compactIcon}\n </button>\n </li>\n </ul>\n `;\n }\n\n private get dateSortSelector() {\n return html`\n <div\n id=\"date-sort-selector-backdrop\"\n @keyup=${() => {\n this.dateSortSelectorVisible = false;\n }}\n @click=${() => {\n this.dateSortSelectorVisible = false;\n }}\n ></div>\n <div id=\"date-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.datearchived)}</li>\n <li>${this.getDateSortButton(SortField.date)}</li>\n <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n <li>${this.getDateSortButton(SortField.dateadded)}</li>\n </ul>\n </div>\n `;\n }\n\n private getDateSortButton(sortField: SortField) {\n return html`\n <button\n @click=${() => {\n this.selectDateSort(sortField);\n }}\n class=${this.selectedSort === sortField ? 'selected' : ''}\n >\n ${SortFieldDisplayName[sortField]}\n </button>\n `;\n }\n\n private selectDateSort(sortField: SortField) {\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private setSortDirections(sortDirection: 'asc' \| 'desc') {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n this.emitSortChangedEvent();\n }\n\n /\n There are four date sort options.\n \n This checks to see if the current sort is one of them.\n \n @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n /\n private get dateOptionSelected(): boolean {\n const dateSortFields: SortField[] = [\n SortField.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.selectedSort);\n }\n\n /\n The display name of the current date field\n \n @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n /\n private get dateSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.date];\n const name = this.dateOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string \| undefined }>\n ) {\n this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n this.emitTitleLetterChangedEvent();\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string \| undefined }>\n ) {\n this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n this.emitCreatorLetterChangedEvent();\n }\n\n private emitTitleLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string \| null }>(\n 'titleLetterChanged',\n {\n detail: { selectedLetter: this.selectedTitleFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private emitCreatorLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string \| null }>(\n 'creatorLetterChanged',\n {\n detail: { selectedLetter: this.selectedCreatorFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: 'asc' \| 'desc' \| null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static styles = css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: space-between;\n border: 1px solid rgb(232, 232, 232);\n align-items: center;\n padding: 0.5rem 1.5rem;\n }\n\n #sort-direction-container {\n flex: 0;\n }\n\n #sort-by-text {\n text-transform: uppercase;\n }\n\n #bottom-shadow {\n height: 1px;\n width: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n background-color: #bbb;\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n }\n\n li {\n padding: 0;\n }\n\n .sort-button {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: inherit;\n width: 12px;\n height: 12px;\n opacity: 0.5;\n }\n\n .sort-button.selected {\n opacity: 1;\n }\n\n .sort-button:disabled {\n opacity: 0.25;\n cursor: default;\n }\n\n #date-sort-selector {\n position: absolute;\n left: 150px;\n top: 45px;\n\n z-index: 1;\n padding: 1rem;\n background-color: white;\n border-radius: 2.5rem;\n border: 1px solid #404142;\n }\n\n #date-sort-selector button {\n background: none;\n border-radius: 15px;\n color: #404142;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n font-size: 1.4rem;\n font-weight: 400;\n padding: 0.5rem 1.2rem;\n }\n\n #date-sort-selector button.selected {\n background-color: #404142;\n color: white;\n }\n\n #show-details {\n text-transform: uppercase;\n cursor: pointer;\n display: flex;\n }\n\n #show-details input {\n margin-right: 0.5rem;\n flex: 0 0 12px;\n }\n\n #sort-descending-btn {\n transform: rotate(180deg);\n }\n\n #sort-direction-selector {\n display: flex;\n flex-direction: column;\n gap: 3px;\n margin-right: 1rem;\n }\n\n #sort-selector-container {\n flex: 1;\n }\n\n /\n we move the desktop sort selector offscreen instead of display: none\n because we need to observe the width of it vs its container to determine\n if it's wide enough to display the desktop version and if you displY: none,\n the width becomes 0\n */\n #desktop-sort-selector.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n\n #mobile-sort-selector.hidden {\n display: none;\n }\n\n #date-sort-selector-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n background-color: rgba(255, 255, 255, 0.5);\n }\n\n #desktop-sort-selector {\n display: inline-flex;\n }\n\n #desktop-sort-selector li {\n display: flex;\n align-items: center;\n }\n\n #desktop-sort-selector li a {\n text-decoration: none;\n text-transform: uppercase;\n font-size: 1.4rem;\n color: #333;\n line-height: 2.5;\n }\n\n #desktop-sort-selector li a.selected {\n font-weight: bold;\n }\n\n #desktop-sort-selector li::after {\n content: '•';\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n #desktop-sort-selector li:first-child::after {\n content: '';\n }\n\n #desktop-sort-selector li:last-child::after {\n content: '';\n }\n\n #display-style-selector {\n flex: 0;\n }\n\n #display-style-selector button {\n background: none;\n color: inherit;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n opacity: 0.5;\n }\n\n #display-style-selector button.active {\n opacity: 1;\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n `;\n}\n"]}
1	+ {"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n CollectionDisplayMode,\n SortField,\n SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\ntype AlphaSelector = 'creator' \| 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n @property({ type: String }) sortDirection: 'asc' \| 'desc' \| null = null;\n\n @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n @property({ type: String }) selectedTitleFilter: string \| null = null;\n\n @property({ type: String }) selectedCreatorFilter: string \| null = null;\n\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @state() alphaSelectorVisible: AlphaSelector \| null = null;\n\n @state() dateSortSelectorVisible = false;\n\n @state() desktopSelectorBarWidth = 0;\n\n @state() selectorBarContainerWidth = 0;\n\n @state() hoveringOverDateSortOptions = false;\n\n @query('#desktop-sort-selector')\n private desktopSortSelector!: HTMLUListElement;\n\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n render() {\n return html`\n <div id=\"container\">\n <div id=\"sort-bar\">\n <div id=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n\n <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n </div>\n\n ${this.dateSortSelectorVisible && !this.mobileSelectorVisible\n ? this.dateSortSelector\n : nothing}\n ${this.alphaBarTemplate}\n\n <div id=\"bottom-shadow\"></div>\n </div>\n `;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedSort') && this.sortDirection === null) {\n this.sortDirection = 'desc';\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.alphaSelectorVisible = 'title';\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.alphaSelectorVisible = 'creator';\n }\n\n if (changed.has('dateSortSelectorVisible')) {\n this.setupEscapeListeners();\n }\n\n if (changed.has('resizeObserver')) {\n const oldObserver = changed.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n if (oldObserver) this.disconnectResizeObserver(oldObserver);\n this.setupResizeObserver();\n }\n }\n\n private setupEscapeListeners() {\n if (this.dateSortSelectorVisible) {\n document.addEventListener(\n 'keydown',\n this.boundDateSelectorEscapeListener\n );\n } else {\n document.removeEventListener(\n 'keydown',\n this.boundDateSelectorEscapeListener\n );\n }\n }\n\n private boundDateSelectorEscapeListener = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.dateSortSelectorVisible = false;\n }\n };\n\n disconnectedCallback(): void {\n if (this.resizeObserver) {\n this.disconnectResizeObserver(this.resizeObserver);\n }\n }\n\n private disconnectResizeObserver(\n resizeObserver: SharedResizeObserverInterface\n ) {\n resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n resizeObserver.removeObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n this.resizeObserver.addObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n }\n\n private get alphaBarTemplate(): TemplateResult \| typeof nothing {\n if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n if (this.alphaSelectorVisible === null) {\n if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n if (this.selectedSort === 'title') return this.titleSelectorBar;\n } else {\n return this.alphaSelectorVisible === 'creator'\n ? this.creatorSelectorBar\n : this.titleSelectorBar;\n }\n\n return nothing;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortSelector) {\n this.desktopSelectorBarWidth = entry.contentRect.width;\n } else if (entry.target === this.sortSelectorContainer) {\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n }\n\n private get sortDirectionSelectorTemplate() {\n return html`\n <div id=\"sort-direction-selector\">\n <button\n id=\"sort-ascending-btn\"\n class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('asc');\n }}\n >\n ${sortIcon}\n </button>\n <button\n id=\"sort-descending-btn\"\n class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('desc');\n }}\n >\n ${sortIcon}\n </button>\n </div>\n `;\n }\n\n private get desktopSortSelectorTemplate() {\n return html`\n <ul\n id=\"desktop-sort-selector\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <li id=\"sort-by-text\">Sort By</li>\n <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance)\n : nothing}\n </li>\n <li>${this.getSortDisplayOption(SortField.views)}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(SortField.title);\n this.emitCreatorLetterChangedEvent();\n },\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.date, {\n clickEvent: () => {\n if (!this.dateOptionSelected)\n this.setSelectedSort(SortField.date);\n this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n displayName: html`${this.dateSortField}`,\n isSelected: () => this.dateOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'creator';\n this.selectedTitleFilter = null;\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(SortField.creator);\n this.emitTitleLetterChangedEvent();\n },\n })}\n </li>\n </ul>\n `;\n }\n\n /*\n This generates each of the sort option links.\n \n It manages the display value and the selected state of the option.\n \n @param sortField\n * @param options {\n * additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.\n * displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n * isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n /\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n clickEvent?: (e: Event) => void;\n isSelected?: () => boolean;\n displayName?: TemplateResult;\n }\n ): TemplateResult {\n const isSelected =\n options?.isSelected ?? (() => this.selectedSort === sortField);\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n if (options?.clickEvent) {\n options.clickEvent(e);\n } else {\n this.alphaSelectorVisible = null;\n this.dateSortSelectorVisible = false;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.setSelectedSort(sortField);\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n }\n }}\n class=${isSelected() ? 'selected' : ''}\n >\n ${displayName}\n </a>\n `;\n }\n\n private get mobileSortSelectorTemplate() {\n return html`\n <select\n id=\"mobile-sort-selector\"\n @change=${this.mobileSortChanged}\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${Object.keys(SortField).map(\n field => html`\n <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n ${SortFieldDisplayName[field as SortField]}\n </option>\n `\n )}\n </select>\n `;\n }\n\n private mobileSortChanged(e: Event) {\n const target = e.target as HTMLSelectElement;\n this.setSelectedSort(target.value as SortField);\n }\n\n private get displayOptionTemplate() {\n return html`\n <ul>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'grid';\n }}\n class=${this.displayMode === 'grid' ? 'active' : ''}\n title=\"Tile view\"\n >\n ${tileIcon}\n </button>\n </li>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'list-detail';\n }}\n class=${this.displayMode === 'list-detail' ? 'active' : ''}\n title=\"List view\"\n >\n ${listIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-button\"\n @click=${() => {\n this.displayMode = 'list-compact';\n }}\n class=${this.displayMode === 'list-compact' ? 'active' : ''}\n title=\"Compact list view\"\n >\n ${compactIcon}\n </button>\n </li>\n </ul>\n `;\n }\n\n private get dateSortSelector() {\n return html`\n <div\n id=\"date-sort-selector-backdrop\"\n @keyup=${() => {\n this.dateSortSelectorVisible = false;\n }}\n @click=${() => {\n this.dateSortSelectorVisible = false;\n }}\n ></div>\n <div id=\"date-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.datearchived)}</li>\n <li>${this.getDateSortButton(SortField.date)}</li>\n <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n <li>${this.getDateSortButton(SortField.dateadded)}</li>\n </ul>\n </div>\n `;\n }\n\n private getDateSortButton(sortField: SortField) {\n return html`\n <button\n @click=${() => {\n this.selectDateSort(sortField);\n }}\n class=${this.selectedSort === sortField ? 'selected' : ''}\n >\n ${SortFieldDisplayName[sortField]}\n </button>\n `;\n }\n\n private selectDateSort(sortField: SortField) {\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private setSortDirections(sortDirection: 'asc' \| 'desc') {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n this.emitSortChangedEvent();\n }\n\n /\n There are four date sort options.\n \n This checks to see if the current sort is one of them.\n \n @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n /\n private get dateOptionSelected(): boolean {\n const dateSortFields: SortField[] = [\n SortField.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.selectedSort);\n }\n\n /\n The display name of the current date field\n \n @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n /\n private get dateSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.date];\n const name = this.dateOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string \| undefined }>\n ) {\n this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n this.emitTitleLetterChangedEvent();\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string \| undefined }>\n ) {\n this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n this.emitCreatorLetterChangedEvent();\n }\n\n private emitTitleLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string \| null }>(\n 'titleLetterChanged',\n {\n detail: { selectedLetter: this.selectedTitleFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private emitCreatorLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string \| null }>(\n 'creatorLetterChanged',\n {\n detail: { selectedLetter: this.selectedCreatorFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: 'asc' \| 'desc' \| null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static styles = css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: space-between;\n border: 1px solid rgb(232, 232, 232);\n align-items: center;\n padding: 0.5rem 1.5rem;\n }\n\n #sort-direction-container {\n flex: 0;\n }\n\n #sort-by-text {\n text-transform: uppercase;\n }\n\n #bottom-shadow {\n height: 1px;\n width: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n background-color: #bbb;\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n }\n\n li {\n padding: 0;\n }\n\n .sort-button {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: inherit;\n width: 12px;\n height: 12px;\n opacity: 0.5;\n }\n\n .sort-button.selected {\n opacity: 1;\n }\n\n .sort-button:disabled {\n opacity: 0.25;\n cursor: default;\n }\n\n #date-sort-selector {\n position: absolute;\n left: 150px;\n top: 45px;\n\n z-index: 1;\n padding: 1rem;\n background-color: white;\n border-radius: 2.5rem;\n border: 1px solid #404142;\n }\n\n #date-sort-selector button {\n background: none;\n border-radius: 15px;\n color: #404142;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n font-size: 1.4rem;\n font-weight: 400;\n padding: 0.5rem 1.2rem;\n }\n\n #date-sort-selector button.selected {\n background-color: #404142;\n color: white;\n }\n\n #show-details {\n text-transform: uppercase;\n cursor: pointer;\n display: flex;\n }\n\n #show-details input {\n margin-right: 0.5rem;\n flex: 0 0 12px;\n }\n\n #sort-descending-btn {\n transform: rotate(180deg);\n }\n\n #sort-direction-selector {\n display: flex;\n flex-direction: column;\n gap: 3px;\n margin-right: 1rem;\n }\n\n #sort-selector-container {\n flex: 1;\n }\n\n /\n we move the desktop sort selector offscreen instead of display: none\n because we need to observe the width of it vs its container to determine\n if it's wide enough to display the desktop version and if you displY: none,\n the width becomes 0\n */\n #desktop-sort-selector.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n\n #mobile-sort-selector.hidden {\n display: none;\n }\n\n #date-sort-selector-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n background-color: rgba(255, 255, 255, 0.5);\n }\n\n #desktop-sort-selector {\n display: inline-flex;\n }\n\n #desktop-sort-selector li {\n display: flex;\n align-items: center;\n }\n\n #desktop-sort-selector li a {\n text-decoration: none;\n text-transform: uppercase;\n font-size: 1.4rem;\n color: #333;\n line-height: 2.5;\n }\n\n #desktop-sort-selector li a.selected {\n font-weight: bold;\n }\n\n #desktop-sort-selector li::after {\n content: '•';\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n #desktop-sort-selector li:first-child::after {\n content: '';\n }\n\n #desktop-sort-selector li:last-child::after {\n content: '';\n }\n\n #display-style-selector {\n flex: 0;\n }\n\n #display-style-selector button {\n background: none;\n color: inherit;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n opacity: 0.5;\n }\n\n #display-style-selector button.active {\n opacity: 1;\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n `;\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { TileModel } from '../../models';
+import './tile-stats';
 export declare class AccountTile extends LitElement {
     model?: TileModel;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1,52 +1,37 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { accountIcon } from './icons/account';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import { uploadIcon } from './icons/upload';
+import './tile-stats';
 let AccountTile = class AccountTile extends LitElement {
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return html `
-      <div class="outer-holder">
-        <div class="inner-holder">
-          <div id="header-holder">
-            <div id="title-holder">
-              <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
-            </div>
-            <div id="avatar-holder">
-              <div
-                id="avatar"
-                style="background-image: url('https://archive.org/services/img/${(_b = this
-            .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
-              ></div>
-            </div>
-          </div>
-          <div id="year-holder">
-            <div id="archivist-since">
-              <h3>Archivist Since</h3>
-            </div>
-            <div id="year-holder">
-              <h3>${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}</h3>
-            </div>
-          </div>
-          <div id="status-holder">
-            <div id="patron-icon">${accountIcon}</div>
-            <div class="stat-icon">
-              ${uploadIcon}
-              <h3>${(_e = this.model) === null || _e === void 0 ? void 0 : _e.itemCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${favoriteFilledIcon}
-              <h3>${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${reviewsIcon}
-              <h3>${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}</h3>
-            </div>
+      <div class="account-tile-main">
+        <div id="title">
+          <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
+        </div>
+        <div class="account-info">
+          <div id="avatar-info">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}"
+            />
           </div>
+          <span id="archivist-since">
+            Archivist since ${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}
+          </span>
         </div>
+        <tile-stats
+          .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
+          .itemCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount}
+          .favCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount}
+          .commentCount=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
     }
@@ -58,41 +43,45 @@ let AccountTile = class AccountTile extends LitElement {
         margin: 0;
       }
-      h3 {
+      span {
         font-size: 14px;
-        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
-      .outer-holder {
+      .account-tile-main {
         background-color: #fcf5e6;
         border: 1px #2c2c2c;
         border-radius: 4px;
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
+        flex-direction: column;
         text-align: center;
         width: 100%;
       }
-      .inner-holder {
-        padding: 5px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
+      .account-info {
+        flex-grow: 1;
       }
-      #header-holder {
-        flex: 1;
+      #title {
+        padding: 5px 5px 0px 5px;
+        flex-shrink: 0;
+        height: 40px;
       }
-      #title-holder {
-        height: 40px;
-        margin-bottom: 5px;
+      .account-tile-main:hover > #title > .truncated {
+        text-decoration: underline;
+      }
+      /** this is a workaround for Safari 15 where the hover effects are not working */
+      #title:hover > .truncated {
+        text-decoration: underline;
       }
-      #avatar-holder {
+      #avatar-info {
+        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -107,27 +96,11 @@ let AccountTile = class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px #888888;
       }
-      #year-holder {
+      #archivist-since {
         margin-bottom: 5px;
         height: 40px;
       }
-      #year-holder {
-        margin: 0px;
-      }
-      #status-holder {
-        height: 25px;
-        display: flex;
-        justify-content: space-evenly;
-        line-height: initial;
-      }
-      #patron-icon {
-        height: 25px;
-        width: 25px;
-      }
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -137,15 +110,9 @@ let AccountTile = class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
-        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
-      .stat-icon {
-        height: 10px;
-        width: 10px;
-      }
     `;
     }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,~~EAAE~~,~~WAAW,EAAE,MAAM,iBAAiB,~~CAAC;~~AAC9C~~,~~OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,~~IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA~~;;;;;sCAKuB~~,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU~~;;;;;iFAKqB~~,MAAA,IAAI~~;aAClE~~,KAAK,0CAAE,UAAU~~;;;;;;;;;oBAShB~~,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE~~;;;;oCAIpB~~,~~WAAW;;gBAE/B~~,~~UAAU~~;~~oBACN~~,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS~~;;;gBAGzB,kBAAkB~~;~~oBACd~~,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ~~;;;gBAGxB,WAAW~~;~~oBACP~~,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY~~;;;;;KAKvC~~,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT~~,CAAC;IACJ,CAAC;CACF,CAAA;~~AAhJ6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,~~CAiJvB~~;~~SAjJY~~,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport ~~{ accountIcon } from~~ './~~icons/account';\nimport { favoriteFilledIcon } from './icons/favorite~~-~~filled~~';\~~nimport { reviewsIcon } from './icons/reviews';\nimport { uploadIcon } from './icons/upload';\~~n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n render() {\n return html`\n <div class=\"~~outer~~-~~holder~~\">\n <div ~~class=\"inner-holder\">\n <div~~ id=\"~~header-holder\">\n <div id=\"~~title~~-holder~~\">\n <h1 class=\"truncated\">${this.model?.identifier}</h1>\n </div>\n <div id=\"avatar-~~holder~~\">\n <~~div~~\n id=\"avatar\"\n ~~style~~=\"~~background~~-~~image: url('~~https://archive.org/services/img/${this\n .model?.identifier}')\"\n ~~></div>\n~~ ~~</div>\~~n </div>\n ~~<div id=\"year-holder~~\~~">\~~n <~~div~~ id=\"archivist-since\">\n ~~<h3>~~Archivist ~~Since</h3>\n </div>\n <div~~ ~~id=\"year-holder\">\n <h3>$~~{this.model?.dateAdded?.getFullYear()}~~</h3>\~~n </~~div~~>\n </div>\n ~~<div id=\"status-holder~~\~~">\~~n <~~div id=\"patron~~-~~icon~~\~~">${accountIcon}</div>\~~n ~~<div class=\"stat-icon\">\n $~~{~~uploadIcon~~}\n ~~<h3>$~~{this.model?.itemCount}~~</h3>\n </div>\n <div class=\"stat-icon~~\~~">\~~n ${~~favoriteFilledIcon}\n <h3>${~~this.model?.favCount}~~</h3>\n </div>\n <div class=\"stat-icon~~\~~">\~~n ${~~reviewsIcon}\n <h3>${~~this.model?.commentCount}~~</h3>\~~n ~~</div~~>\n ~~</div>\n~~ </~~div~~>\n </div>\n `;\n }\n\n static get styles() {\n return css`\n h1 {\n color: black;\n font-size: 16px;\n margin: 0;\n }\n\n h3 {\n font-size: 14px;\n ~~font-weight: bold;\n~~ color: #2c2c2c;\n margin: 0px;\n }\n\n .~~outer~~-~~holder~~ {\n background-color: #fcf5e6;\n border: 1px #2c2c2c;\n border-radius: 4px;\n box-shadow: 1px 1px 2px 0px;\n height: 100%;\n display: flex;\n text-align: center;\n width: 100%;\n }\n\n .~~inner~~-~~holder~~ {\n ~~padding~~: ~~5px~~;\n ~~width:~~ ~~100%;\~~n ~~display~~: ~~flex~~;\n flex-~~direction~~: ~~column~~;\n }\n\n ~~#header~~-~~holder~~ {\n ~~flex~~: 1;\n }\n\n #title~~-holder~~ {\n ~~height: 40px;\n margin~~-~~bottom~~: ~~5px~~;\n }\n\n #avatar-~~holder~~ {\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #avatar {\n background-position: 50% 50%;\n border-radius: 50%;\n width: 160px;\n height: 160px;\n box-shadow: 1px 1px 2px #888888;\n }\n\n #~~year~~-~~holder~~ {\n margin-bottom: 5px;\n height: 40px;\n }\n\n #year-holder {\n margin: 0px;\n }\n\n #status-holder {\n height: 25px;\n display: flex;\n justify-content: space-evenly;\n line-height: initial;\n }\n\n #patron-icon {\n height: 25px;\n width: 25px;\n }\n\n .truncated {\n flex: 1;\n min-width: 0; /* Important for long words! */\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-wrap: break-word;\n ~~word-break: break-all;\n~~ line-height: 2rem;\n text-align: center;\n }\n~~\n .stat-icon {\n height: 10px;\n width: 10px;\n }\n~~ `;\n }\n}\n"]}
1	+ {"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;kCAGmB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;;sDAQF,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;8BAK9C,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;;uBAK3C,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ET,CAAC;IACJ,CAAC;CACF,CAAA;AAlH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmHvB;SAnHY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n render() {\n return html`\n <div class=\"account-tile-main\">\n <div id=\"title\">\n <h1 class=\"truncated\">${this.model?.identifier}</h1>\n </div>\n\n <div class=\"account-info\">\n <div id=\"avatar-info\">\n <img\n id=\"avatar\"\n alt=\"patron-avatar\"\n src=\"https://archive.org/services/img/${this.model?.identifier}\"\n />\n </div>\n\n <span id=\"archivist-since\">\n Archivist since ${this.model?.dateAdded?.getFullYear()}\n </span>\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .itemCount=${this.model?.itemCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n `;\n }\n\n static get styles() {\n return css`\n h1 {\n color: black;\n font-size: 16px;\n margin: 0;\n }\n\n span {\n font-size: 14px;\n color: #2c2c2c;\n margin: 0px;\n }\n\n .account-tile-main {\n background-color: #fcf5e6;\n border: 1px #2c2c2c;\n border-radius: 4px;\n box-shadow: 1px 1px 2px 0px;\n height: 100%;\n display: flex;\n flex-direction: column;\n text-align: center;\n width: 100%;\n }\n\n .account-info {\n flex-grow: 1;\n }\n\n #title {\n padding: 5px 5px 0px 5px;\n flex-shrink: 0;\n height: 40px;\n }\n\n .account-tile-main:hover > #title > .truncated {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working /\n #title:hover > .truncated {\n text-decoration: underline;\n }\n\n #avatar-info {\n margin-top: 5px;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #avatar {\n background-position: 50% 50%;\n border-radius: 50%;\n width: 160px;\n height: 160px;\n box-shadow: 1px 1px 2px #888888;\n }\n\n #archivist-since {\n margin-bottom: 5px;\n height: 40px;\n }\n\n .truncated {\n flex: 1;\n min-width: 0; / Important for long words! */\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-wrap: break-word;\n line-height: 2rem;\n text-align: center;\n }\n `;\n }\n}\n"]}

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

@@ -2,6 +2,7 @@ import { CSSResultGroup, LitElement } from 'lit';
 import { TileModel } from '../../models';
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
     baseImageUrl?: string;