@internetarchive/collection-browser 3.0.0 → 3.0.1-webdev-7936.0

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 (85) hide show
  1. package/.editorconfig +29 -29
  2. package/.github/workflows/ci.yml +27 -27
  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/.prettierignore +1 -1
  8. package/LICENSE +661 -661
  9. package/README.md +83 -83
  10. package/dist/src/collection-browser.js +681 -680
  11. package/dist/src/collection-browser.js.map +1 -1
  12. package/dist/src/collection-facets/facet-row.js +131 -130
  13. package/dist/src/collection-facets/facet-row.js.map +1 -1
  14. package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +75 -75
  15. package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
  16. package/dist/src/collection-facets.js +264 -263
  17. package/dist/src/collection-facets.js.map +1 -1
  18. package/dist/src/data-source/collection-browser-data-source.js.map +1 -1
  19. package/dist/src/data-source/collection-browser-query-state.js.map +1 -1
  20. package/dist/src/data-source/models.js.map +1 -1
  21. package/dist/src/models.js.map +1 -1
  22. package/dist/src/restoration-state-handler.js.map +1 -1
  23. package/dist/src/sort-filter-bar/sort-filter-bar.js +1 -1
  24. package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
  25. package/dist/src/tiles/base-tile-component.js.map +1 -1
  26. package/dist/src/tiles/grid/collection-tile.js +3 -2
  27. package/dist/src/tiles/grid/collection-tile.js.map +1 -1
  28. package/dist/src/tiles/grid/item-tile.js +139 -139
  29. package/dist/src/tiles/grid/item-tile.js.map +1 -1
  30. package/dist/src/tiles/grid/search-tile.js +3 -2
  31. package/dist/src/tiles/grid/search-tile.js.map +1 -1
  32. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +2 -1
  33. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map +1 -1
  34. package/dist/src/tiles/hover/hover-pane-controller.js +21 -21
  35. package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
  36. package/dist/src/tiles/hover/tile-hover-pane.js +108 -108
  37. package/dist/src/tiles/hover/tile-hover-pane.js.map +1 -1
  38. package/dist/src/tiles/list/tile-list-compact-header.js +45 -45
  39. package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
  40. package/dist/src/tiles/list/tile-list-compact.js +97 -97
  41. package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
  42. package/dist/src/tiles/list/tile-list.js +300 -290
  43. package/dist/src/tiles/list/tile-list.js.map +1 -1
  44. package/dist/src/tiles/tile-dispatcher.js +200 -200
  45. package/dist/src/tiles/tile-dispatcher.js.map +1 -1
  46. package/dist/src/tiles/tile-display-value-provider.js.map +1 -1
  47. package/dist/test/collection-browser.test.js +183 -183
  48. package/dist/test/collection-browser.test.js.map +1 -1
  49. package/dist/test/restoration-state-handler.test.js.map +1 -1
  50. package/dist/test/tiles/list/tile-list.test.js +13 -0
  51. package/dist/test/tiles/list/tile-list.test.js.map +1 -1
  52. package/eslint.config.mjs +53 -53
  53. package/index.html +24 -24
  54. package/local.archive.org.cert +86 -86
  55. package/local.archive.org.key +27 -27
  56. package/package.json +117 -117
  57. package/renovate.json +6 -6
  58. package/src/collection-browser.ts +2776 -2775
  59. package/src/collection-facets/facet-row.ts +283 -282
  60. package/src/collection-facets/smart-facets/smart-facet-bar.ts +437 -437
  61. package/src/collection-facets.ts +991 -990
  62. package/src/data-source/collection-browser-data-source.ts +1390 -1390
  63. package/src/data-source/collection-browser-query-state.ts +63 -63
  64. package/src/data-source/models.ts +43 -43
  65. package/src/models.ts +870 -870
  66. package/src/restoration-state-handler.ts +544 -544
  67. package/src/sort-filter-bar/sort-filter-bar.ts +1 -1
  68. package/src/tiles/base-tile-component.ts +53 -53
  69. package/src/tiles/grid/collection-tile.ts +3 -2
  70. package/src/tiles/grid/item-tile.ts +339 -339
  71. package/src/tiles/grid/search-tile.ts +3 -2
  72. package/src/tiles/grid/styles/tile-grid-shared-styles.ts +2 -1
  73. package/src/tiles/hover/hover-pane-controller.ts +517 -517
  74. package/src/tiles/hover/tile-hover-pane.ts +180 -180
  75. package/src/tiles/list/tile-list-compact-header.ts +86 -86
  76. package/src/tiles/list/tile-list-compact.ts +236 -236
  77. package/src/tiles/list/tile-list.ts +696 -688
  78. package/src/tiles/tile-dispatcher.ts +486 -486
  79. package/src/tiles/tile-display-value-provider.ts +124 -124
  80. package/test/collection-browser.test.ts +2340 -2340
  81. package/test/restoration-state-handler.test.ts +510 -510
  82. package/test/tiles/list/tile-list.test.ts +15 -0
  83. package/tsconfig.json +20 -20
  84. package/web-dev-server.config.mjs +30 -30
  85. package/web-test-runner.config.mjs +41 -41
@@ -32,8 +32,8 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
32
32
  // For other facet types, we just have a static value to use.
33
33
  const bucketTextDisplay = facetType !== 'collection'
34
34
  ? html `${(_a = bucket.displayText) !== null && _a !== void 0 ? _a : bucket.key} ${extraNoteSpan}`
35
- : html `<a href="/details/${bucket.key}">
36
- ${(_c = (_b = this.collectionTitles) === null || _b === void 0 ? void 0 : _b.get(bucket.key)) !== null && _c !== void 0 ? _c : bucket.key}
35
+ : html `<a href="/details/${bucket.key}">
36
+ ${(_c = (_b = this.collectionTitles) === null || _b === void 0 ? void 0 : _b.get(bucket.key)) !== null && _c !== void 0 ? _c : bucket.key}
37
37
  </a> `;
38
38
  const facetHidden = bucket.state === 'hidden';
39
39
  const facetSelected = bucket.state === 'selected';
@@ -46,53 +46,53 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
46
46
  const showHideText = facetHidden ? unhideText : hideText;
47
47
  const ariaLabel = `${titleText}, ${bucket.count} results`;
48
48
  // Added data-testid for Playwright testing
49
- return html `
50
- <div class="facet-row-container">
51
- <div class="facet-checkboxes">
52
- <input
53
- type="checkbox"
54
- .name=${facetType}
55
- .value=${bucket.key}
49
+ return html `
50
+ <div class="facet-row-container">
51
+ <div class="facet-checkboxes">
52
+ <input
53
+ type="checkbox"
54
+ .name=${facetType}
55
+ .value=${bucket.key}
56
56
  @click=${(e) => {
57
57
  this.facetClicked(e, false);
58
- }}
59
- .checked=${facetSelected}
60
- class="select-facet-checkbox"
61
- title=${onlyShowText}
62
- id=${showOnlyCheckboxId}
63
- data-testid=${showOnlyCheckboxId}
64
- />
65
- <input
66
- type="checkbox"
67
- id=${negativeCheckboxId}
68
- .name=${facetType}
69
- .value=${bucket.key}
58
+ }}
59
+ .checked=${facetSelected}
60
+ class="select-facet-checkbox"
61
+ title=${onlyShowText}
62
+ id=${showOnlyCheckboxId}
63
+ data-testid=${showOnlyCheckboxId}
64
+ />
65
+ <input
66
+ type="checkbox"
67
+ id=${negativeCheckboxId}
68
+ .name=${facetType}
69
+ .value=${bucket.key}
70
70
  @click=${(e) => {
71
71
  this.facetClicked(e, true);
72
- }}
73
- .checked=${facetHidden}
74
- class="hide-facet-checkbox"
75
- />
76
- <label
77
- for=${negativeCheckboxId}
78
- class="hide-facet-icon${facetHidden ? ' active' : ''}"
79
- title=${showHideText}
80
- data-testid=${negativeCheckboxId}
81
- >
82
- <span class="eye">${eyeIcon}</span>
83
- <span class="eye-closed">${eyeClosedIcon}</span>
84
- </label>
85
- </div>
86
- <label
87
- for=${showOnlyCheckboxId}
88
- class="facet-info-display"
89
- title=${onlyShowText}
90
- aria-label=${ariaLabel}
91
- >
92
- <div class="facet-title">${bucketTextDisplay}</div>
93
- <div class="facet-count">${bucket.count.toLocaleString()}</div>
94
- </label>
95
- </div>
72
+ }}
73
+ .checked=${facetHidden}
74
+ class="hide-facet-checkbox"
75
+ />
76
+ <label
77
+ for=${negativeCheckboxId}
78
+ class="hide-facet-icon${facetHidden ? ' active' : ''}"
79
+ title=${showHideText}
80
+ data-testid=${negativeCheckboxId}
81
+ >
82
+ <span class="eye">${eyeIcon}</span>
83
+ <span class="eye-closed">${eyeClosedIcon}</span>
84
+ </label>
85
+ </div>
86
+ <label
87
+ for=${showOnlyCheckboxId}
88
+ class="facet-info-display"
89
+ title=${onlyShowText}
90
+ aria-label=${ariaLabel}
91
+ >
92
+ <div class="facet-title">${bucketTextDisplay}</div>
93
+ <div class="facet-count">${bucket.count.toLocaleString()}</div>
94
+ </label>
95
+ </div>
96
96
  `;
