@penn-libraries/web 0.3.0-dev.1 → 0.3.0-dev.2

package/dist/components/pennlibs-feedback.js

@@ -0,0 +1,79 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;padding:1.5em 1em;font-family:var(--font-family);font-size:var(--font-size);color:var(--color-fg-default);line-height:1.4;box-sizing:border-box}.feedback-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;width:100%;max-width:1080px;margin:0 auto}@media (max-width: 26em){.feedback-container{justify-content:center}}h2{display:inline-block;margin:0 0.5em 0 0;font-family:var(--font-sans-serif);font-size:1em;font-weight:600}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--color-fg-accent);text-decoration:underline;text-underline-offset:var(--link-text-underline-offset);text-decoration-thickness:var(--link-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.5em 1.5em;font-family:var(--font-family);font-weight:500;line-height:1.4;color:var(--color-fg-default);background:var(--color-bg-default);border:solid 1px var(--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(--color-bg-attention),\n    0 0 0 3px var(--color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--color-bg-attention), 0 0 0 3px var(--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}";
+const PennlibsFeedbackStyle0 = pennlibsFeedbackCss;
+
+const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
+const FEEDBACK_QUESTION = 'Did you find what you need?';
+const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
+const PennlibsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class PennlibsFeedback extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.feedbackEvent = createEvent(this, "pennlibs-feedback", 7);
+        this.error = false;
+        this.answer = undefined;
+    }
+    componentWillLoad() {
+        if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
+            this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
+        }
+        if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {
+            this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
+        }
+    }
+    componentDidRender() {
+        if (this.answer === 'yes' && this.yesMessageRef) {
+            this.yesMessageRef.focus();
+        }
+        else if (this.answer === 'no' && this.noMessageRef) {
+            this.noMessageRef.focus();
+        }
+    }
+    handleFeedback(answer) {
+        var _a;
+        this.answer = answer;
+        sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
+        this.feedbackEvent.emit({
+            question: FEEDBACK_QUESTION,
+            answer: answer,
+            url: window.location.href,
+            pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
+            pageTitle: document.title || undefined
+        });
+    }
+    render() {
+        if (this.answer === 'yes') {
+            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, h("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
+        }
+        if (this.answer === 'no') {
+            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", h("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
+        }
+        return (h("div", { class: "feedback-container" }, h("h2", null, FEEDBACK_QUESTION), h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", h("span", null, "Yes", h("span", { class: "visually-hidden" }, ", I found what I need."))), h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", h("span", null, "No", h("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
+    }
+    static get style() { return PennlibsFeedbackStyle0; }
+}, [1, "pennlibs-feedback", {
+        "error": [32],
+        "answer": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-feedback"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-feedback":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PennlibsFeedback$1);
+            }
+            break;
+    } });
+}
+
+const PennlibsFeedback = PennlibsFeedback$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsFeedback, defineCustomElement };
+
+//# sourceMappingURL=pennlibs-feedback.js.map

