@internetarchive/collection-browser 0.3.2-alpha.4 → 0.3.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 (218) 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 +247 -247
  68. package/dist/src/collection-browser.js +1419 -1418
  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 +73 -73
  77. package/dist/src/collection-facets.js +507 -507
  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 -97
  88. package/dist/src/models.js +100 -100
  89. package/dist/src/restoration-state-handler.d.ts +45 -45
  90. package/dist/src/restoration-state-handler.js +220 -220
  91. package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
  92. package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
  93. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  94. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  95. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  96. package/dist/src/sort-filter-bar/img/list.js +2 -2
  97. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  98. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  99. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  100. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  101. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
  102. package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
  103. package/dist/src/styles/item-image-styles.d.ts +8 -8
  104. package/dist/src/styles/item-image-styles.js +9 -9
  105. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  106. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  107. package/dist/src/tiles/grid/account-tile.d.ts +8 -8
  108. package/dist/src/tiles/grid/account-tile.js +20 -20
  109. package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
  110. package/dist/src/tiles/grid/collection-tile.js +23 -23
  111. package/dist/src/tiles/grid/item-tile.d.ts +24 -24
  112. package/dist/src/tiles/grid/item-tile.js +87 -87
  113. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  114. package/dist/src/tiles/grid/tile-stats.js +35 -35
  115. package/dist/src/tiles/image-block.d.ts +17 -17
  116. package/dist/src/tiles/image-block.js +69 -73
  117. package/dist/src/tiles/image-block.js.map +1 -1
  118. package/dist/src/tiles/item-image.d.ts +31 -31
  119. package/dist/src/tiles/item-image.js +103 -103
  120. package/dist/src/tiles/list/account-label.d.ts +1 -1
  121. package/dist/src/tiles/list/account-label.js +6 -6
  122. package/dist/src/tiles/list/date-label.d.ts +1 -1
  123. package/dist/src/tiles/list/date-label.js +12 -12
  124. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  125. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  126. package/dist/src/tiles/list/tile-list-compact.d.ts +20 -20
  127. package/dist/src/tiles/list/tile-list-compact.js +88 -87
  128. package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
  129. package/dist/src/tiles/list/tile-list.d.ts +50 -50
  130. package/dist/src/tiles/list/tile-list.js +265 -264
  131. package/dist/src/tiles/list/tile-list.js.map +1 -1
  132. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  133. package/dist/src/tiles/mediatype-icon.js +47 -47
  134. package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
  135. package/dist/src/tiles/overlay/icon-overlay.js +30 -31
  136. package/dist/src/tiles/overlay/icon-overlay.js.map +1 -1
  137. package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
  138. package/dist/src/tiles/overlay/text-overlay.js +31 -31
  139. package/dist/src/tiles/text-snippet-block.d.ts +29 -29
  140. package/dist/src/tiles/text-snippet-block.js +81 -81
  141. package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
  142. package/dist/src/tiles/tile-dispatcher.js +128 -128
  143. package/dist/src/utils/analytics-events.d.ts +18 -18
  144. package/dist/src/utils/analytics-events.js +20 -20
  145. package/dist/src/utils/format-count.d.ts +7 -7
  146. package/dist/src/utils/format-count.js +76 -76
  147. package/dist/src/utils/format-date.d.ts +2 -2
  148. package/dist/src/utils/format-date.js +23 -23
  149. package/dist/test/collection-browser.test.d.ts +1 -1
  150. package/dist/test/collection-browser.test.js +333 -318
  151. package/dist/test/collection-browser.test.js.map +1 -1
  152. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  153. package/dist/test/collection-facets/facets-template.test.js +62 -62
  154. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  155. package/dist/test/collection-facets/more-facets-content.test.js +91 -91
  156. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  157. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  158. package/dist/test/collection-facets.test.d.ts +2 -2
  159. package/dist/test/collection-facets.test.js +423 -423
  160. package/dist/test/collection-facets.test.js.map +1 -1
  161. package/dist/test/empty-placeholder.test.d.ts +1 -1
  162. package/dist/test/empty-placeholder.test.js +33 -33
  163. package/dist/test/icon-overlay.test.d.ts +1 -1
  164. package/dist/test/icon-overlay.test.js +24 -24
  165. package/dist/test/image-block.test.d.ts +1 -0
  166. package/dist/test/image-block.test.js +79 -0
  167. package/dist/test/image-block.test.js.map +1 -0
  168. package/dist/test/item-image.test.d.ts +1 -1
  169. package/dist/test/item-image.test.js +56 -56
  170. package/dist/test/mediatype-config.test.d.ts +1 -1
  171. package/dist/test/mediatype-config.test.js +16 -16
  172. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  173. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  174. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  175. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  176. package/dist/test/mocks/mock-search-responses.d.ts +5 -5
  177. package/dist/test/mocks/mock-search-responses.js +103 -103
  178. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  179. package/dist/test/mocks/mock-search-service.js +25 -25
  180. package/dist/test/restoration-state-handler.test.d.ts +1 -1
  181. package/dist/test/restoration-state-handler.test.js +117 -117
  182. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  183. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
  184. package/dist/test/text-overlay.test.d.ts +1 -1
  185. package/dist/test/text-overlay.test.js +41 -41
  186. package/dist/test/text-snippet-block.test.d.ts +1 -1
  187. package/dist/test/text-snippet-block.test.js +57 -57
  188. package/dist/test/tile-stats.test.d.ts +1 -1
  189. package/dist/test/tile-stats.test.js +33 -33
  190. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  191. package/dist/test/tiles/grid/item-tile.test.js +107 -107
  192. package/dist/test/tiles/list/tile-list-compact.test.d.ts +1 -0
  193. package/dist/test/tiles/list/tile-list-compact.test.js +31 -0
  194. package/dist/test/tiles/list/tile-list-compact.test.js.map +1 -0
  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/collection-browser.ts +1547 -1547
  207. package/src/collection-facets.ts +582 -582
  208. package/src/tiles/image-block.ts +7 -10
  209. package/src/tiles/list/tile-list-compact.ts +1 -0
  210. package/src/tiles/list/tile-list.ts +1 -0
  211. package/src/tiles/overlay/icon-overlay.ts +3 -4
  212. package/test/collection-browser.test.ts +24 -1
  213. package/test/collection-facets.test.ts +556 -556
  214. package/test/image-block.test.ts +86 -0
  215. package/test/tiles/list/tile-list-compact.test.ts +38 -0
  216. package/tsconfig.json +21 -21
  217. package/web-dev-server.config.mjs +30 -30
  218. package/web-test-runner.config.mjs +41 -41
