@internetarchive/collection-browser 0.4.10-alpha.3 → 0.4.11

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 (237) hide show
  1. package/.editorconfig +29 -29
  2. package/.github/workflows/ci.yml +26 -26
  3. package/.github/workflows/gh-pages-main.yml +39 -39
  4. package/.github/workflows/npm-publish.yml +39 -39
  5. package/.github/workflows/pr-preview.yml +38 -38
  6. package/.husky/pre-commit +4 -4
  7. package/LICENSE +661 -661
  8. package/README.md +83 -83
  9. package/dist/index.d.ts +9 -9
  10. package/dist/index.js +9 -9
  11. package/dist/src/app-root.d.ts +50 -50
  12. package/dist/src/app-root.js +278 -278
  13. package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
  14. package/dist/src/assets/img/icons/arrow-left.js +2 -2
  15. package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
  16. package/dist/src/assets/img/icons/arrow-right.js +2 -2
  17. package/dist/src/assets/img/icons/chevron.d.ts +2 -2
  18. package/dist/src/assets/img/icons/chevron.js +2 -2
  19. package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
  20. package/dist/src/assets/img/icons/empty-query.js +2 -2
  21. package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
  22. package/dist/src/assets/img/icons/eye-closed.js +2 -2
  23. package/dist/src/assets/img/icons/eye.d.ts +2 -2
  24. package/dist/src/assets/img/icons/eye.js +2 -2
  25. package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
  26. package/dist/src/assets/img/icons/favorite-filled.js +2 -2
  27. package/dist/src/assets/img/icons/login-required.d.ts +1 -1
  28. package/dist/src/assets/img/icons/login-required.js +2 -2
  29. package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
  30. package/dist/src/assets/img/icons/mediatype/account.js +2 -2
  31. package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
  32. package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
  33. package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
  34. package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
  35. package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
  36. package/dist/src/assets/img/icons/mediatype/data.js +2 -2
  37. package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
  38. package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
  39. package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
  40. package/dist/src/assets/img/icons/mediatype/film.js +2 -2
  41. package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
  42. package/dist/src/assets/img/icons/mediatype/images.js +2 -2
  43. package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
  44. package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
  45. package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
  46. package/dist/src/assets/img/icons/mediatype/software.js +2 -2
  47. package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
  48. package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
  49. package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
  50. package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
  51. package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
  52. package/dist/src/assets/img/icons/mediatype/video.js +2 -2
  53. package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
  54. package/dist/src/assets/img/icons/mediatype/web.js +2 -2
  55. package/dist/src/assets/img/icons/null-result.d.ts +2 -2
  56. package/dist/src/assets/img/icons/null-result.js +2 -2
  57. package/dist/src/assets/img/icons/restricted.d.ts +1 -1
  58. package/dist/src/assets/img/icons/restricted.js +2 -2
  59. package/dist/src/assets/img/icons/reviews.d.ts +1 -1
  60. package/dist/src/assets/img/icons/reviews.js +2 -2
  61. package/dist/src/assets/img/icons/upload.d.ts +1 -1
  62. package/dist/src/assets/img/icons/upload.js +2 -2
  63. package/dist/src/assets/img/icons/views.d.ts +1 -1
  64. package/dist/src/assets/img/icons/views.js +2 -2
  65. package/dist/src/circular-activity-indicator.d.ts +5 -5
  66. package/dist/src/circular-activity-indicator.js +17 -17
  67. package/dist/src/collection-browser.d.ts +279 -279
  68. package/dist/src/collection-browser.js +1156 -1156
  69. package/dist/src/collection-facets/facet-tombstone-row.d.ts +5 -5
  70. package/dist/src/collection-facets/facet-tombstone-row.js +15 -15
  71. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  72. package/dist/src/collection-facets/facets-template.js +125 -125
  73. package/dist/src/collection-facets/more-facets-content.d.ts +75 -75
  74. package/dist/src/collection-facets/more-facets-content.js +340 -340
  75. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  76. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  77. package/dist/src/collection-facets.d.ts +81 -81
  78. package/dist/src/collection-facets.js +375 -375
  79. package/dist/src/empty-placeholder.d.ts +11 -11
  80. package/dist/src/empty-placeholder.js +42 -42
  81. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  82. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  83. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  84. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  85. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  86. package/dist/src/mediatype/mediatype-config.js +85 -85
  87. package/dist/src/models.d.ts +115 -115
  88. package/dist/src/models.js +125 -125
  89. package/dist/src/models.js.map +1 -1
  90. package/dist/src/restoration-state-handler.d.ts +45 -45
  91. package/dist/src/restoration-state-handler.js +230 -230
  92. package/dist/src/sort-filter-bar/alpha-bar-tooltip.d.ts +6 -6
  93. package/dist/src/sort-filter-bar/alpha-bar-tooltip.js +24 -24
  94. package/dist/src/sort-filter-bar/alpha-bar.d.ts +20 -20
  95. package/dist/src/sort-filter-bar/alpha-bar.js +136 -128
  96. package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
  97. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  98. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  99. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  100. package/dist/src/sort-filter-bar/img/list.js +2 -2
  101. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  102. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  103. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  104. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  105. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +108 -113
  106. package/dist/src/sort-filter-bar/sort-filter-bar.js +548 -614
  107. package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
  108. package/dist/src/styles/item-image-styles.d.ts +8 -8
  109. package/dist/src/styles/item-image-styles.js +9 -9
  110. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  111. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  112. package/dist/src/tiles/grid/account-tile.d.ts +20 -20
  113. package/dist/src/tiles/grid/account-tile.js +64 -64
  114. package/dist/src/tiles/grid/collection-tile.d.ts +17 -17
  115. package/dist/src/tiles/grid/collection-tile.js +71 -71
  116. package/dist/src/tiles/grid/item-tile.d.ts +32 -32
  117. package/dist/src/tiles/grid/item-tile.js +126 -129
  118. package/dist/src/tiles/grid/item-tile.js.map +1 -1
  119. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.d.ts +1 -1
  120. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +7 -7
  121. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  122. package/dist/src/tiles/grid/tile-stats.js +40 -40
  123. package/dist/src/tiles/hover/hover-pane-controller.d.ts +219 -219
  124. package/dist/src/tiles/hover/hover-pane-controller.js +352 -352
  125. package/dist/src/tiles/hover/tile-hover-pane.d.ts +15 -15
  126. package/dist/src/tiles/hover/tile-hover-pane.js +38 -38
  127. package/dist/src/tiles/image-block.d.ts +17 -17
  128. package/dist/src/tiles/image-block.js +72 -72
  129. package/dist/src/tiles/item-image.d.ts +35 -35
  130. package/dist/src/tiles/item-image.js +117 -117
  131. package/dist/src/tiles/list/account-label.d.ts +1 -1
  132. package/dist/src/tiles/list/account-label.js +6 -6
  133. package/dist/src/tiles/list/date-label.d.ts +1 -1
  134. package/dist/src/tiles/list/date-label.js +12 -12
  135. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  136. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  137. package/dist/src/tiles/list/tile-list-compact.d.ts +21 -21
  138. package/dist/src/tiles/list/tile-list-compact.js +99 -99
  139. package/dist/src/tiles/list/tile-list.d.ts +55 -55
  140. package/dist/src/tiles/list/tile-list.js +301 -301
  141. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  142. package/dist/src/tiles/mediatype-icon.js +47 -47
  143. package/dist/src/tiles/overlay/icon-overlay.d.ts +10 -10
  144. package/dist/src/tiles/overlay/icon-overlay.js +40 -40
  145. package/dist/src/tiles/overlay/icon-text-overlay.d.ts +9 -9
  146. package/dist/src/tiles/overlay/icon-text-overlay.js +38 -38
  147. package/dist/src/tiles/overlay/text-overlay.d.ts +10 -10
  148. package/dist/src/tiles/overlay/text-overlay.js +42 -42
  149. package/dist/src/tiles/text-snippet-block.d.ts +27 -27
  150. package/dist/src/tiles/text-snippet-block.js +73 -73
  151. package/dist/src/tiles/tile-dispatcher.d.ts +58 -58
  152. package/dist/src/tiles/tile-dispatcher.js +194 -194
  153. package/dist/src/utils/analytics-events.d.ts +22 -22
  154. package/dist/src/utils/analytics-events.js +24 -24
  155. package/dist/src/utils/format-count.d.ts +7 -7
  156. package/dist/src/utils/format-count.js +76 -76
  157. package/dist/src/utils/format-date.d.ts +2 -2
  158. package/dist/src/utils/format-date.js +23 -23
  159. package/dist/src/utils/format-unit-size.d.ts +2 -2
  160. package/dist/src/utils/format-unit-size.js +33 -33
  161. package/dist/test/collection-browser.test.d.ts +1 -1
  162. package/dist/test/collection-browser.test.js +584 -584
  163. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  164. package/dist/test/collection-facets/facets-template.test.js +62 -62
  165. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  166. package/dist/test/collection-facets/more-facets-content.test.js +114 -114
  167. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  168. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  169. package/dist/test/collection-facets.test.d.ts +2 -2
  170. package/dist/test/collection-facets.test.js +460 -460
  171. package/dist/test/empty-placeholder.test.d.ts +1 -1
  172. package/dist/test/empty-placeholder.test.js +33 -33
  173. package/dist/test/icon-overlay.test.d.ts +1 -1
  174. package/dist/test/icon-overlay.test.js +24 -24
  175. package/dist/test/image-block.test.d.ts +1 -1
  176. package/dist/test/image-block.test.js +48 -48
  177. package/dist/test/item-image.test.d.ts +1 -1
  178. package/dist/test/item-image.test.js +84 -84
  179. package/dist/test/mediatype-config.test.d.ts +1 -1
  180. package/dist/test/mediatype-config.test.js +16 -16
  181. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  182. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  183. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  184. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  185. package/dist/test/mocks/mock-search-responses.d.ts +12 -12
  186. package/dist/test/mocks/mock-search-responses.js +341 -341
  187. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  188. package/dist/test/mocks/mock-search-service.js +40 -40
  189. package/dist/test/restoration-state-handler.test.d.ts +1 -1
  190. package/dist/test/restoration-state-handler.test.js +125 -125
  191. package/dist/test/sort-filter-bar/alpha-bar-tooltip.test.d.ts +1 -1
  192. package/dist/test/sort-filter-bar/alpha-bar-tooltip.test.js +12 -12
  193. package/dist/test/sort-filter-bar/alpha-bar.test.d.ts +1 -1
  194. package/dist/test/sort-filter-bar/alpha-bar.test.js +73 -73
  195. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  196. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +197 -208
  197. package/dist/test/sort-filter-bar/sort-filter-bar.test.js.map +1 -1
  198. package/dist/test/text-overlay.test.d.ts +1 -1
  199. package/dist/test/text-overlay.test.js +48 -48
  200. package/dist/test/text-snippet-block.test.d.ts +1 -1
  201. package/dist/test/text-snippet-block.test.js +57 -57
  202. package/dist/test/tile-stats.test.d.ts +1 -1
  203. package/dist/test/tile-stats.test.js +33 -33
  204. package/dist/test/tiles/grid/account-tile.test.d.ts +1 -1
  205. package/dist/test/tiles/grid/account-tile.test.js +76 -76
  206. package/dist/test/tiles/grid/collection-tile.test.d.ts +1 -1
  207. package/dist/test/tiles/grid/collection-tile.test.js +73 -73
  208. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  209. package/dist/test/tiles/grid/item-tile.test.js +158 -158
  210. package/dist/test/tiles/hover/hover-pane-controller.test.d.ts +1 -1
  211. package/dist/test/tiles/hover/hover-pane-controller.test.js +257 -257
  212. package/dist/test/tiles/hover/tile-hover-pane.test.d.ts +1 -1
  213. package/dist/test/tiles/hover/tile-hover-pane.test.js +13 -13
  214. package/dist/test/tiles/list/tile-list-compact.test.d.ts +1 -1
  215. package/dist/test/tiles/list/tile-list-compact.test.js +92 -92
  216. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  217. package/dist/test/tiles/list/tile-list.test.js +163 -163
  218. package/dist/test/tiles/tile-dispatcher.test.d.ts +1 -1
  219. package/dist/test/tiles/tile-dispatcher.test.js +67 -67
  220. package/dist/test/utils/format-count.test.d.ts +1 -1
  221. package/dist/test/utils/format-count.test.js +23 -23
  222. package/dist/test/utils/format-date.test.d.ts +1 -1
  223. package/dist/test/utils/format-date.test.js +17 -17
  224. package/dist/test/utils/format-unit-size.test.d.ts +1 -1
  225. package/dist/test/utils/format-unit-size.test.js +17 -17
  226. package/local.archive.org.cert +86 -86
  227. package/local.archive.org.key +27 -27
  228. package/package.json +3 -4
  229. package/renovate.json +6 -6
  230. package/src/models.ts +6 -6
  231. package/src/sort-filter-bar/alpha-bar.ts +8 -0
  232. package/src/sort-filter-bar/sort-filter-bar.ts +197 -283
  233. package/src/tiles/grid/item-tile.ts +1 -5
  234. package/test/sort-filter-bar/sort-filter-bar.test.ts +39 -56
  235. package/tsconfig.json +21 -21
  236. package/web-dev-server.config.mjs +30 -30
  237. package/web-test-runner.config.mjs +41 -41
