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

package/dist/components/index.d.ts

@@ -0,0 +1,48 @@
+/* web custom elements */
+export { Banner as PennlibsBanner } from '../types/components/pennlibs-banner/pennlibs-banner';
+export { defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner';
+export { Chat as PennlibsChat } from '../types/components/pennlibs-chat/pennlibs-chat';
+export { defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat';
+export { Footer as PennlibsColors } from '../types/components/pennlibs-colors/pennlibs-colors';
+export { defineCustomElement as defineCustomElementPennlibsColors } from './pennlibs-colors';
+export { PennlibsFeedback as PennlibsFeedback } from '../types/components/pennlibs-feedback/pennlibs-feedback';
+export { defineCustomElement as defineCustomElementPennlibsFeedback } from './pennlibs-feedback';
+export { Footer as PennlibsFooter } from '../types/components/pennlibs-footer/pennlibs-footer';
+export { defineCustomElement as defineCustomElementPennlibsFooter } from './pennlibs-footer';
+export { Header as PennlibsHeader } from '../types/components/pennlibs-header/pennlibs-header';
+export { defineCustomElement as defineCustomElementPennlibsHeader } from './pennlibs-header';
+
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { PennlibsBanner, defineCustomElement as defineCustomElementPennlibsBanner } from './pennlibs-banner.js';
+export { PennlibsChat, defineCustomElement as defineCustomElementPennlibsChat } from './pennlibs-chat.js';
+export { PennlibsColors, defineCustomElement as defineCustomElementPennlibsColors } from './pennlibs-colors.js';
+export { PennlibsFeedback, defineCustomElement as defineCustomElementPennlibsFeedback } from './pennlibs-feedback.js';
+export { PennlibsFooter, defineCustomElement as defineCustomElementPennlibsFooter } from './pennlibs-footer.js';
+export { PennlibsHeader, defineCustomElement as defineCustomElementPennlibsHeader } from './pennlibs-header.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

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

package/dist/components/pennlibs-banner.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
+
+const pennlibsBannerCss = ":host{font-family:var(--font-family);font-size:var(--font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 0.75em}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--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(--color-fg-default)}.universal-nav{background:var(--color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--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(--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}";
+const PennlibsBannerStyle0 = pennlibsBannerCss;
+
+const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const shieldImageSrc = getAssetPath('./assets/penn-shield.png');
+        return (h("nav", { key: '5d8f303bc3db4445a91add6e57b6c20df8d0eb1a', class: "universal-nav", "aria-label": "Penn Libraries Websites" }, h("a", { key: 'd4617491f77f3a5a64c4434a5281da140ed32329', href: "#main-content", class: "skip-to-content-link" }, "Skip to content"), h("div", { key: '3858f6cea1a85336126908b0a3b0084735ac7deb', class: "viewport-margins" }, h("ul", { key: '18c4ae556af007616953db377b778186ff9cb31b' }, h("li", { key: '375aaa6be82566185cbb484ff082ed514861f1e2' }, h("a", { key: '4b8f30ed7eab1ae71de3097a4ece4887468558a7', href: "https://www.library.upenn.edu/", class: "universal-nav__penn-libraries" }, h("img", { key: '77c00c1b66d7c0775d4ab830f4bcdac94c21cf72', src: shieldImageSrc, class: "universal-nav__shield-image", width: "16", height: "16" }), "Penn Libraries")), h("li", { key: 'd0055db7eff99adc0fb46f0c3c62c8710ffad217' }, h("a", { key: '1f3245f1a96ae4f5ba037f7bbbf9278d79a8bc01', href: "https://franklin.library.upenn.edu/" }, "Franklin")), h("li", { key: '605908137ec7c38143acd911f9cf67ee842f3cbe' }, h("a", { key: 'c97cf1d1b1c8b3964088b2f4f6231b730e784f5c', href: "https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview" }, "Account")), h("li", { key: 'cace330f410469ba715646858dde02323a1b6da8' }, h("a", { key: 'dc7adbbf75d443055a079d17acbad0ae71ea7bf5', href: "https://guides.library.upenn.edu/" }, "Guides")), h("li", { key: 'daa02dc5b510e4dcc8190c9e954df30c1aeecb8b' }, h("a", { key: 'be4fdefc5fa281365551eada13dc18809e7e5872', href: "https://colenda.library.upenn.edu/" }, "Colenda")), h("li", { key: '8ee4491bb2f9c80cd26c984bf1bf2f0a2b0b2b29' }, h("a", { key: 'e4be73893a0a174634edeaa461f0e394c16057f5', href: "https://faq.library.upenn.edu/ask" }, "Ask chat"))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return PennlibsBannerStyle0; }
+}, [1, "pennlibs-banner"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-banner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Banner);
+            }
+            break;
+    } });
+}
+
+const PennlibsBanner = Banner;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsBanner, defineCustomElement };
+
+//# sourceMappingURL=pennlibs-banner.js.map

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

