@internetarchive/collection-browser 0.2.22 → 0.3.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (220) 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 +42 -39
  12. package/dist/src/app-root.js +236 -203
  13. package/dist/src/app-root.js.map +1 -1
  14. package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
  15. package/dist/src/assets/img/icons/arrow-left.js +2 -2
  16. package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
  17. package/dist/src/assets/img/icons/arrow-right.js +2 -2
  18. package/dist/src/assets/img/icons/chevron.d.ts +2 -2
  19. package/dist/src/assets/img/icons/chevron.js +2 -2
  20. package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
  21. package/dist/src/assets/img/icons/empty-query.js +2 -2
  22. package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
  23. package/dist/src/assets/img/icons/eye-closed.js +2 -2
  24. package/dist/src/assets/img/icons/eye.d.ts +2 -2
  25. package/dist/src/assets/img/icons/eye.js +2 -2
  26. package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
  27. package/dist/src/assets/img/icons/favorite-filled.js +2 -2
  28. package/dist/src/assets/img/icons/login-required.d.ts +1 -1
  29. package/dist/src/assets/img/icons/login-required.js +2 -2
  30. package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
  31. package/dist/src/assets/img/icons/mediatype/account.js +2 -2
  32. package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
  33. package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
  34. package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
  35. package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
  36. package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
  37. package/dist/src/assets/img/icons/mediatype/data.js +2 -2
  38. package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
  39. package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
  40. package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
  41. package/dist/src/assets/img/icons/mediatype/film.js +2 -2
  42. package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
  43. package/dist/src/assets/img/icons/mediatype/images.js +2 -2
  44. package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
  45. package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
  46. package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
  47. package/dist/src/assets/img/icons/mediatype/software.js +2 -2
  48. package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
  49. package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
  50. package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
  51. package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
  52. package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
  53. package/dist/src/assets/img/icons/mediatype/video.js +2 -2
  54. package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
  55. package/dist/src/assets/img/icons/mediatype/web.js +2 -2
  56. package/dist/src/assets/img/icons/null-result.d.ts +2 -2
  57. package/dist/src/assets/img/icons/null-result.js +2 -2
  58. package/dist/src/assets/img/icons/restricted.d.ts +1 -1
  59. package/dist/src/assets/img/icons/restricted.js +2 -2
  60. package/dist/src/assets/img/icons/reviews.d.ts +1 -1
  61. package/dist/src/assets/img/icons/reviews.js +2 -2
  62. package/dist/src/assets/img/icons/upload.d.ts +1 -1
  63. package/dist/src/assets/img/icons/upload.js +2 -2
  64. package/dist/src/assets/img/icons/views.d.ts +1 -1
  65. package/dist/src/assets/img/icons/views.js +2 -2
  66. package/dist/src/circular-activity-indicator.d.ts +5 -5
  67. package/dist/src/circular-activity-indicator.js +17 -17
  68. package/dist/src/collection-browser.d.ts +235 -233
  69. package/dist/src/collection-browser.js +1032 -1046
  70. package/dist/src/collection-browser.js.map +1 -1
  71. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  72. package/dist/src/collection-facets/facets-template.js +125 -125
  73. package/dist/src/collection-facets/facets-util.d.ts +10 -10
  74. package/dist/src/collection-facets/facets-util.js +19 -19
  75. package/dist/src/collection-facets/more-facets-content.d.ts +84 -83
  76. package/dist/src/collection-facets/more-facets-content.js +353 -351
  77. package/dist/src/collection-facets/more-facets-content.js.map +1 -1
  78. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  79. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  80. package/dist/src/collection-facets.d.ts +71 -79
  81. package/dist/src/collection-facets.js +325 -338
  82. package/dist/src/collection-facets.js.map +1 -1
  83. package/dist/src/empty-placeholder.d.ts +11 -11
  84. package/dist/src/empty-placeholder.js +42 -42
  85. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  86. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  87. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  88. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  89. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  90. package/dist/src/mediatype/mediatype-config.js +85 -85
  91. package/dist/src/models.d.ts +90 -89
  92. package/dist/src/models.js +85 -85
  93. package/dist/src/models.js.map +1 -1
  94. package/dist/src/restoration-state-handler.d.ts +38 -38
  95. package/dist/src/restoration-state-handler.js +202 -202
  96. package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
  97. package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
  98. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  99. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  100. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  101. package/dist/src/sort-filter-bar/img/list.js +2 -2
  102. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  103. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  104. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  105. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  106. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
  107. package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
  108. package/dist/src/styles/item-image-styles.d.ts +8 -8
  109. package/dist/src/styles/item-image-styles.js +9 -9
  110. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  111. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  112. package/dist/src/tiles/grid/account-tile.d.ts +8 -8
  113. package/dist/src/tiles/grid/account-tile.js +20 -20
  114. package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
  115. package/dist/src/tiles/grid/collection-tile.js +23 -23
  116. package/dist/src/tiles/grid/item-tile.d.ts +24 -24
  117. package/dist/src/tiles/grid/item-tile.js +87 -87
  118. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  119. package/dist/src/tiles/grid/tile-stats.js +35 -35
  120. package/dist/src/tiles/image-block.d.ts +17 -17
  121. package/dist/src/tiles/image-block.js +73 -73
  122. package/dist/src/tiles/item-image.d.ts +31 -31
  123. package/dist/src/tiles/item-image.js +103 -103
  124. package/dist/src/tiles/list/account-label.d.ts +1 -1
  125. package/dist/src/tiles/list/account-label.js +6 -6
  126. package/dist/src/tiles/list/date-label.d.ts +1 -1
  127. package/dist/src/tiles/list/date-label.js +12 -12
  128. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  129. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  130. package/dist/src/tiles/list/tile-list-compact.d.ts +20 -20
  131. package/dist/src/tiles/list/tile-list-compact.js +87 -87
  132. package/dist/src/tiles/list/tile-list.d.ts +50 -50
  133. package/dist/src/tiles/list/tile-list.js +263 -263
  134. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  135. package/dist/src/tiles/mediatype-icon.js +47 -47
  136. package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
  137. package/dist/src/tiles/overlay/icon-overlay.js +31 -31
  138. package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
  139. package/dist/src/tiles/overlay/text-overlay.js +31 -31
  140. package/dist/src/tiles/text-snippet-block.d.ts +29 -29
  141. package/dist/src/tiles/text-snippet-block.js +81 -81
  142. package/dist/src/tiles/text-snippet-block.js.map +1 -1
  143. package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
  144. package/dist/src/tiles/tile-dispatcher.js +128 -128
  145. package/dist/src/utils/analytics-events.d.ts +18 -18
  146. package/dist/src/utils/analytics-events.js +20 -20
  147. package/dist/src/utils/format-count.d.ts +7 -7
  148. package/dist/src/utils/format-count.js +75 -75
  149. package/dist/src/utils/format-date.d.ts +2 -2
  150. package/dist/src/utils/format-date.js +23 -23
  151. package/dist/test/collection-browser.test.d.ts +1 -1
  152. package/dist/test/collection-browser.test.js +328 -200
  153. package/dist/test/collection-browser.test.js.map +1 -1
  154. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  155. package/dist/test/collection-facets/facets-template.test.js +62 -62
  156. package/dist/test/collection-facets/facets-util.test.d.ts +1 -1
  157. package/dist/test/collection-facets/facets-util.test.js +12 -12
  158. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  159. package/dist/test/collection-facets/more-facets-content.test.js +92 -91
  160. package/dist/test/collection-facets/more-facets-content.test.js.map +1 -1
  161. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  162. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  163. package/dist/test/collection-facets.test.d.ts +2 -2
  164. package/dist/test/collection-facets.test.js +182 -181
  165. package/dist/test/collection-facets.test.js.map +1 -1
  166. package/dist/test/empty-placeholder.test.d.ts +1 -1
  167. package/dist/test/empty-placeholder.test.js +33 -33
  168. package/dist/test/icon-overlay.test.d.ts +1 -1
  169. package/dist/test/icon-overlay.test.js +24 -24
  170. package/dist/test/item-image.test.d.ts +1 -1
  171. package/dist/test/item-image.test.js +56 -56
  172. package/dist/test/mediatype-config.test.d.ts +1 -1
  173. package/dist/test/mediatype-config.test.js +16 -16
  174. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  175. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  176. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  177. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  178. package/dist/test/mocks/mock-search-responses.d.ts +5 -4
  179. package/dist/test/mocks/mock-search-responses.js +103 -57
  180. package/dist/test/mocks/mock-search-responses.js.map +1 -1
  181. package/dist/test/mocks/mock-search-service.d.ts +13 -8
  182. package/dist/test/mocks/mock-search-service.js +25 -19
  183. package/dist/test/mocks/mock-search-service.js.map +1 -1
  184. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  185. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
  186. package/dist/test/text-overlay.test.d.ts +1 -1
  187. package/dist/test/text-overlay.test.js +41 -41
  188. package/dist/test/text-snippet-block.test.d.ts +1 -1
  189. package/dist/test/text-snippet-block.test.js +57 -45
  190. package/dist/test/text-snippet-block.test.js.map +1 -1
  191. package/dist/test/tile-stats.test.d.ts +1 -1
  192. package/dist/test/tile-stats.test.js +33 -33
  193. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  194. package/dist/test/tiles/grid/item-tile.test.js +107 -107
  195. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  196. package/dist/test/tiles/list/tile-list.test.js +36 -36
  197. package/dist/test/utils/format-count.test.d.ts +1 -1
  198. package/dist/test/utils/format-count.test.js +23 -23
  199. package/dist/test/utils/format-date.test.d.ts +1 -1
  200. package/dist/test/utils/format-date.test.js +17 -17
  201. package/index.html +24 -24
  202. package/local.archive.org.cert +86 -86
  203. package/local.archive.org.key +27 -27
  204. package/package.json +115 -115
  205. package/renovate.json +6 -6
  206. package/src/app-root.ts +49 -11
  207. package/src/collection-browser.ts +76 -86
  208. package/src/collection-facets/more-facets-content.ts +35 -27
  209. package/src/collection-facets.ts +9 -26
  210. package/src/models.ts +2 -0
  211. package/src/tiles/text-snippet-block.ts +1 -1
  212. package/test/collection-browser.test.ts +192 -0
  213. package/test/collection-facets/more-facets-content.test.ts +5 -5
  214. package/test/collection-facets.test.ts +16 -15
  215. package/test/mocks/mock-search-responses.ts +83 -34
  216. package/test/mocks/mock-search-service.ts +27 -17
  217. package/test/text-snippet-block.test.ts +17 -0
  218. package/tsconfig.json +21 -21
  219. package/web-dev-server.config.mjs +30 -30
  220. package/web-test-runner.config.mjs +41 -41