@@ -1,16 +1,16 @@
1
- import { __decorate } from "tslib";
2
- import { css, html, LitElement, nothing, } from 'lit';
3
- import { customElement, property } from 'lit/decorators.js';
4
- import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
5
- import { formatUnitSize } from '../../utils/format-unit-size';
6
- import { baseTileStyles } from './styles/tile-grid-shared-styles';
7
- import '../image-block';
8
- let CollectionTile = class CollectionTile extends LitElement {
9
- constructor() {
10
- super(...arguments);
11
- this.showInfoButton = false;
12
- }
13
- render() {
1
+ import { __decorate } from "tslib";
2
+ import { css, html, LitElement, nothing, } from 'lit';
3
+ import { customElement, property } from 'lit/decorators.js';
4
+ import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
5
+ import { formatUnitSize } from '../../utils/format-unit-size';
6
+ import { baseTileStyles } from './styles/tile-grid-shared-styles';
7
+ import '../image-block';
8
+ let CollectionTile = class CollectionTile extends LitElement {
9
+ constructor() {
10
+ super(...arguments);
11
+ this.showInfoButton = false;
12
+ }
13
+ render() {
14
14
  return html `
15
15
  <div class="container">
16
16
  ${this.infoButtonTemplate}
@@ -22,9 +22,9 @@ let CollectionTile = class CollectionTile extends LitElement {
22
22
 
23
23
  ${this.getTileStatsTemplate}
24
24
  </div>
25
- `;
26
- }
27
- get getImageBlockTemplate() {
25
+ `;
26
+ }
27
+ get getImageBlockTemplate() {
28
28
  return html `
29
29
  <image-block
30
30
  .model=${this.model}
@@ -32,15 +32,15 @@ let CollectionTile = class CollectionTile extends LitElement {
32
32
  .viewSize=${'grid'}
33
33
  >
34
34
  </image-block>
35
- `;
36
- }
37
- get getTitleTemplate() {
38
- var _a;
35
+ `;
36
+ }
37
+ get getTitleTemplate() {
38
+ var _a;
39
39
  return html `<div id="title">
40
40
  <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
41
- </div>`;
42
- }
43
- get getTileStatsTemplate() {
41
+ </div>`;
42
+ }
43
+ get getTileStatsTemplate() {
44
44
  return html `
45
45
  <div id="item-stats">
46
46
  <div id="item-mediatype">${collectionIcon}</div>
@@ -49,42 +49,42 @@ let CollectionTile = class CollectionTile extends LitElement {
49
49
  ${this.getItemsTemplate} ${this.getSizeTemplate}
50
50
  </div>
51
51
  </div>
52
- `;
53
- }
54
- get getItemsTemplate() {
55
- var _a, _b;
56
- const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
52
+ `;
53
+ }
54
+ get getItemsTemplate() {
55
+ var _a, _b;
56
+ const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
57
57
  return html `<span id="item-count"
58
58
  >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
59
- >`;
60
- }
61
- get getSizeTemplate() {
62
- var _a, _b;
63
- const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
64
- return collectionSize
65
- ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
66
- : ``;
67
- }
68
- get infoButtonTemplate() {
69
- // &#9432; is an information icon
70
- return this.showInfoButton
59
+ >`;
60
+ }
61
+ get getSizeTemplate() {
62
+ var _a, _b;
63
+ const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
64
+ return collectionSize
65
+ ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
66
+ : ``;
67
+ }
68
+ get infoButtonTemplate() {
69
+ // &#9432; is an information icon
70
+ return this.showInfoButton
71
71
  ? html `<button class="info-button" @click=${this.infoButtonPressed}>
72
72
  &#9432;
73
73
  <span class="sr-only">More info</span>
74
- </button>`
75
- : nothing;
76
- }
77
- infoButtonPressed(e) {
78
- e.preventDefault();
79
- const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
80
- this.dispatchEvent(event);
81
- }
82
- static get styles() {
83
- const tileBorderColor = css `var(--tileBorderColor, #555555)`;
84
- const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
85
- const whiteColor = css `#fff`;
86
- return [
87
- baseTileStyles,
74
+ </button>`
75
+ : nothing;
76
+ }
77
+ infoButtonPressed(e) {
78
+ e.preventDefault();
79
+ const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
80
+ this.dispatchEvent(event);
81
+ }
82
+ static get styles() {
83
+ const tileBorderColor = css `var(--tileBorderColor, #555555)`;
84
+ const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
85
+ const whiteColor = css `#fff`;
86
+ return [
87
+ baseTileStyles,
88
88
  css `
89
89
  .container {
90
90
  background-color: ${tileBackgroundColor};
@@ -127,21 +127,21 @@ let CollectionTile = class CollectionTile extends LitElement {
127
127
  flex-direction: column;
128
128
  margin-left: 10px;
129
129
  }
130
- `,
131
- ];
132
- }
133
- };
134
- __decorate([
135
- property({ type: Object })
136
- ], CollectionTile.prototype, "model", void 0);
137
- __decorate([
138
- property({ type: String })
139
- ], CollectionTile.prototype, "baseImageUrl", void 0);
140
- __decorate([
141
- property({ type: Boolean })
142
- ], CollectionTile.prototype, "showInfoButton", void 0);
143
- CollectionTile = __decorate([
144
- customElement('collection-tile')
145
- ], CollectionTile);
146
- export { CollectionTile };
130
+ `,
131
+ ];
132
+ }
133
+ };
134
+ __decorate([
135
+ property({ type: Object })
136
+ ], CollectionTile.prototype, "model", void 0);
137
+ __decorate([
138
+ property({ type: String })
139
+ ], CollectionTile.prototype, "baseImageUrl", void 0);
140
+ __decorate([
141
+ property({ type: Boolean })
142
+ ], CollectionTile.prototype, "showInfoButton", void 0);
143
+ CollectionTile = __decorate([
144
+ customElement('collection-tile')
145
+ ], CollectionTile);
146
+ export { CollectionTile };
147
147
  //# sourceMappingURL=collection-tile.js.map
@@ -1,32 +1,32 @@
1
- import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
2
- import type { SortParam } from '@internetarchive/search-service';
3
- import type { TileModel } from '../../models';
4
- import '../image-block';
5
- import '../text-snippet-block';
6
- import '../item-image';
7
- import '../mediatype-icon';
8
- import './tile-stats';
9
- export declare class ItemTile extends LitElement {
10
- baseImageUrl?: string;
11
- loggedIn: boolean;
12
- model?: TileModel;
13
- sortParam?: SortParam;
14
- showInfoButton: boolean;
15
- render(): TemplateResult<1>;
16
- /**
17
- * Templates
18
- */
19
- private get creatorTemplate();
20
- private get imageBlockTemplate();
21
- private get sortedDateInfoTemplate();
22
- private get infoButtonTemplate();
23
- private get textSnippetsTemplate();
24
- private get volumeIssueTemplate();
25
- private get doesSortedByDate();
26
- private get hasSnippets();
27
- private infoButtonPressed;
28
- /**
29
- * CSS
30
- */
31
- static get styles(): CSSResultGroup;
32
- }
1
+ import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
2
+ import type { SortParam } from '@internetarchive/search-service';
3
+ import type { TileModel } from '../../models';
4
+ import '../image-block';
5
+ import '../text-snippet-block';
6
+ import '../item-image';
7
+ import '../mediatype-icon';
8
+ import './tile-stats';
9
+ export declare class ItemTile extends LitElement {
10
+ baseImageUrl?: string;
11
+ loggedIn: boolean;
12
+ model?: TileModel;
13
+ sortParam?: SortParam;
14
+ showInfoButton: boolean;
15
+ render(): TemplateResult<1>;
16
+ /**
17
+ * Templates
18
+ */
19
+ private get creatorTemplate();
20
+ private get imageBlockTemplate();
21
+ private get sortedDateInfoTemplate();
22
+ private get infoButtonTemplate();
23
+ private get textSnippetsTemplate();
24
+ private get volumeIssueTemplate();
25
+ private get doesSortedByDate();
26
+ private get hasSnippets();
27
+ private infoButtonPressed;
28
+ /**
29
+ * CSS
30
+ */
31
+ static get styles(): CSSResultGroup;
32
+ }
@@ -1,27 +1,24 @@
1
- import { __decorate } from "tslib";
2
- /* eslint-disable import/no-duplicates */
3
- import { css, html, LitElement, nothing, } from 'lit';
4
- import { customElement, property } from 'lit/decorators.js';
5
- import { ifDefined } from 'lit/directives/if-defined.js';
6
- import { formatDate } from '../../utils/format-date';
7
- import { baseTileStyles } from './styles/tile-grid-shared-styles';
8
- import '../image-block';
9
- import '../text-snippet-block';
10
- import '../item-image';
11
- import '../mediatype-icon';
12
- import './tile-stats';
13
- let ItemTile = class ItemTile extends LitElement {
14
- constructor() {
15
- super(...arguments);
16
- this.loggedIn = false;
17
- this.showInfoButton = false;
18
- }
19
- render() {
20
- var _a, _b, _c, _d, _e, _f, _g;
21
- const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
22
- const viewCount = ((_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.field) === 'week'
23
- ? (_c = this.model) === null || _c === void 0 ? void 0 : _c.weeklyViewCount // weekly views
24
- : (_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount; // all-time views
1
+ import { __decorate } from "tslib";
2
+ /* eslint-disable import/no-duplicates */
3
+ import { css, html, LitElement, nothing, } from 'lit';
4
+ import { customElement, property } from 'lit/decorators.js';
5
+ import { ifDefined } from 'lit/directives/if-defined.js';
6
+ import { formatDate } from '../../utils/format-date';
7
+ import { baseTileStyles } from './styles/tile-grid-shared-styles';
8
+ import '../image-block';
9
+ import '../text-snippet-block';
10
+ import '../item-image';
11
+ import '../mediatype-icon';
12
+ import './tile-stats';
13
+ let ItemTile = class ItemTile extends LitElement {
14
+ constructor() {
15
+ super(...arguments);
16
+ this.loggedIn = false;
17
+ this.showInfoButton = false;
18
+ }
19
+ render() {
20
+ var _a, _b, _c, _d, _e;
21
+ const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
25
22
  return html `
26
23
  <div class="container">
27
24
  ${this.infoButtonTemplate}
@@ -36,39 +33,39 @@ let ItemTile = class ItemTile extends LitElement {
36
33
  </div>
37
34
 
38
35
  ${this.volumeIssueTemplate}
39
- ${this.doesSortedByDate
40
- ? this.sortedDateInfoTemplate
36
+ ${this.doesSortedByDate
37
+ ? this.sortedDateInfoTemplate
41
38
  : this.creatorTemplate}
42
39
  ${this.textSnippetsTemplate}
43
40
  </div>
44
41
 
45
42
  <tile-stats
46
- .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
47
- .viewCount=${viewCount}
48
- .favCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}
49
- .commentCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}
43
+ .mediatype=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}
44
+ .viewCount=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount}
45
+ .favCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.favCount}
46
+ .commentCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.commentCount}
50
47
  >
51
48
  </tile-stats>
52
49
  </div>
53
50
  </div>
54
- `;
55
- }
56
- /**
57
- * Templates
58
- */
59
- get creatorTemplate() {
60
- var _a, _b, _c;
61
- if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator))
62
- return nothing;
51
+ `;
52
+ }
53
+ /**
54
+ * Templates
55
+ */
56
+ get creatorTemplate() {
57
+ var _a, _b, _c;
58
+ if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator))
59
+ return nothing;
63
60
  return html `
64
61
  <div class="created-by">
65
62
  <span class="truncated" title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator)}>
66
63
  by&nbsp;${(_c = this.model) === null || _c === void 0 ? void 0 : _c.creator}
67
64
  </span>
68
65
  </div>
69
- `;
70
- }
71
- get imageBlockTemplate() {
66
+ `;
67
+ }
68
+ get imageBlockTemplate() {
72
69
  return html `
73
70
  <image-block
74
71
  .model=${this.model}
@@ -79,88 +76,88 @@ let ItemTile = class ItemTile extends LitElement {
79
76
  .viewSize=${'grid'}
80
77
  >
81
78
  </image-block>
82
- `;
83
- }
84
- get sortedDateInfoTemplate() {
85
- var _a, _b, _c, _d, _e;
86
- let sortedValue;
87
- switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
88
- case 'date':
89
- sortedValue = { field: 'published', value: (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished };
90
- break;
91
- case 'reviewdate':
92
- sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
93
- break;
94
- case 'addeddate':
95
- sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
96
- break;
97
- case 'publicdate':
98
- sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
99
- break;
100
- default:
101
- break;
102
- }
103
- if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
104
- return nothing;
105
- }
79
+ `;
80
+ }
81
+ get sortedDateInfoTemplate() {
82
+ var _a, _b, _c, _d, _e;
83
+ let sortedValue;
84
+ switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
85
+ case 'date':
86
+ sortedValue = { field: 'published', value: (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished };
87
+ break;
88
+ case 'reviewdate':
89
+ sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
90
+ break;
91
+ case 'addeddate':
92
+ sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
93
+ break;
94
+ case 'publicdate':
95
+ sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
96
+ break;
97
+ default:
98
+ break;
99
+ }
100
+ if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
101
+ return nothing;
102
+ }
106
103
  return html `
107
104
  <div class="date-sorted-by truncated">
108
105
  <span>
109
106
  ${sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.field} ${formatDate(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value, 'long')}
110
107
  </span>
111
108
  </div>
112
- `;
113
- }
114
- get infoButtonTemplate() {
115
- // &#9432; is an information icon
116
- return this.showInfoButton
109
+ `;
110
+ }
111
+ get infoButtonTemplate() {
112
+ // &#9432; is an information icon
113
+ return this.showInfoButton
117
114
  ? html `<button class="info-button" @click=${this.infoButtonPressed}>
118
115
  &#9432;
119
116
  <span class="sr-only">More info</span>
120
- </button>`
121
- : nothing;
122
- }
123
- get textSnippetsTemplate() {
124
- var _a;
125
- if (!this.hasSnippets)
126
- return nothing;
117
+ </button>`
118
+ : nothing;
119
+ }
120
+ get textSnippetsTemplate() {
121
+ var _a;
122
+ if (!this.hasSnippets)
123
+ return nothing;
127
124
  return html `
128
125
  <text-snippet-block viewsize="grid" .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}>
129
126
  </text-snippet-block>
130
- `;
131
- }
132
- get volumeIssueTemplate() {
133
- var _a, _b, _c, _d;
134
- if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
135
- return nothing;
127
+ `;
128
+ }
129
+ get volumeIssueTemplate() {
130
+ var _a, _b, _c, _d;
131
+ if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
132
+ return nothing;
136
133
  return html `
137
134
  <div class="volume-issue">
138
135
  <span class="truncated" title="volume|issue">
139
136
  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}