package/dist/components/pennlibs-feedback.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,6pDAA6pD,CAAC;AAC1rD,+BAAe,mBAAmB;;ACClC,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AACxD,MAAM,iBAAiB,GAAG,6BAA6B,CAAC;AACxD,MAAM,0BAA0B,GAAG,yBAAyB,CAAC;MAOhDA,kBAAgB;;;;;;qBACD,KAAK;sBACO,SAAS;;IAkB/C,iBAAiB;QACf,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW,CAAC;SACtE;QAED,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE;YACtD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM,CAAC;SAC5E;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;YAC/C,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC5B;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;SAC3B;KACF;IAED,cAAc,CAAC,MAAc;;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACtB,QAAQ,EAAE,iBAAiB;YAC3B,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;YACzB,WAAW,EAAE,CAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,0CAAE,WAAW,KAAI,SAAS;YACnE,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI,SAAS;SACvC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,SACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAA0B,EAC5D,QAAQ,EAAC,IAAI,IAEb,8BAA0B,qCACxB,CACA,EACN;SACH;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACxB,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,SACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAA0B,EAC3D,QAAQ,EAAC,IAAI,WAEV,oCAAgC,wDAAkD,SAAG,IAAI,EAAC,0CAA0C,oCAAkC,MACvK,CACA,EACN;SACH;QAED,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAK,iBAAiB,CAAM,EAC5B,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,oBAE/C,uBAAS,YAAM,KAAK,EAAC,iBAAiB,6BAA8B,CAAO,CACpE,EACT,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,oBAE9C,sBAAQ,YAAM,KAAK,EAAC,iBAAiB,mCAAoC,CAAO,CACzE,CACL,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PennlibsFeedback"],"sources":["src/components/pennlibs-feedback/pennlibs-feedback.css?tag=pennlibs-feedback&encapsulation=shadow","src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"sourcesContent":["/* Component Root Styles\n---------------------------------------- */\n:host {\n  display: block;\n  background: #eeeff4;\n  padding: 1.5em 1em;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--color-fg-default);\n  line-height: 1.4;\n  box-sizing: border-box;\n}\n\n/* Container Layout\n---------------------------------------- */\n.feedback-container {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  width: 100%;\n  max-width: 1080px;\n  margin: 0 auto;\n}\n\n@media (max-width: 26em) {\n  .feedback-container {\n    justify-content: center;\n  }\n}\n\n/* Typography\n---------------------------------------- */\nh2 {\n  display: inline-block;\n  margin: 0 0.5em 0 0;\n  font-family: var(--font-sans-serif);\n  font-size: 1em;\n  font-weight: 600;\n}\n\np {\n  margin: 0;\n  padding: calc(0.5em + 1px) 0;\n}\n\nstrong {\n  font-weight: 600;\n}\n\n/* Links\n---------------------------------------- */\na {\n  color: var(--color-fg-accent);\n  text-decoration: underline;\n  text-underline-offset: var(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-text-decoration-thickness);\n}\n\n/* Buttons\n---------------------------------------- */\nbutton {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.5em 1.5em;\n  font-family: var(--font-family);\n  font-weight: 500;\n  line-height: 1.4;\n  color: var(--color-fg-default);\n  background: var(--color-bg-default);\n  border: solid 1px var(--color-fg-subtle);\n  border-radius: 1em;\n  box-sizing: border-box;\n}\n\nbutton:hover {\n  cursor: pointer;\n}\n\nbutton:hover span {\n  text-decoration: underline;\n}\n\n/* Focus States\n---------------------------------------- */\n*:focus {\n  outline: 0;\n  box-shadow: \n    0 0 0 2px var(--color-bg-attention),\n    0 0 0 3px var(--color-bg-emphasis);\n}\n\np:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention), 0 0 0 3px var(--color-bg-emphasis);\n}\n\n/* Responsive Adjustments\n---------------------------------------- */\n@media (max-width: 26em) {\n  h2 {\n    display: block;\n    width: 100%;\n    text-align: center;\n  }\n}\n\n.help-us {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n}\n\n/* Accessibility Helpers\n---------------------------------------- */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n/* This ensures the element remains hidden even when focused */\n.visually-hidden:focus,\n.visually-hidden:active {\n  clip: auto;\n  clip-path: none;\n  height: auto;\n  overflow: visible;\n  position: static;\n  white-space: normal;\n  width: auto;\n}","import { Component, h, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_QUESTION = 'Did you find what you need?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n@Component({\n  tag: 'pennlibs-feedback',\n  styleUrl: 'pennlibs-feedback.css',\n  shadow: true,\n})\nexport class PennlibsFeedback { \n  @State() error: boolean = false;\n  @State() answer: string | undefined = undefined;\n\n  @Event({\n    eventName: 'pennlibs-feedback',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  }) feedbackEvent!: EventEmitter<{\n    question: string;\n    answer: string;\n    url: string;\n    pageHeading?: string;\n    pageTitle?: string;\n  }>;\n\n  private yesMessageRef?: HTMLParagraphElement;\n  private noMessageRef?: HTMLParagraphElement;\n\n  componentWillLoad() {\n    if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n      this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n    }\n\n    if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n      this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n    }\n  }\n\n  componentDidRender() {\n    if (this.answer === 'yes' && this.yesMessageRef) {\n      this.yesMessageRef.focus();\n    } else if (this.answer === 'no' && this.noMessageRef) {\n      this.noMessageRef.focus();\n    }\n  }\n\n  handleFeedback(answer: string) {\n    this.answer = answer;\n    sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n    \n    this.feedbackEvent.emit({\n      question: FEEDBACK_QUESTION,\n      answer: answer,\n      url: window.location.href,\n      pageHeading: document.querySelector('h1')?.textContent || undefined,\n      pageTitle: document.title || undefined\n    });\n  }\n  \n  render() {\n    if (this.answer === 'yes') {\n      return (\n        <div class=\"feedback-container\">\n          <p \n            ref={(el) => this.yesMessageRef = el as HTMLParagraphElement}\n            tabindex=\"-1\"\n          >\n            <strong>Thank you</strong> for your feedback! 👍\n          </p>\n        </div>\n      );\n    }\n\n    if (this.answer === 'no') {\n      return (\n        <div class=\"feedback-container\">\n          <p \n            ref={(el) => this.noMessageRef = el as HTMLParagraphElement}\n            tabindex=\"-1\"\n          >\n            To <strong>help us improve</strong>, we'd like to know more about your visit. Please <a href=\"https://www.library.upenn.edu/contact-us\">contact us with your feedback</a>.\n          </p>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"feedback-container\">\n        <h2>{FEEDBACK_QUESTION}</h2>\n        <button onClick={() => this.handleFeedback('yes')}>\n          👍\n          <span>Yes<span class=\"visually-hidden\">, I found what I need.</span></span>\n        </button>\n        <button onClick={() => this.handleFeedback('no')}>\n          👎\n          <span>No<span class=\"visually-hidden\">, I didn't find what I need.</span></span>\n        </button>\n      </div>\n    )\n  }\n}\n\n"],"version":3}

