@penn-libraries/web 1.2.0-dev.0 → 1.2.0-dev.2

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 (71) hide show
  1. package/dist/cjs/{index-DJo51Q03.js → index-Ag6DtE87.js} +3 -14
  2. package/dist/cjs/index-Ag6DtE87.js.map +1 -0
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/{web/pennlibs-autocomplete.pennlibs-fallback-img.pennlibs-footer.pennlibs-header.pennlibs-iiif-img.entry.esm.js.map → cjs/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map} +1 -1
  6. package/dist/cjs/{pennlibs-autocomplete_5.cjs.entry.js → pennlibs-autocomplete_4.cjs.entry.js} +54 -258
  7. package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
  8. package/dist/cjs/pennlibs-chat.cjs.entry.js +1 -1
  9. package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +20 -0
  10. package/dist/cjs/pennlibs-fallback-img.entry.cjs.js.map +1 -0
  11. package/dist/cjs/pennlibs-hero.cjs.entry.js +2 -2
  12. package/dist/cjs/pennlibs-iiif-img.cjs.entry.js +249 -0
  13. package/dist/cjs/pennlibs-iiif-img.entry.cjs.js.map +1 -0
  14. package/dist/cjs/web.cjs.js +2 -2
  15. package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.css +24 -15
  16. package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js +50 -17
  17. package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map +1 -1
  18. package/dist/collection/components/pennlibs-footer/pennlibs-footer.css +23 -2
  19. package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +33 -3
  20. package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map +1 -1
  21. package/dist/collection/components/pennlibs-header/pennlibs-header.js +1 -1
  22. package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
  23. package/dist/components/pennlibs-feedback.js +16 -17
  24. package/dist/components/pennlibs-feedback.js.map +1 -1
  25. package/dist/components/pennlibs-footer.js +9 -4
  26. package/dist/components/pennlibs-footer.js.map +1 -1
  27. package/dist/components/pennlibs-header.js +1 -1
  28. package/dist/components/pennlibs-hero.js +1 -1
  29. package/dist/docs.json +75 -6
  30. package/dist/{web/p-RqnbThKP.js → esm/index-CNQ9-Wwh.js} +4 -15
  31. package/dist/esm/index-CNQ9-Wwh.js.map +1 -0
  32. package/dist/esm/index.js +1 -1
  33. package/dist/esm/loader.js +3 -3
  34. package/dist/esm/{pennlibs-autocomplete.pennlibs-fallback-img.pennlibs-footer.pennlibs-header.pennlibs-iiif-img.entry.js.map → pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map} +1 -1
  35. package/dist/esm/{pennlibs-autocomplete_5.entry.js → pennlibs-autocomplete_4.entry.js} +54 -257
  36. package/dist/esm/pennlibs-banner.entry.js +1 -1
  37. package/dist/esm/pennlibs-chat.entry.js +1 -1
  38. package/dist/esm/pennlibs-fallback-img.entry.js +18 -0
  39. package/dist/esm/pennlibs-fallback-img.entry.js.map +1 -0
  40. package/dist/esm/pennlibs-hero.entry.js +2 -2
  41. package/dist/esm/pennlibs-iiif-img.entry.js +247 -0
  42. package/dist/esm/pennlibs-iiif-img.entry.js.map +1 -0
  43. package/dist/esm/web.js +3 -3
  44. package/dist/types/components/pennlibs-feedback/pennlibs-feedback.d.ts +19 -3
  45. package/dist/types/components/pennlibs-footer/pennlibs-footer.d.ts +4 -0
  46. package/dist/types/components.d.ts +51 -0
  47. package/dist/web/index.esm.js +1 -1
  48. package/dist/web/{p-f37f3865.entry.js → p-3da26275.entry.js} +54 -257
  49. package/dist/web/p-662e4125.entry.js +18 -0
  50. package/dist/{esm/index-RqnbThKP.js → web/p-CNQ9-Wwh.js} +4 -15
  51. package/dist/web/p-CNQ9-Wwh.js.map +1 -0
  52. package/dist/web/{p-8ac5ef70.entry.js → p-a34e1e3e.entry.js} +1 -1
  53. package/dist/web/{p-b7b01d67.entry.js → p-b6e686d1.entry.js} +2 -2
  54. package/dist/web/{p-ce09ae2e.entry.js → p-c96a3643.entry.js} +1 -1
  55. package/dist/web/p-eb633f4d.entry.js +247 -0
  56. package/dist/{cjs/pennlibs-autocomplete.pennlibs-fallback-img.pennlibs-footer.pennlibs-header.pennlibs-iiif-img.entry.cjs.js.map → web/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map} +1 -1
  57. package/dist/web/pennlibs-fallback-img.entry.esm.js.map +1 -0
  58. package/dist/web/pennlibs-iiif-img.entry.esm.js.map +1 -0
  59. package/dist/web/web.esm.js +3 -3
  60. package/hydrate/index.js +39 -35
  61. package/hydrate/index.mjs +39 -35
  62. package/package.json +1 -1
  63. package/dist/cjs/index-DJo51Q03.js.map +0 -1
  64. package/dist/cjs/pennlibs-feedback.cjs.entry.js +0 -58
  65. package/dist/cjs/pennlibs-feedback.entry.cjs.js.map +0 -1
  66. package/dist/esm/index-RqnbThKP.js.map +0 -1
  67. package/dist/esm/pennlibs-feedback.entry.js +0 -56
  68. package/dist/esm/pennlibs-feedback.entry.js.map +0 -1
  69. package/dist/web/p-780e656e.entry.js +0 -56
  70. package/dist/web/p-RqnbThKP.js.map +0 -1
  71. package/dist/web/pennlibs-feedback.entry.esm.js.map +0 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DJo51Q03.js');