@@ -1,277 +1,276 @@
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 { facetTitles, } from '../models';
7
- import { getFacetOptionFromKey } from './facets-util';
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
- advancedParams: [
63
- {
64
- field: this.facetAggregationKey,
65
- size: 65535, // todo - do we want to have all the records at once?
66
- },
67
- ],
68
- };
69
- const params = {
70
- query: this.fullQuery,
71
- fields: ['identifier'],
72
- aggregations,
73
- rows: 1, // todo - do we want server-side pagination with offset/page/limit flag?
74
- };
75
- const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params));
76
- this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
77
- this.facetGroup = this.aggregationFacetGroups;
78
- this.facetsLoading = false;
79
- }
80
- pageNumberClicked(e) {
81
- var _a;
82
- const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
83
- if (page) {
84
- this.pageNumber = Number(page);
85
- }
86
- }
87
- /**
88
- * Combines the selected facets with the aggregations to create a single list of facets
89
- */
90
- get mergedFacets() {
91
- var _a;
92
- const facetGroups = [];
93
- const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
94
- const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
95
- // if the user selected a facet, but it's not in the aggregation, we add it as-is
96
- if (selectedFacetGroup && !aggregateFacetGroup) {
97
- facetGroups.push(selectedFacetGroup);
98
- return facetGroups;
99
- }
100
- // if we don't have an aggregate facet group, don't add this to the list
101
- if (!aggregateFacetGroup)
102
- return facetGroups;
103
- // start with either the selected group if we have one, or the aggregate group
104
- const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
105
- // attach the counts to the selected buckets
106
- const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
107
- const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
108
- return selectedBucket
109
- ? {
110
- ...bucket,
111
- count: selectedBucket.count,
112
- }
113
- : bucket;
114
- })) !== null && _a !== void 0 ? _a : [];
115
- // append any additional buckets that were not selected
116
- aggregateFacetGroup.buckets.forEach(bucket => {
117
- const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
118
- if (existingBucket)
119
- return;
120
- bucketsWithCount.push(bucket);
121
- });
122
- facetGroup.buckets = bucketsWithCount;
123
- facetGroups.push(facetGroup);
124
- return facetGroups;
125
- }
126
- /**
127
- * Converts the selected facets to a `FacetGroup` array,
128
- * which is easier to work with
129
- */
130
- get selectedFacetGroups() {
131
- if (!this.selectedFacets)
132
- return [];
133
- const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
134
- const option = key;
135
- const title = facetTitles[option];
136
- const buckets = Object.entries(selectedFacets).map(([value, data]) => {
137
- var _a, _b;
138
- let displayText = value;
139
- // for selected languages, we store the language code instead of the
140
- // display name, so look up the name from the mapping
141
- if (option === 'language') {
142
- displayText =
143
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
144
- }
145
- return {
146
- displayText,
147
- key: value,
148
- count: data === null || data === void 0 ? void 0 : data.count,
149
- state: data === null || data === void 0 ? void 0 : data.state,
150
- };
151
- });
152
- return {
153
- title,
154
- key: option,
155
- buckets,
156
- };
157
- });
158
- return facetGroups;
159
- }
160
- /**
161
- * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
162
- */
163
- get aggregationFacetGroups() {
164
- var _a;
165
- const facetGroups = [];
166
- Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, buckets]) => {
167
- // the year_histogram data is in a different format so can't be handled here
168
- if (key === 'year_histogram')
169
- return;
170
- const option = getFacetOptionFromKey(key);
171
- this.facetGroupTitle = facetTitles[option];
172
- let castedBuckets = buckets.buckets;
173
- // we are not showing fav- items in facets
174
- castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a, _b; return ((_b = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.startsWith('fav-')) === false; });
175
- // sort facets in specific order
176
- castedBuckets = this.sortedFacets(castedBuckets);
177
- // find length and pagination size for modal pagination
178
- const { length } = Object.keys(castedBuckets);
179
- this.paginationSize = Math.ceil(length / this.facetsPerPage);
180
- // asynchronously load the collection name
181
- if (option === 'collection') {
182
- this.preloadCollectionNames(castedBuckets);
183
- }
184
- // render only items which will be visible as per this.facetsPerPage
185
- const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
186
- const facetBucket = bucketsMaxSix.map(bucket => {
187
- var _a, _b;
188
- let bucketKey = bucket.key;
189
- // for languages, we need to search by language code instead of the
190
- // display name, which is what we get from the search engine result
191
- if (option === 'language') {
192
- bucketKey =
193
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
194
- }
195
- return {
196
- displayText: `${bucket.key}`,
197
- key: `${bucketKey}`,
198
- count: bucket.doc_count,
199
- state: 'none',
200
- };
201
- });
202
- const group = {
203
- title: this.facetGroupTitle,
204
- key: option,
205
- buckets: facetBucket,
206
- };
207
- facetGroups.push(group);
208
- });
209
- return facetGroups;
210
- }
211
- /**
212
- * for collections, we need to asynchronously load the collection name
213
- * so we use the `async-collection-name` widget and for the rest, we have a static value to use
214
- *
215
- * @param castedBuckets
216
- */
217
- preloadCollectionNames(castedBuckets) {
218
- var _a;
219
- const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
220
- const collectionIdsArray = Array.from(new Set(collectionIds));
221
- (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
222
- }
223
- /**
224
- * sort the facets on modal
225
- * - alpha sort perform in ascending order
226
- * - count/frequency sort perform in descending order
227
- *
228
- * @param facetBucket as Bucket[]
229
- *
230
- * @return sortedFacetBucket as Bucket
231
- */
232
- sortedFacets(facetBucket) {
233
- let sortedFacetBucket = facetBucket;
234
- if (this.sortedBy === 'alpha') {
235
- // sort by alphabetic in ascending order. eg. a,b,c,...
236
- sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => (a.key > b.key ? 1 : -1));
237
- }
238
- else {
239
- // sort by frequency/count in descending order. eg 100,99,98,...
240
- sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => a.doc_count < b.doc_count ? 1 : -1);
241
- }
242
- return sortedFacetBucket;
243
- }
244
- get getMoreFacetsTemplate() {
245
- 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 { SearchType, 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.searchTarget === 'fulltext'
72
+ ? SearchType.FULLTEXT
73
+ : SearchType.METADATA));
74
+ this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
75
+ this.facetGroup = this.aggregationFacetGroups;
76
+ this.facetsLoading = false;
77
+ }
78
+ pageNumberClicked(e) {
79
+ var _a;
80
+ const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
81
+ if (page) {
82
+ this.pageNumber = Number(page);
83
+ }
84
+ }
85
+ /**
86
+ * Combines the selected facets with the aggregations to create a single list of facets
87
+ */
88
+ get mergedFacets() {
89
+ var _a;
90
+ const facetGroups = [];
91
+ const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
92
+ const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
93
+ // if the user selected a facet, but it's not in the aggregation, we add it as-is
94
+ if (selectedFacetGroup && !aggregateFacetGroup) {
95
+ facetGroups.push(selectedFacetGroup);
96
+ return facetGroups;
97
+ }
98
+ // if we don't have an aggregate facet group, don't add this to the list
99
+ if (!aggregateFacetGroup)
100
+ return facetGroups;
101
+ // start with either the selected group if we have one, or the aggregate group
102
+ const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
103
+ // attach the counts to the selected buckets
104
+ const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
105
+ const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
106
+ return selectedBucket
107
+ ? {
108
+ ...bucket,
109
+ count: selectedBucket.count,
110
+ }
111
+ : bucket;
112
+ })) !== null && _a !== void 0 ? _a : [];
113
+ // append any additional buckets that were not selected
114
+ aggregateFacetGroup.buckets.forEach(bucket => {
115
+ const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
116
+ if (existingBucket)
117
+ return;
118
+ bucketsWithCount.push(bucket);
119
+ });
120
+ facetGroup.buckets = bucketsWithCount;
121
+ facetGroups.push(facetGroup);
122
+ return facetGroups;
123
+ }
124
+ /**
125
+ * Converts the selected facets to a `FacetGroup` array,
126
+ * which is easier to work with
127
+ */
128
+ get selectedFacetGroups() {
129
+ if (!this.selectedFacets)
130
+ return [];
131
+ const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
132
+ const option = key;
133
+ const title = facetTitles[option];
134
+ const buckets = Object.entries(selectedFacets).map(([value, data]) => {
135
+ var _a, _b;
136
+ let displayText = value;
137
+ // for selected languages, we store the language code instead of the
138
+ // display name, so look up the name from the mapping
139
+ if (option === 'language') {
140
+ displayText =
141
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
142
+ }
143
+ return {
144
+ displayText,
145
+ key: value,
146
+ count: data === null || data === void 0 ? void 0 : data.count,
147
+ state: data === null || data === void 0 ? void 0 : data.state,
148
+ };
149
+ });
150
+ return {
151
+ title,
152
+ key: option,
153
+ buckets,
154
+ };
155
+ });
156
+ return facetGroups;
157
+ }
158
+ /**
159
+ * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
160
+ */
161
+ get aggregationFacetGroups() {
162
+ var _a;
163
+ const facetGroups = [];
164
+ Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
165
+ // the year_histogram data is in a different format so can't be handled here
166
+ if (key === 'year_histogram')
167
+ return;
168
+ const option = key;
169
+ this.facetGroupTitle = facetTitles[option];
170
+ // sort facets in specific order
171
+ let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
172
+ ? AggregationSortType.ALPHABETICAL
173
+ : AggregationSortType.COUNT);
174
+ if (option === 'collection') {
175
+ // we are not showing fav- collection items in facets
176
+ 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; });
177
+ // asynchronously load the collection name
178
+ this.preloadCollectionNames(castedBuckets);
179
+ }
180
+ // find length and pagination size for modal pagination
181
+ const { length } = Object.keys(castedBuckets);
182
+ this.paginationSize = Math.ceil(length / this.facetsPerPage);
183
+ // render only items which will be visible as per this.facetsPerPage
184
+ const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
185
+ const facetBucket = bucketsMaxSix.map(bucket => {
186
+ var _a, _b;
187
+ let bucketKey = bucket.key;
188
+ // for languages, we need to search by language code instead of the
189
+ // display name, which is what we get from the search engine result
190
+ if (option === 'language') {
191
+ bucketKey =
192
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
193
+ }
194
+ return {
195
+ displayText: `${bucket.key}`,
196
+ key: `${bucketKey}`,
197
+ count: bucket.doc_count,
198
+ state: 'none',
199
+ };
200
+ });
201
+ const group = {
202
+ title: this.facetGroupTitle,
203
+ key: option,
204
+ buckets: facetBucket,
205
+ };
206
+ facetGroups.push(group);
207
+ });
208
+ return facetGroups;
209
+ }
210
+ /**
211
+ * for collections, we need to asynchronously load the collection name
212
+ * so we use the `async-collection-name` widget and for the rest, we have a static value to use
213
+ *
214
+ * @param castedBuckets
215
+ */
216
+ preloadCollectionNames(castedBuckets) {
217
+ var _a;
218
+ const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
219
+ const collectionIdsArray = Array.from(new Set(collectionIds));
220
+ (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
221
+ }
222
+ /**
223
+ * sort the facets on modal
224
+ * - alpha sort perform in ascending order
225
+ * - count/frequency sort perform in descending order
226
+ *
227
+ * @param facetBucket as Bucket[]
228
+ *
229
+ * @return sortedFacetBucket as Bucket
230
+ */
231
+ sortedFacets(facetBucket) {
232
+ let sortedFacetBucket = facetBucket;
233
+ if (this.sortedBy === 'alpha') {
234
+ // sort by alphabetic in ascending order. eg. a,b,c,...
235
+ sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => (a.key > b.key ? 1 : -1));
236
+ }
237
+ else {
238
+ // sort by frequency/count in descending order. eg 100,99,98,...
239
+ sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => a.doc_count < b.doc_count ? 1 : -1);
240
+ }
241
+ return sortedFacetBucket;
242
+ }
243
+ get getMoreFacetsTemplate() {
244
+ var _a;
246
245
  return html `
247
246
  <facets-template
248
247
  .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
249
248
  .selectedFacets=${this.selectedFacets}
250
249
  .renderOn=${'modal'}
251
250
  .collectionNameCache=${this.collectionNameCache}
252
- @selectedFacetsChanged=${(e) => {
253
- this.selectedFacets = e.detail;
251
+ @selectedFacetsChanged=${(e) => {
252
+ this.selectedFacets = e.detail;
254
253
  }}
255
254
  ></facets-template>
256
- `;
257
- }
258
- get loaderTemplate() {
255
+ `;
256
+ }
257
+ get loaderTemplate() {
259
258
  return html `<div class="facets-loader">
260
259
  <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
261
- </div> `;
262
- }
263
- // render pagination if more then 1 page
264
- get facetsPaginationTemplate() {
265
- return this.paginationSize > 1
260
+ </div> `;
261
+ }
262
+ // render pagination if more then 1 page
263
+ get facetsPaginationTemplate() {
264
+ return this.paginationSize > 1
266
265
  ? html `<more-facets-pagination
267
266
  .size=${this.paginationSize}
268
267
  .currentPage=${1}
269
268
  @pageNumberClicked=${this.pageNumberClicked}
270
- ></more-facets-pagination>`
271
- : nothing;
272
- }
273
- get footerTemplate() {
274
- if (this.paginationSize > 0) {
269
+ ></more-facets-pagination>`
270
+ : nothing;
271
+ }
272
+ get footerTemplate() {
273
+ if (this.paginationSize > 0) {
275
274
  return html `${this.facetsPaginationTemplate}
276
275
  <div class="footer">
277
276
  <button
@@ -288,19 +287,19 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
288
287
  >
289
288
  Apply filters
290
289
  </button>
291
- </div> `;
292
- }
293
- return nothing;
294
- }
295
- sortFacetAggregation() {
296
- this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
297
- this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
298
- }
299
- get getModalHeaderTemplate() {
300
- const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
301
- const image = this.sortedBy === 'alpha'
302
- ? 'https://archive.org/images/filter-alpha.png'
303
- : 'https://archive.org/images/filter-count.png';
290
+ </div> `;
291
+ }
292
+ return nothing;
293
+ }
294
+ sortFacetAggregation() {
295
+ this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
296
+ this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
297
+ }
298
+ get getModalHeaderTemplate() {
299
+ const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
300
+ const image = this.sortedBy === 'alpha'
301
+ ? 'https://archive.org/images/filter-alpha.png'
302
+ : 'https://archive.org/images/filter-count.png';
304
303
  return html `<span class="sr-only">More facets for:</span>
305
304
  <span class="title">
306
305
  ${this.facetGroupTitle}
@@ -312,12 +311,12 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
312
311
  title=${title}
313
312
  alt="sort facets"
314
313
  />
315
- </span> `;
316
- }
317
- render() {
314
+ </span> `;
315
+ }
316
+ render() {
318
317
  return html `
319
- ${this.facetsLoading
320
- ? this.loaderTemplate
318
+ ${this.facetsLoading
319
+ ? this.loaderTemplate
321
320
  : html `
322
321
  <div class="header-content">${this.getModalHeaderTemplate}</div>
323
322
  <div class="scrollable-content">
@@ -325,24 +324,24 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
325
324
  </div>
326
325
  ${this.footerTemplate}
327
326
  `}
328
- `;
329
- }
330
- applySearchFacetsClicked() {
331
- var _a;
332
- const event = new CustomEvent('facetsChanged', {
333
- detail: this.selectedFacets,
334
- bubbles: true,
335
- composed: true,
336
- });
337
- this.dispatchEvent(event);
338
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
339
- }
340
- cancelClick() {
341
- var _a;
342
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
343
- }
344
- static get styles() {
345
- const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
327
+ `;
328
+ }
329
+ applySearchFacetsClicked() {
330
+ var _a;
331
+ const event = new CustomEvent('facetsChanged', {
332
+ detail: this.selectedFacets,
333
+ bubbles: true,
334
+ composed: true,
335
+ });
336
+ this.dispatchEvent(event);
337
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
338
+ }
339
+ cancelClick() {
340
+ var _a;
341
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
342
+ }
343
+ static get styles() {
344
+ const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
346
345
  return css `
347
346
  .header-content .title {
348
347
  display: block;
@@ -417,59 +416,62 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
417
416
  vertical-align: baseline;
418
417
  cursor: pointer;
419
418
  }
420
- `;
421
- }
422
- };
423
- __decorate([
424
- property({ type: String })
425
- ], MoreFacetsContent.prototype, "facetKey", void 0);
426
- __decorate([
427
- property({ type: String })
428
- ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
429
- __decorate([
430
- property({ type: String })
431
- ], MoreFacetsContent.prototype, "fullQuery", void 0);
432
- __decorate([
433
- property({ type: Object })
434
- ], MoreFacetsContent.prototype, "modalManager", void 0);
435
- __decorate([
436
- property({ type: Object })
437
- ], MoreFacetsContent.prototype, "searchService", void 0);
438
- __decorate([
439
- property({ type: Object })
440
- ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
441
- __decorate([
442
- property({ type: Object })
443
- ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
444
- __decorate([
445
- property({ type: Object })
446
- ], MoreFacetsContent.prototype, "selectedFacets", void 0);
447
- __decorate([
448
- property({ type: String })
449
- ], MoreFacetsContent.prototype, "sortedBy", void 0);
450
- __decorate([
451
- state()
452
- ], MoreFacetsContent.prototype, "aggregations", void 0);
453
- __decorate([
454
- state()
455
- ], MoreFacetsContent.prototype, "facetGroup", void 0);
456
- __decorate([
457
- state()
458
- ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
459
- __decorate([
460
- state()
461
- ], MoreFacetsContent.prototype, "pageNumber", void 0);
462
- __decorate([
463
- state()
464
- ], MoreFacetsContent.prototype, "facetsLoading", void 0);
465
- __decorate([
466
- state()
467
- ], MoreFacetsContent.prototype, "paginationSize", void 0);
468
- __decorate([
469
- state()
470
- ], MoreFacetsContent.prototype, "facetsType", void 0);
471
- MoreFacetsContent = __decorate([
472
- customElement('more-facets-content')
473
- ], MoreFacetsContent);
474
- export { MoreFacetsContent };
419
+ `;
420
+ }
421
+ };
422
+ __decorate([
423
+ property({ type: String })
424
+ ], MoreFacetsContent.prototype, "facetKey", void 0);
425
+ __decorate([
426
+ property({ type: String })
427
+ ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
428
+ __decorate([
429
+ property({ type: String })
430
+ ], MoreFacetsContent.prototype, "fullQuery", void 0);
431
+ __decorate([
432
+ property({ type: Object })
433
+ ], MoreFacetsContent.prototype, "modalManager", void 0);
434
+ __decorate([
435
+ property({ type: Object })
436
+ ], MoreFacetsContent.prototype, "searchService", void 0);
437
+ __decorate([
438
+ property({ type: String })
439
+ ], MoreFacetsContent.prototype, "searchTarget", void 0);
440
+ __decorate([
441
+ property({ type: Object })
442
+ ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
443
+ __decorate([
444
+ property({ type: Object })
445
+ ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
446
+ __decorate([
447
+ property({ type: Object })
448
+ ], MoreFacetsContent.prototype, "selectedFacets", void 0);
449
+ __decorate([
450
+ property({ type: String })
451
+ ], MoreFacetsContent.prototype, "sortedBy", void 0);
452
+ __decorate([
453
+ state()
454
+ ], MoreFacetsContent.prototype, "aggregations", void 0);
455
+ __decorate([
456
+ state()
457
+ ], MoreFacetsContent.prototype, "facetGroup", void 0);
458
+ __decorate([
459
+ state()
460
+ ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
461
+ __decorate([
462
+ state()
463
+ ], MoreFacetsContent.prototype, "pageNumber", void 0);
464
+ __decorate([
465
+ state()
466
+ ], MoreFacetsContent.prototype, "facetsLoading", void 0);
467
+ __decorate([
468
+ state()
469
+ ], MoreFacetsContent.prototype, "paginationSize", void 0);
470
+ __decorate([
471
+ state()
472
+ ], MoreFacetsContent.prototype, "facetsType", void 0);
473
+ MoreFacetsContent = __decorate([
474
+ customElement('more-facets-content')
475
+ ], MoreFacetsContent);
476
+ export { MoreFacetsContent };
475
477
  //# sourceMappingURL=more-facets-content.js.map