@internetarchive/collection-browser 0.3.1-alpha.3 → 0.3.2-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/src/collection-browser.d.ts +6 -0
  2. package/dist/src/collection-browser.js +346 -341
  3. package/dist/src/collection-browser.js.map +1 -1
  4. package/dist/src/collection-facets/facets-template.js +150 -150
  5. package/dist/src/collection-facets/facets-template.js.map +1 -1
  6. package/dist/src/collection-facets/more-facets-content.js +134 -134
  7. package/dist/src/collection-facets/more-facets-content.js.map +1 -1
  8. package/dist/src/collection-facets.d.ts +2 -0
  9. package/dist/src/collection-facets.js +158 -147
  10. package/dist/src/collection-facets.js.map +1 -1
  11. package/dist/src/models.js.map +1 -1
  12. package/dist/src/restoration-state-handler.js.map +1 -1
  13. package/dist/src/tiles/list/tile-list.js +204 -204
  14. package/dist/src/tiles/list/tile-list.js.map +1 -1
  15. package/dist/src/utils/format-count.js.map +1 -1
  16. package/dist/test/collection-browser.test.js +26 -26
  17. package/dist/test/collection-browser.test.js.map +1 -1
  18. package/dist/test/collection-facets.test.js +2 -2
  19. package/dist/test/collection-facets.test.js.map +1 -1
  20. package/package.json +1 -1
  21. package/src/collection-browser.ts +1539 -1530
  22. package/src/collection-facets/facets-template.ts +294 -294
  23. package/src/collection-facets/more-facets-content.ts +518 -518
  24. package/src/collection-facets.ts +582 -569
  25. package/src/models.ts +216 -216
  26. package/src/restoration-state-handler.ts +302 -302
  27. package/src/tiles/list/tile-list.ts +509 -509
  28. package/src/utils/format-count.ts +96 -96
  29. package/test/collection-browser.test.ts +490 -490
  30. package/test/collection-facets.test.ts +510 -510
package/dist/src/collection-facets/facets-template.js CHANGED
@@ -74,8 +74,8 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
74
74
  .sort((a, b) => (a.count < b.count ? 1 : -1)),
75
75
  ...facetsBucket.filter(x => x.state === 'none'),
76
76
  ];
