@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
package/dist/src/tiles/grid/item-tile.js CHANGED
@@ -46,30 +46,30 @@ let ItemTile = class ItemTile extends BaseTileComponent {
46
46
  'stats-only': this.simpleLayoutType === 'stats-only',
47
47
  'snippets-only': this.simpleLayoutType === 'snippets-only',
48
48
  });
49
- return html `
50
- <div class=${containerClasses}>
51
- ${this.infoButtonTemplate}
52
- <div class="tile-details">
53
- <div class="item-info">
54
- ${this.imageBlockTemplate}
55
-
56
- <div id="title">
57
- <h4 class="truncated" title=${ifDefined(itemTitle)}>
58
- ${itemTitle}
59
- </h4>
60
- </div>
61
-
62
- ${this.volumeIssueTemplate}
49
+ return html `
50
+ <div class=${containerClasses}>
51
+ ${this.infoButtonTemplate}
52
+ <div class="tile-details">
53
+ <div class="item-info">
54
+ ${this.imageBlockTemplate}
55
+
56
+ <div id="title">
57
+ <h3 class="truncated" title=${ifDefined(itemTitle)}>
58
+ ${itemTitle}
59
+ </h3>
60
+ </div>
61
+
62
+ ${this.volumeIssueTemplate}
63
63
  ${this.isSortedByDate
64
64
  ? this.sortedDateInfoTemplate
65
- : this.creatorTemplate}
66
- ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
67
- ${this.reviewBlockTemplate}
68
- </div>
69
-
70
- ${this.tileStatsTemplate}
71
- </div>
72
- </div>
65
+ : this.creatorTemplate}
66
+ ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
67
+ ${this.reviewBlockTemplate}
68
+ </div>
69
+
70
+ ${this.tileStatsTemplate}
71
+ </div>
72
+ </div>
73
73
  `;
74
74
  }
75
75
  /**
@@ -79,26 +79,26 @@ let ItemTile = class ItemTile extends BaseTileComponent {
79
79
  const displayedCreator = this.displayValueProvider.firstCreatorMatchingFilter;
80
80
  if (!displayedCreator)
81
81
  return nothing;
82
- return html `
83
- <div class="created-by">
84
- <span class="truncated" title=${displayedCreator}>
85
- by&nbsp;${displayedCreator}
86
- </span>
87
- </div>
82
+ return html `
83
+ <div class="created-by">
84
+ <span class="truncated" title=${displayedCreator}>
85
+ by&nbsp;${displayedCreator}
86
+ </span>
87
+ </div>
88
88
  `;
89
89
  }
90
90
  get imageBlockTemplate() {
91
- return html `
92
- <image-block
93
- .model=${this.model}
94
- .baseImageUrl=${this.baseImageUrl}
95
- .loggedIn=${this.loggedIn}
96
- .suppressBlurring=${this.suppressBlurring}
97
- .isCompactTile=${false}
98
- .isListTile=${false}
99
- .viewSize=${'grid'}
100
- >
101
- </image-block>
91
+ return html `
92
+ <image-block
93
+ .model=${this.model}
94
+ .baseImageUrl=${this.baseImageUrl}
95
+ .loggedIn=${this.loggedIn}
96
+ .suppressBlurring=${this.suppressBlurring}
97
+ .isCompactTile=${false}
98
+ .isListTile=${false}
99
+ .viewSize=${'grid'}
100
+ >
101
+ </image-block>
102
102
  `;
103
103
  }
104
104
  get sortedDateInfoTemplate() {
@@ -129,20 +129,20 @@ let ItemTile = class ItemTile extends BaseTileComponent {
129
129
  if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
130
130
  return nothing;
131
131
  }
132
- return html `
133
- <div class="date-sorted-by truncated">
134
- <span>
135
- ${sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.field} ${formatDate(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value, format)}
136
- </span>
137
- </div>
132
+ return html `
133
+ <div class="date-sorted-by truncated">
134
+ <span>
135
+ ${sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.field} ${formatDate(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value, format)}
136
+ </span>
137
+ </div>
138
138
  `;
139
139
  }