package/dist/components/pennlibs-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsFooter extends Components.PennlibsFooter, HTMLElement {}
+export const PennlibsFooter: {
+    prototype: PennlibsFooter;
+    new (): PennlibsFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pennlibs-footer.js

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
+
+const pennlibsFooterCss = ":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n  --padding-bottom: 5.75rem;\n}\n\n.website-footer-wrapper {\n  background: var(--color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--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(14em, 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(--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(--link-text-underline-offset);\n}";
+const PennlibsFooterStyle0 = pennlibsFooterCss;
+
+const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.navigation = undefined;
+        this.navigationByChildren = undefined;
+    }
+    componentWillLoad() {
+        this.setNavigationByChildren();
+    }
+    setNavigationByChildren() {
+        try {
+            if (this.hostElement.children) {
+                this.navigationByChildren = Array.from(this.hostElement.children).reduce((acc, element) => {
+                    acc = acc.concat({
+                        heading: element.querySelector('h2').innerText,
+                        links: Array.from(element.querySelectorAll('a')).map(link => {
+                            return { label: link.innerText, href: link.href };
+                        })
+                    });
+                    return acc;
+                }, []);
+            }
+        }
+        catch (_a) {
+            console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children);
+        }
+    }
+    render() {
+        const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
+        return (h("div", { key: '3c96aac7bf1fdcbdbc625c225ddc0e8898c53e61', class: "website-footer-wrapper" }, h("footer", { key: '99a5cc8d9314d5679939ff45b6c7b75c34b636f1', class: "website-footer", style: {
+                background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
+                backgroundSize: 'cover',
+            } }, h("div", { key: 'b9557f708fea1b72531115855900c5462c4b0c80', class: "viewport-margins" }, h("div", { key: '7fa44e2c7bccbb965ace27dad6e38a5672eac76b', class: "website-footer__content" }, h("div", { key: '21ffc5801b449db2f79284914b78fff453821d4c', class: "website-footer__links-container" }, h("section", { key: 'f011f1edc1bd2ed8f242f100867c7b631445e073' }, h("h2", { key: '663b91e98e2fdc21471f7575b4654eec2ddfb915', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: '7b8f956aa7f1683b1d02dea3ffada72dbaf8b24d', class: "website-footer__links" }, h("li", { key: '31ab710eb506f88ede7cc54afbb682b4bf2db724' }, h("a", { key: '87b041e2041ded6785d958255a86240dea2b56fe', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'd238b7890fa996a3547af2a5df14f983c15e687b' }), "Philadelphia, PA 19104-6206")), h("li", { key: '179c7d6edd9afb43e9df885a90e3f4f05dd1c7b8' }, h("a", { key: 'a784bb6777842c961e219bd3eaa0b9efbd9d24fb', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '64c6ba65dc23d5f10e8d9318d914e59a31ae75a2' }, h("a", { key: '8e91e8c93aee24a72790096fdeb7e0cdce89caac', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '2027b919303e4c8e5d25873d78ac7dd61fcf377b' }, h("a", { key: '157e532c56aa6ede5773f21f4169a9af5f82e5e6', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '95255d9bbef031ec05f7bf0c964b6027026fd2be' }, h("h2", { key: '1f2f9c91903888e0bd374de4e3766b68db02bfc7', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: '32790f2d6e6096b0b05b2e6ef1d24f88a36fc047', class: "website-footer__links" }, h("li", { key: '6233fa7c740be6aef6937ccca64293cb18019c6e' }, h("a", { key: '172452c25b2926f486f5122ec6a43127316497e3', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '8d59fa988ddb0057bfa3fd5e50e4101309502774' }, h("a", { key: 'c9ffb0c2120f46e5a2753782c3c53405f30eb3cf', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: 'bd14021edb6ae03dc961d7f2992d78db7923e474' }, h("a", { key: 'c8c4204ffc9a54e258d1168ab02c3c01c6f26186', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '31e36c9b62bdadc961573ddff3bb79a7c5dbfeca' }, h("a", { key: 'dc59bd19fc27370eae2739b38cc3fa73656b0154', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
+            this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
+        ], this.navigation && [
+            this.navigation.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
+        ]))), h("div", { key: '92ba07834ec5907ab47c59925d5d09d3dc7960df', class: "website-footer__footer" }, h("div", { key: 'f649f0dde206c92a41c10cb871137ccb725f2394', class: "viewport-margins" }, h("ul", { key: '82244f9c342acdcb9dd9ff0ae651c4b4cb2939e4', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '44be5c6a8380af4482a97080df640c34b852a865' }, h("a", { key: '8eb4ffa492285f6a2f3f42df1b2b5a784f042332', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '658402f36047ba302a90521a57e414a995bc19f4' }, h("a", { key: 'a0f85214bea0883b03abd4a1afc8ef97a6eddf27', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '0f43503a3c031967429ef9021457bafa3ec9325b' }, h("a", { key: '21b9c566ef1b8800b41a21ba70e4444128653b9c', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '92b1311cebfe09923505d0c9db17f2cc79bc8b09' }, h("a", { key: 'ed7ca974f5cea0841bb3946efc39cc6e13e8748f', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'effb3c2ef3eb3b8611bf8bf6cba2db907bde3d5d' }, h("a", { key: '1a6f73099f9311e189987988317dda7390dda6a5', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '3b1f57c5073869e4a5f3f4fbd94b28bee437bc72' }, h("a", { key: '4e2ab4fd8a1fcf310a5b67a5a264b7dc5b2aed11', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get hostElement() { return this; }
+    static get style() { return PennlibsFooterStyle0; }
+}, [1, "pennlibs-footer", {
+        "navigation": [16],
+        "navigationByChildren": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Footer);
+            }
+            break;
+    } });
+}
+
+const PennlibsFooter = Footer;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsFooter, defineCustomElement };
+
+//# sourceMappingURL=pennlibs-footer.js.map

package/dist/components/pennlibs-footer.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-footer.js","mappings":"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","names":[],"sources":["src/components/pennlibs-footer/pennlibs-footer.css?tag=pennlibs-footer&encapsulation=shadow","src/components/pennlibs-footer/pennlibs-footer.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n  --padding-bottom: 5.75rem;\n}\n\n.website-footer-wrapper {\n  background: var(--color-penn-blue);\n  padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1em;\n}\n\n.website-footer {\n  background-size: cover;\n  color: var(--color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n  color: var(--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(14em, 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(--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(--link-text-underline-offset);\n}","import { Component, Element, h, Prop, getAssetPath, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-footer',\n  styleUrl: 'pennlibs-footer.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Footer {\n  /**\n   * The navigation sections.\n   */\n  @Prop() navigation: Array<{\n    heading: string;\n    links: Array<{\n      label: string;\n      href: string;\n    }>;\n  }>;\n\n  @State() navigationByChildren;\n\n  @Element() hostElement: HTMLElement;\n\n  componentWillLoad() {\n    this.setNavigationByChildren();\n  }\n\n  setNavigationByChildren() {\n    try {\n      if (this.hostElement.children) {\n        this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n          (acc, element) => {\n            acc = acc.concat({\n              heading: element.querySelector('h2').innerText,\n              links: Array.from(element.querySelectorAll('a')).map(link => {\n                return { label: link.innerText, href: link.href }\n              })\n            })\n  \n            return acc;\n          }, []);\n      }\n    } catch {\n      console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n    }\n  }\n\n  render() {\n    const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n    \n    return (\n      <div class=\"website-footer-wrapper\">\n        <footer class=\"website-footer\" style={{\n          background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n          backgroundSize: 'cover',\n        }}>\n          <div class=\"viewport-margins\">\n            <div class=\"website-footer__content\">\n              <div class=\"website-footer__links-container\">\n                <section>\n                  <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n                  <ul class=\"website-footer__links\">\n                    <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n                    <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n                    <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n                    <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n                  </ul>\n                </section>\n                <section>\n                  <h2 class=\"website-footer__heading\">Stay in touch</h2>\n                  <ul class=\"website-footer__links\">\n                    <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n                    <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n                    <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n                    <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n                  </ul>\n                </section>\n                {this.navigationByChildren && [\n                  this.navigationByChildren.map(section => (\n                    <section>\n                      <h2 class=\"website-footer__heading\">{section.heading}</h2>\n                      <ul class=\"website-footer__links\">\n                        {section.links.map(link => (\n                          <li><a href={link.href}>{link.label}</a></li>\n                        ))}\n                      </ul>\n                    </section>\n                  ))\n                ]}\n                {this.navigation && [\n                  this.navigation.map(section => (\n                    <section>\n                      <h2 class=\"website-footer__heading\">{section.heading}</h2>\n                      <ul class=\"website-footer__links\">\n                        {section.links.map(link => (\n                          <li><a href={link.href}>{link.label}</a></li>\n                        ))}\n                      </ul>\n                    </section>\n                  ))\n                ]}\n              </div>\n            </div>\n          </div>\n          <div class=\"website-footer__footer\">\n            <div class=\"viewport-margins\">        \n              <ul class=\"website-footer__links website-footer__links--footer\">\n                <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n                <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n                <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n                <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n                <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n                <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n              </ul>\n            </div>\n          </div>\n        </footer>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pennlibs-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsHeader extends Components.PennlibsHeader, HTMLElement {}
+export const PennlibsHeader: {
+    prototype: PennlibsHeader;
+    new (): PennlibsHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;