3
+ var index = require('./index-Ag6DtE87.js');
4
4
 
5
5
  const pennlibsAutocompleteCss = ":host {\n display: block;\n width: 100%;\n border-radius: 1.25rem;\n padding: 0;\n border-top: 0;\n position: relative;\n}\n\n[role=listbox] {\n position: absolute;\n margin-top: var(--pl-space-xs);\n background: var(--pl-color-bg-default);\n border-radius: 1.25rem;\n box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n width: 100%;\n overflow: hidden;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n}\n\np {\n margin: 0;\n font-size: var(--pl-font-size-s);\n color: var(--pl-color-fg-subtle);\n padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n font-size: var(--pl-font-size-s);\n order: 2;\n font-weight: 500;\n background: var(--pl-color-bg-subtle);\n border-radius: 0 0 1.25rem 1.25rem;\n\n display: flex;\n gap: var(--pl-space-s) var(--pl-space-l);\n flex-wrap: wrap;\n}\n\nol {\n list-style: none;\n margin: 0;\n padding: var(--pl-space-xs) 0;\n order: 1;\n}\n\n[role=option] {\n color: var(--pl-color-fg-default);\n padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n text-decoration: none;\n font-weight: 700; \n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n text-decoration-thickness: 2px;\n text-underline-offset: 2px;\n text-decoration: underline;\n }\n}\n\n[aria-selected=true] {\n text-decoration-thickness: 2px;\n text-underline-offset: 2px;\n text-decoration: underline;\n}\n\nmark,\nb {\n background: none;\n font-weight: 400;\n}\n\n.suggestion--border {\n border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n margin-bottom: var(--pl-space-2xs);\n}";
6
6
 
@@ -277,25 +277,65 @@ const Autocomplete = class {
277
277
  };
278
278
  Autocomplete.style = pennlibsAutocompleteCss;
279
279
 
280
- const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
280
+ const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
281
281
 
282
- const NoImage = class {
282
+ const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
283
+ const FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
284
+ const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
285
+ const FEEDBACK_QUESTION = 'Is this page useful?';
286
+ const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
287
+ const PennlibsFeedback = class {
283
288
  constructor(hostRef) {
284
289
  index.registerInstance(this, hostRef);
290
+ this.feedbackEvent = index.createEvent(this, "pennlibs-feedback");
291
+ /**
292
+ * When true, hides the yes/no question and only shows the "share your feedback" link.
293
+ */
294
+ this.hideQuestion = false;
295
+ this.error = false;
296
+ this.answer = undefined;
297
+ }
298
+ componentWillLoad() {
299
+ const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);
300
+ if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {
301
+ sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
302
+ sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);
303
+ }
304
+ if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
305
+ this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
306
+ }
307
+ if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {
308
+ this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
309
+ }
310
+ }
311
+ handleFeedback(answer) {
312
+ var _a;
313
+ this.answer = answer;
314
+ sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
315
+ sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
316
+ this.feedbackEvent.emit({
317
+ question: FEEDBACK_QUESTION,
318
+ answer: answer,
319
+ url: window.location.href,
320
+ pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
321
+ pageTitle: document.title || undefined
322
+ });
285
323
  }
