@penn-libraries/web 0.3.0-dev.3 → 0.3.0-dev.5
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/{index-B6Rjt_WH.js → index-B6HF5D3u.js} +652 -8
- package/dist/cjs/index-B6HF5D3u.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js +16 -12
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js.map +1 -1
- package/dist/cjs/pennlibs-colors.cjs.entry.js +1 -1
- package/dist/cjs/web.cjs.js +2 -2
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.css +4 -0
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +3 -32
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.css +9 -9
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +45 -14
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +5 -4
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +8 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js.map +1 -1
- package/dist/components/pennlibs-footer.js +4 -7
- package/dist/components/pennlibs-footer.js.map +1 -1
- package/dist/components/pennlibs-header.js +9 -3
- 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.d.ts +443 -0
- package/dist/docs.json +332 -0
- package/dist/esm/{index-BQRdy1TQ.js → index-BAQIT3Vo.js} +652 -8
- package/dist/esm/index-BAQIT3Vo.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pennlibs-banner.entry.js +1 -1
- package/dist/esm/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat_5.entry.js +16 -12
- package/dist/esm/pennlibs-chat_5.entry.js.map +1 -1
- package/dist/esm/pennlibs-colors.entry.js +1 -1
- package/dist/esm/web.js +3 -3
- package/dist/types/components/pennlibs-footer/pennlibs-footer.d.ts +0 -10
- package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +28 -8
- package/dist/types/components/pennlibs-hero/pennlibs-hero.d.ts +7 -0
- package/dist/types/components.d.ts +85 -33
- package/dist/web/index.esm.js +1 -1
- package/dist/web/{p-dac033ee.entry.js → p-072fba0a.entry.js} +2 -2
- package/dist/web/{p-2edaa432.entry.js → p-42b20949.entry.js} +2 -2
- package/dist/web/{p-a921fec4.entry.js → p-64706047.entry.js} +17 -13
- package/dist/web/p-64706047.entry.js.map +1 -0
- package/dist/web/{p-BQRdy1TQ.js → p-BAQIT3Vo.js} +652 -8
- package/dist/web/p-BAQIT3Vo.js.map +1 -0
- package/dist/web/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +1 -1
- package/dist/web/web.css +6 -1
- package/dist/web/web.esm.js +3 -3
- package/hydrate/index.d.ts +271 -0
- package/hydrate/index.js +19572 -0
- package/hydrate/index.mjs +19564 -0
- package/hydrate/package.json +12 -0
- package/package.json +12 -8
- package/dist/cjs/index-B6Rjt_WH.js.map +0 -1
- package/dist/esm/index-BQRdy1TQ.js.map +0 -1
- package/dist/web/p-BQRdy1TQ.js.map +0 -1
- package/dist/web/p-a921fec4.entry.js.map +0 -1
- /package/dist/web/{p-dac033ee.entry.js.map → p-072fba0a.entry.js.map} +0 -0
- /package/dist/web/{p-2edaa432.entry.js.map → p-42b20949.entry.js.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B6HF5D3u.js');
|
|
4
4
|
|
|
5
5
|
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}";
|
|
6
6
|
|
|
@@ -71,7 +71,7 @@ const PennlibsFeedback = class {
|
|
|
71
71
|
};
|
|
72
72
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|
|
73
73
|
|
|
74
|
-
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}";
|
|
74
|
+
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*, *::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 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}";
|
|
75
75
|
|
|
76
76
|
const Footer = class {
|
|
77
77
|
constructor(hostRef) {
|
|
@@ -100,14 +100,12 @@ const Footer = class {
|
|
|
100
100
|
}
|
|
101
101
|
render() {
|
|
102
102
|
const footerBackgroundSrc = index.getAssetPath('./assets/footer-bg.webp');
|
|
103
|
-
return (index.h("div", { key: '
|
|
103
|
+
return (index.h("div", { key: '40bee22231ae7f79cf368a06b34fc479490d90e2', class: "website-footer-wrapper" }, index.h("footer", { key: '7ffcbb84fc096a1a3a19fdbaa999f031944df14b', class: "website-footer", style: {
|
|
104
104
|
background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
105
105
|
backgroundSize: 'cover',
|
|
106
|
-
} }, index.h("div", { key: '
|
|
106
|
+
} }, index.h("div", { key: 'ccb8cafc9f49d4796b158bd2bf0c2e4a81e7c301', class: "viewport-margins" }, index.h("div", { key: 'e3461be746bbf460422d24448bfdcd35d75f143e', class: "website-footer__content" }, index.h("div", { key: 'ceb536cf8d1e8cb4cbd008415e84367869fa319a', class: "website-footer__links-container" }, index.h("section", { key: 'a936c772c58f083f7cb4d03c4e2c9563412a029f' }, index.h("h2", { key: '8562595447974e570026a3295c6b8a4ea2eadcfc', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: 'a49281bd1399c6713f2c2165b941585464e32653', class: "website-footer__links" }, index.h("li", { key: '3aaff28e4c8e15d97f5722850d4fe5a5b84ca7c7' }, index.h("a", { key: '9c46688197ae90029c46cfc40d84970a8f6a4956', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: '8fda816b66576fc26d6888dd101674af025042e6' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '18ac4042e695b00e1e6816a8108eb47b40097b17' }, index.h("a", { key: '2d1df64e1abbdfb5c852597c3c1fe5064d929780', href: "tel:(215) 898-7555" }, "(215) 898-7555")), index.h("li", { key: '50b7e0d1937695dd2d91d4888e72849e55bbc230' }, index.h("a", { key: 'e6e329346b6df142ec21c9454ce4beda59400064', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: '95f0d1e8a6c5bf44931f33cae7acd4b1aad094bb' }, index.h("a", { key: '12782dc2f58ab2f0d438ca2b3136c2956821ad67', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: 'c06ef6b6bdbeeb1399ae4fe997492b69724b905f' }, index.h("h2", { key: 'e669081302570c944677ace470a94adc2cca2c61', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: '73f90d530da56d6866425db3ca3512a77c34230f', class: "website-footer__links" }, index.h("li", { key: 'e2ae803e424a77f96c390e4175940dbcc16bf141' }, index.h("a", { key: 'f8b2f47e20efa037126c936065744509f586af16', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '47728d60b3f7df3f5561c9d6366655bd572c3b1a' }, index.h("a", { key: 'be6191de186e4c7bc5a4600946d10fd5e3ac5051', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: '5e195c6da1431647529831c64e8e29218aa5b629' }, index.h("a", { key: 'b452a29c023f2cf4e5ebe00e13029f6c25c5cb1d', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: '0264616dde4c2fadc9de0a2dca75f8a424c2744e' }, index.h("a", { key: '969ba001ed12c911f1ab2f96666a68e6629c1e63', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
107
107
|
this.navigationByChildren.map(section => (index.h("section", null, index.h("h2", { class: "website-footer__heading" }, section.heading), index.h("ul", { class: "website-footer__links" }, section.links.map(link => (index.h("li", null, index.h("a", { href: link.href }, link.label))))))))
|
|
108
|
-
],
|
|
109
|
-
this.navigation.map(section => (index.h("section", null, index.h("h2", { class: "website-footer__heading" }, section.heading), index.h("ul", { class: "website-footer__links" }, section.links.map(link => (index.h("li", null, index.h("a", { href: link.href }, link.label))))))))
|
|
110
|
-
]))), index.h("div", { key: '92ba07834ec5907ab47c59925d5d09d3dc7960df', class: "website-footer__footer" }, index.h("div", { key: 'f649f0dde206c92a41c10cb871137ccb725f2394', class: "viewport-margins" }, index.h("ul", { key: '82244f9c342acdcb9dd9ff0ae651c4b4cb2939e4', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: '44be5c6a8380af4482a97080df640c34b852a865' }, index.h("a", { key: '8eb4ffa492285f6a2f3f42df1b2b5a784f042332', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: '658402f36047ba302a90521a57e414a995bc19f4' }, index.h("a", { key: 'a0f85214bea0883b03abd4a1afc8ef97a6eddf27', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: '0f43503a3c031967429ef9021457bafa3ec9325b' }, index.h("a", { key: '21b9c566ef1b8800b41a21ba70e4444128653b9c', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: '92b1311cebfe09923505d0c9db17f2cc79bc8b09' }, index.h("a", { key: 'ed7ca974f5cea0841bb3946efc39cc6e13e8748f', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'effb3c2ef3eb3b8611bf8bf6cba2db907bde3d5d' }, index.h("a", { key: '1a6f73099f9311e189987988317dda7390dda6a5', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: '3b1f57c5073869e4a5f3f4fbd94b28bee437bc72' }, index.h("a", { key: '4e2ab4fd8a1fcf310a5b67a5a264b7dc5b2aed11', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
|
|
108
|
+
]))), index.h("div", { key: 'b0f07d479fc29d673758d97a0f242397e9c434fd', class: "website-footer__footer" }, index.h("div", { key: '7b2201088c578e0c7dc54d26c0642bd2221efba0', class: "viewport-margins" }, index.h("ul", { key: '6ccf0109682bc0c63553ae4ce45076ecc06a1506', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: 'bd61ce924e4cd2e19665427743640c23d531335a' }, index.h("a", { key: '2326f72667de436ebee473e81c21c0d478306b7c', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: 'e0be39fea786c611f61d6215901b887c773489fc' }, index.h("a", { key: '10e1a39069f966ba3a1894352f93adf0bd05e184', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: 'be0fe00a2614d2eb1179d63e223f0cacefd7d640' }, index.h("a", { key: 'a45dcae52ba1c8389408f998a20547fe27e9ff04', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: 'f00048be9bd71c503dd0b29d7dd1841f34dfa7d1' }, index.h("a", { key: '3d5cc82cb2ddb4fa61eabe92f3c9f8a0e3263d3a', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: '75d566a8e7e17b5102dd697a5ac2d2bdf3189586' }, index.h("a", { key: '143c075d181701e9f1a90be037f9888b0fad153a', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: '08d8bceb70f47a13dcdb33c8be43de26491379d8' }, index.h("a", { key: '6451e811d74f807cef2d3009bcc99117109118c3', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
|
|
111
109
|
}
|
|
112
110
|
static get assetsDirs() { return ["assets"]; }
|
|
113
111
|
get hostElement() { return index.getElement(this); }
|
|
@@ -137,13 +135,19 @@ const LogoBlue = () => {
|
|
|
137
135
|
index.h("path", { fill: "#fff", d: "M0 0H444.165V95H0z" })))));
|
|
138
136
|
};
|
|
139
137
|
|
|
140
|
-
const pennlibsHeaderCss = ":host{font-family:var(--font-family);font-size:var(--font-size);color:var(--color-fg-default);--max-width:1080px}*,*:before,*:after{box-sizing:inherit}.viewport-margins{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1em}a{color:var(--color-fg-menu)}*:focus{box-shadow:0 0 0 2px var(--color-bg-accent), 0 0 0 4px var(--color-bg-accent-emphasis);outline:none}.website-header{--color-fg-service:var(--color-penn-blue);--color-fg-menu:var(--color-fg-default);--color-bg-menu:var(--color-bg-default)}.website-header--dark{--color-fg-service:var(--color-fg-on-emphasis);--color-fg-menu:var(--color-fg-on-emphasis);--color-bg-menu:var(--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:
|
|
138
|
+
const pennlibsHeaderCss = ":host{font-family:var(--font-family);font-size:var(--font-size);color:var(--color-fg-default);--max-width:1080px}*,*:before,*:after{box-sizing:inherit}.viewport-margins{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1em}a{color:var(--color-fg-menu)}*:focus{box-shadow:0 0 0 2px var(--color-bg-accent), 0 0 0 4px var(--color-bg-accent-emphasis);outline:none}.website-header{--color-fg-service:var(--color-penn-blue);--color-fg-menu:var(--color-fg-default);--color-bg-menu:var(--color-bg-default)}.website-header--dark{--color-fg-service:var(--color-fg-on-emphasis);--color-fg-menu:var(--color-fg-on-emphasis);--color-bg-menu:var(--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(--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}";
|
|
141
139
|
|
|
142
140
|
const Header = class {
|
|
143
141
|
constructor(hostRef) {
|
|
144
142
|
index.registerInstance(this, hostRef);
|
|
145
143
|
/**
|
|
146
|
-
* The service
|
|
144
|
+
* The URL where the service name links to, typically the service homepage or main landing page.
|
|
145
|
+
* @default "/"
|
|
146
|
+
*/
|
|
147
|
+
this.serviceHref = "/";
|
|
148
|
+
/**
|
|
149
|
+
* The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.
|
|
150
|
+
* @default 'light'
|
|
147
151
|
*/
|
|
148
152
|
this.theme = 'light';
|
|
149
153
|
this.isMenuOpen = false;
|
|
@@ -174,14 +178,14 @@ const Header = class {
|
|
|
174
178
|
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
175
179
|
}
|
|
176
180
|
render() {
|
|
177
|
-
return (index.h("header", { key: '
|
|
181
|
+
return (index.h("header", { key: '707a9337f77742da7588908387e20e89217cfef4', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: '828414077205b9bcccd391b5d49196673c204855', class: "website-header__inner-container" }, index.h("div", { key: '14d2eadb7d366cf1a0b1a737a3c701f42d43deae', class: "website-header__logo-name-container" }, index.h("a", { key: 'c34ae1516dd6e37f07ec39c5f6cf9d519c41c898', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: 'e7084e840463f5598faef98ff5bf5c5e3229ffb3', href: "/", class: "website-header__service-link" }, index.h("span", { key: 'ea3f3ecd778592244e671b40a41a26c17b6a47b3', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: '0ba8b8697e1d22d526c453ba1b7428550ec30dde', class: "website-header__service-lede" }, this.serviceLede)))), this.navigation.length > 0 && (index.h("nav", { key: '9d872495646af129b045777b0cdf211f1d3a5102', class: "website-header__navigation" }, index.h("button", { key: '57069987df48a530b1314c5de7215d00c82bbfe1', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '235b39191eb97292b8ca915cc462e1e84101915a', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => index.h("li", { innerHTML: element.outerHTML })))))), index.h("slot", { key: '1768bad83b473f6c765da4b8b3823423472c6c06', name: "end" }))));
|
|
178
182
|
}
|
|
179
183
|
static get assetsDirs() { return ["assets"]; }
|
|
180
184
|
get hostElement() { return index.getElement(this); }
|
|
181
185
|
};
|
|
182
186
|
Header.style = pennlibsHeaderCss;
|
|
183
187
|
|
|
184
|
-
const pennlibsHeroCss = ":host{--hero-height:clamp(
|
|
188
|
+
const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--hero-heading-font:var(--font-serif);--max-width:1080px;--color-typo:var(--color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1em}.hero{position:relative;min-height:var(--hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:3em;padding-bottom:3em}.hero__heading{text-shadow:1px 1px 2px var(--color-fg-default);line-height:1.1;font-size:2.75em;font-weight:bold;font-family:var(--hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--color-typo)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.15em;font-family:var(--font-family);font-weight:500;color:var(--color-typo);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--link-text-underline-offset);text-decoration-thickness:var(--link-text-decoration-thickness);color:var(--color-typo)}.hero__sub-heading a:hover{text-decoration-thickness:var(--link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2em}.hero__sub-heading{font-size:1em}}";
|
|
185
189
|
|
|
186
190
|
const getCurrentImageSource = (pictureElement) => {
|
|
187
191
|
const imgElement = pictureElement.querySelector('img');
|
|
@@ -228,7 +232,7 @@ const Hero = class {
|
|
|
228
232
|
}
|
|
229
233
|
}
|
|
230
234
|
render() {
|
|
231
|
-
return (index.h("div", { key: '
|
|
235
|
+
return (index.h("div", { key: 'e7da72dc8de6e2039c4b1158fb41b5ca6279b01b', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: '1a17497f3da0857c01c3bf0871312c9ebe350475', class: "hero__content" }, index.h("slot", { key: '4b3747eeec4170ce12f3ec7e8b575e611327f39b', name: "start" }), index.h("div", { key: 'f915238e4b2ad0ea221b51c51ccc19b36985be12', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: '71181c2ae063871138a3c8338305422b2e0c7315', class: "viewport-margins" }, index.h("h1", { key: 'c52fbf359e35d152441d2704d271b83c9999026a', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: '7acf7c6aa459cd083a8101642b218888277ccadd', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
232
236
|
}
|
|
233
237
|
static get assetsDirs() { return ["assets"]; }
|
|
234
238
|
get hostElement() { return index.getElement(this); }
|