@penn-libraries/web 0.3.1 → 1.0.0-dev.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/pennlibs-banner.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat_6.cjs.entry.js +12 -12
- package/dist/cjs/pennlibs-chat_6.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-banner/pennlibs-banner.css +8 -8
- package/dist/collection/components/pennlibs-chat/pennlibs-chat.css +12 -6
- package/dist/collection/components/pennlibs-fallback-img/pennlibs-fallback-img.css +3 -3
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.css +21 -16
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.css +15 -10
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +29 -4
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.css +19 -14
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +3 -2
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +17 -18
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +3 -2
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js.map +1 -1
- package/dist/components/pennlibs-banner.js +1 -1
- package/dist/components/pennlibs-banner.js.map +1 -1
- package/dist/components/pennlibs-chat.js +1 -1
- package/dist/components/pennlibs-chat.js.map +1 -1
- package/dist/components/pennlibs-fallback-img.js +1 -1
- package/dist/components/pennlibs-fallback-img.js.map +1 -1
- package/dist/components/pennlibs-feedback.js +1 -1
- package/dist/components/pennlibs-feedback.js.map +1 -1
- package/dist/components/pennlibs-footer.js +5 -5
- package/dist/components/pennlibs-footer.js.map +1 -1
- package/dist/components/pennlibs-header.js +2 -2
- package/dist/components/pennlibs-header.js.map +1 -1
- package/dist/components/pennlibs-hero.js +2 -2
- package/dist/components/pennlibs-hero.js.map +1 -1
- package/dist/docs.json +39 -6
- package/dist/esm/pennlibs-banner.entry.js +1 -1
- package/dist/esm/pennlibs-banner.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat_6.entry.js +12 -12
- package/dist/esm/pennlibs-chat_6.entry.js.map +1 -1
- package/dist/types/components/pennlibs-footer/pennlibs-footer.d.ts +25 -0
- package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +2 -1
- package/dist/types/components/pennlibs-hero/pennlibs-hero.d.ts +2 -1
- package/dist/types/components.d.ts +96 -8
- package/dist/web/{p-b9fe301b.entry.js → p-5dab51f0.entry.js} +13 -13
- package/dist/web/p-5dab51f0.entry.js.map +1 -0
- package/dist/web/{p-bb31e5e2.entry.js → p-e331a309.entry.js} +2 -2
- package/dist/web/p-e331a309.entry.js.map +1 -0
- package/dist/web/pennlibs-banner.entry.esm.js.map +1 -1
- package/dist/web/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +1 -1
- package/dist/web/web.css +536 -58
- package/dist/web/web.esm.js +1 -1
- package/hydrate/index.js +42 -15
- package/hydrate/index.mjs +42 -15
- package/package.json +1 -1
- package/dist/web/p-b9fe301b.entry.js.map +0 -1
- package/dist/web/p-bb31e5e2.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-hero.js","sourceRoot":"","sources":["../../../src/components/pennlibs-hero/pennlibs-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,qBAAqB,GAAG,CAAC,cAAkC,EAAU,EAAE;IAC3E,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,OAAO,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,KAAI,EAAE,CAAC;AACtC,CAAC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"pennlibs-hero.js","sourceRoot":"","sources":["../../../src/components/pennlibs-hero/pennlibs-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,qBAAqB,GAAG,CAAC,cAAkC,EAAU,EAAE;IAC3E,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,OAAO,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,KAAI,EAAE,CAAC;AACtC,CAAC,CAAC;AAEF;;;;;;;GAOG;AAOH,MAAM,OAAO,IAAI;IANjB;QAQW,uBAAkB,GAA8B,IAAI,CAAC;QACrD,uBAAkB,GAA8B,IAAI,CAAC;QACrD,yBAAoB,GAAgC,IAAI,CAAC;QACzD,YAAO,GAAW,EAAE,CAAC;QACtB,YAAO,GAAW,EAAE,CAAC;KAyD9B;IAtDC,iBAAiB;QACf,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAuB,CAAC;QAC/G,IAAI,kBAAkB,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;YAC7C,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;QACnD,CAAC;QAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAuB,CAAC;QACpG,IAAI,kBAAkB,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;QAC/C,CAAC;QAED,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,qBAAqB,CAAyB,CAAC;QAC3G,IAAI,oBAAoB,EAAE,CAAC;YACzB,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,cAAkC;QAChE,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,UAAU,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;YACzD,IAAI,UAAU,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAChC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBAC1B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;QACjE,CAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE;YAClE,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,OAAO,GAAG;gBACrB,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,kBAAkB,IAAI,CAC1B,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,2DAAI,KAAK,EAAC,eAAe,EAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,SAAS,GAAI;oBACzE,IAAI,CAAC,oBAAoB,IAAI,0DAAG,KAAK,EAAC,mBAAmB,EAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,SAAS,GAAI,CACzG,CACP,CACG,CACF,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, State, Element } from \"@stencil/core\";\n\nconst getCurrentImageSource = (pictureElement: HTMLPictureElement): string => {\n const imgElement = pictureElement.querySelector('img');\n return imgElement?.currentSrc || '';\n};\n\n/**\n * Place your most important content in a prominent space, often at the top of your website.\n *\n * @slot start - Content to display at the start (top) of the hero.\n * \n * @prop --pl-viewport-max-width: The maximum width of the hero inner content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.\n */\n@Component({\n tag: 'pennlibs-hero',\n styleUrl: 'pennlibs-hero.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Hero {\n @Element() hostElement: HTMLElement;\n @State() heroPictureElement: null | HTMLPictureElement = null;\n @State() heroHeadingElement: null | HTMLHeadingElement = null;\n @State() heroParagraphElement: null | HTMLParagraphElement = null;\n @State() heroSrc: string = \"\";\n private lastSrc: string = \"\";\n private animationFrameId: number;\n\n componentWillLoad() {\n const heroPictureElement = this.hostElement.querySelector('picture[hero=art-direction]') as HTMLPictureElement;\n if (heroPictureElement) {\n this.heroPictureElement = heroPictureElement;\n this.startWatchingCurrentSrc(heroPictureElement);\n }\n\n const heroHeadingElement = this.hostElement.querySelector('h1[hero=heading]') as HTMLHeadingElement;\n if (heroHeadingElement) {\n this.heroHeadingElement = heroHeadingElement;\n }\n\n const heroParagraphElement = this.hostElement.querySelector('p[hero=sub-heading]') as HTMLParagraphElement;\n if (heroParagraphElement) {\n this.heroParagraphElement = heroParagraphElement;\n }\n }\n\n private startWatchingCurrentSrc(pictureElement: HTMLPictureElement) {\n const checkCurrentSrc = () => {\n const currentSrc = getCurrentImageSource(pictureElement);\n if (currentSrc !== this.lastSrc) {\n this.lastSrc = currentSrc;\n this.heroSrc = currentSrc;\n }\n this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n };\n \n this.animationFrameId = requestAnimationFrame(checkCurrentSrc);\n }\n\n disconnectedCallback() {\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n }\n }\n\n render() {\n return (\n <div class=\"hero\" style={{ backgroundImage: `url(${this.heroSrc})` }}>\n <div class=\"hero__content\">\n <slot name=\"start\" />\n <div class=\"hero__heading-container\">\n {this.heroHeadingElement && (\n <div class=\"viewport-margins\">\n <h1 class=\"hero__heading\" innerHTML={this.heroHeadingElement.innerText} />\n {this.heroParagraphElement && <p class=\"hero__sub-heading\" innerHTML={this.heroParagraphElement.innerHTML} />}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n}"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
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 var(--viewport-margins-gutter, 1em)}.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}";
|
|
3
|
+
const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
|
|
4
4
|
|
|
5
5
|
const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,
|
|
1
|
+
{"file":"pennlibs-banner.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,2kCAA2kC;;MCQxlC,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;IACjB,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG,YAAY,CAAC,0BAA0B,CAAC;AAE/D,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,gBACV,yBAAyB,EAAA,EAEpC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,sBAAsB,EAAoB,EAAA,iBAAA,CAAA,EACxE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,gCAAgC,EAAC,KAAK,EAAC,+BAA+B,EAAA,EAC5E,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAG,CAAA,mBACrF,CACD,EACL,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,qCAAqC,EAAA,EAAA,UAAA,CAAa,CAAK,EACnE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,2GAA2G,EAAA,EAAA,SAAA,CAAY,CAAK,EACxI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,mCAAmC,EAAA,EAAA,QAAA,CAAW,CAAK,EAC/D,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,oCAAoC,EAAA,EAAA,SAAA,CAAY,CAAK,EACjE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mCAAmC,EAAA,EAAA,UAAA,CAAa,CAAK,CAC9D,CACD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"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(--pl-font-family);\n font-size: var(--pl-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 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.skip-to-content-link {\n position: absolute;\n transform: translateY(-300%);\n background: var(--pl-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(--pl-color-fg-default);\n}\n\n.universal-nav {\n background: var(--pl-color-penn-blue);\n}\n\n.universal-nav ul {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n scrollbar-color: var(--pl-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(--pl-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§ion=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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
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}";
|
|
3
|
+
const pennlibsChatCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n line-height: normal;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\na {\n display: flex;\n align-items: center;\n background: linear-gradient(45deg, #faa755, #fcca99);\n border-radius: 1em;\n position: fixed;\n bottom: 0.75em;\n right: 0.75em;\n box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n color: var(--pl-color-penn-blue);\n text-decoration: none;\n font-weight: 500;\n padding: 0.15em;\n font-size: 1em;\n\n @media (min-width: 820px) {\n bottom: 1.5em;\n right: 1.5em;\n width: auto;\n padding: 0.15em 0.75em;\n padding-left: 0.5em;\n }\n}\n\na:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n width: 2.5em;\n height: 2.5em;\n}\n\nspan {\n display: none;\n font-size: 1.1em;\n\n @media (min-width: 820px) {\n display: inline;\n }\n}";
|
|
4
4
|
|
|
5
5
|
const Chat = /*@__PURE__*/ proxyCustomElement(class Chat extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"pennlibs-chat.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4qCAA4qC;;MCOvrC,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;AALjB,IAAA,WAAA,GAAA;;;;AAME,QAAA,IAAW,CAAA,WAAA,GAAG,4GAA4G;AACjH,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;AAmBnB;IAjBC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;;IAGnE,MAAM,GAAA;QACJ,QACE,CACI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,EACJ,YAAA,EAAA,MAAM,EACjB,EAAE,EAAC,eAAe,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8OAA8O,EAAE,CAAA,EAAA,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,qfAAqf,GAAE,CAAM,EACp1B,CAAiB,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAA,CAAA,CACf;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"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(--pl-font-family);\n font-size: var(--pl-font-size);\n line-height: normal;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\na {\n display: flex;\n align-items: center;\n background: linear-gradient(45deg, #faa755, #fcca99);\n border-radius: 1em;\n position: fixed;\n bottom: 0.75em;\n right: 0.75em;\n box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;\n color: var(--pl-color-penn-blue);\n text-decoration: none;\n font-weight: 500;\n padding: 0.15em;\n font-size: 1em;\n\n @media (min-width: 820px) {\n bottom: 1.5em;\n right: 1.5em;\n width: auto;\n padding: 0.15em 0.75em;\n padding-left: 0.5em;\n }\n}\n\na:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\na:hover,\na:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;\n}\n\nsvg {\n width: 2.5em;\n height: 2.5em;\n}\n\nspan {\n display: none;\n font-size: 1.1em;\n\n @media (min-width: 820px) {\n display: inline;\n }\n}","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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pennlibsFallbackImgCss = ":host{font-family:var(--font-family);font-size:var(--font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
|
|
3
|
+
const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
|
|
4
4
|
|
|
5
5
|
const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-fallback-img.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,
|
|
1
|
+
{"file":"pennlibs-fallback-img.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,iCAAiC,CAAC;QAEjE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n background: var(--pl-color-bg-subtle);\n aspect-ratio: 3/2;\n}\n\n.no-image__img {\n width: 100%;\n max-width: 150px;\n filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n tag: 'pennlibs-fallback-img',\n styleUrl: 'pennlibs-fallback-img.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class NoImage {\n render() {\n const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n return (\n <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n );\n }\n} "],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
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%;
|
|
3
|
+
const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;padding:1.5em 1em;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box}@media print{:host{display:none}}.feedback-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;width:100%;justify-content:center}@media (max-width: 26em){.feedback-container{justify-content:center}}h2{display:inline-block;margin:0 0.5em 0 0;font-family:var(--pl-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(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.5em 1.5em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
|
|
4
4
|
|
|
5
5
|
const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
|
|
6
6
|
const FEEDBACK_QUESTION = 'Did you find what you need?';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-feedback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"pennlibs-feedback.js","mappings":"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","names":["PennlibsFeedback","__stencil_proxyCustomElement"],"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(--pl-font-family);\n font-size: var(--pl-font-size);\n color: var(--pl-color-fg-default);\n line-height: 1.4;\n box-sizing: border-box;\n}\n\n@media print {\n :host {\n display: none;\n }\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 justify-content: center;\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(--pl-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(--pl-color-fg-accent);\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: var(--pl-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(--pl-font-family);\n font-weight: 500;\n line-height: 1.4;\n color: var(--pl-color-fg-default);\n background: var(--pl-color-bg-default);\n border: solid 1px var(--pl-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(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis);\n}\n\np:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pennlibsFooterCss = ":host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n --
|
|
3
|
+
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 5.75rem;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.5em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}";
|
|
4
4
|
|
|
5
5
|
const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -31,12 +31,12 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
|
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
33
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
34
|
-
return (h("div", { key: '
|
|
35
|
-
background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
34
|
+
return (h("div", { key: '9c2bcb29ada71917ecc4a2d7fe50997680e512c7', class: "website-footer-wrapper" }, h("footer", { key: '9f1407819668d47899efedd7d1a3cb56a2d21890', class: "website-footer", style: {
|
|
35
|
+
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
36
36
|
backgroundSize: 'cover',
|
|
37
|
-
} }, h("div", { key: '
|
|
37
|
+
} }, h("div", { key: '4042e6d23d0628d3f460fd2d645264a8c9e078f3', class: "viewport-margins" }, h("div", { key: '9fc499534305d77f5f2f7ee8ee9af9dab6feef5f', class: "website-footer__content" }, h("div", { key: '3ef2da60bb255be3bc67ac3b2296a6ab894f56ad', class: "website-footer__links-container" }, h("section", { key: '8464a7b015fe3ec58fed0070aa4868b2967a9afe' }, h("h2", { key: 'dc99bcfe767d2d9bc077c3ebf737b739de826f17', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'e67fe3bc6701d03a534ddad3f3a415f86968a968', class: "website-footer__links" }, h("li", { key: 'd4258dc3d05e7bee6496d302e55e248cbb323de1' }, h("a", { key: 'fb1b1a029aba8e22199225acbfc579ad72a083ec', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'a2b74af1199901799942ad00039b7aa50ac18faf' }), "Philadelphia, PA 19104-6206")), h("li", { key: 'b9557840862921b4afe4bb7698ac82ad5865d2da' }, h("a", { key: 'd5e8ad2d102012daf8f3f1ca965073cb351f28bc', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '1d119f2b3465c75eb5e2978b3e955cd04eff0da0' }, h("a", { key: '9f8e3ac88902c4bf2669b8bcb38273d158e333b3', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: 'ed548eab7405dd44c14acd05899c912259c95e5e' }, h("a", { key: '59bf08266f6c744623d7d92c864cc2987879b227', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '0ec819bb0df59ad7b0acd47abb93ff39a66a670e' }, h("h2", { key: '790eb358ecca24cb693830766e9134853cc98436', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'bff8383fcdacc51b449eee06f88575bdc7390ccb', class: "website-footer__links" }, h("li", { key: '5acd132276b6dea27c469719f39533ec32160a10' }, h("a", { key: '9ae37a20fe94e7c9900fb9121985883faa66026f', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: 'b81d975f2301ce3f52dc21968cdfb4084f62a1dd' }, h("a", { key: 'b959feb337dcded7396c45510d24a677dabe5f13', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '76a73c4d49c707a1a3aa7744482f80c22128fb74' }, h("a", { key: '0757181117c5f2c7426210e426dc2d122780d894', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: 'f2be8408042d5271e179eb3a1ed3370d36451d79' }, h("a", { key: '360c4a8a4236ee8e9b1db3780710b4fea9189888', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
38
38
|
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))))))))
|
|
39
|
-
]))), h("div", { key: '
|
|
39
|
+
]))), h("div", { key: 'a4fb2085daf97f5b356463a2e43d800e43682b6c', class: "website-footer__footer" }, h("div", { key: 'a85cac4dce8cdda27b144114aea44105fdf5be04', class: "viewport-margins" }, h("ul", { key: 'f2ebd327db928ba7408b2e85f0e0e594b377f0c5', class: "website-footer__links website-footer__links--footer" }, h("li", { key: 'd5bfe5300a9d69d31129c16b504539fdf097c1b4' }, h("a", { key: 'e06f37953b31cae81eece04f3cc7904ab1aedb5f', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '5fd231fd169a20096cbaec59da61db6577ed30ec' }, h("a", { key: 'ddf2fefb50f1566defc3f0ddc202ee8fd0ab83c2', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: 'ea68f260488498455443c2afeab661dc0fa44033' }, h("a", { key: '8f17fe53fc2af239a0bc7c724e9ee4637d95d8f4', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '818bb632487b3b880602f065d6c3c55bb03cd0e6' }, h("a", { key: '887b34e197ebd942adbe9bd29d6ad8be721ca332', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: '3b8ab2f7cc12bb7af048d11efe06eff5ab18ca02' }, h("a", { key: '5e5e57cdc3974768005123433354ef4f7bd62540', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '8968a082b9bb04d2996c9bcba7104271ee0ded4d' }, h("a", { key: 'fb5373b19b964ba138053dd315e984c010384118', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
|
|
40
40
|
}
|
|
41
41
|
static get assetsDirs() { return ["assets"]; }
|
|
42
42
|
get hostElement() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-footer.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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*, *::before, *::after {\n box-sizing: border-box;\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 var(--viewport-margins-gutter, 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(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--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, 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 @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 </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}
|
|
1
|
+
{"file":"pennlibs-footer.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 5.75rem;\n}\n\n@media print {\n :host {\n display: none;\n }\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\n.website-footer-wrapper {\n background: var(--pl-color-penn-blue);\n padding-bottom: var(--padding-bottom);\n}\n\n.viewport-margins {\n max-width: var(--pl-viewport-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n.website-footer {\n background-size: cover;\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.website-footer__content {\n padding: 4em 0;\n}\n\n.website-footer__links-container {\n gap: 4em 2em;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));\n}\n\n.website-footer__heading {\n font-size: 0.8em;\n text-transform: uppercase;\n letter-spacing: 0.075em;\n margin-bottom: 1em;\n opacity: 0.75;\n}\n\n.website-footer__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n}\n\n.website-footer__links a {\n text-decoration: none;\n}\n\n.website-footer__links a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.website-footer__footer {\n padding: 1em 0;\n background: rgba(1, 31, 91, 0.65);\n}\n\n.website-footer__links--footer {\n display: flex;\n flex-wrap: wrap;\n gap: 0;\n flex-direction: row;\n margin-left: -0.5em;\n\n @media (max-width: 1080px) {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));\n }\n}\n\n.website-footer__links--footer a {\n display: inline-block;\n padding: 0.5em 0.75em;\n font-size: 0.875em;\n opacity: 0.875;\n font-weight: 500;\n}\n\n.website-footer__links--footer a:hover {\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n}","import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/**\n * A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\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(--pl-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 </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}
|
|
@@ -23,7 +23,7 @@ const LogoBlue = () => {
|
|
|
23
23
|
h("path", { fill: "#fff", d: "M0 0H444.165V95H0z" })))));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
const pennlibsHeaderCss = ":host{font-family:var(--font-family);font-size:var(--font-size);color:var(--color-fg-default)
|
|
26
|
+
const pennlibsHeaderCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default)}*,*:before,*:after{box-sizing:inherit}.viewport-margins{width:100%;max-width:var(--pl-viewport-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}a{color:var(--color-fg-menu)}*:focus{box-shadow:0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-bg-accent-emphasis);outline:none}.website-header{--color-fg-service:var(--pl-color-penn-blue);--color-fg-menu:var(--pl-color-fg-default);--color-bg-menu:var(--pl-color-bg-default)}.website-header--dark{--color-fg-service:var(--pl-color-fg-on-emphasis);--color-fg-menu:var(--pl-color-fg-on-emphasis);--color-bg-menu:var(--pl-color-penn-blue)}.website-header__logo-name-container{display:flex;align-items:stretch;margin-right:auto}@media (max-width: 620px){.website-header__logo-name-container{margin-right:6em;flex-direction:column;gap:0.5rem}}.website-header_logo-link{line-height:0}.website-header__logo{max-width:260px;margin-right:1em}@media (max-width: 1000px){.website-header__logo{max-width:200px}}@media (max-width: 620px){.website-header__logo{max-width:190px}}.website-header__service-link{display:flex;justify-content:center;flex-direction:column;text-decoration:none;line-height:1;color:var(--color-fg-service)}@media (min-width: 1001px){.website-header__service-link{padding-left:0.5em}}.website-header__hero .website-header__service-link{border-left:none}.website-header__service-link:hover .website-header__service-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.1em;text-decoration-color:var(--color-fg-service)}.website-header__service-name{font-size:1.5em;font-weight:500}.website-header__service-lede{font-size:1em}.website-header__inner-container{display:flex;justify-content:space-between;align-items:center;position:relative;padding:1em 0}@media (max-width: 1000px){.website-header__inner-container{flex-direction:column;align-items:flex-start}}@media (max-width: 1000px){.website-header__navigation{width:100%}}.website-header__navigation-list{list-style:none;display:flex;margin:0;padding:0}@media (max-width: 1000px){.website-header__navigation-list{display:none}}@media (max-width: 1000px){.website-header__navigation-list--visible{display:block;margin-top:1rem}.website-header__navigation-list--visible a{display:inline-block}}.website-header__navigation-list button{background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;padding:0;color:inherit}.website-header__navigation-list a,.website-header__navigation-list button{display:block;text-decoration:none;cursor:pointer}@media (max-width: 1000px){.website-header__navigation-list a,.website-header__navigation-list button{padding:0.75em 0}}.website-header__navigation-list--visible a,.website-header__navigation-list--visible button{padding:0.5em 0}@media (min-width: 1001px){.website-header__navigation-list a,.website-header__navigation-list button{padding:0.5em}}.website-header__navigation-list a:hover,.website-header__navigation-list button:hover{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset)}.website-header__navigation-button{all:unset;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;padding:0.5em;border-radius:0.25em;position:absolute;right:0;top:1.5em;display:flex;align-items:center;color:var(--color-fg-service);cursor:pointer}@media (min-width: 1001px){.website-header__navigation-button{display:none}}.website-header__navigation-button[aria-expanded=true] svg{rotate:180deg}@media print{.website-header__inner-container>*:not(.website-header__logo-name-container){display:none}}";
|
|
27
27
|
|
|
28
28
|
const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
|
|
29
29
|
constructor() {
|
|
@@ -68,7 +68,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
|
|
|
68
68
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
69
69
|
}
|
|
70
70
|
render() {
|
|
71
|
-
return (h("header", { key: '
|
|
71
|
+
return (h("header", { key: '45fe6be2cc7bbd406efbb026c1931f20b9f55e48', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: '4ebf135a2bba3b2285dda568d1a8845fb929841f', class: "website-header__inner-container" }, h("div", { key: '5782f3fae1588cac9f818ee5a08eedbad6663925', class: "website-header__logo-name-container" }, h("a", { key: '20033643e8cfd34b4d445d1a4df882c8ce6401b4', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: 'b020528632198fbe654983f025c63ebf0d1b013e', href: "/", class: "website-header__service-link" }, h("span", { key: 'a00a21f06791eca0cf1989ff308b13ce1825ab63', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: 'c7e5f0b068ae893b5c6eac5c79b782fec080d0ca', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '48c9a328f94a9d483daef354b69609ba4cb113aa', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'd5894ef67d4a30d229d3ad2d612da66b519e0421', class: "website-header__navigation" }, h("button", { key: 'fcf8bb70103057aaaa62b38ffb570ad7cecbf443', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: 'e57830c7ec66374f653cadc448fc7689aebde718', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '2962683e615d452fd5382fb34c96ecbfb9fb4ad1', name: "end" }))));
|
|
72
72
|
}
|
|
73
73
|
static get assetsDirs() { return ["assets"]; }
|
|
74
74
|
get hostElement() { return this; }
|