@penn-libraries/web 0.3.1 → 1.0.0-dev.0
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 +20 -15
- 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 +15 -16
- 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-1f149b52.entry.js} +13 -13
- package/dist/web/p-1f149b52.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 +503 -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,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--hero-heading-font:var(--font-serif);--
|
|
3
|
+
const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:3em;padding-bottom:3em}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1.1;font-size:2.75em;font-weight:bold;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.15em;font-family:var(--pl-font-family);font-weight:500;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2em}.hero__sub-heading{font-size:1em}}";
|
|
4
4
|
|
|
5
5
|
const getCurrentImageSource = (pictureElement) => {
|
|
6
6
|
const imgElement = pictureElement.querySelector('img');
|
|
@@ -49,7 +49,7 @@ const Hero = /*@__PURE__*/ proxyCustomElement(class Hero extends HTMLElement {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h("div", { key: '
|
|
52
|
+
return (h("div", { key: 'fa2bc27b539b4246a7ce13d84be0bbf5518d30dd', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '52f802774816bcaba73c4fa25a34c9dc391f4a3f', class: "hero__content" }, h("slot", { key: 'e11e8bf3909844383ee1199a3f04e8f64151466e', name: "start" }), h("div", { key: 'af38875bdfa03346e5ecb3bd352adc6a7f00fc02', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '69e64c73f25bec3f26d95473ce01bc545beb98bc', class: "viewport-margins" }, h("h1", { key: '14e726629606b794fa59128cd6ab6b21fc97c0fa', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '2530d6cc635d41c2b062b7cf9c659e1877110ba7', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
53
53
|
}
|
|
54
54
|
static get assetsDirs() { return ["assets"]; }
|
|
55
55
|
get hostElement() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pennlibs-hero.js","mappings":";;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"pennlibs-hero.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-hero/pennlibs-hero.css?tag=pennlibs-hero&encapsulation=shadow","src/components/pennlibs-hero/pennlibs-hero.tsx"],"sourcesContent":[":host {\n --pl-hero-height: clamp(42vh, 32rem, 26rem);\n --pl-hero-heading-font: var(--pl-font-serif);\n --pl-hero-color: var(--pl-color-fg-on-emphasis);\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.viewport-margins {\n width: 100%;\n max-width: var(--pl-viewport-max-width);\n margin: 0 auto;\n padding: 0 var(--pl-viewport-margins-gutter, 1em);\n}\n\n/* Start of Selection */\n/* Hero section */\n.hero {\n position: relative;\n min-height: var(--pl-hero-height);\n height: 100%;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: 50% 33%;\n display: flex;\n}\n/* End of Selection */\n\n.hero::before {\n content: \"\";\n display: flex;\n width: 100%;\n height: 100%;\n top: 0;\n position: absolute;\n 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%);\n z-index: 0;\n}\n\n \n.hero::after {\n content: \"\";\n display: flex;\n width: 100%;\n height: 100%;\n top: 0;\n position: absolute;\n 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%);\n z-index: 0;\n}\n\n.hero__content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n z-index: 1;\n}\n\n.hero__heading-container {\n margin-top: auto;\n padding-top: 3em;\n padding-bottom: 3em;\n}\n\n.hero__heading {\n text-shadow: 1px 1px 2px var(--pl-color-fg-default);\n line-height: 1.1;\n font-size: 2.75em;\n font-weight: bold;\n font-family: var(--pl-hero-heading-font);\n text-wrap: pretty;\n max-width: 30ch;\n margin: 0;\n color: var(--pl-hero-color);\n}\n\n@media (max-width: 920px) {\n .hero__heading {\n font-size: 2.5em;\n }\n}\n\n.hero__sub-heading {\n font-size: 1.15em;\n font-family: var(--pl-font-family);\n font-weight: 500;\n color: var(--pl-hero-color);\n max-width: 52ch;\n text-wrap: pretty;\n margin-top: 1em;\n margin-bottom: 0;\n}\n\n.hero__sub-heading a {\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 color: var(--pl-hero-color);\n}\n\n.hero__sub-heading a:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n}\n\n.hero__sub-heading strong {\n font-weight: bold;\n}\n\n@media (max-width: 620px) {\n .hero__heading {\n font-size: 2em;\n }\n\n .hero__sub-heading {\n font-size: 1em;\n }\n}","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}"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-
|
|
2
|
+
"timestamp": "2025-08-19T14:39:00",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.29.3",
|
|
@@ -101,15 +101,40 @@
|
|
|
101
101
|
"encapsulation": "shadow",
|
|
102
102
|
"tag": "pennlibs-footer",
|
|
103
103
|
"readme": "# pennlibs-footer\n\n\n",
|
|
104
|
-
"docs": "",
|
|
105
|
-
"docsTags": [
|
|
104
|
+
"docs": "A footer component for Penn Libraries websites that displays contact information,\nsocial media links, and custom navigation sections. Automatically organizes\nchild content into navigation sections based on headings and links.",
|
|
105
|
+
"docsTags": [
|
|
106
|
+
{
|
|
107
|
+
"name": "component"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "example",
|
|
111
|
+
"text": "<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>"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": "slot",
|
|
115
|
+
"text": "default - Custom navigation sections with h2 headings and anchor links"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"name": "prop",
|
|
119
|
+
"text": "--pl-viewport-max-width: The maximum width of the footer content."
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "prop",
|
|
123
|
+
"text": "--pl-viewport-margins-gutter: The gutter width of the footer content."
|
|
124
|
+
}
|
|
125
|
+
],
|
|
106
126
|
"usage": {},
|
|
107
127
|
"props": [],
|
|
108
128
|
"methods": [],
|
|
109
129
|
"events": [],
|
|
110
130
|
"listeners": [],
|
|
111
131
|
"styles": [],
|
|
112
|
-
"slots": [
|
|
132
|
+
"slots": [
|
|
133
|
+
{
|
|
134
|
+
"name": "default",
|
|
135
|
+
"docs": "Custom navigation sections with h2 headings and anchor links"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
113
138
|
"parts": [],
|
|
114
139
|
"dependents": [],
|
|
115
140
|
"dependencies": [],
|
|
@@ -139,7 +164,11 @@
|
|
|
139
164
|
},
|
|
140
165
|
{
|
|
141
166
|
"name": "prop",
|
|
142
|
-
"text": "--max-width: The maximum width of the header."
|
|
167
|
+
"text": "--pl-viewport-max-width: The maximum width of the header."
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "prop",
|
|
171
|
+
"text": "--pl-viewport-margins-gutter: The gutter width of the header content."
|
|
143
172
|
}
|
|
144
173
|
],
|
|
145
174
|
"usage": {},
|
|
@@ -286,7 +315,11 @@
|
|
|
286
315
|
},
|
|
287
316
|
{
|
|
288
317
|
"name": "prop",
|
|
289
|
-
"text": "--max-width: The maximum width of the hero inner content."
|
|
318
|
+
"text": "--pl-viewport-max-width: The maximum width of the hero inner content."
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"name": "prop",
|
|
322
|
+
"text": "--pl-viewport-margins-gutter: The gutter width of the hero inner content."
|
|
290
323
|
}
|
|
291
324
|
],
|
|
292
325
|
"usage": {},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, g as getAssetPath, h } from './index-BAQIT3Vo.js';
|
|
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 = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-banner.entry.js","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 var(--viewport-margins-gutter, 1em);\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§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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,
|
|
1
|
+
{"version":3,"file":"pennlibs-banner.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,2kCAA2kC;;MCQxlC,MAAM,GAAA,MAAA;;;;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;;;;;;;;"}
|