@@ -0,0 +1 @@
+{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,shCAAshC,CAAC;AACjjC,6BAAe,iBAAiB;;MCOnB,MAAM;;;;;;IACjB,MAAM;QACJ,MAAM,cAAc,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAAC;QAEhE,QACE,4DACE,KAAK,EAAC,eAAe,gBACV,yBAAyB,IAEpC,0DAAG,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,sBAAsB,sBAAoB,EACxE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DACE,6DACE,0DAAG,IAAI,EAAC,gCAAgC,EAAC,KAAK,EAAC,+BAA+B,IAC5E,4DAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,mBACrF,CACD,EACL,6DAAI,0DAAG,IAAI,EAAC,qCAAqC,eAAa,CAAK,EACnE,6DAAI,0DAAG,IAAI,EAAC,2GAA2G,cAAY,CAAK,EACxI,6DAAI,0DAAG,IAAI,EAAC,mCAAmC,aAAW,CAAK,EAC/D,6DAAI,0DAAG,IAAI,EAAC,oCAAoC,cAAY,CAAK,EACjE,6DAAI,0DAAG,IAAI,EAAC,mCAAmC,eAAa,CAAK,CAC9D,CACD,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pennlibs-banner/pennlibs-banner.css?tag=pennlibs-banner&encapsulation=shadow","src/components/pennlibs-banner/pennlibs-banner.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n}\n\n.viewport-margins {\n  max-width: calc(var(--max-width) + 0.5em); /* plus universal nav item link padding */\n  margin: 0 auto;\n  padding: 0 0.75em;\n}\n\n.skip-to-content-link {\n  position: absolute;\n  transform: translateY(-300%);\n  background: var(--color-bg-default);\n  left: 0.5em;\n  padding: 0.5em 1em;\n  margin-top: 0.5em;\n  position: absolute;\n}\n\n.skip-to-content-link:focus {\n  transform: translateY(0%);\n  color: var(--color-fg-default);\n}\n\n.universal-nav {\n  background: var(--color-penn-blue);\n}\n\n.universal-nav ul {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  scrollbar-color: var(--color-penn-red);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.universal-nav li {\n  display: inline-block;\n}\n\n.universal-nav a {\n  display: inline-block;\n  text-transform: uppercase;\n  font-size: 0.75em;\n  letter-spacing: 0.075em;\n  font-weight: 600;\n  color: var(--color-fg-subtle-on-emphasis);\n  padding: 0.5em;\n  text-decoration: none;\n}\n\n.universal-nav a:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: .15em;\n}\n\n.universal-nav__shield-image {\n  vertical-align: sub;\n  height: 1em;\n  padding-right: 0.5em;\n  height: auto;\n}\n","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-banner',\n  styleUrl: 'pennlibs-banner.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class Banner {\n  render() {\n    const shieldImageSrc = getAssetPath('./assets/penn-shield.png');\n\n    return (\n      <nav\n        class=\"universal-nav\"\n        aria-label=\"Penn Libraries Websites\"\n      >\n        <a href=\"#main-content\" class=\"skip-to-content-link\">Skip to content</a>\n        <div class=\"viewport-margins\">\n          <ul>\n            <li>\n              <a href=\"https://www.library.upenn.edu/\" class=\"universal-nav__penn-libraries\">\n                <img src={shieldImageSrc} class=\"universal-nav__shield-image\" width=\"16\" height=\"16\" />Penn Libraries\n              </a>\n            </li>\n            <li><a href=\"https://franklin.library.upenn.edu/\">Franklin</a></li>\n            <li><a href=\"https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en&section=overview\">Account</a></li>\n            <li><a href=\"https://guides.library.upenn.edu/\">Guides</a></li>\n            <li><a href=\"https://colenda.library.upenn.edu/\">Colenda</a></li>\n            <li><a href=\"https://faq.library.upenn.edu/ask\">Ask chat</a></li>\n          </ul>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/pennlibs-chat.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const pennlibsChatCss = ":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: normal;\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(--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(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention),0 0 0 4px var(--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}";
+const PennlibsChatStyle0 = pennlibsChatCss;
+
+const Chat = /*@__PURE__*/ proxyCustomElement(class Chat extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.libchat_url = "https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857";
+        this.href = "";
+    }
+    connectedCallback() {
+        this.href = this.libchat_url + '?referer=' + window.location.href;
+    }
+    render() {
+        return (h("a", { key: '7e987c36da941c639917c16b2aa273262c1cabbb', href: this.href, target: "_blank", "aria-label": "Chat", id: "pennlibs-chat" }, h("svg", { key: '74dedb9dce8e714dc58df0f88149c157ae8f3ee0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 82 82" }, h("path", { key: '0bbdb855437c5c35ef3067e328c72325c0e40f6e', fill: "#fff", d: "M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z" }), h("path", { key: '23832dead6b6c2efe3353fef8c0367c50f7bffea', fill: "#011f5b", d: "M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z" })), h("span", { key: '5fe7d4714917699688a27cfac156e3cc88545d4c' }, "Chat")));
+    }
+    static get style() { return PennlibsChatStyle0; }
+}, [1, "pennlibs-chat", {
+        "href": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-chat"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-chat":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Chat);
+            }
+            break;
+    } });
+}
+
+const PennlibsChat = Chat;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsChat, defineCustomElement };
+
+//# sourceMappingURL=pennlibs-chat.js.map

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

@@ -0,0 +1 @@
+{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8lCAA8lC,CAAC;AACvnC,2BAAe,eAAe;;MCMjB,IAAI;;;;;QACf,gBAAW,GAAG,4GAA4G,CAAC;oBAC3G,EAAE;;IAElB,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;KACnE;IAED,MAAM;QACJ,QACE,0DACI,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,gBACJ,MAAM,EACjB,EAAE,EAAC,eAAe,IAElB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8OAA8O,GAAE,EAAA,6DAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,qfAAqf,GAAE,CAAM,EACp1B,sEAAiB,CACf,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pennlibs-chat/pennlibs-chat.css?tag=pennlibs-chat&encapsulation=shadow","src/components/pennlibs-chat/pennlibs-chat.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: normal;\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(--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(--link-text-underline-offset);\n  text-decoration-thickness: var(--link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-bg-attention),0 0 0 4px var(--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}","import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-chat',\n  styleUrl: 'pennlibs-chat.css',\n  shadow: true\n})\nexport class Chat {\n  libchat_url = \"https://faq.library.upenn.edu/chat/widget/32588ef2b889010cb2f3f39c678ffba58e390e74d013b238dd2b1e35717f7857\";\n  @State() href = \"\";\n\n  connectedCallback() {\n    this.href = this.libchat_url + '?referer=' + window.location.href;\n  }\n\n  render() {\n    return (\n      <a\n          href={this.href}\n          target=\"_blank\"\n          aria-label=\"Chat\"\n          id=\"pennlibs-chat\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 82 82\"><path fill=\"#fff\" d=\"M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z\"/><path fill=\"#011f5b\" d=\"M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z\"/></svg>\n          <span>Chat</span>\n        </a>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/pennlibs-colors.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const pennlibsColorsCss = ":host{font-family:var(--font-family);font-size:var(--font-size);--max-width:1080px}*{box-sizing:border-box}.viewport-margins{max-width:var(--max-width);margin:0 auto;padding:0 1rem}.colors-container{display:grid;grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr));gap:2rem;margin-bottom:2rem}.colors-container code{display:block;width:100%;padding:3em 1.5em}.colors-container code+code{margin-top:1em}.colors-container code span{font-size:0.875em;display:inline-block;background:var(--color-bg-default);padding:0.25em 0.5em}.colors-container code{display:flex;justify-content:space-between}h2{font-size:1.25em;font-weight:600;margin-bottom:0.25em}";
+const PennlibsColorsStyle0 = pennlibsColorsCss;
+
+const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.navigation = undefined;
+    }
+    render() {
+        return (h("div", { key: '9f542188f271269c4fc80ba573a0c81d1b922ce5', class: "viewport-margins" }, h("div", { key: '5510d2b2929024295b79dcf08f3dfb513d32f1e1', class: "colors-container" }, h("section", { key: '267aeba4265212039ead9d685ed5f0365c1d9ea9' }, h("h2", { key: '96b71a5d957e6d073fda11fe0776f1aa28ec6242' }, "Penn Brand"), h("code", { key: 'eb7ee55fd2d9d7a9b92e49047728bd73b4a6325d', style: { background: "var(--color-penn-red)" } }, h("span", { key: 'eb0cba284064bca572d3320ac1bc0ab3c084782c' }, "var(--color-penn-red)"), h("span", { key: '0984fbbf1285c65699782e24de71705700d515bb' }, "#990000")), h("code", { key: '3be80e5ac704e3f0159d62b59ee925203350271c', style: { background: "var(--color-penn-blue)" } }, h("span", { key: 'd065b15d92de05cfd87689cc741e3de451bae162' }, "var(--color-penn-blue)"), h("span", { key: '24d997f1a3300f93cb24f80727d20835e54f6854' }, "#011F5B"))), h("section", { key: 'f61959632c280040021b50b90992ce6ff7a0ddba' }, h("h2", { key: '286438030304371a4935577645a67fb88fbea00f' }, "Grays"), h("code", { key: '2fec1c2f0d68c95f13a94df7638c20fde38e8ea5', style: { background: "var(--color-gray-dark)" } }, h("span", { key: '8c6120e6f425fdd93b46ab94bea7e62053a90cc6' }, "var(--color-gray-dark)"), h("span", { key: 'b3a9e0c3c197492f08685c7c02175a26ae4f7670' }, "#2D3545")), h("code", { key: '977312372e2182ff3e8b794427df3f70e4917c42', style: { background: "var(--color-gray)" } }, h("span", { key: 'bd45ec6acf84c622def674840f2802969073a1d9' }, "var(--color-gray)"), h("span", { key: '7c1f5c3c9172af250d08b669932885c4fae90350' }, "#595F6A")), h("code", { key: 'b87e7c03ca66c7b737066a56f40ec8342d4b61c3', style: { background: "var(--color-gray-light)" } }, h("span", { key: '87b6d2a9926364f25640716e300f8e0b733a2f13' }, "var(--color-gray-light)"), h("span", { key: '50cc222746d85afcd9a0ec95868d131821922ecf' }, "#F5F5F6"))), h("section", { key: '1c98f2bcd5f933fa0e4fab4a5d642006307a1591' }, h("h2", { key: '28895da4151817bb35380f5a753a92717bcfd049' }, "Blue"), h("code", { key: 'ae058e22494317a20952700cee2ac11ffd0cc930', style: { background: "var(--color-blue)" } }, h("span", { key: 'bbea4e1a76d7c6bb06c819da39bd555db7fa270c' }, "var(--color-blue)"), h("span", { key: '22a092922cf487751d1f6e4dbc686350dd332b0f' }, "#0E5696")), h("code", { key: 'a2ef61f288c3642e380f3f24d1fbd28428b46b5f', style: { background: "var(--color-blue-light)" } }, h("span", { key: '3ecf70ab57d4a72a293ce7bf67a8c310867c2ea5' }, "var(--color-blue-light)"), h("span", { key: '35f3cb70b4582fad09bc31ce7dc7a0d9e0bc61ea' }, "#D4E4F2"))), h("section", { key: '1a9e813bd05855c8f66d84e361036bf8fcaa5b13' }, h("h2", { key: 'd27fa31c99504099007aba3bfe3f3a0ffd62d599' }, "Green"), h("code", { key: 'ce36bd67afa0a8f485bc8e3ada85cc15acd81021', style: { background: "var(--color-green)" } }, h("span", { key: '63cb3575d25bc33dd99804a7a5e9c9385bcce575' }, "var(--color-green)"), h("span", { key: 'bf3c8b8458d6737f08d731c0e7c15d57a28e54c4' }, "#267434")), h("code", { key: 'e05b12768fe80c34e43f03e7ba6c156939992560', style: { background: "var(--color-green-light)" } }, h("span", { key: '2915e9c6db7fb99fc175cd9a53d77902cb79e4ea' }, "var(--color-green-light)"), h("span", { key: '7d12f9900fdbcd886bea1ba230d60396ae40ebc7' }, "#F1F7E1"))), h("section", { key: '6f93947d46430e52cfcad2e94d0a17112c93e3c3' }, h("h2", { key: '44f40d2e1565583a75bc4a1bfae69235dfa00ddc' }, "Orange"), h("code", { key: '4d8a84d9c38d5579b91793d601c091508acf95a1', style: { background: "var(--color-orange)" } }, h("span", { key: '97be89d1f5d6d5538ac1b8d14b8dbb181749f952' }, "var(--color-orange)"), h("span", { key: '49cdf22c413e741fd95df18e5edc0230de4f6751' }, "#BD4718")), h("code", { key: 'b5acfbbc33513842a816272c58e27b300df66962', style: { background: "var(--color-orange-light)" } }, h("span", { key: '01963c472a4730a616a38642ee9758514b557128' }, "var(--color-orange-light)"), h("span", { key: '997937894214fd05808298d2911b2779c0021cb1' }, "#FEEDDD"))), h("section", { key: '90a086ee4a3a79430497399ef053904a1511a018' }, h("h2", { key: '641c77ec7d3613b1cba2aedaee1d792c9c2a0c6a' }, "Purple"), h("code", { key: '4a25606bdd37055d42511264c537b6761e08ec79', style: { background: "var(--color-purple)" } }, h("span", { key: 'd0dd674c8624f1a2a2d8edaf45bebf2f010874bd' }, "var(--color-purple)"), h("span", { key: '301e06171b3ef5efe41e2b45904e1c74abe254f7' }, "#80317F")), h("code", { key: 'ee7be83b1d86e9c2694f908574e31298cf407280', style: { background: "var(--color-purple-light)" } }, h("span", { key: 'ff64954fb723c749ddf9662336e73dbba566338c' }, "var(--color-purple-light)"), h("span", { key: 'fc00ed6ad6750212a2d07122aa1d6bce95cfbaa2' }, "#F2DFED"))))));
+    }
+    static get style() { return PennlibsColorsStyle0; }
+}, [1, "pennlibs-colors", {
+        "navigation": [16]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-colors"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-colors":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Footer);
+            }
+            break;
+    } });
+}
+
+const PennlibsColors = Footer;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsColors, defineCustomElement };
+
+//# sourceMappingURL=pennlibs-colors.js.map

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