77
- return html `
78
- <div class="facets-on-${this.renderOn}">
77
+ return html `
78
+ <div class="facets-on-${this.renderOn}">
79
79
  ${repeat(facetsBucket, bucket => `${facetGroup.key}:${bucket.key}`, bucket => {
80
80
  var _a, _b;
81
81
  const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;
@@ -85,12 +85,12 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
85
85
  // a static value to use
86
86
  const bucketTextDisplay = facetGroup.key !== 'collection'
87
87
  ? html `${(_a = bucket.displayText) !== null && _a !== void 0 ? _a : bucket.key}`
88
- : html `<a href="/details/${bucket.key}">
89
- <async-collection-name
90
- .collectionNameCache=${this.collectionNameCache}
91
- .identifier=${bucket.key}
92
- placeholder="-"
93
- ></async-collection-name>
88
+ : html `<a href="/details/${bucket.key}">
89
+ <async-collection-name
90
+ .collectionNameCache=${this.collectionNameCache}
91
+ .identifier=${bucket.key}
92
+ placeholder="-"
93
+ ></async-collection-name>
94
94
  </a> `;
95
95
  const facetHidden = bucket.state === 'hidden';
96
96
  const facetSelected = bucket.state === 'selected';
@@ -101,159 +101,159 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
101
101
  const hideText = `Hide ${titleText}`;
102
102
  const unhideText = `Unhide ${titleText}`;
103
103
  const showHideText = facetHidden ? unhideText : hideText;
104
- return html `
105
- <div class="facet-row">
106
- <div class="facet-checkbox">
107
- <input
108
- type="checkbox"
109
- .name=${facetGroup.key}
110
- .value=${bucket.key}
104
+ return html `
105
+ <div class="facet-row">
106
+ <div class="facet-checkbox">
107
+ <input
108
+ type="checkbox"
109
+ .name=${facetGroup.key}
110
+ .value=${bucket.key}
111
111
  @click=${(e) => {
112
112
  this.facetClicked(e, bucket.count, false);
113
- }}
114
- .checked=${facetSelected}
115
- class="select-facet-checkbox"
116
- title=${onlyShowText}
117
- id=${showOnlyCheckboxId}
118
- />
119
- <input
120
- type="checkbox"
121
- id=${negativeCheckboxId}
122
- .name=${facetGroup.key}
123
- .value=${bucket.key}
113
+ }}
114
+ .checked=${facetSelected}
115
+ class="select-facet-checkbox"
116
+ title=${onlyShowText}
117
+ id=${showOnlyCheckboxId}
118
+ />
119
+ <input
120
+ type="checkbox"
121
+ id=${negativeCheckboxId}
122
+ .name=${facetGroup.key}
123
+ .value=${bucket.key}
124
124
  @click=${(e) => {
125
125
  this.facetClicked(e, bucket.count, true);
126
- }}
127
- .checked=${facetHidden}
128
- class="hide-facet-checkbox"
129
- />
130
- <label
131
- for=${negativeCheckboxId}
132
- class="hide-facet-icon${facetHidden ? ' active' : ''}"
133
- title=${showHideText}
134
- >
135
- <span class="eye">${eyeIcon}</span>
136
- <span class="eye-closed">${eyeClosedIcon}</span>
137
- </label>
138
- </div>
139
- <div
140
- for=${showOnlyCheckboxId}
141
- class="facet-info-display"
142
- title=${onlyShowText}
143
- >
144
- <div class="facet-title">${bucketTextDisplay}</div>
145
- <div class="facet-count">${bucket.count}</div>
146
- </div>
147
- </div>
126
+ }}
127
+ .checked=${facetHidden}
128
+ class="hide-facet-checkbox"
129
+ />
130
+ <label
131
+ for=${negativeCheckboxId}
132
+ class="hide-facet-icon${facetHidden ? ' active' : ''}"
133
+ title=${showHideText}
134
+ >
135
+ <span class="eye">${eyeIcon}</span>
136
+ <span class="eye-closed">${eyeClosedIcon}</span>
137
+ </label>
138
+ </div>
139
+ <div
140
+ for=${showOnlyCheckboxId}
141
+ class="facet-info-display"
142
+ title=${onlyShowText}
143
+ >
144
+ <div class="facet-title">${bucketTextDisplay}</div>
145
+ <div class="facet-count">${bucket.count}</div>
146
+ </div>
147
+ </div>
148
148
  `;
149
- })}
150
- </div>
149
+ })}
150
+ </div>
151
151
  `;
152
152
  }
153
153
  render() {
154
154
  return html `${this.getFacetsTemplate(this.facetGroup)}`;
155
155
  }
156
156
  static get styles() {
157
- return css `
158
- @media (max-width: 560px) {
159
- .facets-on-modal {
160
- column-count: 1 !important;
161
- }
162
- }
163
- .facets-on-modal {
164
- column-gap: 15px;
165
- column-count: 3;
166
- }
167
- async-collection-name {
168
- display: contents;
169
- }
170
- ul.facet-list {
171
- list-style: none;
172
- margin: 0;
173
- padding: 0;
174
- }
175
- ul.facet-list li {
176
- margin-bottom: 0.2rem;
177
- display: grid;
178
- }
179
- .facet-checkbox {
180
- margin: 0 5px 0 0;
181
- display: flex;
182
- height: 15px;
183
- }
184
- .facet-checkbox input:first-child {
185
- margin-right: 5px;
186
- }
187
- .facet-checkbox input {
188
- height: 15px;
189
- width: 15px;
190
- margin: 0;
191
- }
192
- .facet-row {
193
- display: flex;
194
- font-weight: 500;
195
- font-size: 1.2rem;
196
- margin: 2.5px auto;
197
- height: auto;
198
- border-top: var(--facet-row-border-top, 1px solid transparent);
199
- border-bottom: var(--facet-row-border-bottom, 1px solid transparent);
200
- overflow: hidden;
201
- }
202
- .facet-info-display {
203
- display: flex;
204
- flex: 1 1 0%;
205
- cursor: pointer;
206
- flex-wrap: wrap;
207
- }
208
- .facet-title {
209
- word-break: break-word;
210
- display: inline-block;
211
- flex: 1 1 0%;
212
- }
213
- .facet-count {
214
- text-align: right;
215
- }
216
- .select-facet-checkbox {
217
- cursor: pointer;
218
- display: inline-block;
219
- }
220
- .hide-facet-checkbox {
221
- display: none;
222
- }
223
- .hide-facet-icon {
224
- width: 15px;
225
- height: 15px;
226
- cursor: pointer;
227
- opacity: 0.3;
228
- display: inline-block;
229
- }
230
- .hide-facet-icon:hover,
231
- .active {
232
- opacity: 1;
233
- }
234
- .hide-facet-icon:hover .eye,
235
- .hide-facet-icon .eye-closed {
236
- display: none;
237
- }
238
- .hide-facet-icon:hover .eye-closed,
239
- .hide-facet-icon.active .eye-closed {
240
- display: inline;
241
- }
242
- .hide-facet-icon.active .eye {
243
- display: none;
244
- }
245
- .sorting-icon {
246
- cursor: pointer;
247
- }
248
-
249
- a:link,
250
- a:visited {
251
- text-decoration: none;
252
- color: var(--ia-theme-link-color, #4b64ff);
253
- }
254
- a:hover {
255
- text-decoration: underline;
256
- }
157
+ return css `
158
+ @media (max-width: 560px) {
159
+ .facets-on-modal {
160
+ column-count: 1 !important;
161
+ }
162
+ }
163
+ .facets-on-modal {
164
+ column-gap: 15px;
165
+ column-count: 3;
166
+ }
167
+ async-collection-name {
168
+ display: contents;
169
+ }
170
+ ul.facet-list {
171
+ list-style: none;
172
+ margin: 0;
173
+ padding: 0;
174
+ }
175
+ ul.facet-list li {
176
+ margin-bottom: 0.2rem;
177
+ display: grid;
178
+ }
179
+ .facet-checkbox {
180
+ margin: 0 5px 0 0;
181
+ display: flex;
182
+ height: 15px;
183
+ }
184
+ .facet-checkbox input:first-child {
185
+ margin-right: 5px;
186
+ }
187
+ .facet-checkbox input {
188
+ height: 15px;
189
+ width: 15px;
190
+ margin: 0;
191
+ }
192
+ .facet-row {
193
+ display: flex;
194
+ font-weight: 500;
195
+ font-size: 1.2rem;
196
+ margin: 2.5px auto;
197
+ height: auto;
198
+ border-top: var(--facet-row-border-top, 1px solid transparent);
199
+ border-bottom: var(--facet-row-border-bottom, 1px solid transparent);
200
+ overflow: hidden;
201
+ }
202
+ .facet-info-display {
203
+ display: flex;
204
+ flex: 1 1 0%;
205
+ cursor: pointer;
206
+ flex-wrap: wrap;
207
+ }
208
+ .facet-title {
209
+ word-break: break-word;
210
+ display: inline-block;
211
+ flex: 1 1 0%;
212
+ }
213
+ .facet-count {
214
+ text-align: right;
215
+ }
216
+ .select-facet-checkbox {
217
+ cursor: pointer;
218
+ display: inline-block;
219
+ }
220
+ .hide-facet-checkbox {
221
+ display: none;
222
+ }
223
+ .hide-facet-icon {
224
+ width: 15px;
225
+ height: 15px;
226
+ cursor: pointer;
227
+ opacity: 0.3;
228
+ display: inline-block;
229
+ }
230
+ .hide-facet-icon:hover,
231
+ .active {
232
+ opacity: 1;
233
+ }
234
+ .hide-facet-icon:hover .eye,
235
+ .hide-facet-icon .eye-closed {
236
+ display: none;
237
+ }
238
+ .hide-facet-icon:hover .eye-closed,
239
+ .hide-facet-icon.active .eye-closed {
240
+ display: inline;
241
+ }
242
+ .hide-facet-icon.active .eye {
243
+ display: none;
244
+ }
245
+ .sorting-icon {
246
+ cursor: pointer;
247
+ }
248
+
249
+ a:link,
250
+ a:visited {
251
+ text-decoration: none;
252
+ color: var(--ia-theme-link-color, #4b64ff);
253
+ }
254
+ a:hover {
255
+ text-decoration: underline;
256
+ }
257
257
  `;
258
258
  }