140
137
  </span>
141
138
  </div>
142
- `;
143
- }
144
- get doesSortedByDate() {
145
- var _a;
146
- return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
147
- }
148
- get hasSnippets() {
149
- var _a, _b;
150
- return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
151
- }
152
- infoButtonPressed(e) {
153
- e.preventDefault();
154
- const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
155
- this.dispatchEvent(event);
156
- }
157
- /**
158
- * CSS
159
- */
160
- static get styles() {
161
- const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
162
- return [
163
- baseTileStyles,
139
+ `;
140
+ }
141
+ get doesSortedByDate() {
142
+ var _a;
143
+ return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
144
+ }
145
+ get hasSnippets() {
146
+ var _a, _b;
147
+ return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
148
+ }
149
+ infoButtonPressed(e) {
150
+ e.preventDefault();
151
+ const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
152
+ this.dispatchEvent(event);
153
+ }
154
+ /**
155
+ * CSS
156
+ */
157
+ static get styles() {
158
+ const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
159
+ return [
160
+ baseTileStyles,
164
161
  css `
165
162
  .container {
166
163
  border: 1px solid ${tileBorderColor};
@@ -184,27 +181,27 @@ let ItemTile = class ItemTile extends LitElement {
184
181
  -webkit-touch-callout: default;
185
182
  }
186
183
  }
187
- `,
188
- ];
189
- }
190
- };
191
- __decorate([
192
- property({ type: String })
193
- ], ItemTile.prototype, "baseImageUrl", void 0);
194
- __decorate([
195
- property({ type: Boolean })
196
- ], ItemTile.prototype, "loggedIn", void 0);
197
- __decorate([
198
- property({ type: Object })
199
- ], ItemTile.prototype, "model", void 0);
200
- __decorate([
201
- property({ type: Object })
202
- ], ItemTile.prototype, "sortParam", void 0);
203
- __decorate([
204
- property({ type: Boolean })
205
- ], ItemTile.prototype, "showInfoButton", void 0);
206
- ItemTile = __decorate([
207
- customElement('item-tile')
208
- ], ItemTile);
209
- export { ItemTile };
184
+ `,
185
+ ];
186
+ }
187
+ };
188
+ __decorate([
189
+ property({ type: String })
190
+ ], ItemTile.prototype, "baseImageUrl", void 0);
191
+ __decorate([
192
+ property({ type: Boolean })
193
+ ], ItemTile.prototype, "loggedIn", void 0);
194
+ __decorate([
195
+ property({ type: Object })
196
+ ], ItemTile.prototype, "model", void 0);
197
+ __decorate([
198
+ property({ type: Object })
199
+ ], ItemTile.prototype, "sortParam", void 0);
200
+ __decorate([
201
+ property({ type: Boolean })
202
+ ], ItemTile.prototype, "showInfoButton", void 0);
203
+ ItemTile = __decorate([
204
+ customElement('item-tile')
205
+ ], ItemTile);
206
+ export { ItemTile };
210
207
  //# sourceMappingURL=item-tile.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: Object }) sortParam?: SortParam;\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n const itemTitle = this.model?.title;\n const viewCount =\n this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h1>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.doesSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.textSnippetsTemplate}\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.creator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n by&nbsp;${this.model?.creator}\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 .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n switch (this.sortParam?.field) {\n case 'date':\n sortedValue = { field: 'published', value: this.model?.datePublished };\n break;\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, 'long')}\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\">More info</span>\n </button>`\n : nothing;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) 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 doesSortedByDate() {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\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 .container {\n border: 1px solid ${tileBorderColor};\n }\n\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"]}
1
+ {"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: Object }) sortParam?: SortParam;\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n const itemTitle = this.model?.title;\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h1>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.doesSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.textSnippetsTemplate}\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .viewCount=${this.model?.viewCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.creator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n by&nbsp;${this.model?.creator}\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 .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n switch (this.sortParam?.field) {\n case 'date':\n sortedValue = { field: 'published', value: this.model?.datePublished };\n break;\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, 'long')}\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\">More info</span>\n </button>`\n : nothing;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) 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 doesSortedByDate() {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\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 .container {\n border: 1px solid ${tileBorderColor};\n }\n\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"]}
@@ -1 +1 @@
1
- export declare const baseTileStyles: import("lit").CSSResult;
1
+ export declare const baseTileStyles: import("lit").CSSResult;
@@ -1,9 +1,9 @@
1
- import { css } from 'lit';
2
- /**
3
- * Base tile styles
4
- */
5
- const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
6
- const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
1
+ import { css } from 'lit';
2
+ /**
3
+ * Base tile styles
4
+ */
5
+ const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
6
+ const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
7
7
  export const baseTileStyles = css `
8
8
  .container {
9
9
  background-color: ${tileBackgroundColor};
@@ -133,5 +133,5 @@ export const baseTileStyles = css `
133
133
  -webkit-clip-path: inset(50%) !important;
134
134
  clip-path: inset(50%) !important;
135
135
  }
136
- `;
136
+ `;
137
137
  //# sourceMappingURL=tile-grid-shared-styles.js.map
@@ -1,10 +1,10 @@
1
- import { CSSResultGroup, LitElement } from 'lit';
2
- export declare class TileStats extends LitElement {
3
- mediatype?: string;
4
- itemCount?: number;
5
- viewCount?: number;
6
- favCount?: number;
7
- commentCount?: number;
8
- render(): import("lit-html").TemplateResult<1>;
9
- static get styles(): CSSResultGroup;
10
- }
1
+ import { CSSResultGroup, LitElement } from 'lit';
2
+ export declare class TileStats extends LitElement {
3
+ mediatype?: string;
4
+ itemCount?: number;
5
+ viewCount?: number;
6
+ favCount?: number;
7
+ commentCount?: number;
8
+ render(): import("lit-html").TemplateResult<1>;
9
+ static get styles(): CSSResultGroup;
10
+ }