@@ -0,0 +1 @@
+{"file":"pennlibs-colors.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,ipBAAipB,CAAC;AAC5qB,6BAAe,iBAAiB;;MCMnB,MAAM;;;;;;;IAYjB,MAAM;QAEJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,kEACE,0EAAmB,EACnB,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,uBAAuB,EAAE,IAClD,uFAAkC,EAClC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAC,IAClD,wFAAmC,EACnC,yEAAoB,CACf,CACC,EAEV,kEACE,qEAAc,EACd,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,IACnD,wFAAmC,EACnC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAC9C,mFAA8B,EAC9B,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,yBAAyB,EAAE,IACpD,yFAAoC,EACpC,yEAAoB,CACf,CACC,EAEV,kEACE,oEAAa,EACb,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAC9C,mFAA8B,EAC9B,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,yBAAyB,EAAE,IACpD,yFAAoC,EACpC,yEAAoB,CACf,CACC,EAEV,kEACE,qEAAc,EACd,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,IAC/C,oFAA+B,EAC/B,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,0BAA0B,EAAE,IACrD,0FAAqC,EACrC,yEAAoB,CACf,CACC,EAEV,kEACE,sEAAe,EACf,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,IAChD,qFAAgC,EAChC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,IACtD,2FAAsC,EACtC,yEAAoB,CACf,CACC,EAEV,kEACE,sEAAe,EACf,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,IAChD,qFAAgC,EAChC,yEAAoB,CACf,EACP,6DAAM,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,IACtD,2FAAsC,EACtC,yEAAoB,CACf,CACC,CACN,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pennlibs-colors/pennlibs-colors.css?tag=pennlibs-colors&encapsulation=shadow","src/components/pennlibs-colors/pennlibs-colors.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  --max-width: 1080px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.viewport-margins {\n  max-width: var(--max-width);\n  margin: 0 auto;\n  padding: 0 1rem;\n}\n\n.colors-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));\n  gap: 2rem;\n  margin-bottom: 2rem;\n}\n\n\n.colors-container code {\n  display: block;\n  width: 100%;\n  padding: 3em 1.5em;\n}\n\n.colors-container code + code {\n  margin-top: 1em;\n}\n\n.colors-container code span {\n  font-size: 0.875em;\n  display: inline-block;\n  background: var(--color-bg-default);\n  padding: 0.25em 0.5em;\n}\n\n.colors-container code {\n  display: flex;\n  justify-content: space-between;\n}\n\nh2 {\n  font-size: 1.25em;\n  font-weight: 600;\n  margin-bottom: 0.25em;\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-colors',\n  styleUrl: 'pennlibs-colors.css',\n  shadow: true\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  render() {\n    \n    return (\n      <div class=\"viewport-margins\">\n        <div class=\"colors-container\">\n          <section>\n            <h2>Penn Brand</h2>\n            <code style={{ background: \"var(--color-penn-red)\" }}>\n              <span>var(--color-penn-red)</span>\n              <span>#990000</span>\n            </code>\n            <code style={{ background: \"var(--color-penn-blue)\"}}>\n              <span>var(--color-penn-blue)</span>\n              <span>#011F5B</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Grays</h2>\n            <code style={{ background: \"var(--color-gray-dark)\" }}>\n              <span>var(--color-gray-dark)</span>\n              <span>#2D3545</span>\n            </code>\n            <code style={{ background: \"var(--color-gray)\" }}>\n              <span>var(--color-gray)</span>\n              <span>#595F6A</span>\n            </code>\n            <code style={{ background: \"var(--color-gray-light)\" }}>\n              <span>var(--color-gray-light)</span>\n              <span>#F5F5F6</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Blue</h2>\n            <code style={{ background: \"var(--color-blue)\" }}>\n              <span>var(--color-blue)</span>\n              <span>#0E5696</span>\n            </code>\n            <code style={{ background: \"var(--color-blue-light)\" }}>\n              <span>var(--color-blue-light)</span>\n              <span>#D4E4F2</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Green</h2>\n            <code style={{ background: \"var(--color-green)\" }}>\n              <span>var(--color-green)</span>\n              <span>#267434</span>\n            </code>\n            <code style={{ background: \"var(--color-green-light)\" }}>\n              <span>var(--color-green-light)</span>\n              <span>#F1F7E1</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Orange</h2>\n            <code style={{ background: \"var(--color-orange)\" }}>\n              <span>var(--color-orange)</span>\n              <span>#BD4718</span>\n            </code>\n            <code style={{ background: \"var(--color-orange-light)\" }}>\n              <span>var(--color-orange-light)</span>\n              <span>#FEEDDD</span>\n            </code>\n          </section>\n\n          <section>\n            <h2>Purple</h2>\n            <code style={{ background: \"var(--color-purple)\" }}>\n              <span>var(--color-purple)</span>\n              <span>#80317F</span>\n            </code>\n            <code style={{ background: \"var(--color-purple-light)\" }}>\n              <span>var(--color-purple-light)</span>\n              <span>#F2DFED</span>\n            </code>\n          </section>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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

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":";;AAAA,MAAM,iBAAiB,GAAG,0yDAA0yD,CAAC;AACr0D,6BAAe,iBAAiB;;MCOnB,MAAM;;;;;;;;IAgBjB,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAED,uBAAuB;QACrB,IAAI;YACF,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;gBAC7B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CACtE,CAAC,GAAG,EAAE,OAAO;oBACX,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;wBACf,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,SAAS;wBAC9C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI;4BACvD,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAA;yBAClD,CAAC;qBACH,CAAC,CAAA;oBAEF,OAAO,GAAG,CAAC;iBACZ,EAAE,EAAE,CAAC,CAAC;aACV;SACF;QAAC,WAAM;YACN,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;SAC3F;KACF;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;QAEpE,QACE,4DAAK,KAAK,EAAC,wBAAwB,IACjC,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE;gBACpC,UAAU,EAAE,8BAA8B,mBAAmB,qBAAqB;gBAClF,cAAc,EAAE,OAAO;aACxB,IACC,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEACE,2DAAI,KAAK,EAAC,yBAAyB,qBAAoB,EACvD,2DAAI,KAAK,EAAC,uBAAuB,IAC/B,6DAAI,0DAAG,IAAI,EAAC,6FAA6F,0BAAmB,4DAAM,gCAA+B,CAAK,EACtK,6DAAI,0DAAG,IAAI,EAAC,oBAAoB,qBAAmB,CAAK,EACxD,6DAAI,0DAAG,IAAI,EAAC,0CAA0C,iBAAe,CAAK,EAC1E,6DAAI,0DAAG,IAAI,EAAC,2CAA2C,EAAC,MAAM,EAAC,QAAQ,0BAAwB,CAAK,CACjG,CACG,EACV,kEACE,2DAAI,KAAK,EAAC,yBAAyB,oBAAmB,EACtD,2DAAI,KAAK,EAAC,uBAAuB,IAC/B,6DAAI,0DAAG,IAAI,EAAC,wCAAwC,iBAAe,CAAK,EACxE,6DAAI,0DAAG,IAAI,EAAC,qCAAqC,gBAAc,CAAK,EACpE,6DAAI,0DAAG,IAAI,EAAC,yCAAyC,eAAa,CAAK,EACvE,6DAAI,0DAAG,IAAI,EAAC,iDAAiD,eAAa,CAAK,CAC5E,CACG,EACT,IAAI,CAAC,oBAAoB,IAAI;YAC5B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,OAAO,KACnC,mBACE,UAAI,KAAK,EAAC,yBAAyB,IAAE,OAAO,CAAC,OAAO,CAAM,EAC1D,UAAI,KAAK,EAAC,uBAAuB,IAC9B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KACrB,cAAI,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAK,CAAK,CAC9C,CAAC,CACC,CACG,CACX,CAAC;SACH,EACA,IAAI,CAAC,UAAU,IAAI;YAClB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,KACzB,mBACE,UAAI,KAAK,EAAC,yBAAyB,IAAE,OAAO,CAAC,OAAO,CAAM,EAC1D,UAAI,KAAK,EAAC,uBAAuB,IAC9B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KACrB,cAAI,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAK,CAAK,CAC9C,CAAC,CACC,CACG,CACX,CAAC;SACH,CACG,CACF,CACF,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,2DAAI,KAAK,EAAC,qDAAqD,IAC7D,6DAAI,0DAAG,IAAI,EAAC,wBAAwB,YAAU,CAAK,EACnD,6DAAI,0DAAG,IAAI,EAAC,4CAA4C,qBAAmB,CAAK,EAChF,6DAAI,0DAAG,IAAI,EAAC,wDAAwD,+CAA6C,CAAK,EACtH,6DAAI,0DAAG,IAAI,EAAC,wCAAwC,iBAAe,CAAK,EACxE,6DAAI,0DAAG,IAAI,EAAC,6CAA6C,yBAAuB,CAAK,EACrF,6DAAI,0DAAG,IAAI,EAAC,2DAA2D,oCAAkC,CAAK,CAC3G,CACD,CACF,CACC,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;