97
97
  }
98
98
  //
@@ -148,91 +148,92 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
148
148
  static get styles() {
149
149
  const facetRowBorderTop = css `var(--facet-row-border-top, 1px solid transparent)`;
150
150
  const facetRowBorderBottom = css `var(--facet-row-border-bottom, 1px solid transparent)`;
151
- return css `
152
- async-collection-name {
153
- display: contents;
154
- }
155
- .facet-checkboxes {
156
- margin: 0 5px 0 0;
157
- display: flex;
158
- height: 15px;
159
- }
160
- .facet-checkboxes input:first-child {
161
- margin-right: 5px;
162
- }
163
- .facet-checkboxes input {
164
- height: 15px;
165
- width: 15px;
166
- margin: 0;
167
- }
168
- .facet-row-container {
169
- display: flex;
170
- font-weight: 500;
171
- font-size: 1.2rem;
172
- margin: 2.5px auto;
173
- height: auto;
174
- border-top: ${facetRowBorderTop};
175
- border-bottom: ${facetRowBorderBottom};
176
- overflow: hidden;
177
- }
178
- .facet-info-display {
179
- display: flex;
180
- flex: 1 1 0%;
181
- cursor: pointer;
182
- flex-wrap: wrap;
183
- }
184
- .facet-title {
185
- word-break: break-word;
186
- display: inline-block;
187
- flex: 1 1 0%;
188
- }
189
- .facet-note {
190
- color: #bbb;
191
- }
192
- .facet-count {
193
- text-align: right;
194
- }
195
- .select-facet-checkbox {
196
- cursor: pointer;
197
- display: inline-block;
198
- }
199
- .hide-facet-checkbox {
200
- display: none;
201
- }
202
- .hide-facet-icon {
203
- width: 15px;
204
- height: 15px;
205
- cursor: pointer;
206
- opacity: 0.3;
207
- display: inline-block;
208
- }
209
- .hide-facet-icon:hover,
210
- .active {
211
- opacity: 1;
212
- }
213
- .hide-facet-icon:hover .eye,
214
- .hide-facet-icon .eye-closed {
215
- display: none;
216
- }
217
- .hide-facet-icon:hover .eye-closed,
218
- .hide-facet-icon.active .eye-closed {
219
- display: inline;
220
- }
221
- .hide-facet-icon.active .eye {
222
- display: none;
223
- }
224
- .sorting-icon {
225
- cursor: pointer;
226
- }
227
-
228
- a:link,
229
- a:visited {
230
- text-decoration: none;
231
- color: var(--ia-theme-link-color, #4b64ff);
232
- }
233
- a:hover {
234
- text-decoration: underline;
235
- }
151
+ return css `
152
+ async-collection-name {
153
+ display: contents;
154
+ }
155
+ .facet-checkboxes {
156
+ margin: 0 5px 0 0;
157
+ display: flex;
158
+ height: 15px;
159
+ }
160
+ .facet-checkboxes input:first-child {
161
+ margin-right: 5px;
162
+ }
163
+ .facet-checkboxes input {
164
+ height: 15px;
165
+ width: 15px;
166
+ margin: 0;
167
+ }
168
+ .facet-row-container {
169
+ display: flex;
170
+ font-weight: 500;
171
+ font-size: 1.2rem;
172
+ margin: 0 auto;
173
+ padding: 0.5rem 0;
174
+ height: auto;
175
+ border-top: ${facetRowBorderTop};
176
+ border-bottom: ${facetRowBorderBottom};
177
+ overflow: hidden;
178
+ }
179
+ .facet-info-display {
180
+ display: flex;
181
+ flex: 1 1 0%;
182
+ cursor: pointer;
183
+ flex-wrap: wrap;
184
+ }
185
+ .facet-title {
186
+ word-break: break-word;
187
+ display: inline-block;
188
+ flex: 1 1 0%;
189
+ }
190
+ .facet-note {
191
+ color: #bbb;
192
+ }
193
+ .facet-count {
194
+ text-align: right;
195
+ }
196
+ .select-facet-checkbox {
197
+ cursor: pointer;
198
+ display: inline-block;
199
+ }
200
+ .hide-facet-checkbox {
201
+ display: none;
202
+ }
203
+ .hide-facet-icon {
204
+ width: 15px;
205
+ height: 15px;
206
+ cursor: pointer;
207
+ opacity: 0.3;
208
+ display: inline-block;
209
+ }
210
+ .hide-facet-icon:hover,
211
+ .active {
212
+ opacity: 1;
213
+ }
214
+ .hide-facet-icon:hover .eye,
215
+ .hide-facet-icon .eye-closed {
216
+ display: none;
217
+ }
218
+ .hide-facet-icon:hover .eye-closed,
219
+ .hide-facet-icon.active .eye-closed {
220
+ display: inline;
221
+ }
222
+ .hide-facet-icon.active .eye {
223
+ display: none;
224
+ }
225
+ .sorting-icon {
226
+ cursor: pointer;
227
+ }
228
+
229
+ a:link,
230
+ a:visited {
231
+ text-decoration: none;
232
+ color: var(--ia-theme-link-color, #4b64ff);
233
+ }
234
+ a:hover {
235
+ text-decoration: underline;
236
+ }
236
237
  `;
237
238
  }
238
239
  };
@@ -1 +1 @@
1
- {"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n css,\r\n html,\r\n LitElement,\r\n TemplateResult,\r\n CSSResultGroup,\r\n nothing,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport eyeIcon from '../assets/img/icons/eye';\r\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\r\nimport type {\r\n FacetOption,\r\n FacetBucket,\r\n FacetEventDetails,\r\n FacetState,\r\n} from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\n\r\n@customElement('facet-row')\r\nexport class FacetRow extends LitElement {\r\n //\r\n // UI STATE\r\n //\r\n\r\n /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\r\n @property({ type: String }) facetType?: FacetOption;\r\n\r\n /** The facet bucket containing details about the state, count, and key for this row */\r\n @property({ type: Object }) bucket?: FacetBucket;\r\n\r\n /** The collection name cache for converting collection identifiers to titles */\r\n @property({ type: Object })\r\n collectionTitles?: CollectionTitles;\r\n\r\n //\r\n // COMPONENT LIFECYCLE METHODS\r\n //\r\n\r\n render() {\r\n return html`${this.facetRowTemplate}`;\r\n }\r\n\r\n //\r\n // TEMPLATE GETTERS\r\n //\r\n\r\n /**\r\n * Template for the full facet row, including the positive/negative checks,\r\n * the display name, and the count.\r\n */\r\n private get facetRowTemplate(): TemplateResult | typeof nothing {\r\n const { bucket, facetType } = this;\r\n if (!bucket || !facetType) return nothing;\r\n\r\n const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\r\n const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\r\n\r\n const extraNoteSpan = bucket.extraNote\r\n ? html`<span class=\"facet-note\">${bucket.extraNote}</span>`\r\n : nothing;\r\n\r\n // For collections, we render the collection title as a link.\r\n // For other facet types, we just have a static value to use.\r\n const bucketTextDisplay =\r\n facetType !== 'collection'\r\n ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`\r\n : html`<a href=\"/details/${bucket.key}\">\r\n ${this.collectionTitles?.get(bucket.key) ?? bucket.key}\r\n </a> `;\r\n\r\n const facetHidden = bucket.state === 'hidden';\r\n const facetSelected = bucket.state === 'selected';\r\n\r\n const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\r\n const onlyShowText = facetSelected\r\n ? `Show all ${facetType}s`\r\n : `Only show ${titleText}`;\r\n const hideText = `Hide ${titleText}`;\r\n const unhideText = `Unhide ${titleText}`;\r\n const showHideText = facetHidden ? unhideText : hideText;\r\n const ariaLabel = `${titleText}, ${bucket.count} results`;\r\n\r\n // Added data-testid for Playwright testing\r\n return html`\r\n <div class=\"facet-row-container\">\r\n <div class=\"facet-checkboxes\">\r\n <input\r\n type=\"checkbox\"\r\n .name=${facetType}\r\n .value=${bucket.key}\r\n @click=${(e: Event) => {\r\n this.facetClicked(e, false);\r\n }}\r\n .checked=${facetSelected}\r\n class=\"select-facet-checkbox\"\r\n title=${onlyShowText}\r\n id=${showOnlyCheckboxId}\r\n data-testid=${showOnlyCheckboxId}\r\n />\r\n <input\r\n type=\"checkbox\"\r\n id=${negativeCheckboxId}\r\n .name=${facetType}\r\n .value=${bucket.key}\r\n @click=${(e: Event) => {\r\n this.facetClicked(e, true);\r\n }}\r\n .checked=${facetHidden}\r\n class=\"hide-facet-checkbox\"\r\n />\r\n <label\r\n for=${negativeCheckboxId}\r\n class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\r\n title=${showHideText}\r\n data-testid=${negativeCheckboxId}\r\n >\r\n <span class=\"eye\">${eyeIcon}</span>\r\n <span class=\"eye-closed\">${eyeClosedIcon}</span>\r\n </label>\r\n </div>\r\n <label\r\n for=${showOnlyCheckboxId}\r\n class=\"facet-info-display\"\r\n title=${onlyShowText}\r\n aria-label=${ariaLabel}\r\n >\r\n <div class=\"facet-title\">${bucketTextDisplay}</div>\r\n <div class=\"facet-count\">${bucket.count.toLocaleString()}</div>\r\n </label>\r\n </div>\r\n `;\r\n }\r\n\r\n //\r\n // EVENT HANDLERS & DISPATCHERS\r\n //\r\n\r\n /**\r\n * Handler for whenever this facet is clicked & its state changes\r\n */\r\n private facetClicked(e: Event, negative: boolean) {\r\n const { bucket, facetType } = this;\r\n if (!bucket || !facetType) return;\r\n\r\n const target = e.target as HTMLInputElement;\r\n const { checked } = target;\r\n this.bucket = {\r\n ...bucket,\r\n state: FacetRow.getFacetState(checked, negative),\r\n };\r\n\r\n this.dispatchFacetClickEvent({\r\n facetType,\r\n bucket: this.bucket,\r\n negative,\r\n });\r\n }\r\n\r\n /**\r\n * Emits a `facetClick` event with details about this facet & its current state\r\n */\r\n private dispatchFacetClickEvent(detail: FacetEventDetails) {\r\n const event = new CustomEvent<FacetEventDetails>('facetClick', {\r\n detail,\r\n });\r\n this.dispatchEvent(event);\r\n }\r\n\r\n //\r\n // OTHER METHODS\r\n //\r\n\r\n /**\r\n * Returns the composed facet state corresponding to a positive or negative facet's checked state\r\n */\r\n static getFacetState(checked: boolean, negative: boolean): FacetState {\r\n let state: FacetState;\r\n if (checked) {\r\n state = negative ? 'hidden' : 'selected';\r\n } else {\r\n state = 'none';\r\n }\r\n return state;\r\n }\r\n\r\n //\r\n // STYLES\r\n //\r\n\r\n static get styles(): CSSResultGroup {\r\n const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\r\n const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\r\n\r\n return css`\r\n async-collection-name {\r\n display: contents;\r\n }\r\n .facet-checkboxes {\r\n margin: 0 5px 0 0;\r\n display: flex;\r\n height: 15px;\r\n }\r\n .facet-checkboxes input:first-child {\r\n margin-right: 5px;\r\n }\r\n .facet-checkboxes input {\r\n height: 15px;\r\n width: 15px;\r\n margin: 0;\r\n }\r\n .facet-row-container {\r\n display: flex;\r\n font-weight: 500;\r\n font-size: 1.2rem;\r\n margin: 2.5px auto;\r\n height: auto;\r\n border-top: ${facetRowBorderTop};\r\n border-bottom: ${facetRowBorderBottom};\r\n overflow: hidden;\r\n }\r\n .facet-info-display {\r\n display: flex;\r\n flex: 1 1 0%;\r\n cursor: pointer;\r\n flex-wrap: wrap;\r\n }\r\n .facet-title {\r\n word-break: break-word;\r\n display: inline-block;\r\n flex: 1 1 0%;\r\n }\r\n .facet-note {\r\n color: #bbb;\r\n }\r\n .facet-count {\r\n text-align: right;\r\n }\r\n .select-facet-checkbox {\r\n cursor: pointer;\r\n display: inline-block;\r\n }\r\n .hide-facet-checkbox {\r\n display: none;\r\n }\r\n .hide-facet-icon {\r\n width: 15px;\r\n height: 15px;\r\n cursor: pointer;\r\n opacity: 0.3;\r\n display: inline-block;\r\n }\r\n .hide-facet-icon:hover,\r\n .active {\r\n opacity: 1;\r\n }\r\n .hide-facet-icon:hover .eye,\r\n .hide-facet-icon .eye-closed {\r\n display: none;\r\n }\r\n .hide-facet-icon:hover .eye-closed,\r\n .hide-facet-icon.active .eye-closed {\r\n display: inline;\r\n }\r\n .hide-facet-icon.active .eye {\r\n display: none;\r\n }\r\n .sorting-icon {\r\n cursor: pointer;\r\n }\r\n\r\n a:link,\r\n a:visited {\r\n text-decoration: none;\r\n color: var(--ia-theme-link-color, #4b64ff);\r\n }\r\n a:hover {\r\n text-decoration: underline;\r\n }\r\n `;\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport type {\n FacetOption,\n FacetBucket,\n FacetEventDetails,\n FacetState,\n} from '../models';\nimport type { CollectionTitles } from '../data-source/models';\n\n@customElement('facet-row')\nexport class FacetRow extends LitElement {\n //\n // UI STATE\n //\n\n /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n @property({ type: String }) facetType?: FacetOption;\n\n /** The facet bucket containing details about the state, count, and key for this row */\n @property({ type: Object }) bucket?: FacetBucket;\n\n /** The collection name cache for converting collection identifiers to titles */\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n return html`${this.facetRowTemplate}`;\n }\n\n //\n // TEMPLATE GETTERS\n //\n\n /**\n * Template for the full facet row, including the positive/negative checks,\n * the display name, and the count.\n */\n private get facetRowTemplate(): TemplateResult | typeof nothing {\n const { bucket, facetType } = this;\n if (!bucket || !facetType) return nothing;\n\n const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\n const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\n\n const extraNoteSpan = bucket.extraNote\n ? html`<span class=\"facet-note\">${bucket.extraNote}</span>`\n : nothing;\n\n // For collections, we render the collection title as a link.\n // For other facet types, we just have a static value to use.\n const bucketTextDisplay =\n facetType !== 'collection'\n ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`\n : html`<a href=\"/details/${bucket.key}\">\n ${this.collectionTitles?.get(bucket.key) ?? bucket.key}\n </a> `;\n\n const facetHidden = bucket.state === 'hidden';\n const facetSelected = bucket.state === 'selected';\n\n const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\n const onlyShowText = facetSelected\n ? `Show all ${facetType}s`\n : `Only show ${titleText}`;\n const hideText = `Hide ${titleText}`;\n const unhideText = `Unhide ${titleText}`;\n const showHideText = facetHidden ? unhideText : hideText;\n const ariaLabel = `${titleText}, ${bucket.count} results`;\n\n // Added data-testid for Playwright testing\n return html`\n <div class=\"facet-row-container\">\n <div class=\"facet-checkboxes\">\n <input\n type=\"checkbox\"\n .name=${facetType}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, false);\n }}\n .checked=${facetSelected}\n class=\"select-facet-checkbox\"\n title=${onlyShowText}\n id=${showOnlyCheckboxId}\n data-testid=${showOnlyCheckboxId}\n />\n <input\n type=\"checkbox\"\n id=${negativeCheckboxId}\n .name=${facetType}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, true);\n }}\n .checked=${facetHidden}\n class=\"hide-facet-checkbox\"\n />\n <label\n for=${negativeCheckboxId}\n class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n title=${showHideText}\n data-testid=${negativeCheckboxId}\n >\n <span class=\"eye\">${eyeIcon}</span>\n <span class=\"eye-closed\">${eyeClosedIcon}</span>\n </label>\n </div>\n <label\n for=${showOnlyCheckboxId}\n class=\"facet-info-display\"\n title=${onlyShowText}\n aria-label=${ariaLabel}\n >\n <div class=\"facet-title\">${bucketTextDisplay}</div>\n <div class=\"facet-count\">${bucket.count.toLocaleString()}</div>\n </label>\n </div>\n `;\n }\n\n //\n // EVENT HANDLERS & DISPATCHERS\n //\n\n /**\n * Handler for whenever this facet is clicked & its state changes\n */\n private facetClicked(e: Event, negative: boolean) {\n const { bucket, facetType } = this;\n if (!bucket || !facetType) return;\n\n const target = e.target as HTMLInputElement;\n const { checked } = target;\n this.bucket = {\n ...bucket,\n state: FacetRow.getFacetState(checked, negative),\n };\n\n this.dispatchFacetClickEvent({\n facetType,\n bucket: this.bucket,\n negative,\n });\n }\n\n /**\n * Emits a `facetClick` event with details about this facet & its current state\n */\n private dispatchFacetClickEvent(detail: FacetEventDetails) {\n const event = new CustomEvent<FacetEventDetails>('facetClick', {\n detail,\n });\n this.dispatchEvent(event);\n }\n\n //\n // OTHER METHODS\n //\n\n /**\n * Returns the composed facet state corresponding to a positive or negative facet's checked state\n */\n static getFacetState(checked: boolean, negative: boolean): FacetState {\n let state: FacetState;\n if (checked) {\n state = negative ? 'hidden' : 'selected';\n } else {\n state = 'none';\n }\n return state;\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\n const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\n\n return css`\n async-collection-name {\n display: contents;\n }\n .facet-checkboxes {\n margin: 0 5px 0 0;\n display: flex;\n height: 15px;\n }\n .facet-checkboxes input:first-child {\n margin-right: 5px;\n }\n .facet-checkboxes input {\n height: 15px;\n width: 15px;\n margin: 0;\n }\n .facet-row-container {\n display: flex;\n font-weight: 500;\n font-size: 1.2rem;\n margin: 0 auto;\n padding: 0.5rem 0;\n height: auto;\n border-top: ${facetRowBorderTop};\n border-bottom: ${facetRowBorderBottom};\n overflow: hidden;\n }\n .facet-info-display {\n display: flex;\n flex: 1 1 0%;\n cursor: pointer;\n flex-wrap: wrap;\n }\n .facet-title {\n word-break: break-word;\n display: inline-block;\n flex: 1 1 0%;\n }\n .facet-note {\n color: #bbb;\n }\n .facet-count {\n text-align: right;\n }\n .select-facet-checkbox {\n cursor: pointer;\n display: inline-block;\n }\n .hide-facet-checkbox {\n display: none;\n }\n .hide-facet-icon {\n width: 15px;\n height: 15px;\n cursor: pointer;\n opacity: 0.3;\n display: inline-block;\n }\n .hide-facet-icon:hover,\n .active {\n opacity: 1;\n }\n .hide-facet-icon:hover .eye,\n .hide-facet-icon .eye-closed {\n display: none;\n }\n .hide-facet-icon:hover .eye-closed,\n .hide-facet-icon.active .eye-closed {\n display: inline;\n }\n .hide-facet-icon.active .eye {\n display: none;\n }\n .sorting-icon {\n cursor: pointer;\n }\n\n a:link,\n a:visited {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n `;\n }\n}\n"]}
@@ -33,14 +33,14 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
33
33
  if (!this.query)