140
140
  get infoButtonTemplate() {
141
141
  // &#9432; is an information icon
142
142
  return this.showInfoButton
143
- ? html `<button class="info-button" @click=${this.infoButtonPressed}>
144
- &#9432;
145
- <span class="sr-only">${msg('More info')}</span>
143
+ ? html `<button class="info-button" @click=${this.infoButtonPressed}>
144
+ &#9432;
145
+ <span class="sr-only">${msg('More info')}</span>
146
146
  </button>`
147
147
  : nothing;
148
148
  }
@@ -151,47 +151,47 @@ let ItemTile = class ItemTile extends BaseTileComponent {
151
151
  if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.review))
152
152
  return nothing;
153
153
  const { reviewtitle, reviewbody, stars } = this.model.review;
154
- return html `
155
- <review-block
156
- viewsize="grid"
157
- title=${ifDefined(reviewtitle)}
158
- body=${ifDefined(reviewbody)}
159
- starRating=${ifDefined(stars)}
160
- >
161
- </review-block>
154
+ return html `
155
+ <review-block
156
+ viewsize="grid"
157
+ title=${ifDefined(reviewtitle)}
158
+ body=${ifDefined(reviewbody)}
159
+ starRating=${ifDefined(stars)}
160
+ >
161
+ </review-block>
162
162
  `;
163
163
  }
164
164
  get textSnippetsTemplate() {
165
165
  var _a;
166
166
  if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')
167
167
  return nothing;
168
- return html `
169
- <text-snippet-block viewsize="grid" .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}>
170
- </text-snippet-block>
168
+ return html `
169
+ <text-snippet-block viewsize="grid" .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}>
170
+ </text-snippet-block>
171
171
  `;
172
172
  }
173
173
  get volumeIssueTemplate() {
174
174
  var _a, _b, _c, _d;
175
175
  if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
176
176
  return nothing;
177
- return html `
178
- <div class="volume-issue">
179
- <span class="truncated" title="volume|issue">
180
- Volume&nbsp;${(_c = this.model) === null || _c === void 0 ? void 0 : _c.volume}, Issue&nbsp;${(_d = this.model) === null || _d === void 0 ? void 0 : _d.issue}
181
- </span>
182
- </div>
177
+ return html `
178
+ <div class="volume-issue">
179
+ <span class="truncated" title="volume|issue">
180
+ Volume&nbsp;${(_c = this.model) === null || _c === void 0 ? void 0 : _c.volume}, Issue&nbsp;${(_d = this.model) === null || _d === void 0 ? void 0 : _d.issue}
181
+ </span>
182
+ </div>
183
183
  `;
184
184
  }
185
185
  get webArchivesCaptureDatesTemplate() {
186
186
  var _a;
187
187
  if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) || !this.model.title)
188
188
  return nothing;
189
- return html `
190
- <ul class="capture-dates">
191
- ${map(this.model.captureDates, date => html `<li>
192
- ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
193
- </li>`)}
194
- </ul>
189
+ return html `
190
+ <ul class="capture-dates">
191
+ ${map(this.model.captureDates, date => html `<li>
192
+ ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
193
+ </li>`)}
194
+ </ul>
195
195
  `;
196
196
  }
197
197
  /**
@@ -205,18 +205,18 @@ let ItemTile = class ItemTile extends BaseTileComponent {
205
205
  const [viewCount, viewLabel] = (effectiveSort === null || effectiveSort === void 0 ? void 0 : effectiveSort.field) === 'week'
206
206
  ? [(_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount, 'weekly views']
207
207
  : [(_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount, 'all-time views'];
208
- return html `
209
- <tile-stats
210
- .model=${this.model}
211
- .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
212
- .viewCount=${viewCount}
213
- .viewLabel=${viewLabel}
214
- .favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
215
- .commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}
216
- .tvClipCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.tvClipCount}
217
- .showTvClips=${this.showTvClips}
218
- >
219
- </tile-stats>
208
+ return html `
209
+ <tile-stats
210
+ .model=${this.model}
211
+ .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
212
+ .viewCount=${viewCount}
213
+ .viewLabel=${viewLabel}
214
+ .favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
215
+ .commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}
216
+ .tvClipCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.tvClipCount}
217
+ .showTvClips=${this.showTvClips}
218
+ >
219
+ </tile-stats>
220
220
  `;
221
221
  }