286
324
  render() {
287
- const shieldImg = index.getAssetPath('./assets/simplified-shield.webp');
288
- return (index.h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
325
+ return (index.h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, index.h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, index.h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (index.h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (index.h("p", null, "Thank you for letting us know. ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (index.h("div", { class: "feedback__inline-question" }, index.h("h2", null, "Did you find what you need?"), index.h("button", { onClick: () => this.handleFeedback('yes') }, index.h("span", null, "Yes"), index.h("span", { class: "visually-hidden" }, ", I found what I needed.")), index.h("button", { onClick: () => this.handleFeedback('no') }, index.h("span", null, "No"), index.h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), index.h("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, index.h("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", index.h("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
289
326
  }
290
- static get assetsDirs() { return ["assets"]; }
291
327
  };
292
- NoImage.style = pennlibsFallbackImgCss;
328
+ PennlibsFeedback.style = pennlibsFeedbackCss;
293
329
 
294
- const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 5.75rem;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.5em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}";
330
+ const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-margins-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with,\n.built-with a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n font-weight: 500;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n }\n}\n\n.built-with {\n opacity: 0.875;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.75em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}";
295
331
 
296
332
  const Footer = class {
297
333
  constructor(hostRef) {
298
334
  index.registerInstance(this, hostRef);
335
+ /**
336
+ * When true, shows a "Built with the Penn Libraries Design System" line below the footer.
337
+ */
338
+ this.showBuiltWith = false;
299
339
  }
300
340
  componentWillLoad() {
301
341
  this.setNavigationByChildren();
@@ -320,12 +360,12 @@ const Footer = class {
320
360
  }
321
361
  render() {
322
362
  const footerBackgroundSrc = index.getAssetPath('./assets/footer-bg.webp');
323
- return (index.h("div", { key: '968368b94435f332d852c7599308992195df8792', class: "website-footer-wrapper" }, index.h("footer", { key: '6c709b86bef34533d5350e7040d043fd2dd5caf2', class: "website-footer", style: {
363
+ return (index.h("footer", { key: '39b1bc7336fe2aa28e8c6093d13b8dfb3dd70d3e', class: "website-footer-wrapper" }, index.h("div", { key: '7902cf7cde3a468dec8ea71c2a139addafa5af79', class: "website-footer", style: {
324
364
  background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
325
365
  backgroundSize: 'cover',
326
- } }, index.h("div", { key: 'cfb33794f711d427f8cc64026bc1caff589ff444', class: "viewport-margins" }, index.h("div", { key: '7f7518568ef5884a0014be4e10b4ba6d00b14d9c', class: "website-footer__content" }, index.h("div", { key: '8fb9612358f3c42b3a5621f54cb646c06307776a', class: "website-footer__links-container" }, index.h("section", { key: '1bed43fbe1c161d8d4de0381f71f093bab6a3791' }, index.h("h2", { key: 'bdd5487da839597ce52715eff9fae099301a3f4b', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: '0579c77c9120b73f67eb5560716cc9194182e645', class: "website-footer__links" }, index.h("li", { key: 'c8cadddc0867b4bded9f22975bc6e80210501737' }, index.h("a", { key: '34a076d9417b0da1a390f9757be5cece974b8658', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: '159e1ceed4693f7a85489ad4a1ef8f916f505955' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '3de1e966c16afc1ae5c82d25b1d87e24f27af826' }, index.h("a", { key: '39a6709291115a6f6ead9116171b97c31c6e77d9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '7236b41454b66bc155bc4a7568f603c70504f01b' }, index.h("a", { key: '49b285935d3240e900079b62c8d90eb564e5707d', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: '9329fe40a9aef5e1eaa74c6b22b33aee5b94f624' }, index.h("a", { key: 'd2bc79dff8b3a5c01cbc1ece4268b4fdddc56954', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: '8b05b90f531f99c6223a7a080baa9472bb00b2b0' }, index.h("h2", { key: 'c950fd6a248e5d673a8a4e050f3aaa84f91c5014', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: '7ce913dd26948c9c1bb6f5ab14f1febc07425836', class: "website-footer__links" }, index.h("li", { key: 'ccd80b1eee71f058caad49e3da56cbf1a8d28aa2' }, index.h("a", { key: 'b09d62df23e341bd9424ff541a842c3b17a24637', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '7b7c04fdf9d6673fef77fecd460c110f55700350' }, index.h("a", { key: '08cd159b59ff63471f4075913a644bbd171c5e90', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: 'f0fffc02b5a55f41ad9e97b1e35dd7217e4d3aa6' }, index.h("a", { key: '0269c87d87e2b2b3db93fae2d5e33d19cf6a82a1', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: '3c008831c4c3e5d700d4f16427b3cfd50082a8a6' }, index.h("a", { key: 'db56894184243b375d3f8c7c42458720f70a34f2', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
366
+ } }, index.h("div", { key: '804f9cd3f101997ee2d15d4a4749945ef553a118', class: "viewport-margins" }, index.h("div", { key: '3a09637400e74e729641666eb8142c0cf77d66b3', class: "website-footer__content" }, index.h("div", { key: 'cdb9270db298aa7781859a80c799949cb4c35787', class: "website-footer__links-container" }, index.h("section", { key: '20d953d2b85178798d2298aa8aaa9fb8e47d7af4' }, index.h("h2", { key: '79b1fe7f4fc2dff03134c7d4e96e9fd657131fc8', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: 'ba8002b17457f979f9817c45a89f332064f0b5bb', class: "website-footer__links" }, index.h("li", { key: 'cb65fc4ad6432ef447a4b98a8dfdc0323bf37ccc' }, index.h("a", { key: '0b61506da9a1c18919f77410fa39d3937f7485df', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: 'ebd3def13a3107d1b301c0932d421b054e2bb338' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '3f26ebab3b90a33ba2d17cd3cfd8a485f1c7e74f' }, index.h("a", { key: 'c2dcf7a3d936eb5376b2568e677bb8a7dc7ab445', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '8c9374110f2d386c7275fad9522ea2565daf6c06' }, index.h("a", { key: 'd40a2fd7490f1b233e4839e38faf29d9bb04f519', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: 'ab3016b1cfcc8827af060ec383d8556e8346713a' }, index.h("a", { key: '76a8d246128fb76606c1cdf24640198c23c9d317', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: 'fd0abacbc35ffaafbb2016064c7a6194616ee2dc' }, index.h("h2", { key: 'a812d7d26e21a1808ce6bd115ec620e1b033a8bf', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: 'fe158ff1336379e1236a88c4a3d0f5e1efd9cdb8', class: "website-footer__links" }, index.h("li", { key: '32396df360b39190ff587400fabe405ee319a507' }, index.h("a", { key: '07ac56362dde7a2807e86c2a22564689ed9de90c', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '95abd2bf0f6a79c0597c1e57e878f986002adde2' }, index.h("a", { key: '374044fae62fd82c9369cfba8b7c6223ded48d5a', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: '86cc74d4ec21dfb51a072cfad87ed395e961f26f' }, index.h("a", { key: 'fda9e8c73918252b91e40dc23d289613a3fe5802', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: 'b1ce60d7aa5ac8a2aa8bd4f826c11cc753b1488c' }, index.h("a", { key: 'ccfef8131fc7f9edd44936f1c212d31c08c61682', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
327
367
  this.navigationByChildren.map(section => (index.h("section", null, index.h("h2", { class: "website-footer__heading" }, section.heading), index.h("ul", { class: "website-footer__links" }, section.links.map(link => (index.h("li", null, index.h("a", { href: link.href }, link.label))))))))
328
- ]))), index.h("div", { key: '3a48e365b66300beeb261d3c14e8d98e7565373d', class: "website-footer__footer" }, index.h("div", { key: '699738c3f57f35796a1f4397a6fada44eaaa1683', class: "viewport-margins" }, index.h("ul", { key: 'c88fb2fb6bbc3fc5eb13664f7288d7afe3ec7e57', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: '8c3ecc9499cb5fdf180906d2d681eba515dae399' }, index.h("a", { key: 'ae916ed72fc00e93f0e9c73b49878c75790a0227', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: 'c5a51aabc04937e09ae3df7c0fe13fbb9ff9b0d8' }, index.h("a", { key: '359a6693330af0a701ff2e9a13fffb9e5ca573b6', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: '1e323f9c47a94933f48abaf0c1c5fef1479a1395' }, index.h("a", { key: '55dde719bb09dc79fc158f931adaf2b1926120c9', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: 'e83955780f877039da38ddd946fd9ab0455812e1' }, index.h("a", { key: '7ed5e27e6f6ea677a35c7f3e78dba2e72f629488', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'cd28d78bec76cc13e0272cbb30e11bcde6459cb9' }, index.h("a", { key: 'a6a64d9949ea4cbbc8f90703d886e83dd9f0df9b', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: 'cbc668f7728653b15748a8488f9694c632884d6f' }, index.h("a", { key: 'b681b57236ee23c3be9c85c4f199ef7f4c66b607', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
368
+ ]))), index.h("div", { key: '4430d39b9b8943d9336020d5ed04cdb80a3b91af', class: "website-footer__footer" }, index.h("div", { key: '437f0b8894b63c3857f8871eaaaf3d28277738ad', class: "viewport-margins" }, index.h("ul", { key: '8c4ac37a89006d543a66c8c1ba6bc9d7acc0d6db', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: 'ac1db31f3c5331a26c0aee171974c10f22d5da08' }, index.h("a", { key: 'ad8a6251cca9b0c904ccecff96a8800b22ed5568', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: '1189f7119ec768d34ea9435f9ff85df2764abe61' }, index.h("a", { key: 'eb53d4f15fe49d32899d435670a34369a4e7e190', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: 'd2a155f7f91a31cca41df9d0c9d37f151bded247' }, index.h("a", { key: '8e329a895a25bd139867063dd7eed9c0aa7c0060', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: '0b65f3da18b54b91158515d7966e010e4e0d64ac' }, index.h("a", { key: 'f8615c438f94216372fdb8afa26ae7150bbef816', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'cbf5febfb926a1b569e73d4a57e7ca8315f6d876' }, index.h("a", { key: '1116c792623c0fa819ce0189e105ee54c69ba73e', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: '385a84f264b263a9738d38d66ac917e3a6055db4' }, index.h("a", { key: 'dcd8517fb32ae46b983cb4802adb86e33e29bd71', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (index.h("div", { key: 'd3bca43144b06b50091b54dee5c8734de4f80d60', class: "viewport-margins" }, index.h("p", { key: 'a3d974ea56f521406bffc2a8eaf6b6e6c57bb595', class: "built-with" }, "Built with the ", index.h("a", { key: '7aa9fc3901510e0ad7d2b0ca4abf4f8c6f92d735', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
329
369
  }
330
370
  static get assetsDirs() { return ["assets"]; }
331
371
  get hostElement() { return index.getElement(this); }
@@ -383,259 +423,15 @@ const Header = class {
383
423
  return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
384
424
  }
385
425
  render() {
386
- return (index.h("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, index.h("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, index.h("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, index.h("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), index.h("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (index.h("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, index.h("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => index.h("li", { innerHTML: element.outerHTML })))))), index.h("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
426
+ return (index.h("header", { key: '6d14c72db0c06f38d66927f3f3102b7db82c1317', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: 'f7411c48f1f5ba8d267eb53cba7adb3d41c74aec', class: "website-header__inner-container" }, index.h("div", { key: '78be403367c64beaf5b4cdceac458efc0007980e', class: "website-header__logo-name-container" }, index.h("a", { key: '8b3e0da246ea69744b83debb0b5e23e271a64520', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: '1e1208fd657497dac0f3bb8a09d6b8e8507d2d04', href: "/", class: "website-header__service-link" }, index.h("span", { key: '33a0c53e36a064a999025eeeae5d3bab9bca11bc', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: '809ca2fdb42dbc35a80474a0e06a39bbba5fb675', class: "website-header__service-lede" }, this.serviceLede))), index.h("slot", { key: '91cfd1e15bd1e7de19a418d0bc05095fd634870b', name: "name-end" })), this.navigation.length > 0 && (index.h("nav", { key: 'ce1c1d9fb21fa12b81fb17f9204885c27f86e380', class: "website-header__navigation" }, index.h("button", { key: 'bdefe1220e526611c7ff9ef9f46be67028077263', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '0af8e80d1ba55d267037e28d18caa03714600b22', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => index.h("li", { innerHTML: element.outerHTML })))))), index.h("slot", { key: '605d0e5b7caba6cdebf98ace0d708453ab0c4b0f', name: "end" }))));
387
427
  }
388
428
  static get assetsDirs() { return ["assets"]; }
389
429
  get hostElement() { return index.getElement(this); }
390
430
  };
391
431
  Header.style = pennlibsHeaderCss;
392
432
 
393
- const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
394
-
395
- const PIXEL_DENSITIES = [1, 1.5, 2];
396
- const IIIFImg = class {
397
- constructor(hostRef) {
398
- index.registerInstance(this, hostRef);
399
- /**
400
- * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.
401
- * Defines the rectangular portion of the underlying image to return.
402
- *
403
- * `full`: The full image is returned, without any cropping.
404
- *
405
- * `square`: A square area where width and height equal the shorter dimension.
406
- *
407
- * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies
408
- * a centered crop based on the source image dimensions and sets the CSS aspect-ratio
409
- * property for layout reservation.
410
- *
411
- * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).
412
- *
413
- * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.
414
- *
415
- * @default 'full'
416
- */
417
- this.region = 'full';
418
- /**
419
- * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.
420
- * Specifies mirroring and clockwise rotation in degrees (0-360).
421
- *
422
- * `n`: Rotation in degrees only.
423
- *
424
- * `!n`: Mirror the image vertically, then rotate by n degrees.
425
- *
426
- * @default '0'
427
- */
428
- this.rotation = '0';
429
- /**
430
- * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.
431
- * Controls the color delivery mode.
432
- *
433
- * `default`: The server's default quality.
434
- *
435
- * `color`: Full color information.
436
- *
437
- * `gray`: Grayscale rendering.
438
- *
439
- * `bitonal`: Black and white only.
440
- *
441
- * @default 'default'
442
- */
443
- this.quality = 'default';
444
- /**
445
- * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
446
- * or "eager" to load immediately.
447
- * @default 'lazy'
448
- */
449
- this.loading = 'lazy';
450
- /**
451
- * Whether to display a fallback placeholder image when the IIIF image fails to load.
452
- * @default true
453
- */
454
- this.showFallback = true;
455
- this.isLoaded = false;
456
- this.hasError = false;
457
- this.baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';
458
- this.handleLoad = () => {
459
- this.isLoaded = true;
460
- };
461
- this.handleError = () => {
462
- this.hasError = true;
463
- };
464
- }
465
- /**
466
- * Fetch IIIF image info to get actual dimensions.
467
- */
468
- async fetchImageInfo() {
469
- try {
470
- const currentUuid = this.uuid; // Capture current UUID
471
- const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;
472
- const response = await fetch(infoUrl);
473
- if (!response.ok) {
474
- console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);
475
- return;
476
- }
477
- const info = await response.json();
478
- // Only update dimensions if UUID hasn't changed during fetch
479
- // (protects against race conditions if component updates)
480
- if (this.uuid === currentUuid) {
481
- this.imageDimensions = {
482
- width: info.width,
483
- height: info.height,
484
- };
485
- this.fetchedUuid = currentUuid;
486
- }
487
- }
488
- catch (error) {
489
- console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);
490
- }
491
- }
492
- /**
493
- * Check if a region value matches aspect ratio format (e.g., "16:9", "4:3", "3:2").
494
- */
495
- isAspectRatio(value) {
496
- return /^\d+:\d+$/.test(value);
497
- }
498
- /**
499
- * Set CSS custom property for aspect ratio on the host element.
500
- */
501
- setAspectRatioCss(aspectRatio) {
502
- const [widthRatio, heightRatio] = aspectRatio.split(':');
503
- this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);
504
- }
505
- /**
506
- * Clear CSS custom property for aspect ratio from the host element.
507
- */
508
- clearAspectRatioCss() {
509
- this.hostElement.style.removeProperty('--aspect-ratio');
510
- }
511
- /**
512
- * Format a number for IIIF percentage values (remove trailing zeros).
513
- * IIIF spec requires no trailing zeros per section 4.7.
514
- */
515
- formatPercent(value) {
516
- return value.toFixed(2).replace(/\.?0+$/, '');
517
- }
518
- /**
519
- * Calculate a centered crop region for a given aspect ratio.
520
- * Requires actual image dimensions to calculate correctly.
521
- * @param aspectRatio - The target aspect ratio (e.g., "3:2" or "2:3")
522
- * @returns A IIIF percentage-based region string (e.g., "pct:0,16.67,100,66.67")
523
- */
524
- calculateCenteredCrop(aspectRatio) {
525
- if (!this.imageDimensions) {
526
- throw new Error('Image dimensions required for aspect ratio calculation');
527
- }
528
- const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);
529
- const targetRatio = widthRatio / heightRatio;
530
- const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;
531
- // Determine if we need to crop width or height
532
- if (sourceRatio > targetRatio) {
533
- // Source is wider than target - crop left and right
534
- const widthPercent = (targetRatio / sourceRatio) * 100;
535
- const xOffset = (100 - widthPercent) / 2;
536
- return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;
537
- }
538
- else {
539
- // Source is taller than target - crop top and bottom
540
- const heightPercent = (sourceRatio / targetRatio) * 100;
541
- const yOffset = (100 - heightPercent) / 2;
542
- return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;
543
- }
544
- }
545
- /**
546
- * Get the region parameter for the IIIF URL.
547
- */
548
- getRegionParam() {
549
- // Handle custom aspect ratios
550
- let regionParam = this.region || 'full';
551
- if (this.isAspectRatio(regionParam)) {
552
- // Only apply crop if we have dimensions for the current UUID
553
- if (this.imageDimensions && this.fetchedUuid === this.uuid) {
554
- regionParam = this.calculateCenteredCrop(regionParam);
555
- }
556
- else {
557
- // Use full image until dimensions are loaded
558
- regionParam = 'full';
559
- }
560
- }
561
- return regionParam;
562
- }
563
- buildIIIFUrl(width, format = 'jpg') {
564
- const sizeParam = width ? `${width},` : 'max';
565
- const regionParam = this.getRegionParam();
566
- return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
567
- }
568
- generateSrcset(baseWidth, format) {
569
- return PIXEL_DENSITIES.map(density => {
570
- const width = Math.round(baseWidth * density);
571
- const url = this.buildIIIFUrl(width, format);
572
- return `${url} ${density}x`;
573
- }).join(', ');
574
- }
575
- handleRegionChange(newValue, oldValue) {
576
- // Only process if region actually changed
577
- if (newValue === oldValue) {
578
- return;
579
- }
580
- // If new region is an aspect ratio, set CSS and fetch info
581
- if (newValue && this.isAspectRatio(newValue)) {
582
- this.setAspectRatioCss(newValue);
583
- this.fetchImageInfo();
584
- }
585
- else {
586
- // Clear aspect ratio CSS if no longer using aspect ratio format
587
- this.clearAspectRatioCss();
588
- }
589
- }
590
- componentDidLoad() {
591
- // Set CSS aspect ratio and fetch image info if using aspect ratio format
592
- if (this.region && this.isAspectRatio(this.region)) {
593
- this.setAspectRatioCss(this.region);
594
- this.fetchImageInfo();
595
- }
596
- if ('ResizeObserver' in window) {
597
- this.resizeObserver = new ResizeObserver(entries => {
598
- for (const entry of entries) {
599
- this.observedWidth = Math.round(entry.contentRect.width);
600
- if (this.resizeObserver) {
601
- this.resizeObserver.disconnect();
602
- this.resizeObserver = undefined;
603
- }
604
- }
605
- });
606
- this.resizeObserver.observe(this.hostElement);
607
- }
608
- }
609
- disconnectedCallback() {
610
- if (this.resizeObserver) {
611
- this.resizeObserver.disconnect();
612
- this.resizeObserver = undefined;
613
- }
614
- }
615
- render() {
616
- // Show placeholder until we've measured the component width
617
- if (!this.observedWidth) {
618
- return index.h("pennlibs-fallback-img", null);
619
- }
620
- if (this.hasError && this.showFallback) {
621
- return (index.h("div", { class: "fallback-container" }, index.h("pennlibs-fallback-img", null)));
622
- }
623
- const imgClasses = {
624
- 'iiif-img': true,
625
- 'loaded': this.isLoaded
626
- };
627
- return (index.h("picture", null, index.h("source", { type: "image/webp", srcSet: this.generateSrcset(this.observedWidth, 'webp') }), index.h("img", { class: imgClasses, src: this.buildIIIFUrl(this.observedWidth, 'jpg'), srcSet: this.generateSrcset(this.observedWidth, 'jpg'), alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
628
- }
629
- get hostElement() { return index.getElement(this); }
630
- static get watchers() { return {
631
- "region": ["handleRegionChange"]
632
- }; }
633
- };
634
- IIIFImg.style = pennlibsIiifImgCss;
635
-
636
433
  exports.pennlibs_autocomplete = Autocomplete;
637
- exports.pennlibs_fallback_img = NoImage;
434
+ exports.pennlibs_feedback = PennlibsFeedback;
638
435
  exports.pennlibs_footer = Footer;
639
436
  exports.pennlibs_header = Header;
640
- exports.pennlibs_iiif_img = IIIFImg;
641
- //# sourceMappingURL=pennlibs-autocomplete.pennlibs-fallback-img.pennlibs-footer.pennlibs-header.pennlibs-iiif-img.entry.cjs.js.map
437
+ //# sourceMappingURL=pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DJo51Q03.js');
3
+ var index = require('./index-Ag6DtE87.js');
4
4
 
5
5
  const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
6
6
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DJo51Q03.js');
3
+ var index = require('./index-Ag6DtE87.js');
4
4
 
5
5
  const pennlibsChatCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n line-height: normal;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\na {\n display: flex;\n align-items: center;\n background: linear-gradient(45deg, #faa755, #fcca99);\n border-radius: 1em;\n position: fixed;\n bottom: 0.75em;\n right: 0.75em;\n box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n color: var(--pl-color-penn-blue);\n text-decoration: none;\n font-weight: 500;\n padding: 0.15em;\n font-size: 1em;\n\n @media (min-width: 820px) {\n bottom: 1.5em;\n right: 1.5em;\n width: auto;\n padding: 0.15em 0.75em;\n padding-left: 0.5em;\n }\n}\n\na:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n width: 2.5em;\n height: 2.5em;\n}\n\nspan {\n display: none;\n font-size: 1.1em;\n\n @media (min-width: 820px) {\n display: inline;\n }\n}";
6
6
 
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-Ag6DtE87.js');
4
+
5
+ const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
6
+
7
+ const NoImage = class {
8
+ constructor(hostRef) {
9
+ index.registerInstance(this, hostRef);
10
+ }
11
+ render() {
12
+ const shieldImg = index.getAssetPath('./assets/simplified-shield.webp');
13
+ return (index.h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
14
+ }
15
+ static get assetsDirs() { return ["assets"]; }
16
+ };
17
+ NoImage.style = pennlibsFallbackImgCss;
18
+
19
+ exports.pennlibs_fallback_img = NoImage;
20
+ //# sourceMappingURL=pennlibs-fallback-img.entry.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pennlibs-fallback-img.entry.cjs.js","sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n background: var(--pl-color-bg-subtle);\n aspect-ratio: 3/2;\n}\n\n.no-image__img {\n width: 100%;\n max-width: 150px;\n filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n tag: 'pennlibs-fallback-img',\n styleUrl: 'pennlibs-fallback-img.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class NoImage {\n render() {\n const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n return (\n <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n );\n }\n} "],"names":["getAssetPath","h"],"mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,GAAA,MAAA;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAGA,kBAAY,CAAC,iCAAiC,CAAC;QAEjE,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DJo51Q03.js');
3
+ var index = require('./index-Ag6DtE87.js');
4
4
 
5
5
  const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1.1;font-size:3em;font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:500;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2.75em}.hero__sub-heading{font-size:1em}}";
6
6
 
@@ -49,7 +49,7 @@ const Hero = class {
49
49
  }
50
50
  }
51
51
  render() {
52
- return (index.h("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, index.h("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), index.h("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, index.h("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
52
+ return (index.h("div", { key: 'd05bbd0346ad50b3e0f3264b8263bcf54534adb5', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: 'd1016edd7705c437ee065e5bb355840bd9907bcb', class: "hero__content" }, index.h("slot", { key: '89d03122b810c823516912236b899a0b77d62af7', name: "start" }), index.h("div", { key: '723cc18e93c02990028d7f7f19afc8b861afa0f2', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: 'bc634a22c4de25b7780b8d46bb1bf91cb50000be', class: "viewport-margins" }, index.h("h1", { key: '307269e0a116a254b2dc94009fdbf5679a0e169d', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: '3258869e6449257d517312cedc4b7749deaaaf0f', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
53
53
  }
54
54
  static get assetsDirs() { return ["assets"]; }
55
55
  get hostElement() { return index.getElement(this); }