34
34
  return nothing;
35
35
  const shouldShowLabel = !!this.label && this.smartFacets.length > 0;
36
- return html `
37
- <div id="smart-facets-container">
38
- ${this.filtersToggleTemplate}
36
+ return html `
37
+ <div id="smart-facets-container">
38
+ ${this.filtersToggleTemplate}
39
39
  ${shouldShowLabel
40
40
  ? html `<p id="filters-label">${this.label}</p>`
41
- : nothing}
42
- ${repeat(this.smartFacets, f => `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`, facet => this.makeSmartFacet(facet))}
43
- </div>
41
+ : nothing}
42
+ ${repeat(this.smartFacets, f => `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`, facet => this.makeSmartFacet(facet))}
43
+ </div>
44
44
  `;
45
45
  }
46
46
  willUpdate(changed) {
@@ -99,38 +99,38 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
99
99
  }
100
100
  smartFacetButton(facet) {
101
101
  var _a;
102
- return html `
103
- <smart-facet-button
104
- .facetInfo=${facet}
105
- .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}
106
- .selected=${(_a = facet.selected) !== null && _a !== void 0 ? _a : false}
107
- @facetClick=${this.facetClicked}
108
- ></smart-facet-button>
102
+ return html `
103
+ <smart-facet-button
104
+ .facetInfo=${facet}
105
+ .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}
106
+ .selected=${(_a = facet.selected) !== null && _a !== void 0 ? _a : false}
107
+ @facetClick=${this.facetClicked}
108
+ ></smart-facet-button>
109
109
  `;