222
222
  get isSortedByDate() {
@@ -246,62 +246,62 @@ let ItemTile = class ItemTile extends BaseTileComponent {
246
246
  const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
247
247
  return [
248
248
  baseTileStyles,
249
- css `
250
- a:link {
251
- text-decoration: none;
252
- color: var(--ia-theme-link-color, #4b64ff);
253
- }
254
- a:hover {
255
- text-decoration: underline;
256
- }
257
-
258
- .container {
259
- border: 1px solid ${tileBorderColor};
260
- }
261
-
262
- .simple #title > .truncated {
263
- -webkit-line-clamp: 2;
264
- }
265
-
266
- .simple .created-by > .truncated,
267
- .simple .date-sorted-by > .truncated,
268
- .simple .volume-issue > .truncated {
269
- -webkit-line-clamp: 1;
270
- }
271
-
272
- .simple.snippets-only .item-info {
273
- padding-bottom: 5px;
274
- }
275
-
276
- .simple.snippets-only text-snippet-block {
277
- margin-top: auto; /* Force the snippets to the bottom of the tile */
278
- }
279
-
280
- .capture-dates {
281
- margin: 0;
282
- padding: 0 5px;
283
- list-style-type: none;
284
- }
285
-
286
- review-block,
287
- text-snippet-block {
288
- --containerLeftMargin: 5px;
289
- --containerTopMargin: 5px;
290
- }
291
-
292
- /**
293
- * iOS Safari long-press on tiles (to bring up hover pane)
294
- * gets messy without this
295
- */
296
- @media screen and (pointer: coarse) and (hover: none) {
297
- .container {
298
- -webkit-touch-callout: none;
299
- }
300
-
301
- .truncated {
302
- -webkit-touch-callout: default;
303
- }
304
- }
249
+ css `
250
+ a:link {
251
+ text-decoration: none;
252
+ color: var(--ia-theme-link-color, #4b64ff);
253
+ }
254
+ a:hover {
255
+ text-decoration: underline;
256
+ }
257
+
258
+ .container {
259
+ border: 1px solid ${tileBorderColor};
260
+ }
261
+
262
+ .simple #title > .truncated {
263
+ -webkit-line-clamp: 2;
264
+ }
265
+
266
+ .simple .created-by > .truncated,
267
+ .simple .date-sorted-by > .truncated,
268
+ .simple .volume-issue > .truncated {
269
+ -webkit-line-clamp: 1;
270
+ }
271
+
272
+ .simple.snippets-only .item-info {
273
+ padding-bottom: 5px;
274
+ }
275
+
276
+ .simple.snippets-only text-snippet-block {
277
+ margin-top: auto; /* Force the snippets to the bottom of the tile */
278
+ }
279
+
280
+ .capture-dates {
281
+ margin: 0;
282
+ padding: 0 5px;
283
+ list-style-type: none;
284
+ }
285
+
286
+ review-block,
287
+ text-snippet-block {
288
+ --containerLeftMargin: 5px;
289
+ --containerTopMargin: 5px;
290
+ }
291
+
292
+ /**
293
+ * iOS Safari long-press on tiles (to bring up hover pane)
294
+ * gets messy without this
295
+ */
296
+ @media screen and (pointer: coarse) and (hover: none) {
297
+ .container {
298
+ -webkit-touch-callout: none;
299
+ }
300
+
301
+ .truncated {
302
+ -webkit-touch-callout: default;
303
+ }
304
+ }
305
305
  `,
306
306
  ];
307
307
  }
package/dist/src/tiles/grid/item-tile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { map } from 'lit/directives/map.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { msg } from '@lit/localize';\r\n\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport { DateFormat, formatDate } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\r\n\r\nimport '../image-block';\r\nimport '../review-block';\r\nimport '../text-snippet-block';\r\nimport '../item-image';\r\nimport '../tile-mediatype-icon';\r\nimport './tile-stats';\r\nimport { SimpleLayoutType } from '../models';\r\n\r\n@customElement('item-tile')\r\nexport class ItemTile extends BaseTileComponent {\r\n /*\r\n * Reactive properties inherited from BaseTileComponent:\r\n * - model?: TileModel;\r\n * - currentWidth?: number;\r\n * - currentHeight?: number;\r\n * - baseNavigationUrl?: string;\r\n * - baseImageUrl?: string;\r\n * - collectionPagePath?: string;\r\n * - sortParam: SortParam | null = null;\r\n * - defaultSortParam: SortParam | null = null;\r\n * - creatorFilter?: string;\r\n * - mobileBreakpoint?: number;\r\n * - loggedIn = false;\r\n * - suppressBlurring = false;\r\n */\r\n\r\n @property({ type: Boolean }) showInfoButton = false;\r\n\r\n @property({ type: Boolean }) showTvClips = false;\r\n\r\n @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n render() {\r\n const itemTitle = this.model?.title;\r\n const containerClasses = classMap({\r\n container: true,\r\n simple: this.simpleLayoutType !== 'none',\r\n 'stats-only': this.simpleLayoutType === 'stats-only',\r\n 'snippets-only': this.simpleLayoutType === 'snippets-only',\r\n });\r\n\r\n return html`\r\n <div class=${containerClasses}>\r\n ${this.infoButtonTemplate}\r\n <div class=\"tile-details\">\r\n <div class=\"item-info\">\r\n ${this.imageBlockTemplate}\r\n\r\n <div id=\"title\">\r\n <h4 class=\"truncated\" title=${ifDefined(itemTitle)}>\r\n ${itemTitle}\r\n </h4>\r\n </div>\r\n\r\n ${this.volumeIssueTemplate}\r\n ${this.isSortedByDate\r\n ? this.sortedDateInfoTemplate\r\n : this.creatorTemplate}\r\n ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\r\n ${this.reviewBlockTemplate}\r\n </div>\r\n\r\n ${this.tileStatsTemplate}\r\n </div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Templates\r\n */\r\n private get creatorTemplate(): TemplateResult | typeof nothing {\r\n const displayedCreator =\r\n this.displayValueProvider.firstCreatorMatchingFilter;\r\n if (!displayedCreator) return nothing;\r\n\r\n return html`\r\n <div class=\"created-by\">\r\n <span class=\"truncated\" title=${displayedCreator}>\r\n by&nbsp;${displayedCreator}\r\n </span>\r\n </div>\r\n `;\r\n }\r\n\r\n private get imageBlockTemplate(): TemplateResult {\r\n return html`\r\n <image-block\r\n .model=${this.model}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isCompactTile=${false}\r\n .isListTile=${false}\r\n .viewSize=${'grid'}\r\n >\r\n </image-block>\r\n `;\r\n }\r\n\r\n private get sortedDateInfoTemplate() {\r\n let sortedValue;\r\n let format: DateFormat = 'long';\r\n switch (this.effectiveSort?.field) {\r\n case 'date': {\r\n const datePublished = this.model?.datePublished;\r\n sortedValue = { field: 'published', value: datePublished };\r\n if (isFirstMillisecondOfUTCYear(datePublished)) {\r\n format = 'year-only';\r\n }\r\n break;\r\n }\r\n case 'reviewdate':\r\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\r\n break;\r\n case 'addeddate':\r\n sortedValue = { field: 'added', value: this.model?.dateAdded };\r\n break;\r\n case 'publicdate':\r\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n if (!sortedValue?.value) {\r\n return nothing;\r\n }\r\n return html`\r\n <div class=\"date-sorted-by truncated\">\r\n <span>\r\n ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\r\n </span>\r\n </div>\r\n `;\r\n }\r\n\r\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\r\n // &#9432; is an information icon\r\n return this.showInfoButton\r\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\r\n &#9432;\r\n <span class=\"sr-only\">${msg('More info')}</span>\r\n </button>`\r\n : nothing;\r\n }\r\n\r\n private get reviewBlockTemplate(): TemplateResult | typeof nothing {\r\n if (!this.model?.review) return nothing;\r\n\r\n const { reviewtitle, reviewbody, stars } = this.model.review;\r\n return html`\r\n <review-block\r\n viewsize=\"grid\"\r\n title=${ifDefined(reviewtitle)}\r\n body=${ifDefined(reviewbody)}\r\n starRating=${ifDefined(stars)}\r\n >\r\n </review-block>\r\n `;\r\n }\r\n\r\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\r\n if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')\r\n return nothing;\r\n\r\n return html`\r\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\r\n </text-snippet-block>\r\n `;\r\n }\r\n\r\n private get volumeIssueTemplate(): TemplateResult | typeof nothing {\r\n if (!this.model?.volume || !this.model?.issue) return nothing;\r\n\r\n return html`\r\n <div class=\"volume-issue\">\r\n <span class=\"truncated\" title=\"volume|issue\">\r\n Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\r\n </span>\r\n </div>\r\n `;\r\n }\r\n\r\n private get webArchivesCaptureDatesTemplate():\r\n | TemplateResult\r\n | typeof nothing {\r\n if (!this.model?.captureDates || !this.model.title) return nothing;\r\n\r\n return html`\r\n <ul class=\"capture-dates\">\r\n ${map(\r\n this.model.captureDates,\r\n date =>\r\n html`<li>\r\n ${this.displayValueProvider.webArchivesCaptureLink(\r\n this.model!.title,\r\n date,\r\n )}\r\n </li>`,\r\n )}\r\n </ul>\r\n `;\r\n }\r\n\r\n /**\r\n * Template for the stats row along the bottom of the tile.\r\n */\r\n private get tileStatsTemplate(): TemplateResult | typeof nothing {\r\n if (this.simpleLayoutType === 'snippets-only') return nothing;\r\n\r\n const effectiveSort = this.sortParam ?? this.defaultSortParam;\r\n const [viewCount, viewLabel] =\r\n effectiveSort?.field === 'week'\r\n ? [this.model?.weeklyViewCount, 'weekly views']\r\n : [this.model?.viewCount, 'all-time views'];\r\n\r\n return html`\r\n <tile-stats\r\n .model=${this.model}\r\n .mediatype=${this.model?.mediatype}\r\n .viewCount=${viewCount}\r\n .viewLabel=${viewLabel}\r\n .favCount=${this.model?.favCount}\r\n .commentCount=${this.model?.commentCount}\r\n .tvClipCount=${this.model?.tvClipCount}\r\n .showTvClips=${this.showTvClips}\r\n >\r\n </tile-stats>\r\n `;\r\n }\r\n\r\n private get isSortedByDate(): boolean {\r\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n this.effectiveSort?.field as string,\r\n );\r\n }\r\n\r\n /**\r\n * Returns the active sort param if one is set, or the default sort param otherwise.\r\n */\r\n private get effectiveSort(): SortParam | null {\r\n return this.sortParam ?? this.defaultSortParam;\r\n }\r\n\r\n private get hasSnippets(): boolean {\r\n return !!this.model?.snippets?.length;\r\n }\r\n\r\n private infoButtonPressed(e: PointerEvent): void {\r\n e.preventDefault();\r\n const event = new CustomEvent<{ x: number; y: number }>(\r\n 'infoButtonPressed',\r\n { detail: { x: e.clientX, y: e.clientY } },\r\n );\r\n this.dispatchEvent(event);\r\n }\r\n\r\n /**\r\n * CSS\r\n */\r\n static get styles(): CSSResultGroup {\r\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\r\n\r\n return [\r\n baseTileStyles,\r\n css`\r\n a:link {\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 .container {\r\n border: 1px solid ${tileBorderColor};\r\n }\r\n\r\n .simple #title > .truncated {\r\n -webkit-line-clamp: 2;\r\n }\r\n\r\n .simple .created-by > .truncated,\r\n .simple .date-sorted-by > .truncated,\r\n .simple .volume-issue > .truncated {\r\n -webkit-line-clamp: 1;\r\n }\r\n\r\n .simple.snippets-only .item-info {\r\n padding-bottom: 5px;\r\n }\r\n\r\n .simple.snippets-only text-snippet-block {\r\n margin-top: auto; /* Force the snippets to the bottom of the tile */\r\n }\r\n\r\n .capture-dates {\r\n margin: 0;\r\n padding: 0 5px;\r\n list-style-type: none;\r\n }\r\n\r\n review-block,\r\n text-snippet-block {\r\n --containerLeftMargin: 5px;\r\n --containerTopMargin: 5px;\r\n }\r\n\r\n /**\r\n * iOS Safari long-press on tiles (to bring up hover pane)\r\n * gets messy without this\r\n */\r\n @media screen and (pointer: coarse) and (hover: none) {\r\n .container {\r\n -webkit-touch-callout: none;\r\n }\r\n\r\n .truncated {\r\n -webkit-touch-callout: default;\r\n }\r\n }\r\n `,\r\n ];\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\nimport { SimpleLayoutType } from '../models';\n\n@customElement('item-tile')\nexport class ItemTile extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressBlurring = false;\n */\n\n @property({ type: Boolean }) showInfoButton = false;\n\n @property({ type: Boolean }) showTvClips = false;\n\n @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\n\n render() {\n const itemTitle = this.model?.title;\n const containerClasses = classMap({\n container: true,\n simple: this.simpleLayoutType !== 'none',\n 'stats-only': this.simpleLayoutType === 'stats-only',\n 'snippets-only': this.simpleLayoutType === 'snippets-only',\n });\n\n return html`\n <div class=${containerClasses}>\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h3>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.isSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n </div>\n\n ${this.tileStatsTemplate}\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n const displayedCreator =\n this.displayValueProvider.firstCreatorMatchingFilter;\n if (!displayedCreator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${displayedCreator}>\n by&nbsp;${displayedCreator}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.effectiveSort?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n </span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // &#9432; is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n &#9432;\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { reviewtitle, reviewbody, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"grid\"\n title=${ifDefined(reviewtitle)}\n body=${ifDefined(reviewbody)}\n starRating=${ifDefined(stars)}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')\n return nothing;\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.volume || !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=\"volume|issue\">\n Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\n </span>\n </div>\n `;\n }\n\n private get webArchivesCaptureDatesTemplate():\n | TemplateResult\n | typeof nothing {\n if (!this.model?.captureDates || !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date =>\n html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date,\n )}\n </li>`,\n )}\n </ul>\n `;\n }\n\n /**\n * Template for the stats row along the bottom of the tile.\n */\n private get tileStatsTemplate(): TemplateResult | typeof nothing {\n if (this.simpleLayoutType === 'snippets-only') return nothing;\n\n const effectiveSort = this.sortParam ?? this.defaultSortParam;\n const [viewCount, viewLabel] =\n effectiveSort?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <tile-stats\n .model=${this.model}\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n .tvClipCount=${this.model?.tvClipCount}\n .showTvClips=${this.showTvClips}\n >\n </tile-stats>\n `;\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.effectiveSort?.field as string,\n );\n }\n\n /**\n * Returns the active sort param if one is set, or the default sort param otherwise.\n */\n private get effectiveSort(): SortParam | null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } },\n );\n this.dispatchEvent(event);\n }\n\n /**\n * CSS\n */\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n .simple #title > .truncated {\n -webkit-line-clamp: 2;\n }\n\n .simple .created-by > .truncated,\n .simple .date-sorted-by > .truncated,\n .simple .volume-issue > .truncated {\n -webkit-line-clamp: 1;\n }\n\n .simple.snippets-only .item-info {\n padding-bottom: 5px;\n }\n\n .simple.snippets-only text-snippet-block {\n margin-top: auto; /* Force the snippets to the bottom of the tile */\n }\n\n .capture-dates {\n margin: 0;\n padding: 0 5px;\n list-style-type: none;\n }\n\n review-block,\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /**\n * iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}
package/dist/src/tiles/grid/search-tile.js CHANGED
@@ -48,7 +48,7 @@ let SearchTile = class SearchTile extends BaseTileComponent {
48
48
  get getTitleTemplate() {
49
49
  var _a;
50
50
  return html `<div id="title">
51
- <h4 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h4>
51
+ <h3 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h3>
52
52
  </div>`;
53
53
  }
54
54
  static get styles() {
@@ -67,7 +67,8 @@ let SearchTile = class SearchTile extends BaseTileComponent {
67
67
  flex-grow: initial;
68
68
  }
69
69
 
70
- h4.truncated {
70
+ h4.truncated,
71
+ h3.truncated {
71
72
  color: ${whiteColor};
72
73
  -webkit-line-clamp: 4;
73
74
  }
package/dist/src/tiles/grid/search-tile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"search-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/search-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,gBAAgB,CAAC;AAGjB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,iBAAiB;IAA1C;QACL;;;;;;;;;;;;;WAaG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAiEtD,CAAC;IA/DC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,gBAAgB;;;;KAI5D,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;4BACE,IAAI,CAAC,gBAAgB;;;KAG5C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;WACpC,CAAC;IACV,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAC7D,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;QACrE,MAAM,UAAU,GAAG,GAAG,CAAA,MAAM,CAAC;QAE7B,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,mBAAmB;8BACnB,eAAe;;;;;;;;mBAQ1B,UAAU;;;;;;;;;;;;OAYtB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAwB;AAhBzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAiFtB","sourcesContent":["import { css, CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('search-tile')\nexport class SearchTile extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressBlurring = false;\n */\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n return html`\n <div class=\"container\">\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n </div>\n </div>\n </div>\n `;\n }\n\n private get getImageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .viewSize=${'grid'}\n .suppressBlurring=${this.suppressBlurring}\n >\n </image-block>\n `;\n }\n\n private get getTitleTemplate() {\n return html`<div id=\"title\">\n <h4 class=\"truncated\">${this.model?.title}</h4>\n </div>`;\n }\n\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n const whiteColor = css`#fff`;\n\n return [\n baseTileStyles,\n css`\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px solid ${tileBorderColor};\n }\n\n .item-info {\n flex-grow: initial;\n }\n\n h4.truncated {\n color: ${whiteColor};\n -webkit-line-clamp: 4;\n }\n\n .container:hover > #title {\n text-decoration: underline;\n }\n\n /* this is a workaround for Safari 15 where the hover effects are not working */\n image-block:hover > #title {\n text-decoration: underline;\n }\n `,\n ];\n }\n}\n"]}
1
+ {"version":3,"file":"search-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/search-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,gBAAgB,CAAC;AAGjB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,iBAAiB;IAA1C;QACL;;;;;;;;;;;;;WAaG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAkEtD,CAAC;IAhEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,gBAAgB;;;;KAI5D,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;4BACE,IAAI,CAAC,gBAAgB;;;KAG5C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;WACpC,CAAC;IACV,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAC7D,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;QACrE,MAAM,UAAU,GAAG,GAAG,CAAA,MAAM,CAAC;QAE7B,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,mBAAmB;8BACnB,eAAe;;;;;;;;;mBAS1B,UAAU;;;;;;;;;;;;OAYtB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAwB;AAhBzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkFtB","sourcesContent":["import { css, CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('search-tile')\nexport class SearchTile extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressBlurring = false;\n */\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n return html`\n <div class=\"container\">\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n </div>\n </div>\n </div>\n `;\n }\n\n private get getImageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .viewSize=${'grid'}\n .suppressBlurring=${this.suppressBlurring}\n >\n </image-block>\n `;\n }\n\n private get getTitleTemplate() {\n return html`<div id=\"title\">\n <h3 class=\"truncated\">${this.model?.title}</h3>\n </div>`;\n }\n\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n const whiteColor = css`#fff`;\n\n return [\n baseTileStyles,\n css`\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px solid ${tileBorderColor};\n }\n\n .item-info {\n flex-grow: initial;\n }\n\n h4.truncated,\n h3.truncated {\n color: ${whiteColor};\n -webkit-line-clamp: 4;\n }\n\n .container:hover > #title {\n text-decoration: underline;\n }\n\n /* this is a workaround for Safari 15 where the hover effects are not working */\n image-block:hover > #title {\n text-decoration: underline;\n }\n `,\n ];\n }\n}\n"]}
package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js CHANGED
@@ -69,7 +69,8 @@ export const baseTileStyles = css `
69
69
  -webkit-box-orient: vertical;
70
70
  }
71
71
 
72
- h4.truncated {
72
+ h4.truncated,
73
+ h3.truncated {
73
74
  display: -webkit-box;
74
75
  margin: 0px;
75
76
  line-height: 15px;
package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GpC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { srOnlyStyle } from '../../../styles/sr-only';\n\n/**\n * Base tile styles\n */\n\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\n\nexport const baseTileStyles = css`\n /* Include .sr-only styles for all tiles */\n ${srOnlyStyle}\n\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px #2c2c2c;\n border-radius: ${tileCornerRadius};\n box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);\n box-sizing: border-box;\n height: 100%;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n image-block {\n display: block;\n position: relative;\n text-align: center;\n }\n\n .tile-details {\n display: flex;\n flex-direction: column;\n height: 100%;\n row-gap: 10px;\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n }\n\n .item-info {\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n flex-grow: 1;\n }\n\n #title {\n padding: 0 5px;\n }\n\n .created-by,\n .date-sorted-by,\n .volume-issue,\n .archivist-since {\n display: flex;\n justify-content: left;\n align-items: flex-start;\n padding: 0 5px;\n }\n\n .truncated {\n flex: 1;\n color: #2c2c2c;\n min-width: 0; /* Important for long words! */\n text-align: left;\n line-height: 15px;\n text-overflow: ellipsis;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n }\n\n h4.truncated {\n display: -webkit-box;\n margin: 0px;\n line-height: 15px;\n font-size: 14px;\n font-weight: 500;\n padding-bottom: 1px;\n }\n\n span {\n display: -webkit-box;\n font-size: 1.4rem;\n line-height: 15px;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n padding-bottom: 1px;\n }\n\n .container:hover > .tile-details > .item-info > #title > .truncated {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title:hover > .truncated {\n text-decoration: underline;\n }\n\n .info-button {\n position: absolute;\n right: 10px;\n top: 10px;\n margin: 0;\n padding: 0;\n border: none;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(220, 220, 220, 0.5);\n color: white;\n font-size: 2rem;\n font-weight: bold;\n line-height: 1;\n text-shadow: black 1px 1px 3px;\n overflow: visible;\n aspect-ratio: 1 / 1;\n z-index: 1;\n }\n\n .hidden {\n display: none;\n }\n`;\n"]}
1
+ {"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHpC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { srOnlyStyle } from '../../../styles/sr-only';\n\n/**\n * Base tile styles\n */\n\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\n\nexport const baseTileStyles = css`\n /* Include .sr-only styles for all tiles */\n ${srOnlyStyle}\n\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px #2c2c2c;\n border-radius: ${tileCornerRadius};\n box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);\n box-sizing: border-box;\n height: 100%;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n image-block {\n display: block;\n position: relative;\n text-align: center;\n }\n\n .tile-details {\n display: flex;\n flex-direction: column;\n height: 100%;\n row-gap: 10px;\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n }\n\n .item-info {\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n flex-grow: 1;\n }\n\n #title {\n padding: 0 5px;\n }\n\n .created-by,\n .date-sorted-by,\n .volume-issue,\n .archivist-since {\n display: flex;\n justify-content: left;\n align-items: flex-start;\n padding: 0 5px;\n }\n\n .truncated {\n flex: 1;\n color: #2c2c2c;\n min-width: 0; /* Important for long words! */\n text-align: left;\n line-height: 15px;\n text-overflow: ellipsis;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n }\n\n h4.truncated,\n h3.truncated {\n display: -webkit-box;\n margin: 0px;\n line-height: 15px;\n font-size: 14px;\n font-weight: 500;\n padding-bottom: 1px;\n }\n\n span {\n display: -webkit-box;\n font-size: 1.4rem;\n line-height: 15px;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n padding-bottom: 1px;\n }\n\n .container:hover > .tile-details > .item-info > #title > .truncated {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title:hover > .truncated {\n text-decoration: underline;\n }\n\n .info-button {\n position: absolute;\n right: 10px;\n top: 10px;\n margin: 0;\n padding: 0;\n border: none;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(220, 220, 220, 0.5);\n color: white;\n font-size: 2rem;\n font-weight: bold;\n line-height: 1;\n text-shadow: black 1px 1px 3px;\n overflow: visible;\n aspect-ratio: 1 / 1;\n z-index: 1;\n }\n\n .hidden {\n display: none;\n }\n`;\n"]}
package/dist/src/tiles/hover/hover-pane-controller.js CHANGED
@@ -171,18 +171,18 @@ export class HoverPaneController {
171
171
  var _a, _b, _c, _d, _e, _f, _g;
172
172
  this.hoverPaneProps = this.host.getHoverPaneProps();
173
173
  return this.shouldRenderHoverPane
174
- ? html ` ${this.touchBackdropTemplate}
175
- <tile-hover-pane
176
- popover
177
- .model=${(_a = this.hoverPaneProps) === null || _a === void 0 ? void 0 : _a.model}
178
- .baseNavigationUrl=${(_b = this.hoverPaneProps) === null || _b === void 0 ? void 0 : _b.baseNavigationUrl}
179
- .baseImageUrl=${(_c = this.hoverPaneProps) === null || _c === void 0 ? void 0 : _c.baseImageUrl}
180
- .loggedIn=${(_d = this.hoverPaneProps) === null || _d === void 0 ? void 0 : _d.loggedIn}
181
- .suppressBlurring=${(_e = this.hoverPaneProps) === null || _e === void 0 ? void 0 : _e.suppressBlurring}
182
- .sortParam=${(_f = this.hoverPaneProps) === null || _f === void 0 ? void 0 : _f.sortParam}
183
- .collectionTitles=${(_g = this.hoverPaneProps) === null || _g === void 0 ? void 0 : _g.collectionTitles}
184
- .mobileBreakpoint=${this.mobileBreakpoint}
185
- .currentWidth=${window.innerWidth}
174
+ ? html ` ${this.touchBackdropTemplate}
175
+ <tile-hover-pane
176
+ popover
177
+ .model=${(_a = this.hoverPaneProps) === null || _a === void 0 ? void 0 : _a.model}
178
+ .baseNavigationUrl=${(_b = this.hoverPaneProps) === null || _b === void 0 ? void 0 : _b.baseNavigationUrl}
179
+ .baseImageUrl=${(_c = this.hoverPaneProps) === null || _c === void 0 ? void 0 : _c.baseImageUrl}
180
+ .loggedIn=${(_d = this.hoverPaneProps) === null || _d === void 0 ? void 0 : _d.loggedIn}
181
+ .suppressBlurring=${(_e = this.hoverPaneProps) === null || _e === void 0 ? void 0 : _e.suppressBlurring}
182
+ .sortParam=${(_f = this.hoverPaneProps) === null || _f === void 0 ? void 0 : _f.sortParam}
183
+ .collectionTitles=${(_g = this.hoverPaneProps) === null || _g === void 0 ? void 0 : _g.collectionTitles}
184
+ .mobileBreakpoint=${this.mobileBreakpoint}
185
+ .currentWidth=${window.innerWidth}
186
186
  ></tile-hover-pane>`
187
187
  : nothing;
188
188
  }
@@ -208,15 +208,15 @@ export class HoverPaneController {
208
208
  */
209
209
  get touchBackdropTemplate() {
210
210
  return this.showTouchBackdrop
211
- ? html `<div
212
- id="touch-backdrop"
213
- @touchstart=${this.handleBackdropInteraction}
214
- @touchmove=${this.handleBackdropInteraction}
215
- @touchend=${this.handleBackdropInteraction}
216
- @touchcancel=${this.handleBackdropInteraction}
217
- @mouseenter=${(e) => e.stopPropagation()}
218
- @mousemove=${(e) => e.stopPropagation()}
219
- @mouseleave=${(e) => e.stopPropagation()}
211
+ ? html `<div
212
+ id="touch-backdrop"
213
+ @touchstart=${this.handleBackdropInteraction}
214
+ @touchmove=${this.handleBackdropInteraction}
215
+ @touchend=${this.handleBackdropInteraction}
216
+ @touchcancel=${this.handleBackdropInteraction}
217
+ @mouseenter=${(e) => e.stopPropagation()}
218
+ @mousemove=${(e) => e.stopPropagation()}
219
+ @mouseleave=${(e) => e.stopPropagation()}
220
220
  ></div>`
221
221
  : nothing;
222
222
  }