@internetarchive/collection-browser 0.3.0 → 0.3.1-alpha.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 (212) hide show
  1. package/.editorconfig +29 -29
  2. package/.github/workflows/ci.yml +26 -26
  3. package/.github/workflows/gh-pages-main.yml +39 -39
  4. package/.github/workflows/npm-publish.yml +39 -39
  5. package/.github/workflows/pr-preview.yml +38 -38
  6. package/.husky/pre-commit +4 -4
  7. package/LICENSE +661 -661
  8. package/README.md +83 -83
  9. package/dist/index.d.ts +9 -9
  10. package/dist/index.js +9 -9
  11. package/dist/src/app-root.d.ts +43 -43
  12. package/dist/src/app-root.js +233 -233
  13. package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
  14. package/dist/src/assets/img/icons/arrow-left.js +2 -2
  15. package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
  16. package/dist/src/assets/img/icons/arrow-right.js +2 -2
  17. package/dist/src/assets/img/icons/chevron.d.ts +2 -2
  18. package/dist/src/assets/img/icons/chevron.js +2 -2
  19. package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
  20. package/dist/src/assets/img/icons/empty-query.js +2 -2
  21. package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
  22. package/dist/src/assets/img/icons/eye-closed.js +2 -2
  23. package/dist/src/assets/img/icons/eye.d.ts +2 -2
  24. package/dist/src/assets/img/icons/eye.js +2 -2
  25. package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
  26. package/dist/src/assets/img/icons/favorite-filled.js +2 -2
  27. package/dist/src/assets/img/icons/login-required.d.ts +1 -1
  28. package/dist/src/assets/img/icons/login-required.js +2 -2
  29. package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
  30. package/dist/src/assets/img/icons/mediatype/account.js +2 -2
  31. package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
  32. package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
  33. package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
  34. package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
  35. package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
  36. package/dist/src/assets/img/icons/mediatype/data.js +2 -2
  37. package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
  38. package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
  39. package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
  40. package/dist/src/assets/img/icons/mediatype/film.js +2 -2
  41. package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
  42. package/dist/src/assets/img/icons/mediatype/images.js +2 -2
  43. package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
  44. package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
  45. package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
  46. package/dist/src/assets/img/icons/mediatype/software.js +2 -2
  47. package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
  48. package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
  49. package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
  50. package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
  51. package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
  52. package/dist/src/assets/img/icons/mediatype/video.js +2 -2
  53. package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
  54. package/dist/src/assets/img/icons/mediatype/web.js +2 -2
  55. package/dist/src/assets/img/icons/null-result.d.ts +2 -2
  56. package/dist/src/assets/img/icons/null-result.js +2 -2
  57. package/dist/src/assets/img/icons/restricted.d.ts +1 -1
  58. package/dist/src/assets/img/icons/restricted.js +2 -2
  59. package/dist/src/assets/img/icons/reviews.d.ts +1 -1
  60. package/dist/src/assets/img/icons/reviews.js +2 -2
  61. package/dist/src/assets/img/icons/upload.d.ts +1 -1
  62. package/dist/src/assets/img/icons/upload.js +2 -2
  63. package/dist/src/assets/img/icons/views.d.ts +1 -1
  64. package/dist/src/assets/img/icons/views.js +2 -2
  65. package/dist/src/circular-activity-indicator.d.ts +5 -5
  66. package/dist/src/circular-activity-indicator.js +17 -17
  67. package/dist/src/collection-browser.d.ts +236 -234
  68. package/dist/src/collection-browser.js +1402 -1367
  69. package/dist/src/collection-browser.js.map +1 -1
  70. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  71. package/dist/src/collection-facets/facets-template.js +125 -125
  72. package/dist/src/collection-facets/more-facets-content.d.ts +74 -74
  73. package/dist/src/collection-facets/more-facets-content.js +330 -330
  74. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  75. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  76. package/dist/src/collection-facets.d.ts +71 -71
  77. package/dist/src/collection-facets.js +496 -476
  78. package/dist/src/collection-facets.js.map +1 -1
  79. package/dist/src/empty-placeholder.d.ts +11 -11
  80. package/dist/src/empty-placeholder.js +42 -42
  81. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  82. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  83. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  84. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  85. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  86. package/dist/src/mediatype/mediatype-config.js +85 -85
  87. package/dist/src/models.d.ts +97 -89
  88. package/dist/src/models.js +100 -85
  89. package/dist/src/models.js.map +1 -1
  90. package/dist/src/restoration-state-handler.d.ts +46 -45
  91. package/dist/src/restoration-state-handler.js +231 -219
  92. package/dist/src/restoration-state-handler.js.map +1 -1
  93. package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
  94. package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
  95. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  96. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  97. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  98. package/dist/src/sort-filter-bar/img/list.js +2 -2
  99. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  100. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  101. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  102. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  103. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
  104. package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
  105. package/dist/src/styles/item-image-styles.d.ts +8 -8
  106. package/dist/src/styles/item-image-styles.js +9 -9
  107. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  108. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  109. package/dist/src/tiles/grid/account-tile.d.ts +8 -8
  110. package/dist/src/tiles/grid/account-tile.js +20 -20
  111. package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
  112. package/dist/src/tiles/grid/collection-tile.js +23 -23
  113. package/dist/src/tiles/grid/item-tile.d.ts +24 -24
  114. package/dist/src/tiles/grid/item-tile.js +87 -87
  115. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  116. package/dist/src/tiles/grid/tile-stats.js +35 -35
  117. package/dist/src/tiles/image-block.d.ts +17 -17
  118. package/dist/src/tiles/image-block.js +73 -73
  119. package/dist/src/tiles/item-image.d.ts +31 -31
  120. package/dist/src/tiles/item-image.js +103 -103
  121. package/dist/src/tiles/list/account-label.d.ts +1 -1
  122. package/dist/src/tiles/list/account-label.js +6 -6
  123. package/dist/src/tiles/list/date-label.d.ts +1 -1
  124. package/dist/src/tiles/list/date-label.js +12 -12
  125. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  126. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  127. package/dist/src/tiles/list/tile-list-compact.d.ts +20 -20
  128. package/dist/src/tiles/list/tile-list-compact.js +87 -87
  129. package/dist/src/tiles/list/tile-list.d.ts +50 -50
  130. package/dist/src/tiles/list/tile-list.js +263 -263
  131. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  132. package/dist/src/tiles/mediatype-icon.js +47 -47
  133. package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
  134. package/dist/src/tiles/overlay/icon-overlay.js +31 -31
  135. package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
  136. package/dist/src/tiles/overlay/text-overlay.js +31 -31
  137. package/dist/src/tiles/text-snippet-block.d.ts +29 -29
  138. package/dist/src/tiles/text-snippet-block.js +81 -81
  139. package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
  140. package/dist/src/tiles/tile-dispatcher.js +128 -128
  141. package/dist/src/utils/analytics-events.d.ts +18 -18
  142. package/dist/src/utils/analytics-events.js +20 -20
  143. package/dist/src/utils/format-count.d.ts +7 -7
  144. package/dist/src/utils/format-count.js +75 -75
  145. package/dist/src/utils/format-date.d.ts +2 -2
  146. package/dist/src/utils/format-date.js +23 -23
  147. package/dist/test/collection-browser.test.d.ts +1 -1
  148. package/dist/test/collection-browser.test.js +344 -342
  149. package/dist/test/collection-browser.test.js.map +1 -1
  150. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  151. package/dist/test/collection-facets/facets-template.test.js +62 -62
  152. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  153. package/dist/test/collection-facets/more-facets-content.test.js +91 -91
  154. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  155. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  156. package/dist/test/collection-facets.test.d.ts +2 -2
  157. package/dist/test/collection-facets.test.js +182 -182
  158. package/dist/test/empty-placeholder.test.d.ts +1 -1
  159. package/dist/test/empty-placeholder.test.js +33 -33
  160. package/dist/test/icon-overlay.test.d.ts +1 -1
  161. package/dist/test/icon-overlay.test.js +24 -24
  162. package/dist/test/item-image.test.d.ts +1 -1
  163. package/dist/test/item-image.test.js +56 -56
  164. package/dist/test/mediatype-config.test.d.ts +1 -1
  165. package/dist/test/mediatype-config.test.js +16 -16
  166. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  167. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  168. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  169. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  170. package/dist/test/mocks/mock-search-responses.d.ts +5 -5
  171. package/dist/test/mocks/mock-search-responses.js +103 -103
  172. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  173. package/dist/test/mocks/mock-search-service.js +25 -25
  174. package/dist/test/restoration-state-handler.test.d.ts +1 -1
  175. package/dist/test/restoration-state-handler.test.js +117 -117
  176. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  177. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
  178. package/dist/test/text-overlay.test.d.ts +1 -1
  179. package/dist/test/text-overlay.test.js +41 -41
  180. package/dist/test/text-snippet-block.test.d.ts +1 -1
  181. package/dist/test/text-snippet-block.test.js +57 -57
  182. package/dist/test/tile-stats.test.d.ts +1 -1
  183. package/dist/test/tile-stats.test.js +33 -33
  184. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  185. package/dist/test/tiles/grid/item-tile.test.js +107 -107
  186. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  187. package/dist/test/tiles/list/tile-list.test.js +36 -36
  188. package/dist/test/utils/format-count.test.d.ts +1 -1
  189. package/dist/test/utils/format-count.test.js +23 -23
  190. package/dist/test/utils/format-date.test.d.ts +1 -1
  191. package/dist/test/utils/format-date.test.js +17 -17
  192. package/index.html +24 -24
  193. package/local.archive.org.cert +86 -86
  194. package/local.archive.org.key +27 -27
  195. package/package.json +115 -115
  196. package/renovate.json +6 -6
  197. package/src/collection-browser.ts +1526 -1489
  198. package/src/collection-facets.ts +569 -541
  199. package/src/models.ts +216 -188
  200. package/src/restoration-state-handler.ts +314 -301
  201. package/test/collection-browser.test.ts +490 -488
  202. package/tsconfig.json +21 -21
  203. package/web-dev-server.config.mjs +30 -30
  204. package/web-test-runner.config.mjs +41 -41
  205. package/dist/src/collection-facets/facets-util.d.ts +0 -10
  206. package/dist/src/collection-facets/facets-util.js +0 -20
  207. package/dist/src/collection-facets/facets-util.js.map +0 -1
  208. package/dist/test/collection-facets/facets-util.test.d.ts +0 -1
  209. package/dist/test/collection-facets/facets-util.test.js +0 -13
  210. package/dist/test/collection-facets/facets-util.test.js.map +0 -1
  211. package/src/collection-facets/facets-util.ts +0 -22
  212. package/test/collection-facets/facets-util.test.ts +0 -18