110
110
  }
111
111
  smartFacetDropdown(facets) {
112
- return html `
113
- <smart-facet-dropdown
114
- .facetInfo=${facets}
115
- .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
116
- .activeFacetRef=${facets[0].facets[0]}
117
- @facetClick=${this.dropdownOptionClicked}
118
- @dropdownClick=${this.dropdownClicked}
119
- ></smart-facet-dropdown>
112
+ return html `
113
+ <smart-facet-dropdown
114
+ .facetInfo=${facets}
115
+ .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
116
+ .activeFacetRef=${facets[0].facets[0]}
117
+ @facetClick=${this.dropdownOptionClicked}
118
+ @dropdownClick=${this.dropdownClicked}
119
+ ></smart-facet-dropdown>
120
120
  `;
121
121
  }
122
122
  get filtersToggleTemplate() {
123
123
  if (!this.filterToggleShown)
124
124
  return nothing;
125
- return html `
126
- <button
127
- id="filters-toggle"
128
- class=${this.filterToggleActive ? 'active' : ''}
129
- title="${this.filterToggleActive ? 'Hide' : 'Show'} filters pane"
130
- @click=${this.filterToggleClicked}
131
- >
132
- ${filterIcon}
133
- </button>
125
+ return html `
126
+ <button
127
+ id="filters-toggle"
128
+ class=${this.filterToggleActive ? 'active' : ''}
129
+ title="${this.filterToggleActive ? 'Hide' : 'Show'} filters pane"
130
+ @click=${this.filterToggleClicked}
131
+ >
132
+ ${filterIcon}
133
+ </button>
134
134
  `;
135
135
  }
