npm - @internetarchive/collection-browser - Versions diffs - 0.4.0 → 0.4.2 - Mend

@internetarchive/collection-browser 0.4.0 → 0.4.2

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

package/dist/src/app-root.js +1 -1
package/dist/src/app-root.js.map +1 -1
package/dist/src/collection-browser.d.ts +40 -3
package/dist/src/collection-browser.js +214 -58
package/dist/src/collection-browser.js.map +1 -1
package/dist/src/collection-facets/more-facets-content.d.ts +3 -2
package/dist/src/collection-facets/more-facets-content.js +6 -2
package/dist/src/collection-facets/more-facets-content.js.map +1 -1
package/dist/src/collection-facets.d.ts +3 -2
package/dist/src/collection-facets.js +6 -2
package/dist/src/collection-facets.js.map +1 -1
package/dist/src/models.d.ts +9 -0
package/dist/src/models.js +8 -0
package/dist/src/models.js.map +1 -1
package/dist/src/restoration-state-handler.d.ts +0 -1
package/dist/src/restoration-state-handler.js +4 -4
package/dist/src/restoration-state-handler.js.map +1 -1
package/dist/src/sort-filter-bar/alpha-bar.d.ts +3 -0
package/dist/src/sort-filter-bar/alpha-bar.js +32 -13
package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +2 -1
package/dist/src/sort-filter-bar/sort-filter-bar.js +7 -0
package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
package/dist/src/tiles/image-block.js +0 -1
package/dist/src/tiles/image-block.js.map +1 -1
package/dist/test/collection-browser.test.js +81 -9
package/dist/test/collection-browser.test.js.map +1 -1
package/dist/test/collection-facets/more-facets-content.test.js +2 -2
package/dist/test/collection-facets/more-facets-content.test.js.map +1 -1
package/dist/test/mocks/mock-search-responses.d.ts +2 -0
package/dist/test/mocks/mock-search-responses.js +70 -0
package/dist/test/mocks/mock-search-responses.js.map +1 -1
package/dist/test/mocks/mock-search-service.js +5 -1
package/dist/test/mocks/mock-search-service.js.map +1 -1
package/dist/test/restoration-state-handler.test.js +0 -1
package/dist/test/restoration-state-handler.test.js.map +1 -1
package/dist/test/sort-filter-bar/alpha-bar.test.d.ts +1 -0
package/dist/test/sort-filter-bar/alpha-bar.test.js +44 -0
package/dist/test/sort-filter-bar/alpha-bar.test.js.map +1 -0
package/dist/test/sort-filter-bar/sort-filter-bar.test.js +32 -0
package/dist/test/sort-filter-bar/sort-filter-bar.test.js.map +1 -1
package/package.json +3 -3
package/src/app-root.ts +1 -1
package/src/collection-browser.ts +273 -57
package/src/collection-facets/more-facets-content.ts +6 -2
package/src/collection-facets.ts +6 -2
package/src/models.ts +15 -0
package/src/restoration-state-handler.ts +7 -5
package/src/sort-filter-bar/alpha-bar.ts +26 -9
package/src/sort-filter-bar/sort-filter-bar.ts +9 -0
package/src/tiles/image-block.ts +0 -1
package/test/collection-browser.test.ts +90 -10
package/test/collection-facets/more-facets-content.test.ts +2 -2
package/test/mocks/mock-search-responses.ts +78 -0
package/test/mocks/mock-search-service.ts +6 -0
package/test/restoration-state-handler.test.ts +0 -3
package/test/sort-filter-bar/alpha-bar.test.ts +52 -0
package/test/sort-filter-bar/sort-filter-bar.test.ts +44 -0

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 type {\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() viewSortSelectorVisible = 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.viewSortSelectorVisible && !this.mobileSelectorVisible\n ? this.viewSortSelector\n : nothing}\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 (\n changed.has('dateSortSelectorVisible') \|\|\n changed.has('viewSortSelectorVisible')\n ) {\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 \|\| this.viewSortSelectorVisible) {\n document.addEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n } else {\n document.removeEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n }\n }\n\n private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.viewSortSelectorVisible = false;\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>\n ${this.getSortDisplayOption(SortField.weeklyview, {\n clickEvent: () => {\n if (!this.viewOptionSelected)\n this.setSelectedSort(SortField.weeklyview);\n this.viewSortSelectorVisible = !this.viewSortSelectorVisible;\n this.dateSortSelectorVisible = false;\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n displayName: html`${this.viewSortField}`,\n isSelected: () => this.viewOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.dateSortSelectorVisible = false;\n this.viewSortSelectorVisible = 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.viewSortSelectorVisible = false;\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=\"list-detail-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-compact-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 get viewSortSelector() {\n return html`\n <div\n id=\"view-sort-selector-backdrop\"\n @keyup=${() => {\n this.viewSortSelectorVisible = false;\n }}\n @click=${() => {\n this.viewSortSelectorVisible = false;\n }}\n ></div>\n <div id=\"view-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.alltimeview)}</li>\n <li>${this.getDateSortButton(SortField.weeklyview)}</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.viewSortSelectorVisible = 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 There are two view 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 viewOptionSelected(): boolean {\n const viewSortFields: SortField[] = [\n SortField.alltimeview,\n SortField.weeklyview,\n ];\n return viewSortFields.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 /\n The display name of the current view field\n \n @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n /\n private get viewSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.weeklyview];\n const name = this.viewOptionSelected\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 #view-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 #view-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 #view-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 #view-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 type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n CollectionDisplayMode,\n PrefixFilterCounts,\n PrefixFilterType,\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 }) prefixFilterCountMap?: Record<\n PrefixFilterType,\n PrefixFilterCounts\n >;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @state() alphaSelectorVisible: AlphaSelector \| null = null;\n\n @state() dateSortSelectorVisible = false;\n\n @state() viewSortSelectorVisible = 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.viewSortSelectorVisible && !this.mobileSelectorVisible\n ? this.viewSortSelector\n : nothing}\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 (\n changed.has('dateSortSelectorVisible') \|\|\n changed.has('viewSortSelectorVisible')\n ) {\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 \|\| this.viewSortSelectorVisible) {\n document.addEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n } else {\n document.removeEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n }\n }\n\n private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.viewSortSelectorVisible = false;\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>\n ${this.getSortDisplayOption(SortField.weeklyview, {\n clickEvent: () => {\n if (!this.viewOptionSelected)\n this.setSelectedSort(SortField.weeklyview);\n this.viewSortSelectorVisible = !this.viewSortSelectorVisible;\n this.dateSortSelectorVisible = false;\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n displayName: html`${this.viewSortField}`,\n isSelected: () => this.viewOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.dateSortSelectorVisible = false;\n this.viewSortSelectorVisible = 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.viewSortSelectorVisible = false;\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=\"list-detail-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-compact-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 get viewSortSelector() {\n return html`\n <div\n id=\"view-sort-selector-backdrop\"\n @keyup=${() => {\n this.viewSortSelectorVisible = false;\n }}\n @click=${() => {\n this.viewSortSelectorVisible = false;\n }}\n ></div>\n <div id=\"view-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.alltimeview)}</li>\n <li>${this.getDateSortButton(SortField.weeklyview)}</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.viewSortSelectorVisible = 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 There are two view 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 viewOptionSelected(): boolean {\n const viewSortFields: SortField[] = [\n SortField.alltimeview,\n SortField.weeklyview,\n ];\n return viewSortFields.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 /\n The display name of the current view field\n \n @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n /\n private get viewSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.weeklyview];\n const name = this.viewOptionSelected\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 .letterCounts=${this.prefixFilterCountMap?.title}\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n .letterCounts=${this.prefixFilterCountMap?.creator}\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 #view-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 #view-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 #view-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 #view-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/image-block.js CHANGED Viewed

@@ -79,7 +79,6 @@ let ImageBlock = class ImageBlock extends LitElement {
       .grid {
         height: var(--imgBlockHeight, 16rem);
         flex: 1;
-        display: inline-block;
         position: initial;
       }

package/dist/src/tiles/image-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAIlE,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAGhC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG+B,kBAAa,GAAG,KAAK,CAAC;QAEtB,eAAU,GAAG,KAAK,CAAC;QAEnB,aAAQ,GAAG,KAAK,CAAC;QAIlB,aAAQ,GAAW,SAAS,CAAC;~~IA2G3D~~,CAAC;~~IAzGC~~,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAA;YAAE,OAAO,OAAO,CAAC;QAE5C,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;;mBAExB,IAAI,CAAC,KAAK;0BACH,IAAI,CAAC,YAAY;wBACnB,IAAI,CAAC,UAAU;2BACZ,IAAI,CAAC,aAAa;sBACvB,IAAI,CAAC,QAAQ;;;;UAIzB,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,mBAAmB;;KAEzD,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;YAC5C,cAAc,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;YACrD,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI;SACtB,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;;QAC7B,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAErC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAA,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,CAAA;YAC3D,OAAO,OAAO,CAAC;QAEjB,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;yBACR,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa;yBACzB,IAAI,CAAC,aAAa;;;KAGtC,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;;QAC7B,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEpC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAA,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,CAAA;YAC3D,OAAO,OAAO,CAAC;QAEjB,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;yBACR,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa;wBAC1B,IAAI;;;KAGvB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CT~~,CAAC;IACJ,CAAC;CACF,CAAA;~~AArH6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAoB;AAEnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA8B;AAX9C,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,~~CAsHtB~~;~~SAtHY~~,UAAU","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) isCompactTile = false;\n\n @property({ type: Boolean }) isListTile = false;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) viewSize: string = 'desktop';\n\n render() {\n if (!this.model?.identifier) return nothing;\n\n return html`\n <div class=${classMap(this.baseClass)}>\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${this.isListTile}\n .isCompactTile=${this.isCompactTile}\n .loggedIn=${this.loggedIn}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n </div>\n `;\n }\n\n private get baseClass(): ClassInfo {\n return {\n list: this.isListTile && !this.isCompactTile,\n 'list-compact': this.isListTile && this.isCompactTile,\n [this.viewSize]: true,\n };\n }\n\n private get iconOverlayTemplate() {\n if (!this.isListTile) return nothing;\n\n if (!this.model?.loginRequired && !this.model?.contentWarning)\n return nothing;\n\n return html`\n <icon-overlay\n .loggedIn=${this.loggedIn}\n .loginRequired=${this.model?.loginRequired}\n .isCompactTile=${this.isCompactTile}\n >\n </icon-overlay>\n `;\n }\n\n private get textOverlayTemplate() {\n if (this.isListTile) return nothing;\n\n if (!this.model?.loginRequired && !this.model?.contentWarning)\n return nothing;\n\n return html`\n <text-overlay\n .loggedIn=${this.loggedIn}\n .loginRequired=${this.model?.loginRequired}\n ?iconRequired=${true}\n >\n </text-overlay>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n div {\n display: flex;\n justify-content: center;\n position: relative;\n }\n\n .grid {\n height: var(--imgBlockHeight, 16rem);\n flex: 1;\n ~~display: inline-block;\n~~ position: initial;\n }\n\n /** tile-list view /\n .list.desktop {\n width: 100px;\n height: 100px;\n display: inline-block;\n position: relative;\n text-align: center;\n }\n\n .list.mobile {\n width: 90px;\n height: 90px;\n }\n\n /* tile-list-compact view */\n .list-compact {\n display: block;\n text-align: center;\n }\n\n .list-compact.desktop {\n width: 45px;\n height: 45px;\n }\n\n .list-compact.mobile {\n width: 30px;\n height: 30px;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) isCompactTile = false;\n\n @property({ type: Boolean }) isListTile = false;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) viewSize: string = 'desktop';\n\n render() {\n if (!this.model?.identifier) return nothing;\n\n return html`\n <div class=${classMap(this.baseClass)}>\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${this.isListTile}\n .isCompactTile=${this.isCompactTile}\n .loggedIn=${this.loggedIn}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n </div>\n `;\n }\n\n private get baseClass(): ClassInfo {\n return {\n list: this.isListTile && !this.isCompactTile,\n 'list-compact': this.isListTile && this.isCompactTile,\n [this.viewSize]: true,\n };\n }\n\n private get iconOverlayTemplate() {\n if (!this.isListTile) return nothing;\n\n if (!this.model?.loginRequired && !this.model?.contentWarning)\n return nothing;\n\n return html`\n <icon-overlay\n .loggedIn=${this.loggedIn}\n .loginRequired=${this.model?.loginRequired}\n .isCompactTile=${this.isCompactTile}\n >\n </icon-overlay>\n `;\n }\n\n private get textOverlayTemplate() {\n if (this.isListTile) return nothing;\n\n if (!this.model?.loginRequired && !this.model?.contentWarning)\n return nothing;\n\n return html`\n <text-overlay\n .loggedIn=${this.loggedIn}\n .loginRequired=${this.model?.loginRequired}\n ?iconRequired=${true}\n >\n </text-overlay>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n div {\n display: flex;\n justify-content: center;\n position: relative;\n }\n\n .grid {\n height: var(--imgBlockHeight, 16rem);\n flex: 1;\n position: initial;\n }\n\n /** tile-list view /\n .list.desktop {\n width: 100px;\n height: 100px;\n display: inline-block;\n position: relative;\n text-align: center;\n }\n\n .list.mobile {\n width: 90px;\n height: 90px;\n }\n\n /* tile-list-compact view */\n .list-compact {\n display: block;\n text-align: center;\n }\n\n .list-compact.desktop {\n width: 45px;\n height: 45px;\n }\n\n .list-compact.mobile {\n width: 30px;\n height: 30px;\n }\n `;\n }\n}\n"]}

package/dist/test/collection-browser.test.js CHANGED Viewed

@@ -9,6 +9,18 @@ import { MockSearchService } from './mocks/mock-search-service';
 import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';
 import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
 import { analyticsCategories } from '../src/utils/analytics-events';
+/**
+ * Wait for the next tick of the event loop.
+ *
+ * This is necessary in some of the tests because certain collection browser
+ * updates take more than one tick to render (e.g., date picker & query changes).
+ * These delays are non-ideal and should eventually be investigated and fixed,
+ * but they are minor enough that waiting for the next tick is a reasonable
+ * testing solution for now.
+ */
+const nextTick = () => new Promise(resolve => {
+    setTimeout(resolve, 0);
+});
 describe('Collection Browser', () => {
     beforeEach(async () => {
         // Apparently query params set by one test can bleed into other tests.
@@ -41,6 +53,8 @@ describe('Collection Browser', () => {
         const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`);
         el.searchContext = 'betaSearchService';
+        el.selectedSort = 'creator';
+        el.sortDirection = 'asc';
         el.selectedCreatorFilter = 'A';
         await el.updateComplete;
         expect(mockAnalyticsHandler.callCategory).to.equal('betaSearchService');
@@ -59,6 +73,7 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.searchContext = 'beta-search-service';
         el.selectedSort = 'title';
+        el.sortDirection = 'asc';
         el.selectedTitleFilter = 'A';
         await el.updateComplete;
         expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
@@ -146,6 +161,7 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
+        await nextTick();
         expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo');
         expect((_c = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#big-results-label')) === null || _c === void 0 ? void 0 : _c.textContent).to.contains('Results');
     });
@@ -159,6 +175,7 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
+        await nextTick();
         expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo');
         expect(searchService.searchType).to.equal(SearchType.METADATA);
         expect((_c = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#big-results-label')) === null || _c === void 0 ? void 0 : _c.textContent).to.contains('Results');
@@ -173,12 +190,13 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
+        await nextTick();
         expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo');
         expect(searchService.searchType).to.equal(SearchType.FULLTEXT);
         expect((_c = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#big-results-label')) === null || _c === void 0 ? void 0 : _c.textContent).to.contains('Results');
     });
     it('queries the search service with facets selected/negated', async () => {
-        var _a;
+        var _a, _b;
         const searchService = new MockSearchService();
         const selectedFacets = {
             subject: {
@@ -211,7 +229,16 @@ describe('Collection Browser', () => {
         el.baseQuery = 'collection:foo';
         el.selectedFacets = selectedFacets;
         await el.updateComplete;
-        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo AND (subject:("foo" OR -"bar") AND language:("en"))');
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo');
+        expect((_b = searchService.searchParams) === null || _b === void 0 ? void 0 : _b.filters).to.deep.equal({
+            subject: {
+                foo: 'inc',
+                bar: 'exc',
+            },
+            language: {
+                en: 'inc',
+            },
+        });
     });
     it('fires a separate date histogram query when year facets are applied', async () => {
         var _a, _b, _c;
@@ -248,7 +275,8 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         el.showHistogramDatePicker = true;
-        el.dateRangeQueryClause = 'year:[1995 TO 2005]';
+        el.minSelectedDate = '1995';
+        el.maxSelectedDate = '2005';
         await el.updateComplete;
         expect((_b = (_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.aggregations) === null || _b === void 0 ? void 0 : _b.simpleParams).to.deep.equal(['year']); // Explicitly requests year aggregations
         expect((_c = searchService.searchParams) === null || _c === void 0 ? void 0 : _c.query).to.equal('collection:foo' // No date clause on query
@@ -272,7 +300,8 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         el.showHistogramDatePicker = false;
-        el.dateRangeQueryClause = 'year:[1995 TO 2005]';
+        el.minSelectedDate = '1995';
+        el.maxSelectedDate = '2005';
         await el.updateComplete;
         expect((_b = (_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.aggregations) === null || _b === void 0 ? void 0 : _b.simpleParams).to.satisfy((aggTypes) => !aggTypes || !aggTypes.includes('year') // Not requesting year aggregations explicitly
         );
@@ -474,28 +503,69 @@ describe('Collection Browser', () => {
         const searchService = new MockSearchService();
         const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
-        el.baseQuery = 'collection:foo';
+        el.baseQuery = 'first-title';
+        el.selectedSort = 'title';
+        el.sortDirection = 'asc';
         el.selectedTitleFilter = 'X';
         await el.updateComplete;
         // Wait an extra tick
         await new Promise(res => {
             setTimeout(res, 0);
         });
-        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo AND firstTitle:X');
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('first-title AND firstTitle:X');
     });
     it('sets sort filter properties when user selects creator filter', async () => {
         var _a;
         const searchService = new MockSearchService();
         const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
-        el.baseQuery = 'collection:foo';
+        el.baseQuery = 'first-creator';
+        el.selectedSort = 'creator';
+        el.sortDirection = 'asc';
+        el.selectedCreatorFilter = 'X';
+        await el.updateComplete;
+        // Wait an extra tick
+        await new Promise(res => {
+            setTimeout(res, 0);
+        });
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('first-creator AND firstCreator:X');
+    });
+    it('sets sort filter properties simultaneous with facets and date range', async () => {
+        var _a, _b;
+        const searchService = new MockSearchService();
+        const selectedFacets = {
+            collection: { foo: { key: 'foo', state: 'selected', count: 1 } },
+            creator: {},
+            language: {},
+            lending: {},
+            mediatype: {},
+            subject: {},
+            year: {},
+        };
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+      </collection-browser>`);
+        el.baseQuery = 'first-creator';
+        el.selectedSort = 'creator';
+        el.selectedFacets = selectedFacets;
+        el.minSelectedDate = '1950';
+        el.maxSelectedDate = '1970';
+        el.sortDirection = 'asc';
         el.selectedCreatorFilter = 'X';
         await el.updateComplete;
         // Wait an extra tick
         await new Promise(res => {
             setTimeout(res, 0);
         });
-        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo AND firstCreator:X');
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('first-creator AND firstCreator:X');
+        expect((_b = searchService.searchParams) === null || _b === void 0 ? void 0 : _b.filters).to.deep.equal({
+            collection: {
+                foo: 'inc',
+            },
+            year: {
+                '1950': 'gte',
+                '1970': 'lte',
+            },
+        });
     });
     it('sets date range query when date picker selection changed', async () => {
         var _a, _b, _c;
@@ -527,7 +597,8 @@ describe('Collection Browser', () => {
         // Ensure that the histogram change propagated to the collection browser's
         // date query correctly.
         await el.updateComplete;
-        expect(el.dateRangeQueryClause).to.equal('year:[1960 TO 2000]');
+        expect(el.minSelectedDate).to.equal('1960');
+        expect(el.maxSelectedDate).to.equal('2000');
     });
     it('scrolls to page', async () => {
         var _a;
@@ -606,6 +677,7 @@ describe('Collection Browser', () => {
       </collection-browser>`);
         el.baseQuery = 'single-result';
         await el.updateComplete;
+        await nextTick();
         expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#big-results-label')) === null || _b === void 0 ? void 0 : _b.textContent).to.contains('Result');
     });
     it('`searchContext` prop helps describe where component is being used', async () => {