@@ -1,253 +1,253 @@
1
- import { __decorate } from "tslib";
2
- /* eslint-disable dot-notation */
3
- /* eslint-disable lit-a11y/click-events-have-key-events */
4
- import { css, html, LitElement, nothing, } from 'lit';
5
- import { customElement, property, state } from 'lit/decorators.js';
6
- import { AggregationSortType, } from '@internetarchive/search-service';
7
- import { facetTitles, } from '../models';
8
- import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
- import './more-facets-pagination';
10
- import './facets-template';
11
- let MoreFacetsContent = class MoreFacetsContent extends LitElement {
12
- constructor() {
13
- super(...arguments);
14
- this.sortedBy = 'count'; // count | alpha
15
- this.facetGroup = [];
16
- this.facetGroupTitle = '';
17
- this.pageNumber = 1;
18
- /**
19
- * Facets are loading on popup
20
- */
21
- this.facetsLoading = true;
22
- this.paginationSize = 0;
23
- this.facetsType = 'modal';
24
- this.facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
25
- }
26
- updated(changed) {
27
- if (changed.has('facetKey')) {
28
- this.facetsLoading = true;
29
- this.pageNumber = 1;
30
- this.updateSpecificFacets();
31
- }
32
- if (changed.has('pageNumber')) {
33
- this.facetGroup = this.aggregationFacetGroups;
34
- }
35
- }
36
- firstUpdated() {
37
- this.setupEscapeListeners();
38
- }
39
- /**
40
- * Close more facets modal on Escape click
41
- */
42
- setupEscapeListeners() {
43
- if (this.modalManager) {
44
- document.addEventListener('keydown', (e) => {
45
- var _a;
46
- if (e.key === 'Escape') {
47
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
48
- }
49
- });
50
- }
51
- else {
52
- document.removeEventListener('keydown', () => { });
53
- }
54
- }
55
- /**
56
- * Get specific facets data from search-service API based of currently query params
57
- * - this.aggregations - hold result of search service and being used for further processing.
58
- */
59
- async updateSpecificFacets() {
60
- var _a, _b;
61
- const aggregations = {
62
- simpleParams: [this.facetAggregationKey],
63
- };
64
- const aggregationsSize = 65535; // todo - do we want to have all the records at once?
65
- const params = {
66
- query: this.fullQuery,
67
- aggregations,
68
- aggregationsSize,
69
- rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
70
- };
71
- const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
72
- this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
73
- this.facetGroup = this.aggregationFacetGroups;
74
- this.facetsLoading = false;
75
- }
76
- pageNumberClicked(e) {
77
- var _a;
78
- const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
79
- if (page) {
80
- this.pageNumber = Number(page);
81
- }
82
- }
83
- /**
84
- * Combines the selected facets with the aggregations to create a single list of facets
85
- */
86
- get mergedFacets() {
87
- var _a;
88
- const facetGroups = [];
89
- const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
90
- const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
91
- // if the user selected a facet, but it's not in the aggregation, we add it as-is
92
- if (selectedFacetGroup && !aggregateFacetGroup) {
93
- facetGroups.push(selectedFacetGroup);
94
- return facetGroups;
95
- }
96
- // if we don't have an aggregate facet group, don't add this to the list
97
- if (!aggregateFacetGroup)
98
- return facetGroups;
99
- // start with either the selected group if we have one, or the aggregate group
100
- const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
101
- // attach the counts to the selected buckets
102
- const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
103
- const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
104
- return selectedBucket
105
- ? {
106
- ...bucket,
107
- count: selectedBucket.count,
108
- }
109
- : bucket;
110
- })) !== null && _a !== void 0 ? _a : [];
111
- // append any additional buckets that were not selected
112
- aggregateFacetGroup.buckets.forEach(bucket => {
113
- const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
114
- if (existingBucket)
115
- return;
116
- bucketsWithCount.push(bucket);
117
- });
118
- facetGroup.buckets = bucketsWithCount;
119
- facetGroups.push(facetGroup);
120
- return facetGroups;
121
- }
122
- /**
123
- * Converts the selected facets to a `FacetGroup` array,
124
- * which is easier to work with
125
- */
126
- get selectedFacetGroups() {
127
- if (!this.selectedFacets)
128
- return [];
129
- const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
130
- const option = key;
131
- const title = facetTitles[option];
132
- const buckets = Object.entries(selectedFacets).map(([value, data]) => {
133
- var _a, _b;
134
- let displayText = value;
135
- // for selected languages, we store the language code instead of the
136
- // display name, so look up the name from the mapping
137
- if (option === 'language') {
138
- displayText =
139
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
140
- }
141
- return {
142
- displayText,
143
- key: value,
144
- count: data === null || data === void 0 ? void 0 : data.count,
145
- state: data === null || data === void 0 ? void 0 : data.state,
146
- };
147
- });
148
- return {
149
- title,
150
- key: option,
151
- buckets,
152
- };
153
- });
154
- return facetGroups;
155
- }
156
- /**
157
- * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
158
- */
159
- get aggregationFacetGroups() {
160
- var _a;
161
- const facetGroups = [];
162
- Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
163
- // the year_histogram data is in a different format so can't be handled here
164
- if (key === 'year_histogram')
165
- return;
166
- const option = key;
167
- this.facetGroupTitle = facetTitles[option];
168
- // sort facets in specific order
169
- let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
170
- ? AggregationSortType.ALPHABETICAL
171
- : AggregationSortType.COUNT);
172
- if (option === 'collection') {
173
- // we are not showing fav- collection items in facets
174
- castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a; return ((_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString().startsWith('fav-')) === false; });
175
- // asynchronously load the collection name
176
- this.preloadCollectionNames(castedBuckets);
177
- }
178
- // find length and pagination size for modal pagination
179
- const { length } = Object.keys(castedBuckets);
180
- this.paginationSize = Math.ceil(length / this.facetsPerPage);
181
- // render only items which will be visible as per this.facetsPerPage
182
- const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
183
- const facetBucket = bucketsMaxSix.map(bucket => {
184
- var _a, _b;
185
- let bucketKey = bucket.key;
186
- // for languages, we need to search by language code instead of the
187
- // display name, which is what we get from the search engine result
188
- if (option === 'language') {
189
- bucketKey =
190
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
191
- }
192
- return {
193
- displayText: `${bucket.key}`,
194
- key: `${bucketKey}`,
195
- count: bucket.doc_count,
196
- state: 'none',
197
- };
198
- });
199
- const group = {
200
- title: this.facetGroupTitle,
201
- key: option,
202
- buckets: facetBucket,
203
- };
204
- facetGroups.push(group);
205
- });
206
- return facetGroups;
207
- }
208
- /**
209
- * for collections, we need to asynchronously load the collection name
210
- * so we use the `async-collection-name` widget and for the rest, we have a static value to use
211
- *
212
- * @param castedBuckets
213
- */
214
- preloadCollectionNames(castedBuckets) {
215
- var _a;
216
- const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
217
- const collectionIdsArray = Array.from(new Set(collectionIds));
218
- (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
219
- }
220
- get getMoreFacetsTemplate() {
221
- var _a;
1
+ import { __decorate } from "tslib";
2
+ /* eslint-disable dot-notation */
3
+ /* eslint-disable lit-a11y/click-events-have-key-events */
4
+ import { css, html, LitElement, nothing, } from 'lit';
5
+ import { customElement, property, state } from 'lit/decorators.js';
6
+ import { AggregationSortType, } from '@internetarchive/search-service';
7
+ import { facetTitles, } from '../models';
8
+ import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
+ import './more-facets-pagination';
10
+ import './facets-template';
11
+ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
12
+ constructor() {
13
+ super(...arguments);
14
+ this.sortedBy = 'count'; // count | alpha
15
+ this.facetGroup = [];
16
+ this.facetGroupTitle = '';
17
+ this.pageNumber = 1;
18
+ /**
19
+ * Facets are loading on popup
20
+ */
21
+ this.facetsLoading = true;
22
+ this.paginationSize = 0;
23
+ this.facetsType = 'modal';
24
+ this.facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
25
+ }
26
+ updated(changed) {
27
+ if (changed.has('facetKey')) {
28
+ this.facetsLoading = true;
29
+ this.pageNumber = 1;
30
+ this.updateSpecificFacets();
31
+ }
32
+ if (changed.has('pageNumber')) {
33
+ this.facetGroup = this.aggregationFacetGroups;
34
+ }
35
+ }
36
+ firstUpdated() {
37
+ this.setupEscapeListeners();
38
+ }
39
+ /**
40
+ * Close more facets modal on Escape click
41
+ */
42
+ setupEscapeListeners() {
43
+ if (this.modalManager) {
44
+ document.addEventListener('keydown', (e) => {
45
+ var _a;
46
+ if (e.key === 'Escape') {
47
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
48
+ }
49
+ });
50
+ }
51
+ else {
52
+ document.removeEventListener('keydown', () => { });
53
+ }
54
+ }
55
+ /**
56
+ * Get specific facets data from search-service API based of currently query params
57
+ * - this.aggregations - hold result of search service and being used for further processing.
58
+ */
59
+ async updateSpecificFacets() {
60
+ var _a, _b;
61
+ const aggregations = {
62
+ simpleParams: [this.facetAggregationKey],
63
+ };
64
+ const aggregationsSize = 65535; // todo - do we want to have all the records at once?
65
+ const params = {
66
+ query: this.fullQuery,
67
+ aggregations,
68
+ aggregationsSize,
69
+ rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
70
+ };
71
+ const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
72
+ this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
73
+ this.facetGroup = this.aggregationFacetGroups;
74
+ this.facetsLoading = false;
75
+ }
76
+ pageNumberClicked(e) {
77
+ var _a;
78
+ const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
79
+ if (page) {
80
+ this.pageNumber = Number(page);
81
+ }
82
+ }
83
+ /**
84
+ * Combines the selected facets with the aggregations to create a single list of facets
85
+ */
86
+ get mergedFacets() {
87
+ var _a;
88
+ const facetGroups = [];
89
+ const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
90
+ const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
91
+ // if the user selected a facet, but it's not in the aggregation, we add it as-is
92
+ if (selectedFacetGroup && !aggregateFacetGroup) {
93
+ facetGroups.push(selectedFacetGroup);
94
+ return facetGroups;
95
+ }
96
+ // if we don't have an aggregate facet group, don't add this to the list
97
+ if (!aggregateFacetGroup)
98
+ return facetGroups;
99
+ // start with either the selected group if we have one, or the aggregate group
100
+ const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
101
+ // attach the counts to the selected buckets
102
+ const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
103
+ const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
104
+ return selectedBucket
105
+ ? {
106
+ ...bucket,
107
+ count: selectedBucket.count,
108
+ }
109
+ : bucket;
110
+ })) !== null && _a !== void 0 ? _a : [];
111
+ // append any additional buckets that were not selected
112
+ aggregateFacetGroup.buckets.forEach(bucket => {
113
+ const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
114
+ if (existingBucket)
115
+ return;
116
+ bucketsWithCount.push(bucket);
117
+ });
118
+ facetGroup.buckets = bucketsWithCount;
119
+ facetGroups.push(facetGroup);
120
+ return facetGroups;
121
+ }
122
+ /**
123
+ * Converts the selected facets to a `FacetGroup` array,
124
+ * which is easier to work with
125
+ */
126
+ get selectedFacetGroups() {
127
+ if (!this.selectedFacets)
128
+ return [];
129
+ const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
130
+ const option = key;
131
+ const title = facetTitles[option];
132
+ const buckets = Object.entries(selectedFacets).map(([value, data]) => {
133
+ var _a, _b;
134
+ let displayText = value;
135
+ // for selected languages, we store the language code instead of the
136
+ // display name, so look up the name from the mapping
137
+ if (option === 'language') {
138
+ displayText =
139
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
140
+ }
141
+ return {
142
+ displayText,
143
+ key: value,
144
+ count: data === null || data === void 0 ? void 0 : data.count,
145
+ state: data === null || data === void 0 ? void 0 : data.state,
146
+ };
147
+ });
148
+ return {
149
+ title,
150
+ key: option,
151
+ buckets,
152
+ };
153
+ });
154
+ return facetGroups;
155
+ }
156
+ /**
157
+ * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
158
+ */
159
+ get aggregationFacetGroups() {
160
+ var _a;
161
+ const facetGroups = [];
162
+ Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
163
+ // the year_histogram data is in a different format so can't be handled here
164
+ if (key === 'year_histogram')
165
+ return;
166
+ const option = key;
167
+ this.facetGroupTitle = facetTitles[option];
168
+ // sort facets in specific order
169
+ let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
170
+ ? AggregationSortType.ALPHABETICAL
171
+ : AggregationSortType.COUNT);
172
+ if (option === 'collection') {
173
+ // we are not showing fav- collection items in facets
174
+ castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a; return ((_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString().startsWith('fav-')) === false; });
175
+ // asynchronously load the collection name
176
+ this.preloadCollectionNames(castedBuckets);
177
+ }
178
+ // find length and pagination size for modal pagination
179
+ const { length } = Object.keys(castedBuckets);
180
+ this.paginationSize = Math.ceil(length / this.facetsPerPage);
181
+ // render only items which will be visible as per this.facetsPerPage
182
+ const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
183
+ const facetBucket = bucketsMaxSix.map(bucket => {
184
+ var _a, _b;
185
+ let bucketKey = bucket.key;
186
+ // for languages, we need to search by language code instead of the
187
+ // display name, which is what we get from the search engine result
188
+ if (option === 'language') {
189
+ bucketKey =
190
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
191
+ }
192
+ return {
193
+ displayText: `${bucket.key}`,
194
+ key: `${bucketKey}`,
195
+ count: bucket.doc_count,
196
+ state: 'none',
197
+ };
198
+ });
199
+ const group = {
200
+ title: this.facetGroupTitle,
201
+ key: option,
202
+ buckets: facetBucket,
203
+ };
204
+ facetGroups.push(group);
205
+ });
206
+ return facetGroups;
207
+ }
208
+ /**
209
+ * for collections, we need to asynchronously load the collection name
210
+ * so we use the `async-collection-name` widget and for the rest, we have a static value to use
211
+ *
212
+ * @param castedBuckets
213
+ */
214
+ preloadCollectionNames(castedBuckets) {
215
+ var _a;
216
+ const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
217
+ const collectionIdsArray = Array.from(new Set(collectionIds));
218
+ (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
219
+ }
220
+ get getMoreFacetsTemplate() {
221
+ var _a;
222
222
  return html `
223
223
  <facets-template
224
224
  .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
225
225
  .selectedFacets=${this.selectedFacets}
226
226
  .renderOn=${'modal'}
227
227
  .collectionNameCache=${this.collectionNameCache}
228
- @selectedFacetsChanged=${(e) => {
229
- this.selectedFacets = e.detail;
228
+ @selectedFacetsChanged=${(e) => {
229
+ this.selectedFacets = e.detail;
230
230
  }}
231
231
  ></facets-template>
232
- `;
233
- }
234
- get loaderTemplate() {
232
+ `;
233
+ }
234
+ get loaderTemplate() {
235
235
  return html `<div class="facets-loader">
236
236
  <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
237
- </div> `;
238
- }
239
- // render pagination if more then 1 page
240
- get facetsPaginationTemplate() {
241
- return this.paginationSize > 1
237
+ </div> `;
238
+ }
239
+ // render pagination if more then 1 page
240
+ get facetsPaginationTemplate() {
241
+ return this.paginationSize > 1
242
242
  ? html `<more-facets-pagination
243
243
  .size=${this.paginationSize}
244
244
  .currentPage=${1}
245
245
  @pageNumberClicked=${this.pageNumberClicked}
246
- ></more-facets-pagination>`
247
- : nothing;
248
- }
249
- get footerTemplate() {
250
- if (this.paginationSize > 0) {
246
+ ></more-facets-pagination>`
247
+ : nothing;
248
+ }
249
+ get footerTemplate() {
250
+ if (this.paginationSize > 0) {
251
251
  return html `${this.facetsPaginationTemplate}
252
252
  <div class="footer">
253
253
  <button
@@ -264,19 +264,19 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
264
264
  >
265
265
  Apply filters
266
266
  </button>
267
- </div> `;
268
- }
269
- return nothing;
270
- }
271
- sortFacetAggregation() {
272
- this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
273
- this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
274
- }
275
- get getModalHeaderTemplate() {
276
- const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
277
- const image = this.sortedBy === 'alpha'
278
- ? 'https://archive.org/images/filter-alpha.png'
279
- : 'https://archive.org/images/filter-count.png';
267
+ </div> `;
268
+ }
269
+ return nothing;
270
+ }
271
+ sortFacetAggregation() {
272
+ this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
273
+ this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
274
+ }
275
+ get getModalHeaderTemplate() {
276
+ const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
277
+ const image = this.sortedBy === 'alpha'
278
+ ? 'https://archive.org/images/filter-alpha.png'
279
+ : 'https://archive.org/images/filter-count.png';
280
280
  return html `<span class="sr-only">More facets for:</span>
281
281
  <span class="title">
282
282
  ${this.facetGroupTitle}
@@ -288,12 +288,12 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
288
288
  title=${title}
289
289
  alt="sort facets"
290
290
  />
291
- </span> `;
292
- }
293
- render() {
291
+ </span> `;
292
+ }
293
+ render() {
294
294
  return html `
295
- ${this.facetsLoading
296
- ? this.loaderTemplate
295
+ ${this.facetsLoading
296
+ ? this.loaderTemplate
297
297
  : html `
298
298
  <div class="header-content">${this.getModalHeaderTemplate}</div>
299
299
  <div class="scrollable-content">
@@ -301,24 +301,24 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
301
301
  </div>
302
302
  ${this.footerTemplate}
303
303
  `}
304
- `;
305
- }
306
- applySearchFacetsClicked() {
307
- var _a;
308
- const event = new CustomEvent('facetsChanged', {
309
- detail: this.selectedFacets,
310
- bubbles: true,
311
- composed: true,
312
- });
313
- this.dispatchEvent(event);
314
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
315
- }
316
- cancelClick() {
317
- var _a;
318
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
319
- }
320
- static get styles() {
321
- const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
304
+ `;
305
+ }
306
+ applySearchFacetsClicked() {
307
+ var _a;
308
+ const event = new CustomEvent('facetsChanged', {
309
+ detail: this.selectedFacets,
310
+ bubbles: true,
311
+ composed: true,
312
+ });
313
+ this.dispatchEvent(event);
314
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
315
+ }
316
+ cancelClick() {
317
+ var _a;
318
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
319
+ }
320
+ static get styles() {
321
+ const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
322
322
  return css `
323
323
  .header-content .title {
324
324
  display: block;
@@ -393,62 +393,62 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
393
393
  vertical-align: baseline;
394
394
  cursor: pointer;
395
395
  }
396
- `;
397
- }
398
- };
399
- __decorate([
400
- property({ type: String })
401
- ], MoreFacetsContent.prototype, "facetKey", void 0);
402
- __decorate([
403
- property({ type: String })
404
- ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
405
- __decorate([
406
- property({ type: String })
407
- ], MoreFacetsContent.prototype, "fullQuery", void 0);
408
- __decorate([
409
- property({ type: Object })
410
- ], MoreFacetsContent.prototype, "modalManager", void 0);
411
- __decorate([
412
- property({ type: Object })
413
- ], MoreFacetsContent.prototype, "searchService", void 0);
414
- __decorate([
415
- property({ type: String })
416
- ], MoreFacetsContent.prototype, "searchType", void 0);
417
- __decorate([
418
- property({ type: Object })
419
- ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
420
- __decorate([
421
- property({ type: Object })
422
- ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
423
- __decorate([
424
- property({ type: Object })
425
- ], MoreFacetsContent.prototype, "selectedFacets", void 0);
426
- __decorate([
427
- property({ type: String })
428
- ], MoreFacetsContent.prototype, "sortedBy", void 0);
429
- __decorate([
430
- state()
431
- ], MoreFacetsContent.prototype, "aggregations", void 0);
432
- __decorate([
433
- state()
434
- ], MoreFacetsContent.prototype, "facetGroup", void 0);
435
- __decorate([
436
- state()
437
- ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
438
- __decorate([
439
- state()
440
- ], MoreFacetsContent.prototype, "pageNumber", void 0);
441
- __decorate([
442
- state()
443
- ], MoreFacetsContent.prototype, "facetsLoading", void 0);
444
- __decorate([
445
- state()
446
- ], MoreFacetsContent.prototype, "paginationSize", void 0);
447
- __decorate([
448
- state()
449
- ], MoreFacetsContent.prototype, "facetsType", void 0);
450
- MoreFacetsContent = __decorate([
451
- customElement('more-facets-content')
452
- ], MoreFacetsContent);
453
- export { MoreFacetsContent };
396
+ `;
397
+ }
398
+ };
399
+ __decorate([
400
+ property({ type: String })
401
+ ], MoreFacetsContent.prototype, "facetKey", void 0);
402
+ __decorate([
403
+ property({ type: String })
404
+ ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
405
+ __decorate([
406
+ property({ type: String })
407
+ ], MoreFacetsContent.prototype, "fullQuery", void 0);
408
+ __decorate([
409
+ property({ type: Object })
410
+ ], MoreFacetsContent.prototype, "modalManager", void 0);
411
+ __decorate([
412
+ property({ type: Object })
413
+ ], MoreFacetsContent.prototype, "searchService", void 0);
414
+ __decorate([
415
+ property({ type: String })
416
+ ], MoreFacetsContent.prototype, "searchType", void 0);
417
+ __decorate([
418
+ property({ type: Object })
419
+ ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
420
+ __decorate([
421
+ property({ type: Object })
422
+ ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
423
+ __decorate([
424
+ property({ type: Object })
425
+ ], MoreFacetsContent.prototype, "selectedFacets", void 0);
426
+ __decorate([
427
+ property({ type: String })
428
+ ], MoreFacetsContent.prototype, "sortedBy", void 0);
429
+ __decorate([
430
+ state()
431
+ ], MoreFacetsContent.prototype, "aggregations", void 0);
432
+ __decorate([
433
+ state()
434
+ ], MoreFacetsContent.prototype, "facetGroup", void 0);
435
+ __decorate([
436
+ state()
437
+ ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
438
+ __decorate([
439
+ state()
440
+ ], MoreFacetsContent.prototype, "pageNumber", void 0);
441
+ __decorate([
442
+ state()
443
+ ], MoreFacetsContent.prototype, "facetsLoading", void 0);
444
+ __decorate([
445
+ state()
446
+ ], MoreFacetsContent.prototype, "paginationSize", void 0);
447
+ __decorate([
448
+ state()
449
+ ], MoreFacetsContent.prototype, "facetsType", void 0);
450
+ MoreFacetsContent = __decorate([
451
+ customElement('more-facets-content')
452
+ ], MoreFacetsContent);
453
+ export { MoreFacetsContent };
454
454
  //# sourceMappingURL=more-facets-content.js.map