136
136
  get facetsToDisplay() {
@@ -298,51 +298,51 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
298
298
  // STYLES
299
299
  //
300
300
  static get styles() {
301
- return css `
302
- #smart-facets-container {
303
- display: flex;
304
- align-items: center;
305
- gap: 5px 10px;
306
- padding: 10px 0;
307
- white-space: nowrap;
308
- overflow: scroll hidden;
309
- scrollbar-width: none;
310
- }
311
-
312
- #filters-toggle {
313
- margin: 0;
314
- border: 0;
315
- padding: 5px 8px;
316
- border-radius: 5px;
317
- background: white;
318
- color: #2c2c2c;
319
- border: 1px solid #194880;
320
- font-size: 1.4rem;
321
- font-family: inherit;
322
- text-decoration: none;
323
- cursor: pointer;
324
- }
325
-
326
- #filters-toggle.active {
327
- background: #194880;
328
- color: white;
329
- }
330
-
331
- #filters-toggle > svg {
332
- width: 12px;
333
- filter: invert(0.16667);
334
- vertical-align: -1px;
335
- }
336
-
337
- #filters-toggle.active > svg {
338
- filter: invert(1);
339
- }
340
-
341
- #filters-label {
342
- font-size: 1.4rem;
343
- font-weight: var(--smartFacetLabelFontWeight, normal);
344
- margin: 0 -5px 0 0;
345
- }
301
+ return css `
302
+ #smart-facets-container {
303
+ display: flex;
304
+ align-items: center;
305
+ gap: 5px 10px;
306
+ padding: 10px 0;
307
+ white-space: nowrap;
308
+ overflow: scroll hidden;
309
+ scrollbar-width: none;
310
+ }
311
+
312
+ #filters-toggle {
313
+ margin: 0;
314
+ border: 0;
315
+ padding: 5px 8px;
316
+ border-radius: 5px;
317
+ background: white;
318
+ color: #2c2c2c;
319
+ border: 1px solid #194880;
320
+ font-size: 1.4rem;
321
+ font-family: inherit;
322
+ text-decoration: none;
323
+ cursor: pointer;
324
+ }
325
+
326
+ #filters-toggle.active {
327
+ background: #194880;
328
+ color: white;
329
+ }
330
+
331
+ #filters-toggle > svg {
332
+ width: 12px;
333
+ filter: invert(0.16667);
334
+ vertical-align: -1px;
335
+ }
336
+
337
+ #filters-toggle.active > svg {
338
+ filter: invert(1);
339
+ }
340
+
341
+ #filters-label {
342
+ font-size: 1.4rem;
343
+ font-weight: var(--smartFacetLabelFontWeight, normal);
344
+ margin: 0 -5px 0 0;
345
+ }
346
346
  `;
347
347
  }
348
348
  };
@@ -1 +1 @@
1
- {"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n css,\r\n html,\r\n LitElement,\r\n TemplateResult,\r\n CSSResultGroup,\r\n nothing,\r\n PropertyValues,\r\n} from 'lit';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\r\nimport type { CollectionTitles } from '../../data-source/models';\r\nimport type {\r\n FacetEventDetails,\r\n FacetOption,\r\n FacetState,\r\n SelectedFacets,\r\n} from '../../models';\r\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\r\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\r\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\r\nimport type { SmartFacet, SmartFacetEvent } from './models';\r\nimport { smartFacetEquals } from './smart-facet-equals';\r\nimport { dedupe } from './dedupe';\r\nimport { log } from '../../utils/log';\r\nimport filterIcon from '../../assets/img/icons/filter';\r\n\r\nimport './smart-facet-button';\r\nimport './smart-facet-dropdown';\r\n\r\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\r\n collection: 'Collection: ',\r\n creator: 'By: ',\r\n subject: 'About: ',\r\n};\r\n\r\nfunction capitalize(str: string) {\r\n return str.charAt(0).toUpperCase() + str.slice(1);\r\n}\r\n\r\n@customElement('smart-facet-bar')\r\nexport class SmartFacetBar extends LitElement {\r\n @property({ type: String }) query?: string;\r\n\r\n @property({ type: Object }) aggregations?: Record<string, Aggregation>;\r\n\r\n @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n /** The map from collection identifiers to their titles */\r\n @property({ type: Object })\r\n collectionTitles?: CollectionTitles;\r\n\r\n @property({ type: Boolean }) filterToggleShown = false;\r\n\r\n @property({ type: Boolean }) filterToggleActive = false;\r\n\r\n @property({ type: String }) label?: string;\r\n\r\n @state() private heuristicRecs: SmartFacet[] = [];\r\n\r\n @state() private smartFacets: SmartFacet[][] = [];\r\n\r\n @state() private lastAggregations?: Record<string, Aggregation>;\r\n\r\n //\r\n // COMPONENT LIFECYCLE METHODS\r\n //\r\n\r\n render() {\r\n if (!this.query) return nothing;\r\n\r\n const shouldShowLabel = !!this.label && this.smartFacets.length > 0;\r\n return html`\r\n <div id=\"smart-facets-container\">\r\n ${this.filtersToggleTemplate}\r\n ${shouldShowLabel\r\n ? html`<p id=\"filters-label\">${this.label}</p>`\r\n : nothing}\r\n ${repeat(\r\n this.smartFacets,\r\n f =>\r\n `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,\r\n facet => this.makeSmartFacet(facet),\r\n )}\r\n </div>\r\n `;\r\n }\r\n\r\n protected willUpdate(changed: PropertyValues): void {\r\n let shouldUpdateSmartFacets = false;\r\n\r\n if (changed.has('query')) {\r\n log('query change', changed.get('query'), this.query);\r\n this.lastAggregations = undefined;\r\n shouldUpdateSmartFacets = true;\r\n }\r\n\r\n if (\r\n changed.has('aggregations') &&\r\n !this.lastAggregations &&\r\n this.aggregations &&\r\n Object.keys(this.aggregations).length > 0\r\n ) {\r\n log('aggs change', changed.get('aggregations'), this.aggregations);\r\n this.lastAggregations = this.aggregations;\r\n shouldUpdateSmartFacets = true;\r\n }\r\n\r\n if (shouldUpdateSmartFacets) {\r\n log('should update smart facets, doing so...');\r\n this.updateSmartFacets();\r\n }\r\n }\r\n\r\n refresh(): void {\r\n this.lastAggregations = this.aggregations;\r\n this.updateSmartFacets();\r\n }\r\n\r\n deselectAll(): void {\r\n for (const sf of this.smartFacets) {\r\n for (const facet of sf) {\r\n facet.selected = false;\r\n }\r\n }\r\n this.requestUpdate();\r\n }\r\n\r\n private async updateSmartFacets(): Promise<void> {\r\n log('updating smart facets');\r\n if (this.query) {\r\n this.heuristicRecs =\r\n await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\r\n log('heuristic recs are', this.heuristicRecs);\r\n this.smartFacets = dedupe(this.facetsToDisplay);\r\n log('smart facets are', this.smartFacets);\r\n }\r\n }\r\n\r\n //\r\n // OTHER METHODS\r\n //\r\n\r\n private makeSmartFacet(facets: SmartFacet[]) {\r\n if (facets.length === 0) {\r\n return nothing;\r\n }\r\n if (facets.length === 1) {\r\n return this.smartFacetButton(facets[0]);\r\n }\r\n return this.smartFacetDropdown(facets);\r\n }\r\n\r\n private smartFacetButton(facet: SmartFacet) {\r\n return html`\r\n <smart-facet-button\r\n .facetInfo=${facet}\r\n .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\r\n .selected=${facet.selected ?? false}\r\n @facetClick=${this.facetClicked}\r\n ></smart-facet-button>\r\n `;\r\n }\r\n\r\n private smartFacetDropdown(facets: SmartFacet[]) {\r\n return html`\r\n <smart-facet-dropdown\r\n .facetInfo=${facets}\r\n .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\r\n .activeFacetRef=${facets[0].facets[0]}\r\n @facetClick=${this.dropdownOptionClicked}\r\n @dropdownClick=${this.dropdownClicked}\r\n ></smart-facet-dropdown>\r\n `;\r\n }\r\n\r\n private get filtersToggleTemplate(): TemplateResult | typeof nothing {\r\n if (!this.filterToggleShown) return nothing;\r\n\r\n return html`\r\n <button\r\n id=\"filters-toggle\"\r\n class=${this.filterToggleActive ? 'active' : ''}\r\n title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\r\n @click=${this.filterToggleClicked}\r\n >\r\n ${filterIcon}\r\n </button>\r\n `;\r\n }\r\n\r\n private get facetsToDisplay(): SmartFacet[][] {\r\n const facets: SmartFacet[][] = [];\r\n\r\n if (this.heuristicRecs.length > 0) {\r\n for (const rec of this.heuristicRecs) {\r\n // Suppress mediatype-only facets for now.\r\n if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\r\n continue;\r\n\r\n facets.push([rec]);\r\n }\r\n }\r\n\r\n if (this.lastAggregations) {\r\n const keys = [\r\n 'mediatype',\r\n 'year',\r\n 'language',\r\n 'creator',\r\n 'subject',\r\n 'collection',\r\n ];\r\n for (const key of keys) {\r\n const agg = this.lastAggregations[key];\r\n if (!agg) continue;\r\n if (agg.buckets.length === 0) continue;\r\n if (['lending', 'year_histogram', 'date_histogram'].includes(key))\r\n continue;\r\n if (typeof agg.buckets[0] === 'number') continue;\r\n\r\n if (\r\n key === 'mediatype' &&\r\n this.selectedFacets &&\r\n Object.values(this.selectedFacets.mediatype ?? {}).some(\r\n bucket => bucket.state !== 'none',\r\n )\r\n ) {\r\n continue;\r\n }\r\n\r\n const facetType = key as FacetOption;\r\n const buckets = agg.buckets as Bucket[];\r\n\r\n const unusedBuckets = buckets.filter(b => {\r\n const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\r\n if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\r\n return false;\r\n }\r\n return true;\r\n });\r\n\r\n if (facetType === 'mediatype') {\r\n continue;\r\n // Don't include mediatype bubbles\r\n } else if (facetType === 'collection' || facetType === 'subject') {\r\n const topBuckets = unusedBuckets.slice(0, 5);\r\n facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\r\n } else {\r\n facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\r\n }\r\n }\r\n }\r\n\r\n return facets;\r\n }\r\n\r\n private toSmartFacet(\r\n facetType: FacetOption,\r\n buckets: Bucket[],\r\n // prefix = true\r\n ): SmartFacet {\r\n return {\r\n facets: buckets.map(bucket => {\r\n let displayText = capitalize(bucket.key.toString());\r\n if (facetType === 'collection') {\r\n const title = this.collectionTitles?.get(bucket.key.toString());\r\n if (title) displayText = title;\r\n }\r\n\r\n return {\r\n facetType,\r\n bucketKey: bucket.key.toString(),\r\n displayText,\r\n };\r\n }),\r\n } as SmartFacet;\r\n }\r\n\r\n /**\r\n * Toggles the state of the given smart facet, and updates the selected facets accordingly.\r\n */\r\n private toggleSmartFacet(\r\n facet: SmartFacet,\r\n details: FacetEventDetails[],\r\n ): void {\r\n let newState: FacetState;\r\n if (facet.selected) {\r\n // When deselected, leave the smart facet where it is\r\n newState = 'none';\r\n this.smartFacets = this.smartFacets.map(f => {\r\n if (f[0] === facet) return [{ ...facet, selected: false }];\r\n return f;\r\n });\r\n } else {\r\n // When selected, move the toggled smart facet to the front of the list\r\n newState = 'selected';\r\n this.smartFacets = [\r\n [{ ...facet, selected: true }],\r\n ...this.smartFacets.filter(f => f[0] !== facet),\r\n ];\r\n }\r\n\r\n this.updateSelectedFacets(\r\n details.map(facet => ({\r\n ...facet,\r\n bucket: {\r\n ...facet.bucket,\r\n state: newState,\r\n },\r\n })),\r\n );\r\n }\r\n\r\n /**\r\n * Updates the selected facet buckets for each of the given facets,\r\n * and emits a `facetsChanged` event to notify parent components of\r\n * the new state.\r\n */\r\n private updateSelectedFacets(facets: FacetEventDetails[]): void {\r\n for (const facet of facets) {\r\n this.selectedFacets = updateSelectedFacetBucket(\r\n this.selectedFacets,\r\n facet.facetType,\r\n facet.bucket,\r\n true,\r\n );\r\n }\r\n\r\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\r\n detail: this.selectedFacets,\r\n });\r\n this.dispatchEvent(event);\r\n }\r\n\r\n /**\r\n * Handler for when a smart facet button is clicked\r\n */\r\n private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\r\n this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);\r\n }\r\n\r\n /**\r\n * Handler for when an option in a smart facet dropdown menu is selected\r\n */\r\n private dropdownOptionClicked(e: CustomEvent<SmartFacetEvent>): void {\r\n const existingFacet = this.smartFacets.find(\r\n sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),\r\n );\r\n if (existingFacet) {\r\n // The facet already exists outside the dropdown, so just select it there\r\n this.toggleSmartFacet(existingFacet[0], e.detail.details);\r\n return;\r\n }\r\n\r\n // Otherwise, prepend a new smart facet for the selected option\r\n this.smartFacets = [\r\n [{ ...e.detail.smartFacet, selected: true }],\r\n ...this.smartFacets,\r\n ];\r\n\r\n this.updateSelectedFacets(e.detail.details);\r\n }\r\n\r\n /**\r\n * Handler for when any dropdown is clicked (whether button, caret, or menu item)\r\n */\r\n private dropdownClicked(e: CustomEvent<SmartFacetDropdown>): void {\r\n log('smart bar: onDropdownClick', e.detail);\r\n this.shadowRoot\r\n ?.querySelectorAll('smart-facet-dropdown')\r\n .forEach(dropdown => {\r\n if (dropdown !== e.detail) {\r\n log('closing', dropdown);\r\n (dropdown as SmartFacetDropdown).close();\r\n }\r\n });\r\n }\r\n\r\n private filterToggleClicked(): void {\r\n this.dispatchEvent(new CustomEvent('filtersToggled'));\r\n }\r\n\r\n //\r\n // STYLES\r\n //\r\n\r\n static get styles(): CSSResultGroup {\r\n return css`\r\n #smart-facets-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px 10px;\r\n padding: 10px 0;\r\n white-space: nowrap;\r\n overflow: scroll hidden;\r\n scrollbar-width: none;\r\n }\r\n\r\n #filters-toggle {\r\n margin: 0;\r\n border: 0;\r\n padding: 5px 8px;\r\n border-radius: 5px;\r\n background: white;\r\n color: #2c2c2c;\r\n border: 1px solid #194880;\r\n font-size: 1.4rem;\r\n font-family: inherit;\r\n text-decoration: none;\r\n cursor: pointer;\r\n }\r\n\r\n #filters-toggle.active {\r\n background: #194880;\r\n color: white;\r\n }\r\n\r\n #filters-toggle > svg {\r\n width: 12px;\r\n filter: invert(0.16667);\r\n vertical-align: -1px;\r\n }\r\n\r\n #filters-toggle.active > svg {\r\n filter: invert(1);\r\n }\r\n\r\n #filters-label {\r\n font-size: 1.4rem;\r\n font-weight: var(--smartFacetLabelFontWeight, normal);\r\n margin: 0 -5px 0 0;\r\n }\r\n `;\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AASnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,UAAU,MAAM,+BAA+B,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAEhC,MAAM,aAAa,GAAyC;IAC1D,UAAU,EAAE,cAAc;IAC1B,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC;AAGM,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAWwB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,uBAAkB,GAAG,KAAK,CAAC;QAIvC,kBAAa,GAAiB,EAAE,CAAC;QAEjC,gBAAW,GAAmB,EAAE,CAAC;IAuXpD,CAAC;IAnXC,EAAE;IACF,8BAA8B;IAC9B,EAAE;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;QACpE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,qBAAqB;UAC1B,eAAe;YACf,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,KAAK,MAAM;YAC/C,CAAC,CAAC,OAAO;UACT,MAAM,CACN,IAAI,CAAC,WAAW,EAChB,CAAC,CAAC,EAAE,CACF,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EACzE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CACpC;;KAEJ,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IAAI,uBAAuB,GAAG,KAAK,CAAC;QAEpC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,GAAG,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACtD,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;YAClC,uBAAuB,GAAG,IAAI,CAAC;QACjC,CAAC;QAED,IACE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC;YAC3B,CAAC,IAAI,CAAC,gBAAgB;YACtB,IAAI,CAAC,YAAY;YACjB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,CAAC,EACzC,CAAC;YACD,GAAG,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACnE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;YAC1C,uBAAuB,GAAG,IAAI,CAAC;QACjC,CAAC;QAED,IAAI,uBAAuB,EAAE,CAAC;YAC5B,GAAG,CAAC,yCAAyC,CAAC,CAAC;YAC/C,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;QAC1C,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,WAAW;QACT,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAClC,KAAK,MAAM,KAAK,IAAI,EAAE,EAAE,CAAC;gBACvB,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;YACzB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,GAAG,CAAC,uBAAuB,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,aAAa;gBAChB,MAAM,IAAI,wBAAwB,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxE,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAC9C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAChD,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,EAAE;IACF,gBAAgB;IAChB,EAAE;IAEM,cAAc,CAAC,MAAoB;QACzC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,CAAC;QACD,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,gBAAgB,CAAC,KAAiB;;QACxC,OAAO,IAAI,CAAA;;qBAEM,KAAK;uBACH,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC3C,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK;sBACrB,IAAI,CAAC,YAAY;;KAElC,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,MAAoB;QAC7C,OAAO,IAAI,CAAA;;qBAEM,MAAM;uBACJ,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;0BACzC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;sBACvB,IAAI,CAAC,qBAAqB;yBACvB,IAAI,CAAC,eAAe;;KAExC,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;QAC/B,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAAE,OAAO,OAAO,CAAC;QAE5C,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;iBACtC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;iBACzC,IAAI,CAAC,mBAAmB;;UAE/B,UAAU;;KAEf,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;;QACzB,MAAM,MAAM,GAAmB,EAAE,CAAC;QAElC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClC,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrC,0CAA0C;gBAC1C,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,WAAW;oBACpE,SAAS;gBAEX,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,MAAM,IAAI,GAAG;gBACX,WAAW;gBACX,MAAM;gBACN,UAAU;gBACV,SAAS;gBACT,SAAS;gBACT,YAAY;aACb,CAAC;YACF,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;gBACvB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;gBACvC,IAAI,CAAC,GAAG;oBAAE,SAAS;gBACnB,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;oBAAE,SAAS;gBACvC,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;oBAC/D,SAAS;gBACX,IAAI,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ;oBAAE,SAAS;gBAEjD,IACE,GAAG,KAAK,WAAW;oBACnB,IAAI,CAAC,cAAc;oBACnB,MAAM,CAAC,MAAM,CAAC,MAAA,IAAI,CAAC,cAAc,CAAC,SAAS,mCAAI,EAAE,CAAC,CAAC,IAAI,CACrD,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM,CAClC,EACD,CAAC;oBACD,SAAS;gBACX,CAAC;gBAED,MAAM,SAAS,GAAG,GAAkB,CAAC;gBACrC,MAAM,OAAO,GAAG,GAAG,CAAC,OAAmB,CAAC;gBAExC,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;oBACvC,MAAM,mBAAmB,GAAG,MAAA,MAAA,IAAI,CAAC,cAAc,0CAAG,SAAS,CAAC,0CAAG,CAAC,CAAC,GAAG,CAAC,CAAC;oBACtE,IAAI,mBAAmB,IAAI,mBAAmB,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;wBAChE,OAAO,KAAK,CAAC;oBACf,CAAC;oBACD,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC,CAAC;gBAEH,IAAI,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC9B,SAAS;oBACT,kCAAkC;gBACpC,CAAC;qBAAM,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;oBACjE,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC7C,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtE,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClE,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,YAAY,CAClB,SAAsB,EACtB,OAAiB;QAGjB,OAAO;YACL,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;;gBAC3B,IAAI,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACpD,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;oBAC/B,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,gBAAgB,0CAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAChE,IAAI,KAAK;wBAAE,WAAW,GAAG,KAAK,CAAC;gBACjC,CAAC;gBAED,OAAO;oBACL,SAAS;oBACT,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE;oBAChC,WAAW;iBACZ,CAAC;YACJ,CAAC,CAAC;SACW,CAAC;IAClB,CAAC;IAED;;OAEG;IACK,gBAAgB,CACtB,KAAiB,EACjB,OAA4B;QAE5B,IAAI,QAAoB,CAAC;QACzB,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,qDAAqD;YACrD,QAAQ,GAAG,MAAM,CAAC;YAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBAC1C,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK;oBAAE,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC3D,OAAO,CAAC,CAAC;YACX,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,uEAAuE;YACvE,QAAQ,GAAG,UAAU,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG;gBACjB,CAAC,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gBAC9B,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC;aAChD,CAAC;QACJ,CAAC;QAED,IAAI,CAAC,oBAAoB,CACvB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACpB,GAAG,KAAK;YACR,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,MAAM;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,oBAAoB,CAAC,MAA2B;QACtD,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,GAAG,yBAAyB,CAC7C,IAAI,CAAC,cAAc,EACnB,KAAK,CAAC,SAAS,EACf,KAAK,CAAC,MAAM,EACZ,IAAI,CACL,CAAC;QACJ,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,eAAe,EAAE;YAC7D,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACK,YAAY,CAAC,CAA+B;QAClD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC;IAED;;OAEG;IACK,qBAAqB,CAAC,CAA+B;QAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CACzC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACtE,CAAC;QACF,IAAI,aAAa,EAAE,CAAC;YAClB,yEAAyE;YACzE,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC1D,OAAO;QACT,CAAC;QAED,+DAA+D;QAC/D,IAAI,CAAC,WAAW,GAAG;YACjB,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAC5C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;QAEF,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,CAAkC;;QACxD,GAAG,CAAC,4BAA4B,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;QAC5C,MAAA,IAAI,CAAC,UAAU,0CACX,gBAAgB,CAAC,sBAAsB,EACxC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAClB,IAAI,QAAQ,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC;gBAC1B,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;gBACxB,QAA+B,CAAC,KAAK,EAAE,CAAC;YAC3C,CAAC;QACH,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACxD,CAAC;IAED,EAAE;IACF,SAAS;IACT,EAAE;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CT,CAAC;IACJ,CAAC;CACF,CAAA;AAzY6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4C;AAE3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAiC;AAI5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACS;AAEP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAA4B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AAE1B;IAAhB,KAAK,EAAE;oDAA0C;AAEjC;IAAhB,KAAK,EAAE;kDAA0C;AAEjC;IAAhB,KAAK,EAAE;uDAAwD;AArBrD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA0YzB","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n nothing,\n PropertyValues,\n} from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { CollectionTitles } from '../../data-source/models';\nimport type {\n FacetEventDetails,\n FacetOption,\n FacetState,\n SelectedFacets,\n} from '../../models';\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\nimport type { SmartFacet, SmartFacetEvent } from './models';\nimport { smartFacetEquals } from './smart-facet-equals';\nimport { dedupe } from './dedupe';\nimport { log } from '../../utils/log';\nimport filterIcon from '../../assets/img/icons/filter';\n\nimport './smart-facet-button';\nimport './smart-facet-dropdown';\n\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\n collection: 'Collection: ',\n creator: 'By: ',\n subject: 'About: ',\n};\n\nfunction capitalize(str: string) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n @property({ type: String }) query?: string;\n\n @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n /** The map from collection identifiers to their titles */\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) filterToggleShown = false;\n\n @property({ type: Boolean }) filterToggleActive = false;\n\n @property({ type: String }) label?: string;\n\n @state() private heuristicRecs: SmartFacet[] = [];\n\n @state() private smartFacets: SmartFacet[][] = [];\n\n @state() private lastAggregations?: Record<string, Aggregation>;\n\n //\n // COMPONENT LIFECYCLE METHODS\n //\n\n render() {\n if (!this.query) return nothing;\n\n const shouldShowLabel = !!this.label && this.smartFacets.length > 0;\n return html`\n <div id=\"smart-facets-container\">\n ${this.filtersToggleTemplate}\n ${shouldShowLabel\n ? html`<p id=\"filters-label\">${this.label}</p>`\n : nothing}\n ${repeat(\n this.smartFacets,\n f =>\n `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,\n facet => this.makeSmartFacet(facet),\n )}\n </div>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n let shouldUpdateSmartFacets = false;\n\n if (changed.has('query')) {\n log('query change', changed.get('query'), this.query);\n this.lastAggregations = undefined;\n shouldUpdateSmartFacets = true;\n }\n\n if (\n changed.has('aggregations') &&\n !this.lastAggregations &&\n this.aggregations &&\n Object.keys(this.aggregations).length > 0\n ) {\n log('aggs change', changed.get('aggregations'), this.aggregations);\n this.lastAggregations = this.aggregations;\n shouldUpdateSmartFacets = true;\n }\n\n if (shouldUpdateSmartFacets) {\n log('should update smart facets, doing so...');\n this.updateSmartFacets();\n }\n }\n\n refresh(): void {\n this.lastAggregations = this.aggregations;\n this.updateSmartFacets();\n }\n\n deselectAll(): void {\n for (const sf of this.smartFacets) {\n for (const facet of sf) {\n facet.selected = false;\n }\n }\n this.requestUpdate();\n }\n\n private async updateSmartFacets(): Promise<void> {\n log('updating smart facets');\n if (this.query) {\n this.heuristicRecs =\n await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\n log('heuristic recs are', this.heuristicRecs);\n this.smartFacets = dedupe(this.facetsToDisplay);\n log('smart facets are', this.smartFacets);\n }\n }\n\n //\n // OTHER METHODS\n //\n\n private makeSmartFacet(facets: SmartFacet[]) {\n if (facets.length === 0) {\n return nothing;\n }\n if (facets.length === 1) {\n return this.smartFacetButton(facets[0]);\n }\n return this.smartFacetDropdown(facets);\n }\n\n private smartFacetButton(facet: SmartFacet) {\n return html`\n <smart-facet-button\n .facetInfo=${facet}\n .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\n .selected=${facet.selected ?? false}\n @facetClick=${this.facetClicked}\n ></smart-facet-button>\n `;\n }\n\n private smartFacetDropdown(facets: SmartFacet[]) {\n return html`\n <smart-facet-dropdown\n .facetInfo=${facets}\n .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\n .activeFacetRef=${facets[0].facets[0]}\n @facetClick=${this.dropdownOptionClicked}\n @dropdownClick=${this.dropdownClicked}\n ></smart-facet-dropdown>\n `;\n }\n\n private get filtersToggleTemplate(): TemplateResult | typeof nothing {\n if (!this.filterToggleShown) return nothing;\n\n return html`\n <button\n id=\"filters-toggle\"\n class=${this.filterToggleActive ? 'active' : ''}\n title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\n @click=${this.filterToggleClicked}\n >\n ${filterIcon}\n </button>\n `;\n }\n\n private get facetsToDisplay(): SmartFacet[][] {\n const facets: SmartFacet[][] = [];\n\n if (this.heuristicRecs.length > 0) {\n for (const rec of this.heuristicRecs) {\n // Suppress mediatype-only facets for now.\n if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\n continue;\n\n facets.push([rec]);\n }\n }\n\n if (this.lastAggregations) {\n const keys = [\n 'mediatype',\n 'year',\n 'language',\n 'creator',\n 'subject',\n 'collection',\n ];\n for (const key of keys) {\n const agg = this.lastAggregations[key];\n if (!agg) continue;\n if (agg.buckets.length === 0) continue;\n if (['lending', 'year_histogram', 'date_histogram'].includes(key))\n continue;\n if (typeof agg.buckets[0] === 'number') continue;\n\n if (\n key === 'mediatype' &&\n this.selectedFacets &&\n Object.values(this.selectedFacets.mediatype ?? {}).some(\n bucket => bucket.state !== 'none',\n )\n ) {\n continue;\n }\n\n const facetType = key as FacetOption;\n const buckets = agg.buckets as Bucket[];\n\n const unusedBuckets = buckets.filter(b => {\n const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\n if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\n return false;\n }\n return true;\n });\n\n if (facetType === 'mediatype') {\n continue;\n // Don't include mediatype bubbles\n } else if (facetType === 'collection' || facetType === 'subject') {\n const topBuckets = unusedBuckets.slice(0, 5);\n facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\n } else {\n facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\n }\n }\n }\n\n return facets;\n }\n\n private toSmartFacet(\n facetType: FacetOption,\n buckets: Bucket[],\n // prefix = true\n ): SmartFacet {\n return {\n facets: buckets.map(bucket => {\n let displayText = capitalize(bucket.key.toString());\n if (facetType === 'collection') {\n const title = this.collectionTitles?.get(bucket.key.toString());\n if (title) displayText = title;\n }\n\n return {\n facetType,\n bucketKey: bucket.key.toString(),\n displayText,\n };\n }),\n } as SmartFacet;\n }\n\n /**\n * Toggles the state of the given smart facet, and updates the selected facets accordingly.\n */\n private toggleSmartFacet(\n facet: SmartFacet,\n details: FacetEventDetails[],\n ): void {\n let newState: FacetState;\n if (facet.selected) {\n // When deselected, leave the smart facet where it is\n newState = 'none';\n this.smartFacets = this.smartFacets.map(f => {\n if (f[0] === facet) return [{ ...facet, selected: false }];\n return f;\n });\n } else {\n // When selected, move the toggled smart facet to the front of the list\n newState = 'selected';\n this.smartFacets = [\n [{ ...facet, selected: true }],\n ...this.smartFacets.filter(f => f[0] !== facet),\n ];\n }\n\n this.updateSelectedFacets(\n details.map(facet => ({\n ...facet,\n bucket: {\n ...facet.bucket,\n state: newState,\n },\n })),\n );\n }\n\n /**\n * Updates the selected facet buckets for each of the given facets,\n * and emits a `facetsChanged` event to notify parent components of\n * the new state.\n */\n private updateSelectedFacets(facets: FacetEventDetails[]): void {\n for (const facet of facets) {\n this.selectedFacets = updateSelectedFacetBucket(\n this.selectedFacets,\n facet.facetType,\n facet.bucket,\n true,\n );\n }\n\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n detail: this.selectedFacets,\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handler for when a smart facet button is clicked\n */\n private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\n this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);\n }\n\n /**\n * Handler for when an option in a smart facet dropdown menu is selected\n */\n private dropdownOptionClicked(e: CustomEvent<SmartFacetEvent>): void {\n const existingFacet = this.smartFacets.find(\n sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),\n );\n if (existingFacet) {\n // The facet already exists outside the dropdown, so just select it there\n this.toggleSmartFacet(existingFacet[0], e.detail.details);\n return;\n }\n\n // Otherwise, prepend a new smart facet for the selected option\n this.smartFacets = [\n [{ ...e.detail.smartFacet, selected: true }],\n ...this.smartFacets,\n ];\n\n this.updateSelectedFacets(e.detail.details);\n }\n\n /**\n * Handler for when any dropdown is clicked (whether button, caret, or menu item)\n */\n private dropdownClicked(e: CustomEvent<SmartFacetDropdown>): void {\n log('smart bar: onDropdownClick', e.detail);\n this.shadowRoot\n ?.querySelectorAll('smart-facet-dropdown')\n .forEach(dropdown => {\n if (dropdown !== e.detail) {\n log('closing', dropdown);\n (dropdown as SmartFacetDropdown).close();\n }\n });\n }\n\n private filterToggleClicked(): void {\n this.dispatchEvent(new CustomEvent('filtersToggled'));\n }\n\n //\n // STYLES\n //\n\n static get styles(): CSSResultGroup {\n return css`\n #smart-facets-container {\n display: flex;\n align-items: center;\n gap: 5px 10px;\n padding: 10px 0;\n white-space: nowrap;\n overflow: scroll hidden;\n scrollbar-width: none;\n }\n\n #filters-toggle {\n margin: 0;\n border: 0;\n padding: 5px 8px;\n border-radius: 5px;\n background: white;\n color: #2c2c2c;\n border: 1px solid #194880;\n font-size: 1.4rem;\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n }\n\n #filters-toggle.active {\n background: #194880;\n color: white;\n }\n\n #filters-toggle > svg {\n width: 12px;\n filter: invert(0.16667);\n vertical-align: -1px;\n }\n\n #filters-toggle.active > svg {\n filter: invert(1);\n }\n\n #filters-label {\n font-size: 1.4rem;\n font-weight: var(--smartFacetLabelFontWeight, normal);\n margin: 0 -5px 0 0;\n }\n `;\n }\n}\n"]}