@internetarchive/collection-browser 1.1.1-alpha.5 → 1.2.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 (116) hide show
  1. package/dist/index.d.ts +9 -9
  2. package/dist/index.js +9 -9
  3. package/dist/index.js.map +1 -1
  4. package/dist/src/app-root.d.ts +1 -1
  5. package/dist/src/app-root.js +1 -1
  6. package/dist/src/app-root.js.map +1 -1
  7. package/dist/src/collection-browser.d.ts +11 -13
  8. package/dist/src/collection-browser.js +16 -35
  9. package/dist/src/collection-browser.js.map +1 -1
  10. package/dist/src/collection-facets/facets-template.d.ts +1 -1
  11. package/dist/src/collection-facets/facets-template.js +3 -3
  12. package/dist/src/collection-facets/facets-template.js.map +1 -1
  13. package/dist/src/collection-facets/more-facets-content.d.ts +5 -5
  14. package/dist/src/collection-facets/more-facets-content.js +7 -7
  15. package/dist/src/collection-facets/more-facets-content.js.map +1 -1
  16. package/dist/src/collection-facets/more-facets-pagination.js +3 -3
  17. package/dist/src/collection-facets/more-facets-pagination.js.map +1 -1
  18. package/dist/src/collection-facets/toggle-switch.js +1 -1
  19. package/dist/src/collection-facets/toggle-switch.js.map +1 -1
  20. package/dist/src/collection-facets.d.ts +5 -5
  21. package/dist/src/collection-facets.js +10 -10
  22. package/dist/src/collection-facets.js.map +1 -1
  23. package/dist/src/empty-placeholder.js +2 -2
  24. package/dist/src/empty-placeholder.js.map +1 -1
  25. package/dist/src/language-code-handler/language-code-handler.js +1 -1
  26. package/dist/src/language-code-handler/language-code-handler.js.map +1 -1
  27. package/dist/src/mediatype/mediatype-config.js +13 -13
  28. package/dist/src/mediatype/mediatype-config.js.map +1 -1
  29. package/dist/src/restoration-state-handler.d.ts +1 -1
  30. package/dist/src/restoration-state-handler.js +2 -2
  31. package/dist/src/restoration-state-handler.js.map +1 -1
  32. package/dist/src/sort-filter-bar/alpha-bar.d.ts +2 -2
  33. package/dist/src/sort-filter-bar/alpha-bar.js +1 -1
  34. package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
  35. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +2 -2
  36. package/dist/src/sort-filter-bar/sort-filter-bar.js +9 -9
  37. package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
  38. package/dist/src/tiles/grid/account-tile.d.ts +3 -3
  39. package/dist/src/tiles/grid/account-tile.js +3 -3
  40. package/dist/src/tiles/grid/account-tile.js.map +1 -1
  41. package/dist/src/tiles/grid/collection-tile.d.ts +2 -2
  42. package/dist/src/tiles/grid/collection-tile.js +4 -4
  43. package/dist/src/tiles/grid/collection-tile.js.map +1 -1
  44. package/dist/src/tiles/grid/item-tile.d.ts +6 -6
  45. package/dist/src/tiles/grid/item-tile.js +8 -8
  46. package/dist/src/tiles/grid/item-tile.js.map +1 -1
  47. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +1 -1
  48. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map +1 -1
  49. package/dist/src/tiles/grid/tile-stats.js +6 -6
  50. package/dist/src/tiles/grid/tile-stats.js.map +1 -1
  51. package/dist/src/tiles/hover/hover-pane-controller.d.ts +1 -1
  52. package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
  53. package/dist/src/tiles/hover/tile-hover-pane.d.ts +2 -2
  54. package/dist/src/tiles/hover/tile-hover-pane.js +1 -1
  55. package/dist/src/tiles/hover/tile-hover-pane.js.map +1 -1
  56. package/dist/src/tiles/image-block.d.ts +3 -3
  57. package/dist/src/tiles/image-block.js +2 -2
  58. package/dist/src/tiles/image-block.js.map +1 -1
  59. package/dist/src/tiles/item-image.d.ts +1 -1
  60. package/dist/src/tiles/item-image.js +1 -1
  61. package/dist/src/tiles/item-image.js.map +1 -1
  62. package/dist/src/tiles/list/tile-list-compact-header.d.ts +1 -1
  63. package/dist/src/tiles/list/tile-list-compact-header.js +1 -1
  64. package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
  65. package/dist/src/tiles/list/tile-list-compact.d.ts +3 -3
  66. package/dist/src/tiles/list/tile-list-compact.js +6 -6
  67. package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
  68. package/dist/src/tiles/list/tile-list.d.ts +3 -3
  69. package/dist/src/tiles/list/tile-list.js +8 -8
  70. package/dist/src/tiles/list/tile-list.js.map +1 -1
  71. package/dist/src/tiles/mediatype-icon.js +1 -1
  72. package/dist/src/tiles/mediatype-icon.js.map +1 -1
  73. package/dist/src/tiles/overlay/icon-overlay.js +2 -2
  74. package/dist/src/tiles/overlay/icon-overlay.js.map +1 -1
  75. package/dist/src/tiles/overlay/icon-text-overlay.js +2 -2
  76. package/dist/src/tiles/overlay/icon-text-overlay.js.map +1 -1
  77. package/dist/src/tiles/overlay/text-overlay.js +2 -2
  78. package/dist/src/tiles/overlay/text-overlay.js.map +1 -1
  79. package/dist/src/tiles/tile-dispatcher.d.ts +10 -11
  80. package/dist/src/tiles/tile-dispatcher.js +8 -14
  81. package/dist/src/tiles/tile-dispatcher.js.map +1 -1
  82. package/dist/src/utils/format-date.js +2 -3
  83. package/dist/src/utils/format-date.js.map +1 -1
  84. package/index.ts +9 -9
  85. package/package.json +13 -14
  86. package/src/app-root.ts +2 -2
  87. package/src/collection-browser.ts +16 -31
  88. package/src/collection-facets/facets-template.ts +3 -3
  89. package/src/collection-facets/more-facets-content.ts +7 -7
  90. package/src/collection-facets/more-facets-pagination.ts +3 -3
  91. package/src/collection-facets/toggle-switch.ts +1 -1
  92. package/src/collection-facets.ts +10 -10
  93. package/src/empty-placeholder.ts +2 -2
  94. package/src/language-code-handler/language-code-handler.ts +1 -1
  95. package/src/mediatype/mediatype-config.ts +13 -13
  96. package/src/restoration-state-handler.ts +2 -2
  97. package/src/sort-filter-bar/alpha-bar.ts +3 -3
  98. package/src/sort-filter-bar/sort-filter-bar.ts +10 -10
  99. package/src/tiles/grid/account-tile.ts +4 -4
  100. package/src/tiles/grid/collection-tile.ts +5 -5
  101. package/src/tiles/grid/item-tile.ts +10 -10
  102. package/src/tiles/grid/styles/tile-grid-shared-styles.ts +1 -1
  103. package/src/tiles/grid/tile-stats.ts +6 -6
  104. package/src/tiles/hover/hover-pane-controller.ts +1 -1
  105. package/src/tiles/hover/tile-hover-pane.ts +2 -2
  106. package/src/tiles/image-block.ts +3 -3
  107. package/src/tiles/item-image.ts +2 -2
  108. package/src/tiles/list/tile-list-compact-header.ts +2 -2
  109. package/src/tiles/list/tile-list-compact.ts +7 -7
  110. package/src/tiles/list/tile-list.ts +8 -8
  111. package/src/tiles/mediatype-icon.ts +1 -1
  112. package/src/tiles/overlay/icon-overlay.ts +2 -2
  113. package/src/tiles/overlay/icon-text-overlay.ts +2 -2
  114. package/src/tiles/overlay/text-overlay.ts +2 -2
  115. package/src/tiles/tile-dispatcher.ts +10 -13
  116. package/src/utils/format-date.ts +3 -3
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { mediatypeConfig } from '../mediatype/mediatype-config.js';
4
+ import { mediatypeConfig } from '../mediatype/mediatype-config';
5
5
  let MediatypeIcon = class MediatypeIcon extends LitElement {
6
6
  constructor() {
7
7
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IAqEhD,CAAC;IAnEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;iBACzC,MAAM,CAAC,IAAI;kCACM,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BT,CAAC;IACJ,CAAC;CACF,CAAA;AAzE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA0EzB;SA1EY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config.js';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string | undefined;\n\n @property({ type: Array }) collections: string[] | undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private get displayMediatype(): string {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype || '';\n }\n\n render() {\n const config = mediatypeConfig[this.displayMediatype];\n if (!config) {\n return html``;\n }\n\n return html`\n <div\n id=\"icon\"\n class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n title=\"${config.text}\"\n style=\"--iconFillColor: ${config.color}\"\n >\n ${config.icon}\n <p class=\"status-text\">${config.text}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n #icon {\n height: var(--iconHeight, 25px);\n }\n\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n pointer-events: none;\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IAqEhD,CAAC;IAnEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;iBACzC,MAAM,CAAC,IAAI;kCACM,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BT,CAAC;IACJ,CAAC;CACF,CAAA;AAzE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA0EzB;SA1EY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string | undefined;\n\n @property({ type: Array }) collections: string[] | undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private get displayMediatype(): string {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype || '';\n }\n\n render() {\n const config = mediatypeConfig[this.displayMediatype];\n if (!config) {\n return html``;\n }\n\n return html`\n <div\n id=\"icon\"\n class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n title=\"${config.text}\"\n style=\"--iconFillColor: ${config.color}\"\n >\n ${config.icon}\n <p class=\"status-text\">${config.text}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n #icon {\n height: var(--iconHeight, 25px);\n }\n\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n pointer-events: none;\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}
@@ -1,8 +1,8 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { restrictedIcon } from '../../assets/img/icons/restricted.js';
5
- import { loginRequiredIcon } from '../../assets/img/icons/login-required.js';
4
+ import { restrictedIcon } from '../../assets/img/icons/restricted';
5
+ import { loginRequiredIcon } from '../../assets/img/icons/login-required';
6
6
  let IconOverlay = class IconOverlay extends LitElement {
7
7
  constructor() {
8
8
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAG7E,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,kBAAa,GAAG,KAAK,CAAC;IAkDrD,CAAC;IAhDC,MAAM;QACJ,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,QAAQ;QAChD,IAAI,CAAC,WAAW;WACb,CAAC;IACV,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAC7D,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AALxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuDvB;SAvDY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { restrictedIcon } from '../../assets/img/icons/restricted.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required.js';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Boolean }) loginRequired = false;\n\n @property({ type: Boolean }) isCompactTile = false;\n\n render() {\n return html`<div class=\"icon-overlay ${this.getClass}\">\n ${this.iconDisplay}\n </div>`;\n }\n\n private get getClass() {\n return this.isCompactTile ? 'list-compact' : 'list-detail';\n }\n\n private get iconDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`${loginRequiredIcon}`\n : html`${restrictedIcon}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n z-index: 2;\n background-color: rgb(255, 254, 203);\n display: flex;\n justify-content: center;\n border: 1px solid #2c2c2c;\n }\n\n .icon-overlay {\n height: 20px;\n width: 20px;\n padding: 2px;\n padding: 2px;\n }\n\n .list-detail {\n height: 20px;\n width: 20px;\n }\n .list-compact {\n height: 15px;\n width: 15px;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAG1E,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,kBAAa,GAAG,KAAK,CAAC;IAkDrD,CAAC;IAhDC,MAAM;QACJ,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,QAAQ;QAChD,IAAI,CAAC,WAAW;WACb,CAAC;IACV,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAC7D,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AALxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuDvB;SAvDY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Boolean }) loginRequired = false;\n\n @property({ type: Boolean }) isCompactTile = false;\n\n render() {\n return html`<div class=\"icon-overlay ${this.getClass}\">\n ${this.iconDisplay}\n </div>`;\n }\n\n private get getClass() {\n return this.isCompactTile ? 'list-compact' : 'list-detail';\n }\n\n private get iconDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`${loginRequiredIcon}`\n : html`${restrictedIcon}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n z-index: 2;\n background-color: rgb(255, 254, 203);\n display: flex;\n justify-content: center;\n border: 1px solid #2c2c2c;\n }\n\n .icon-overlay {\n height: 20px;\n width: 20px;\n padding: 2px;\n padding: 2px;\n }\n\n .list-detail {\n height: 20px;\n width: 20px;\n }\n .list-compact {\n height: 15px;\n width: 15px;\n }\n `;\n }\n}\n"]}
@@ -1,8 +1,8 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { loginRequiredIcon } from '../../assets/img/icons/login-required.js';
5
- import { restrictedIcon } from '../../assets/img/icons/restricted.js';
4
+ import { loginRequiredIcon } from '../../assets/img/icons/login-required';
5
+ import { restrictedIcon } from '../../assets/img/icons/restricted';
6
6
  let IconTextOverlay = class IconTextOverlay extends LitElement {
7
7
  constructor() {
8
8
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"icon-text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAGtE,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAiErD,CAAC;IA/DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,8BAA8B,CAAC;IACrC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAuB;AAHxC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoE3B;SApEY,eAAe","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required.js';\nimport { restrictedIcon } from '../../assets/img/icons/restricted.js';\n\n@customElement('icon-text-overlay')\nexport class IconTextOverlay extends LitElement {\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Boolean }) loginRequired = false;\n\n render() {\n return html`\n <div class=\"overlay no-preview\">\n <div class=\"icon-overlay\">${this.iconDisplay}</div>\n <p class=\"text-overlay\">${this.textDisplay}</p>\n </div>\n `;\n }\n\n private get iconDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`${loginRequiredIcon}`\n : html`${restrictedIcon}`;\n }\n\n private get textDisplay() {\n return this.loginRequired && !this.loggedIn\n ? 'Log in\\nto view this item'\n : 'Content may be inappropriate';\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n align-items: center;\n display: flex;\n }\n\n .overlay {\n border: 1px solid #2c2c2c;\n border-radius: 1px;\n position: absolute;\n right: 0;\n left: 0;\n width: auto;\n height: auto;\n padding: 5px;\n display: flex;\n align-items: center;\n border-radius: 1px;\n text-align: center;\n }\n\n .icon-overlay {\n width: 40px;\n height: 40px;\n display: inherit;\n }\n .text-overlay {\n margin: 0;\n vertical-align: bottom;\n padding-left: 5px;\n }\n\n .no-preview {\n background-color: #fffecb;\n border: 1px solid #2c2c2c;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"icon-text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAiErD,CAAC;IA/DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,8BAA8B,CAAC;IACrC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAuB;AAHxC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoE3B;SApEY,eAAe","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\n\n@customElement('icon-text-overlay')\nexport class IconTextOverlay extends LitElement {\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Boolean }) loginRequired = false;\n\n render() {\n return html`\n <div class=\"overlay no-preview\">\n <div class=\"icon-overlay\">${this.iconDisplay}</div>\n <p class=\"text-overlay\">${this.textDisplay}</p>\n </div>\n `;\n }\n\n private get iconDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`${loginRequiredIcon}`\n : html`${restrictedIcon}`;\n }\n\n private get textDisplay() {\n return this.loginRequired && !this.loggedIn\n ? 'Log in\\nto view this item'\n : 'Content may be inappropriate';\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n align-items: center;\n display: flex;\n }\n\n .overlay {\n border: 1px solid #2c2c2c;\n border-radius: 1px;\n position: absolute;\n right: 0;\n left: 0;\n width: auto;\n height: auto;\n padding: 5px;\n display: flex;\n align-items: center;\n border-radius: 1px;\n text-align: center;\n }\n\n .icon-overlay {\n width: 40px;\n height: 40px;\n display: inherit;\n }\n .text-overlay {\n margin: 0;\n vertical-align: bottom;\n padding-left: 5px;\n }\n\n .no-preview {\n background-color: #fffecb;\n border: 1px solid #2c2c2c;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n }\n `;\n }\n}\n"]}
@@ -1,8 +1,8 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { loginRequiredIcon } from '../../assets/img/icons/login-required.js';
5
- import { restrictedIcon } from '../../assets/img/icons/restricted.js';
4
+ import { loginRequiredIcon } from '../../assets/img/icons/login-required';
5
+ import { restrictedIcon } from '../../assets/img/icons/restricted';
6
6
  let TextOverlay = class TextOverlay extends LitElement {
7
7
  constructor() {
8
8
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAGtE,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,iBAAY,GAAG,KAAK,CAAC;IA+DpD,CAAC;IA7DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,0BAA0B;YAChC,CAAC,CAAC,IAAI,CAAA,8BAA8B,CAAC;IACzC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAsB;AALvC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB;SApEY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required.js';\nimport { restrictedIcon } from '../../assets/img/icons/restricted.js';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Boolean }) loginRequired = false;\n\n @property({ type: Boolean }) iconRequired = false;\n\n render() {\n return html`\n <div class=\"overlay no-preview\">\n <div class=\"icon-overlay\">${this.iconDisplay}</div>\n <p class=\"text-overlay\">${this.textDisplay}</p>\n </div>\n `;\n }\n\n private get iconDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`${loginRequiredIcon}`\n : html`${restrictedIcon}`;\n }\n\n private get textDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`Log in to view this item`\n : html`Content may be inappropriate`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n align-items: center;\n display: flex;\n }\n\n .overlay {\n border: 1px solid #2c2c2c;\n border-radius: 1px;\n position: absolute;\n right: 0;\n left: 0;\n top: 50%;\n transform: translate(0px, -50%);\n width: auto;\n height: auto;\n padding: 5px;\n background-color: #fffecb;\n display: flex;\n align-items: center;\n border-radius: 1px;\n }\n\n .icon-overlay {\n width: 40px;\n height: 40px;\n display: inherit;\n }\n .text-overlay {\n margin: 0;\n vertical-align: bottom;\n padding-left: 5px;\n text-align: center;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,iBAAY,GAAG,KAAK,CAAC;IA+DpD,CAAC;IA7DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,0BAA0B;YAChC,CAAC,CAAC,IAAI,CAAA,8BAA8B,CAAC;IACzC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAsB;AALvC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB;SApEY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Boolean }) loginRequired = false;\n\n @property({ type: Boolean }) iconRequired = false;\n\n render() {\n return html`\n <div class=\"overlay no-preview\">\n <div class=\"icon-overlay\">${this.iconDisplay}</div>\n <p class=\"text-overlay\">${this.textDisplay}</p>\n </div>\n `;\n }\n\n private get iconDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`${loginRequiredIcon}`\n : html`${restrictedIcon}`;\n }\n\n private get textDisplay() {\n return this.loginRequired && !this.loggedIn\n ? html`Log in to view this item`\n : html`Content may be inappropriate`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n align-items: center;\n display: flex;\n }\n\n .overlay {\n border: 1px solid #2c2c2c;\n border-radius: 1px;\n position: absolute;\n right: 0;\n left: 0;\n top: 50%;\n transform: translate(0px, -50%);\n width: auto;\n height: auto;\n padding: 5px;\n background-color: #fffecb;\n display: flex;\n align-items: center;\n border-radius: 1px;\n }\n\n .icon-overlay {\n width: 40px;\n height: 40px;\n display: inherit;\n }\n .text-overlay {\n margin: 0;\n vertical-align: bottom;\n padding-left: 5px;\n text-align: center;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n }\n `;\n }\n}\n"]}
@@ -2,16 +2,16 @@ import { LitElement, PropertyValues } from 'lit';
2
2
  import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
3
3
  import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
4
4
  import type { SortParam } from '@internetarchive/search-service';
5
- import type { TileDisplayMode, TileModel } from '../models.js';
6
- import './grid/collection-tile.js';
7
- import './grid/item-tile.js';
8
- import './grid/account-tile.js';
9
- import './hover/tile-hover-pane.js';
10
- import './list/tile-list.js';
11
- import './list/tile-list-compact.js';
12
- import './list/tile-list-compact-header.js';
13
- import type { TileHoverPane } from './hover/tile-hover-pane.js';
14
- import { HoverPaneProperties, HoverPaneProviderInterface } from './hover/hover-pane-controller.js';
5
+ import type { TileDisplayMode, TileModel } from '../models';
6
+ import './grid/collection-tile';
7
+ import './grid/item-tile';
8
+ import './grid/account-tile';
9
+ import './hover/tile-hover-pane';
10
+ import './list/tile-list';
11
+ import './list/tile-list-compact';
12
+ import './list/tile-list-compact-header';
13
+ import type { TileHoverPane } from './hover/tile-hover-pane';
14
+ import { HoverPaneProperties, HoverPaneProviderInterface } from './hover/hover-pane-controller';
15
15
  export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface, HoverPaneProviderInterface {
16
16
  tileDisplayMode?: TileDisplayMode;
17
17
  model?: TileModel;
@@ -26,7 +26,6 @@ export declare class TileDispatcher extends LitElement implements SharedResizeOb
26
26
  loggedIn: boolean;
27
27
  /** Whether this tile should include a hover pane at all (for applicable tile modes) */
28
28
  enableHoverPane: boolean;
29
- prerender: boolean;
30
29
  private hoverPaneController?;
31
30
  private container;
32
31
  private hoverPane?;
@@ -3,14 +3,14 @@ import { __decorate } from "tslib";
3
3
  import { css, html, LitElement, nothing } from 'lit';
4
4
  import { customElement, property, query } from 'lit/decorators.js';
5
5
  import { ifDefined } from 'lit/directives/if-defined.js';
6
- import './grid/collection-tile.js';
7
- import './grid/item-tile.js';
8
- import './grid/account-tile.js';
9
- import './hover/tile-hover-pane.js';
10
- import './list/tile-list.js';
11
- import './list/tile-list-compact.js';
12
- import './list/tile-list-compact-header.js';
13
- import { HoverPaneController, } from './hover/hover-pane-controller.js';
6
+ import './grid/collection-tile';
7
+ import './grid/item-tile';
8
+ import './grid/account-tile';
9
+ import './hover/tile-hover-pane';
10
+ import './list/tile-list';
11
+ import './list/tile-list-compact';
12
+ import './list/tile-list-compact-header';
13
+ import { HoverPaneController, } from './hover/hover-pane-controller';
14
14
  let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement {
15
15
  constructor() {
16
16
  super(...arguments);
@@ -18,7 +18,6 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement
18
18
  this.loggedIn = false;
19
19
  /** Whether this tile should include a hover pane at all (for applicable tile modes) */
20
20
  this.enableHoverPane = false;
21
- this.prerender = false;
22
21
  }
23
22
  render() {
24
23
  var _a, _b;
@@ -93,8 +92,6 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement
93
92
  TileDispatcher_1.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]);
94
93
  }
95
94
  get isHoverEnabled() {
96
- if (this.prerender)
97
- return false;
98
95
  return window.matchMedia('(hover: hover)').matches;
99
96
  }
100
97
  /** @inheritdoc */
@@ -319,9 +316,6 @@ __decorate([
319
316
  __decorate([
320
317
  property({ type: Boolean })
321
318
  ], TileDispatcher.prototype, "enableHoverPane", void 0);
322
- __decorate([
323
- property({ type: Boolean })
324
- ], TileDispatcher.prototype, "prerender", void 0);
325
319
  __decorate([
326
320
  query('#container')
327
321
  ], TileDispatcher.prototype, "container", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models.js';\nimport './grid/collection-tile.js';\nimport './grid/item-tile.js';\nimport './grid/account-tile.js';\nimport './hover/tile-hover-pane.js';\nimport './list/tile-list.js';\nimport './list/tile-list-compact.js';\nimport './list/tile-list-compact-header.js';\nimport type { TileHoverPane } from './hover/tile-hover-pane.js';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller.js';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends LitElement\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n @property({ type: Boolean }) enableHoverPane = false;\n\n @property({ type: Boolean }) prerender = false;\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n /** Maps each display mode to whether hover panes should appear in that mode */\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, mobileBreakpoint } = this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=\"${this.linkTileHref}\"\n aria-label=${this.model?.title ?? 'Untitled item'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model })\n )}\n >\n ${this.tile}\n </a>\n `;\n }\n\n private get linkTileHref() {\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n return this.model?.href\n ? `${this.baseNavigationUrl}${this.model?.href}`\n : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;\n }\n\n /**\n * Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n */\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]\n );\n }\n\n private get isHoverEnabled(): boolean {\n if (this.prerender) return false;\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /** @inheritdoc */\n getHoverPane(): TileHoverPane | undefined {\n return this.hoverPane;\n }\n\n /** @inheritdoc */\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n mobileBreakpoint,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .collectionNameCache=${this.collectionNameCache}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .loggedIn=${this.loggedIn}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionNameCache=${this.collectionNameCache}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable:hover {\n box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends LitElement\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n @property({ type: Boolean }) enableHoverPane = false;\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n /** Maps each display mode to whether hover panes should appear in that mode */\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, mobileBreakpoint } = this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=\"${this.linkTileHref}\"\n aria-label=${this.model?.title ?? 'Untitled item'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model })\n )}\n >\n ${this.tile}\n </a>\n `;\n }\n\n private get linkTileHref() {\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n return this.model?.href\n ? `${this.baseNavigationUrl}${this.model?.href}`\n : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;\n }\n\n /**\n * Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n */\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]\n );\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /** @inheritdoc */\n getHoverPane(): TileHoverPane | undefined {\n return this.hoverPane;\n }\n\n /** @inheritdoc */\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n mobileBreakpoint,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .collectionNameCache=${this.collectionNameCache}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .loggedIn=${this.loggedIn}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionNameCache=${this.collectionNameCache}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable:hover {\n box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `;\n }\n}\n"]}
@@ -2,9 +2,8 @@ export function formatDate(date, format = 'short', locale = 'en-US') {
2
2
  // Return blank if undefined
3
3
  if (!date)
4
4
  return '';
5
- const options = {
6
- timeZone: 'UTC', // Override browser timezone
7
- };
5
+ // the date is already in UTC timezone so we should not add timeZone here again.
6
+ const options = {};
8
7
  switch (format) {
9
8
  case 'year-only':
10
9
  options.year = 'numeric';
@@ -1 +1 @@
1
- {"version":3,"file":"format-date.js","sourceRoot":"","sources":["../../../src/utils/format-date.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,UAAU,CACxB,IAAsB,EACtB,SAAqB,OAAO,EAC5B,SAAiB,OAAO;IAExB,4BAA4B;IAC5B,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,MAAM,OAAO,GAA+B;QAC1C,QAAQ,EAAE,KAAK,EAAE,4BAA4B;KAC9C,CAAC;IACF,QAAQ,MAAM,EAAE;QACd,KAAK,WAAW;YACd,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,MAAM;QACR,KAAK,OAAO;YACV,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,MAAM;QACR,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;YACxB,MAAM;QACR;YACE,MAAM;KACT;IAED,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/D,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC","sourcesContent":["/*\n * Display date\n * Override browser timezone to always display same date as in data\n */\nexport type DateFormat =\n | 'year-only' // 2020\n | 'short' // Dec 2020\n | 'long'; // Dec 20, 2020\n\nexport function formatDate(\n date: Date | undefined,\n format: DateFormat = 'short',\n locale: string = 'en-US'\n): string {\n // Return blank if undefined\n if (!date) return '';\n\n const options: Intl.DateTimeFormatOptions = {\n timeZone: 'UTC', // Override browser timezone\n };\n switch (format) {\n case 'year-only':\n options.year = 'numeric';\n break;\n case 'short':\n options.month = 'short';\n options.year = 'numeric';\n break;\n case 'long':\n options.year = 'numeric';\n options.month = 'short';\n options.day = '2-digit';\n break;\n default:\n break;\n }\n\n const dateFormatter = new Intl.DateTimeFormat(locale, options);\n return dateFormatter.format(date);\n}\n"]}
1
+ {"version":3,"file":"format-date.js","sourceRoot":"","sources":["../../../src/utils/format-date.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,UAAU,CACxB,IAAsB,EACtB,SAAqB,OAAO,EAC5B,SAAiB,OAAO;IAExB,4BAA4B;IAC5B,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,gFAAgF;IAChF,MAAM,OAAO,GAA+B,EAAE,CAAC;IAE/C,QAAQ,MAAM,EAAE;QACd,KAAK,WAAW;YACd,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,MAAM;QACR,KAAK,OAAO;YACV,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,MAAM;QACR,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;YACxB,MAAM;QACR;YACE,MAAM;KACT;IAED,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/D,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC","sourcesContent":["/*\n * Display date\n * Override browser timezone to always display same date as in data\n */\nexport type DateFormat =\n | 'year-only' // 2020\n | 'short' // Dec 2020\n | 'long'; // Dec 20, 2020\n\nexport function formatDate(\n date: Date | undefined,\n format: DateFormat = 'short',\n locale: string = 'en-US'\n): string {\n // Return blank if undefined\n if (!date) return '';\n\n // the date is already in UTC timezone so we should not add timeZone here again.\n const options: Intl.DateTimeFormatOptions = {};\n\n switch (format) {\n case 'year-only':\n options.year = 'numeric';\n break;\n case 'short':\n options.month = 'short';\n options.year = 'numeric';\n break;\n case 'long':\n options.year = 'numeric';\n options.month = 'short';\n options.day = '2-digit';\n break;\n default:\n break;\n }\n\n const dateFormatter = new Intl.DateTimeFormat(locale, options);\n return dateFormatter.format(date);\n}\n"]}
package/index.ts CHANGED
@@ -1,9 +1,9 @@
1
- export { CollectionBrowser } from './src/collection-browser.js';
2
- export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar.js';
3
- export { CollectionDisplayMode } from './src/models.js';
4
- export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile.js';
5
- export { CollectionTile } from './src/tiles/grid/collection-tile.js';
6
- export { AccountTile } from './src/tiles/grid/account-tile.js';
7
- export { ItemTile } from './src/tiles/grid/item-tile.js';
8
- export { TileList } from './src/tiles/list/tile-list.js';
9
- export { TileListCompact } from './src/tiles/list/tile-list-compact.js';
1
+ export { CollectionBrowser } from './src/collection-browser';
2
+ export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
3
+ export { CollectionDisplayMode } from './src/models';
4
+ export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
5
+ export { CollectionTile } from './src/tiles/grid/collection-tile';
6
+ export { AccountTile } from './src/tiles/grid/account-tile';
7
+ export { ItemTile } from './src/tiles/grid/item-tile';
8
+ export { TileList } from './src/tiles/list/tile-list';
9
+ export { TileListCompact } from './src/tiles/list/tile-list-compact';
package/package.json CHANGED
@@ -3,10 +3,9 @@
3
3
  "description": "The Internet Archive Collection Browser.",
4
4
  "license": "AGPL-3.0-only",
5
5
  "author": "Internet Archive",
6
- "version": "1.1.1-alpha.5",
6
+ "version": "1.2.0",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
- "type": "module",
10
9
  "scripts": {
11
10
  "start": "yarn run prepare && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
12
11
  "prepare:ghpages": "rimraf ghpages && yarn run prepare && vite build",
@@ -23,18 +22,18 @@
23
22
  },
24
23
  "types": "dist/index.d.ts",
25
24
  "dependencies": {
26
- "@internetarchive/analytics-manager": "^0.1.3-alpha.1",
27
- "@internetarchive/collection-name-cache": "^0.2.8-alpha.3",
28
- "@internetarchive/feature-feedback": "^0.1.5-alpha.1",
29
- "@internetarchive/field-parsers": "^0.1.4-alpha.1",
30
- "@internetarchive/histogram-date-range": "^1.1.1-alpha.2",
31
- "@internetarchive/ia-activity-indicator": "^0.0.5-alpha.1",
32
- "@internetarchive/ia-dropdown": "^1.1.1-alpha.1",
33
- "@internetarchive/infinite-scroller": "^0.1.5-alpha.3",
34
- "@internetarchive/local-cache": "^0.2.2-alpha.1",
35
- "@internetarchive/modal-manager": "^0.2.9-alpha.1",
36
- "@internetarchive/search-service": "^0.4.8-alpha.5",
37
- "@internetarchive/shared-resize-observer": "^0.2.1-alpha.1",
25
+ "@internetarchive/analytics-manager": "^0.1.2",
26
+ "@internetarchive/collection-name-cache": "^0.2.7",
27
+ "@internetarchive/feature-feedback": "^0.1.4",
28
+ "@internetarchive/field-parsers": "^0.1.3",
29
+ "@internetarchive/histogram-date-range": "^1.1.0",
30
+ "@internetarchive/ia-activity-indicator": "^0.0.4",
31
+ "@internetarchive/ia-dropdown": "^1.1.0",
32
+ "@internetarchive/infinite-scroller": "^0.1.4",
33
+ "@internetarchive/local-cache": "^0.2.1",
34
+ "@internetarchive/modal-manager": "^0.2.8",
35
+ "@internetarchive/search-service": "^0.4.7",
36
+ "@internetarchive/shared-resize-observer": "^0.2.0",
38
37
  "@lit/localize": "^0.11.2",
39
38
  "dompurify": "^2.3.6",
40
39
  "eslint-plugin-lit": "^1.6.1",
package/src/app-root.ts CHANGED
@@ -17,9 +17,9 @@ import { CollectionNameCache } from '@internetarchive/collection-name-cache';
17
17
 
18
18
  import type { ModalManagerInterface } from '@internetarchive/modal-manager';
19
19
  import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
20
- import type { CollectionBrowser } from '../src/collection-browser.js';
20
+ import type { CollectionBrowser } from '../src/collection-browser';
21
21
 
22
- import '../src/collection-browser.js';
22
+ import '../src/collection-browser';
23
23
 
24
24
  @customElement('app-root')
25
25
  export class AppRoot extends LitElement {
@@ -37,12 +37,12 @@ import type { CollectionNameCacheInterface } from '@internetarchive/collection-n
37
37
  import type { ModalManagerInterface } from '@internetarchive/modal-manager';
38
38
  import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
39
39
  import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
40
- import './tiles/tile-dispatcher.js';
41
- import './tiles/collection-browser-loading-tile.js';
42
- import './sort-filter-bar/sort-filter-bar.js';
43
- import './collection-facets.js';
44
- import './circular-activity-indicator.js';
45
- import './sort-filter-bar/sort-filter-bar.js';
40
+ import './tiles/tile-dispatcher';
41
+ import './tiles/collection-browser-loading-tile';
42
+ import './sort-filter-bar/sort-filter-bar';
43
+ import './collection-facets';
44
+ import './circular-activity-indicator';
45
+ import './sort-filter-bar/sort-filter-bar';
46
46
  import {
47
47
  SelectedFacets,
48
48
  SortField,
@@ -56,21 +56,21 @@ import {
56
56
  PrefixFilterCounts,
57
57
  prefixFilterAggregationKeys,
58
58
  FacetEventDetails,
59
- } from './models.js';
59
+ } from './models';
60
60
  import {
61
61
  RestorationStateHandlerInterface,
62
62
  RestorationStateHandler,
63
63
  RestorationState,
64
- } from './restoration-state-handler.js';
65
- import chevronIcon from './assets/img/icons/chevron.js';
66
- import type { PlaceholderType } from './empty-placeholder.js';
67
- import './empty-placeholder.js';
64
+ } from './restoration-state-handler';
65
+ import chevronIcon from './assets/img/icons/chevron';
66
+ import type { PlaceholderType } from './empty-placeholder';
67
+ import './empty-placeholder';
68
68
 
69
69
  import {
70
70
  analyticsActions,
71
71
  analyticsCategories,
72
- } from './utils/analytics-events.js';
73
- import { srOnlyStyle } from './styles/sr-only.js';
72
+ } from './utils/analytics-events';
73
+ import { srOnlyStyle } from './styles/sr-only';
74
74
 
75
75
  @customElement('collection-browser')
76
76
  export class CollectionBrowser
@@ -147,10 +147,6 @@ export class CollectionBrowser
147
147
  */
148
148
  @property({ type: Boolean }) isManageView = false;
149
149
 
150
- @property({ type: Boolean }) prerender = false;
151
- @property({ type: Object }) prerenderSearchResults?: SearchResult[];
152
- @property({ type: Number }) totalResults?: number;
153
-
154
150
  /**
155
151
  * The page that the consumer wants to load.
156
152
  */
@@ -177,6 +173,8 @@ export class CollectionBrowser
177
173
 
178
174
  @state() private fullYearsHistogramAggregation: Aggregation | undefined;
179
175
 
176
+ @state() private totalResults?: number;
177
+
180
178
  @state() private queryErrorMessage?: string;
181
179
 
182
180
  @state() private mobileView = false;
@@ -347,12 +345,6 @@ export class CollectionBrowser
347
345
 
348
346
  render() {
349
347
  this.setPlaceholderType();
350
-
351
- if (this.prerender && this.prerenderSearchResults) {
352
- this.updateDataSource(1, this.prerenderSearchResults);
353
- this.totalResults ??= this.prerenderSearchResults.length;
354
- }
355
-
356
348
  return html`
357
349
  <div
358
350
  id="content-container"
@@ -366,8 +358,6 @@ export class CollectionBrowser
366
358
  }
367
359
 
368
360
  private setPlaceholderType() {
369
- if (this.prerender && this.prerenderSearchResults) return null;
370
-
371
361
  this.placeholderType = null;
372
362
  if (!this.baseQuery?.trim()) {
373
363
  this.placeholderType = 'empty-query';
@@ -491,14 +481,10 @@ export class CollectionBrowser
491
481
  }
492
482
 
493
483
  private get infiniteScrollerTemplate() {
494
- let itemCount = this.placeholderType ? 0 : nothing;
495
- if (this.prerender && this.totalResults) itemCount = this.totalResults;
496
-
497
484
  return html`<infinite-scroller
498
485
  class=${this.infiniteScrollerClasses}
486
+ itemCount=${this.placeholderType ? 0 : nothing}
499
487
  ariaLandmarkLabel="Search results"
500
- ?prerender=${this.prerender}
501
- .itemCount=${itemCount}
502
488
  .cellProvider=${this}
503
489
  .placeholderCellTemplate=${this.placeholderCellTemplate}
504
490
  @scrollThresholdReached=${this.scrollThresholdReached}
@@ -1834,7 +1820,6 @@ export class CollectionBrowser
1834
1820
 
1835
1821
  return html`
1836
1822
  <tile-dispatcher
1837
- ?prerender=${this.prerender}
1838
1823
  .baseNavigationUrl=${this.baseNavigationUrl}
1839
1824
  .baseImageUrl=${this.baseImageUrl}
1840
1825
  .model=${model}
@@ -2,8 +2,8 @@ import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';
2
2
  import { customElement, property } from 'lit/decorators.js';
3
3
  import { repeat } from 'lit/directives/repeat.js';
4
4
  import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
5
- import eyeIcon from '../assets/img/icons/eye.js';
6
- import eyeClosedIcon from '../assets/img/icons/eye-closed.js';
5
+ import eyeIcon from '../assets/img/icons/eye';
6
+ import eyeClosedIcon from '../assets/img/icons/eye-closed';
7
7
  import {
8
8
  FacetGroup,
9
9
  FacetOption,
@@ -12,7 +12,7 @@ import {
12
12
  getDefaultSelectedFacets,
13
13
  FacetEventDetails,
14
14
  FacetState,
15
- } from '../models.js';
15
+ } from '../models';
16
16
 
17
17
  @customElement('facets-template')
18
18
  export class FacetsTemplate extends LitElement {
@@ -31,16 +31,16 @@ import {
31
31
  suppressedCollections,
32
32
  valueFacetSort,
33
33
  defaultFacetSort,
34
- } from '../models.js';
35
- import '@internetarchive/ia-activity-indicator';
36
- import './more-facets-pagination.js';
37
- import './facets-template.js';
34
+ } from '../models';
35
+ import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
36
+ import './more-facets-pagination';
37
+ import './facets-template';
38
38
  import {
39
39
  analyticsActions,
40
40
  analyticsCategories,
41
- } from '../utils/analytics-events.js';
42
- import './toggle-switch.js';
43
- import { srOnlyStyle } from '../styles/sr-only.js';
41
+ } from '../utils/analytics-events';
42
+ import './toggle-switch';
43
+ import { srOnlyStyle } from '../styles/sr-only';
44
44
 
45
45
  @customElement('more-facets-content')
46
46
  export class MoreFacetsContent extends LitElement {
@@ -7,9 +7,9 @@ import {
7
7
  TemplateResult,
8
8
  } from 'lit';
9
9
  import { customElement, property, state } from 'lit/decorators.js';
10
- import arrowLeftIcon from '../assets/img/icons/arrow-left.js';
11
- import arrowRightIcon from '../assets/img/icons/arrow-right.js';
12
- import { srOnlyStyle } from '../styles/sr-only.js';
10
+ import arrowLeftIcon from '../assets/img/icons/arrow-left';
11
+ import arrowRightIcon from '../assets/img/icons/arrow-right';
12
+ import { srOnlyStyle } from '../styles/sr-only';
13
13
 
14
14
  @customElement('more-facets-pagination')
15
15
  export class MoreFacetsPagination extends LitElement {
@@ -1,6 +1,6 @@
1
1
  import { css, html, LitElement, CSSResultGroup } from 'lit';
2
2
  import { customElement, property, query } from 'lit/decorators.js';
3
- import { srOnlyStyle } from '../styles/sr-only.js';
3
+ import { srOnlyStyle } from '../styles/sr-only';
4
4
 
5
5
  export type Side = 'left' | 'right';
6
6
 
@@ -30,8 +30,8 @@ import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-f
30
30
  import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
31
31
  import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
32
32
  import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
33
- import chevronIcon from './assets/img/icons/chevron.js';
34
- import expandIcon from './assets/img/icons/expand.js';
33
+ import chevronIcon from './assets/img/icons/chevron';
34
+ import expandIcon from './assets/img/icons/expand';
35
35
  import {
36
36
  FacetOption,
37
37
  SelectedFacets,
@@ -44,17 +44,17 @@ import {
44
44
  LendingFacetKey,
45
45
  suppressedCollections,
46
46
  defaultFacetSort,
47
- } from './models.js';
48
- import './collection-facets/more-facets-content.js';
49
- import './collection-facets/facets-template.js';
50
- import './collection-facets/facet-tombstone-row.js';
51
- import './expanded-date-picker.js';
47
+ } from './models';
48
+ import './collection-facets/more-facets-content';
49
+ import './collection-facets/facets-template';
50
+ import './collection-facets/facet-tombstone-row';
51
+ import './expanded-date-picker';
52
52
  import {
53
53
  analyticsActions,
54
54
  analyticsCategories,
55
- } from './utils/analytics-events.js';
56
- import { srOnlyStyle } from './styles/sr-only.js';
57
- import { ExpandedDatePicker } from './expanded-date-picker.js';
55
+ } from './utils/analytics-events';
56
+ import { srOnlyStyle } from './styles/sr-only';
57
+ import { ExpandedDatePicker } from './expanded-date-picker';
58
58
 
59
59
  @customElement('collection-facets')
60
60
  export class CollectionFacets extends LitElement {