259
259
  };
package/dist/src/collection-facets/facets-template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAKL,qBAAqB,GACtB,MAAM,WAAW,CAAC;AAGnB,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAUpC,YAAY,CAAC,CAAQ,EAAE,KAAa,EAAE,QAAiB;QAC7D,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QACxC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,YAAY,CAAC,IAAmB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;SAChE;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,IAAmB,EAAE,KAAK,CAAC,CAAC;SACjD;IACH,CAAC;IAEO,YAAY,CAClB,GAAgB,EAChB,KAAa,EACb,KAAa,EACb,QAAiB;QAEjB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,SAAyB,CAAC;QAC9B,IAAI,cAAc,EAAE;YAClB,SAAS,GAAG;gBACV,GAAG,cAAc;aAClB,CAAC;SACH;aAAM;YACL,SAAS,GAAG,qBAAqB,CAAC;SACnC;QACD,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG;YACtB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;YACvC,KAAK;SACS,CAAC;QAEjB,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,cAAc,CAAC,GAAgB,EAAE,KAAa;QACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,SAAyB,CAAC;QAC9B,IAAI,cAAc,EAAE;YAClB,SAAS,GAAG;gBACV,GAAG,cAAc;aAClB,CAAC;SACH;aAAM;YACL,SAAS,GAAG,qBAAqB,CAAC;SACnC;QACD,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,6BAA6B;QACnC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,uBAAuB,EAAE;YACrE,MAAM,EAAE,IAAI,CAAC,cAAc;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,iBAAiB,CAAC,UAAsB;QAC9C,IAAI,YAAY,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAwB,CAAC;QAExD;;;;;WAKG;QACH,YAAY,GAAG;YACb,GAAG,YAAY;iBACZ,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC;iBACnC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,GAAG,YAAY;iBACZ,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC;iBACjC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC;SAChD,CAAC;QAEF,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,QAAQ;UACjC,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE;;YACP,MAAM,kBAAkB,GAAG,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC;YACvE,MAAM,kBAAkB,GAAG,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC;YACtE,sEAAsE;YACtE,yEAAyE;YACzE,wBAAwB;YACxB,MAAM,iBAAiB,GACrB,UAAU,CAAC,GAAG,KAAK,YAAY;gBAC7B,CAAC,CAAC,IAAI,CAAA,GAAG,MAAA,MAAM,CAAC,WAAW,mCAAI,MAAM,CAAC,GAAG,EAAE;gBAC3C,CAAC,CAAC,IAAI,CAAA,qBAAqB,MAAM,CAAC,GAAG;;6CAER,IAAI,CAAC,mBAAmB;oCACjC,MAAM,CAAC,GAAG;;;wBAGtB,CAAC;YACb,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC;YAC9C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;YAClD,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,GAAG,KACjC,MAAA,MAAM,CAAC,WAAW,mCAAI,MAAM,CAAC,GAC/B,EAAE,CAAC;YACH,MAAM,YAAY,GAAG,aAAa;gBAChC,CAAC,CAAC,YAAY,UAAU,CAAC,GAAG,GAAG;gBAC/B,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC;YAC7B,MAAM,QAAQ,GAAG,QAAQ,SAAS,EAAE,CAAC;YACrC,MAAM,UAAU,GAAG,UAAU,SAAS,EAAE,CAAC;YACzC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;YACzD,OAAO,IAAI,CAAA;;;;;4BAKK,UAAU,CAAC,GAAG;6BACb,MAAM,CAAC,GAAG;6BACV,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC5C,CAAC;+BACU,aAAa;;4BAEhB,YAAY;yBACf,kBAAkB;;;;yBAIlB,kBAAkB;4BACf,UAAU,CAAC,GAAG;6BACb,MAAM,CAAC,GAAG;6BACV,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC3C,CAAC;+BACU,WAAW;;;;0BAIhB,kBAAkB;4CACA,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;4BAC5C,YAAY;;wCAEA,OAAO;+CACA,aAAa;;;;wBAIpC,kBAAkB;;0BAEhB,YAAY;;6CAEO,iBAAiB;6CACjB,MAAM,CAAC,KAAK;;;aAG5C,CAAC;QACJ,CAAC,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAwB,CAAC,EAAE,CAAC;IACxE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGT,CAAC;IACJ,CAAC;CACF,CAAA;AArR6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAiC;AAEhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACwB;AARxC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAsR1B;SAtRY,cAAc","sourcesContent":["import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\r\nimport eyeIcon from '../assets/img/icons/eye';\r\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\r\nimport {\r\n FacetGroup,\r\n FacetOption,\r\n FacetBucket,\r\n SelectedFacets,\r\n defaultSelectedFacets,\r\n} from '../models';\r\n\r\n@customElement('facets-template')\r\nexport class FacetsTemplate extends LitElement {\r\n @property({ type: Object }) facetGroup?: FacetGroup;\r\n\r\n @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n @property({ type: String }) renderOn?: string;\r\n\r\n @property({ type: Object })\r\n collectionNameCache?: CollectionNameCacheInterface;\r\n\r\n private facetClicked(e: Event, count: number, negative: boolean) {\r\n const target = e.target as HTMLInputElement;\r\n const { checked, name, value } = target;\r\n if (checked) {\r\n this.facetChecked(name as FacetOption, value, count, negative);\r\n } else {\r\n this.facetUnchecked(name as FacetOption, value);\r\n }\r\n }\r\n\r\n private facetChecked(\r\n key: FacetOption,\r\n value: string,\r\n count: number,\r\n negative: boolean\r\n ) {\r\n const { selectedFacets } = this;\r\n let newFacets: SelectedFacets;\r\n if (selectedFacets) {\r\n newFacets = {\r\n ...selectedFacets,\r\n };\r\n } else {\r\n newFacets = defaultSelectedFacets;\r\n }\r\n newFacets[key][value] = {\r\n state: negative ? 'hidden' : 'selected',\r\n count,\r\n } as FacetBucket;\r\n\r\n this.selectedFacets = newFacets;\r\n this.dispatchSelectedFacetsChanged();\r\n }\r\n\r\n private facetUnchecked(key: FacetOption, value: string) {\r\n const { selectedFacets } = this;\r\n let newFacets: SelectedFacets;\r\n if (selectedFacets) {\r\n newFacets = {\r\n ...selectedFacets,\r\n };\r\n } else {\r\n newFacets = defaultSelectedFacets;\r\n }\r\n delete newFacets[key][value];\r\n\r\n this.selectedFacets = newFacets;\r\n this.dispatchSelectedFacetsChanged();\r\n }\r\n\r\n private dispatchSelectedFacetsChanged() {\r\n const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\r\n detail: this.selectedFacets,\r\n bubbles: true,\r\n composed: true,\r\n });\r\n this.dispatchEvent(event);\r\n }\r\n\r\n private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\r\n let facetsBucket = facetGroup?.buckets as FacetBucket[];\r\n\r\n /**\r\n * sorting FacetBucket before render page / modal\r\n * - first, selected items should be at top having sorted\r\n * - second, suppressed/hidden items should be after selected having sorted\r\n * - and then no-selected / not suppressed items should render having sorted\r\n */\r\n facetsBucket = [\r\n ...facetsBucket\r\n .filter(x => x.state === 'selected')\r\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\r\n ...facetsBucket\r\n .filter(x => x.state === 'hidden')\r\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\r\n ...facetsBucket.filter(x => x.state === 'none'),\r\n ];\r\n\r\n return html`\r\n <div class=\"facets-on-${this.renderOn}\">\r\n ${repeat(\r\n facetsBucket,\r\n bucket => `${facetGroup.key}:${bucket.key}`,\r\n bucket => {\r\n const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\r\n const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\r\n // for collections, we need to asynchronously load the collection name\r\n // so we use the `async-collection-name` widget and for the rest, we have\r\n // a static value to use\r\n const bucketTextDisplay =\r\n facetGroup.key !== 'collection'\r\n ? html`${bucket.displayText ?? bucket.key}`\r\n : html`<a href=\"/details/${bucket.key}\">\r\n <async-collection-name\r\n .collectionNameCache=${this.collectionNameCache}\r\n .identifier=${bucket.key}\r\n placeholder=\"-\"\r\n ></async-collection-name>\r\n </a> `;\r\n const facetHidden = bucket.state === 'hidden';\r\n const facetSelected = bucket.state === 'selected';\r\n const titleText = `${facetGroup.key}: ${\r\n bucket.displayText ?? bucket.key\r\n }`;\r\n const onlyShowText = facetSelected\r\n ? `Show all ${facetGroup.key}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 return html`\r\n <div class=\"facet-row\">\r\n <div class=\"facet-checkbox\">\r\n <input\r\n type=\"checkbox\"\r\n .name=${facetGroup.key}\r\n .value=${bucket.key}\r\n @click=${(e: Event) => {\r\n this.facetClicked(e, bucket.count, false);\r\n }}\r\n .checked=${facetSelected}\r\n class=\"select-facet-checkbox\"\r\n title=${onlyShowText}\r\n id=${showOnlyCheckboxId}\r\n />\r\n <input\r\n type=\"checkbox\"\r\n id=${negativeCheckboxId}\r\n .name=${facetGroup.key}\r\n .value=${bucket.key}\r\n @click=${(e: Event) => {\r\n this.facetClicked(e, bucket.count, 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 >\r\n <span class=\"eye\">${eyeIcon}</span>\r\n <span class=\"eye-closed\">${eyeClosedIcon}</span>\r\n </label>\r\n </div>\r\n <div\r\n for=${showOnlyCheckboxId}\r\n class=\"facet-info-display\"\r\n title=${onlyShowText}\r\n >\r\n <div class=\"facet-title\">${bucketTextDisplay}</div>\r\n <div class=\"facet-count\">${bucket.count}</div>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n )}\r\n </div>\r\n `;\r\n }\r\n\r\n render() {\r\n return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\r\n }\r\n\r\n static get styles(): CSSResultGroup {\r\n return css`\r\n @media (max-width: 560px) {\r\n .facets-on-modal {\r\n column-count: 1 !important;\r\n }\r\n }\r\n .facets-on-modal {\r\n column-gap: 15px;\r\n column-count: 3;\r\n }\r\n async-collection-name {\r\n display: contents;\r\n }\r\n ul.facet-list {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n ul.facet-list li {\r\n margin-bottom: 0.2rem;\r\n display: grid;\r\n }\r\n .facet-checkbox {\r\n margin: 0 5px 0 0;\r\n display: flex;\r\n height: 15px;\r\n }\r\n .facet-checkbox input:first-child {\r\n margin-right: 5px;\r\n }\r\n .facet-checkbox input {\r\n height: 15px;\r\n width: 15px;\r\n margin: 0;\r\n }\r\n .facet-row {\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: var(--facet-row-border-top, 1px solid transparent);\r\n border-bottom: var(--facet-row-border-bottom, 1px solid transparent);\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-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":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport {\n FacetGroup,\n FacetOption,\n FacetBucket,\n SelectedFacets,\n defaultSelectedFacets,\n} from '../models';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n @property({ type: Object }) facetGroup?: FacetGroup;\n\n @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n @property({ type: String }) renderOn?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n private facetClicked(e: Event, count: number, negative: boolean) {\n const target = e.target as HTMLInputElement;\n const { checked, name, value } = target;\n if (checked) {\n this.facetChecked(name as FacetOption, value, count, negative);\n } else {\n this.facetUnchecked(name as FacetOption, value);\n }\n }\n\n private facetChecked(\n key: FacetOption,\n value: string,\n count: number,\n negative: boolean\n ) {\n const { selectedFacets } = this;\n let newFacets: SelectedFacets;\n if (selectedFacets) {\n newFacets = {\n ...selectedFacets,\n };\n } else {\n newFacets = defaultSelectedFacets;\n }\n newFacets[key][value] = {\n state: negative ? 'hidden' : 'selected',\n count,\n } as FacetBucket;\n\n this.selectedFacets = newFacets;\n this.dispatchSelectedFacetsChanged();\n }\n\n private facetUnchecked(key: FacetOption, value: string) {\n const { selectedFacets } = this;\n let newFacets: SelectedFacets;\n if (selectedFacets) {\n newFacets = {\n ...selectedFacets,\n };\n } else {\n newFacets = defaultSelectedFacets;\n }\n delete newFacets[key][value];\n\n this.selectedFacets = newFacets;\n this.dispatchSelectedFacetsChanged();\n }\n\n private dispatchSelectedFacetsChanged() {\n const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n detail: this.selectedFacets,\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(event);\n }\n\n private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\n let facetsBucket = facetGroup?.buckets as FacetBucket[];\n\n /**\n * sorting FacetBucket before render page / modal\n * - first, selected items should be at top having sorted\n * - second, suppressed/hidden items should be after selected having sorted\n * - and then no-selected / not suppressed items should render having sorted\n */\n facetsBucket = [\n ...facetsBucket\n .filter(x => x.state === 'selected')\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\n ...facetsBucket\n .filter(x => x.state === 'hidden')\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\n ...facetsBucket.filter(x => x.state === 'none'),\n ];\n\n return html`\n <div class=\"facets-on-${this.renderOn}\">\n ${repeat(\n facetsBucket,\n bucket => `${facetGroup.key}:${bucket.key}`,\n bucket => {\n const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\n const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\n // for collections, we need to asynchronously load the collection name\n // so we use the `async-collection-name` widget and for the rest, we have\n // a static value to use\n const bucketTextDisplay =\n facetGroup.key !== 'collection'\n ? html`${bucket.displayText ?? bucket.key}`\n : html`<a href=\"/details/${bucket.key}\">\n <async-collection-name\n .collectionNameCache=${this.collectionNameCache}\n .identifier=${bucket.key}\n placeholder=\"-\"\n ></async-collection-name>\n </a> `;\n const facetHidden = bucket.state === 'hidden';\n const facetSelected = bucket.state === 'selected';\n const titleText = `${facetGroup.key}: ${\n bucket.displayText ?? bucket.key\n }`;\n const onlyShowText = facetSelected\n ? `Show all ${facetGroup.key}s`\n : `Only show ${titleText}`;\n const hideText = `Hide ${titleText}`;\n const unhideText = `Unhide ${titleText}`;\n const showHideText = facetHidden ? unhideText : hideText;\n return html`\n <div class=\"facet-row\">\n <div class=\"facet-checkbox\">\n <input\n type=\"checkbox\"\n .name=${facetGroup.key}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, bucket.count, false);\n }}\n .checked=${facetSelected}\n class=\"select-facet-checkbox\"\n title=${onlyShowText}\n id=${showOnlyCheckboxId}\n />\n <input\n type=\"checkbox\"\n id=${negativeCheckboxId}\n .name=${facetGroup.key}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, bucket.count, 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 >\n <span class=\"eye\">${eyeIcon}</span>\n <span class=\"eye-closed\">${eyeClosedIcon}</span>\n </label>\n </div>\n <div\n for=${showOnlyCheckboxId}\n class=\"facet-info-display\"\n title=${onlyShowText}\n >\n <div class=\"facet-title\">${bucketTextDisplay}</div>\n <div class=\"facet-count\">${bucket.count}</div>\n </div>\n </div>\n `;\n }\n )}\n </div>\n `;\n }\n\n render() {\n return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n @media (max-width: 560px) {\n .facets-on-modal {\n column-count: 1 !important;\n }\n }\n .facets-on-modal {\n column-gap: 15px;\n column-count: 3;\n }\n async-collection-name {\n display: contents;\n }\n ul.facet-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n ul.facet-list li {\n margin-bottom: 0.2rem;\n display: grid;\n }\n .facet-checkbox {\n margin: 0 5px 0 0;\n display: flex;\n height: 15px;\n }\n .facet-checkbox input:first-child {\n margin-right: 5px;\n }\n .facet-checkbox input {\n height: 15px;\n width: 15px;\n margin: 0;\n }\n .facet-row {\n display: flex;\n font-weight: 500;\n font-size: 1.2rem;\n margin: 2.5px auto;\n height: auto;\n border-top: var(--facet-row-border-top, 1px solid transparent);\n border-bottom: var(--facet-row-border-bottom, 1px solid transparent);\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-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"]}