@@ -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 = 35;
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 = 35;
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
  <section id="more-facets">
299
299
  <div class="header-content">${this.getModalHeaderTemplate}</div>
@@ -301,24 +301,24 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
301
301
  ${this.footerTemplate}
302
302
  </section>
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
  @media (max-width: 560px) {
324
324
  section#more-facets {
@@ -404,62 +404,62 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
404
404
  vertical-align: baseline;
405
405
  cursor: pointer;
406
406
  }
407
- `;
408
- }
409
- };
410
- __decorate([
411
- property({ type: String })
412
- ], MoreFacetsContent.prototype, "facetKey", void 0);
413
- __decorate([
414
- property({ type: String })
415
- ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
416
- __decorate([
417
- property({ type: String })
418
- ], MoreFacetsContent.prototype, "fullQuery", void 0);
419
- __decorate([
420
- property({ type: Object })
421
- ], MoreFacetsContent.prototype, "modalManager", void 0);
422
- __decorate([
423
- property({ type: Object })
424
- ], MoreFacetsContent.prototype, "searchService", void 0);
425
- __decorate([
426
- property({ type: String })
427
- ], MoreFacetsContent.prototype, "searchType", void 0);
428
- __decorate([
429
- property({ type: Object })
430
- ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
431
- __decorate([
432
- property({ type: Object })
433
- ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
434
- __decorate([
435
- property({ type: Object })
436
- ], MoreFacetsContent.prototype, "selectedFacets", void 0);
437
- __decorate([
438
- property({ type: String })
439
- ], MoreFacetsContent.prototype, "sortedBy", void 0);
440
- __decorate([
441
- state()
442
- ], MoreFacetsContent.prototype, "aggregations", void 0);
443
- __decorate([
444
- state()
445
- ], MoreFacetsContent.prototype, "facetGroup", void 0);
446
- __decorate([
447
- state()
448
- ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
449
- __decorate([
450
- state()
451
- ], MoreFacetsContent.prototype, "pageNumber", void 0);
452
- __decorate([
453
- state()
454
- ], MoreFacetsContent.prototype, "facetsLoading", void 0);
455
- __decorate([
456
- state()
457
- ], MoreFacetsContent.prototype, "paginationSize", void 0);
458
- __decorate([
459
- state()
460
- ], MoreFacetsContent.prototype, "facetsType", void 0);
461
- MoreFacetsContent = __decorate([
462
- customElement('more-facets-content')
463
- ], MoreFacetsContent);
464
- export { MoreFacetsContent };
407
+ `;
408
+ }
409
+ };
410
+ __decorate([
411
+ property({ type: String })
412
+ ], MoreFacetsContent.prototype, "facetKey", void 0);
413
+ __decorate([
414
+ property({ type: String })
415
+ ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
416
+ __decorate([
417
+ property({ type: String })
418
+ ], MoreFacetsContent.prototype, "fullQuery", void 0);
419
+ __decorate([
420
+ property({ type: Object })
421
+ ], MoreFacetsContent.prototype, "modalManager", void 0);
422
+ __decorate([
423
+ property({ type: Object })
424
+ ], MoreFacetsContent.prototype, "searchService", void 0);
425
+ __decorate([
426
+ property({ type: String })
427
+ ], MoreFacetsContent.prototype, "searchType", void 0);
428
+ __decorate([
429
+ property({ type: Object })
430
+ ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
431
+ __decorate([
432
+ property({ type: Object })
433
+ ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
434
+ __decorate([
435
+ property({ type: Object })
436
+ ], MoreFacetsContent.prototype, "selectedFacets", void 0);
437
+ __decorate([
438
+ property({ type: String })
439
+ ], MoreFacetsContent.prototype, "sortedBy", void 0);
440
+ __decorate([
441
+ state()
442
+ ], MoreFacetsContent.prototype, "aggregations", void 0);
443
+ __decorate([
444
+ state()
445
+ ], MoreFacetsContent.prototype, "facetGroup", void 0);
446
+ __decorate([
447
+ state()
448
+ ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
449
+ __decorate([
450
+ state()
451
+ ], MoreFacetsContent.prototype, "pageNumber", void 0);
452
+ __decorate([
453
+ state()
454
+ ], MoreFacetsContent.prototype, "facetsLoading", void 0);
455
+ __decorate([
456
+ state()
457
+ ], MoreFacetsContent.prototype, "paginationSize", void 0);
458
+ __decorate([
459
+ state()
460
+ ], MoreFacetsContent.prototype, "facetsType", void 0);
461
+ MoreFacetsContent = __decorate([
462
+ customElement('more-facets-content')
463
+ ], MoreFacetsContent);
464
+ export { MoreFacetsContent };
465
465
  //# sourceMappingURL=more-facets-content.js.map