@penn-libraries/web 0.3.0 → 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 +501 -60
- 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,3 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A footer component for Penn Libraries websites that displays contact information,
|
|
3
|
+
* social media links, and custom navigation sections. Automatically organizes
|
|
4
|
+
* child content into navigation sections based on headings and links.
|
|
5
|
+
*
|
|
6
|
+
* @component
|
|
7
|
+
* @example
|
|
8
|
+
* <pennlibs-footer>
|
|
9
|
+
* <section>
|
|
10
|
+
* <h2>Resources</h2>
|
|
11
|
+
* <a href="/databases">Databases</a>
|
|
12
|
+
* <a href="/research-guides">Research Guides</a>
|
|
13
|
+
* </section>
|
|
14
|
+
* <section>
|
|
15
|
+
* <h2>Services</h2>
|
|
16
|
+
* <a href="/consultation">Research Consultation</a>
|
|
17
|
+
* <a href="/instruction">Library Instruction</a>
|
|
18
|
+
* </section>
|
|
19
|
+
* </pennlibs-footer>
|
|
20
|
+
*
|
|
21
|
+
* @slot default - Custom navigation sections with h2 headings and anchor links
|
|
22
|
+
*
|
|
23
|
+
* @prop --pl-viewport-max-width: The maximum width of the footer content.
|
|
24
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
25
|
+
*/
|
|
1
26
|
export declare class Footer {
|
|
2
27
|
navigationByChildren: any;
|
|
3
28
|
hostElement: HTMLElement;
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
* @slot end - Content to display at the end of the header (right side)
|
|
16
16
|
* @slot name-end - Content to display at the end of the service name (right side)
|
|
17
17
|
*
|
|
18
|
-
* @prop --max-width: The maximum width of the header.
|
|
18
|
+
* @prop --pl-viewport-max-width: The maximum width of the header.
|
|
19
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the header content.
|
|
19
20
|
*/
|
|
20
21
|
export declare class Header {
|
|
21
22
|
/**
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @slot start - Content to display at the start (top) of the hero.
|
|
5
5
|
*
|
|
6
|
-
* @prop --max-width: The maximum width of the hero inner content.
|
|
6
|
+
* @prop --pl-viewport-max-width: The maximum width of the hero inner content.
|
|
7
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
|
|
7
8
|
*/
|
|
8
9
|
export declare class Hero {
|
|
9
10
|
hostElement: HTMLElement;
|
|
@@ -14,6 +14,26 @@ export namespace Components {
|
|
|
14
14
|
}
|
|
15
15
|
interface PennlibsFeedback {
|
|
16
16
|
}
|
|
17
|
+
/**
|
|
18
|
+
* A footer component for Penn Libraries websites that displays contact information,
|
|
19
|
+
* social media links, and custom navigation sections. Automatically organizes
|
|
20
|
+
* child content into navigation sections based on headings and links.
|
|
21
|
+
* @component
|
|
22
|
+
* @example <pennlibs-footer>
|
|
23
|
+
* <section>
|
|
24
|
+
* <h2>Resources</h2>
|
|
25
|
+
* <a href="/databases">Databases</a>
|
|
26
|
+
* <a href="/research-guides">Research Guides</a>
|
|
27
|
+
* </section>
|
|
28
|
+
* <section>
|
|
29
|
+
* <h2>Services</h2>
|
|
30
|
+
* <a href="/consultation">Research Consultation</a>
|
|
31
|
+
* <a href="/instruction">Library Instruction</a>
|
|
32
|
+
* </section>
|
|
33
|
+
* </pennlibs-footer>
|
|
34
|
+
* @prop --pl-viewport-max-width: The maximum width of the footer content.
|
|
35
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
36
|
+
*/
|
|
17
37
|
interface PennlibsFooter {
|
|
18
38
|
}
|
|
19
39
|
/**
|
|
@@ -27,7 +47,8 @@ export namespace Components {
|
|
|
27
47
|
* <a href="/search">Search</a>
|
|
28
48
|
* <a href="/help">Help</a>
|
|
29
49
|
* </pennlibs-header>
|
|
30
|
-
* @prop --max-width: The maximum width of the header.
|
|
50
|
+
* @prop --pl-viewport-max-width: The maximum width of the header.
|
|
51
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the header content.
|
|
31
52
|
*/
|
|
32
53
|
interface PennlibsHeader {
|
|
33
54
|
/**
|
|
@@ -51,7 +72,8 @@ export namespace Components {
|
|
|
51
72
|
}
|
|
52
73
|
/**
|
|
53
74
|
* Place your most important content in a prominent space, often at the top of your website.
|
|
54
|
-
* @prop --max-width: The maximum width of the hero inner content.
|
|
75
|
+
* @prop --pl-viewport-max-width: The maximum width of the hero inner content.
|
|
76
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
|
|
55
77
|
*/
|
|
56
78
|
interface PennlibsHero {
|
|
57
79
|
}
|
|
@@ -102,6 +124,26 @@ declare global {
|
|
|
102
124
|
prototype: HTMLPennlibsFeedbackElement;
|
|
103
125
|
new (): HTMLPennlibsFeedbackElement;
|
|
104
126
|
};
|
|
127
|
+
/**
|
|
128
|
+
* A footer component for Penn Libraries websites that displays contact information,
|
|
129
|
+
* social media links, and custom navigation sections. Automatically organizes
|
|
130
|
+
* child content into navigation sections based on headings and links.
|
|
131
|
+
* @component
|
|
132
|
+
* @example <pennlibs-footer>
|
|
133
|
+
* <section>
|
|
134
|
+
* <h2>Resources</h2>
|
|
135
|
+
* <a href="/databases">Databases</a>
|
|
136
|
+
* <a href="/research-guides">Research Guides</a>
|
|
137
|
+
* </section>
|
|
138
|
+
* <section>
|
|
139
|
+
* <h2>Services</h2>
|
|
140
|
+
* <a href="/consultation">Research Consultation</a>
|
|
141
|
+
* <a href="/instruction">Library Instruction</a>
|
|
142
|
+
* </section>
|
|
143
|
+
* </pennlibs-footer>
|
|
144
|
+
* @prop --pl-viewport-max-width: The maximum width of the footer content.
|
|
145
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
146
|
+
*/
|
|
105
147
|
interface HTMLPennlibsFooterElement extends Components.PennlibsFooter, HTMLStencilElement {
|
|
106
148
|
}
|
|
107
149
|
var HTMLPennlibsFooterElement: {
|
|
@@ -119,7 +161,8 @@ declare global {
|
|
|
119
161
|
* <a href="/search">Search</a>
|
|
120
162
|
* <a href="/help">Help</a>
|
|
121
163
|
* </pennlibs-header>
|
|
122
|
-
* @prop --max-width: The maximum width of the header.
|
|
164
|
+
* @prop --pl-viewport-max-width: The maximum width of the header.
|
|
165
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the header content.
|
|
123
166
|
*/
|
|
124
167
|
interface HTMLPennlibsHeaderElement extends Components.PennlibsHeader, HTMLStencilElement {
|
|
125
168
|
}
|
|
@@ -129,7 +172,8 @@ declare global {
|
|
|
129
172
|
};
|
|
130
173
|
/**
|
|
131
174
|
* Place your most important content in a prominent space, often at the top of your website.
|
|
132
|
-
* @prop --max-width: The maximum width of the hero inner content.
|
|
175
|
+
* @prop --pl-viewport-max-width: The maximum width of the hero inner content.
|
|
176
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
|
|
133
177
|
*/
|
|
134
178
|
interface HTMLPennlibsHeroElement extends Components.PennlibsHero, HTMLStencilElement {
|
|
135
179
|
}
|
|
@@ -163,6 +207,26 @@ declare namespace LocalJSX {
|
|
|
163
207
|
pageTitle?: string;
|
|
164
208
|
}>) => void;
|
|
165
209
|
}
|
|
210
|
+
/**
|
|
211
|
+
* A footer component for Penn Libraries websites that displays contact information,
|
|
212
|
+
* social media links, and custom navigation sections. Automatically organizes
|
|
213
|
+
* child content into navigation sections based on headings and links.
|
|
214
|
+
* @component
|
|
215
|
+
* @example <pennlibs-footer>
|
|
216
|
+
* <section>
|
|
217
|
+
* <h2>Resources</h2>
|
|
218
|
+
* <a href="/databases">Databases</a>
|
|
219
|
+
* <a href="/research-guides">Research Guides</a>
|
|
220
|
+
* </section>
|
|
221
|
+
* <section>
|
|
222
|
+
* <h2>Services</h2>
|
|
223
|
+
* <a href="/consultation">Research Consultation</a>
|
|
224
|
+
* <a href="/instruction">Library Instruction</a>
|
|
225
|
+
* </section>
|
|
226
|
+
* </pennlibs-footer>
|
|
227
|
+
* @prop --pl-viewport-max-width: The maximum width of the footer content.
|
|
228
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
229
|
+
*/
|
|
166
230
|
interface PennlibsFooter {
|
|
167
231
|
}
|
|
168
232
|
/**
|
|
@@ -176,7 +240,8 @@ declare namespace LocalJSX {
|
|
|
176
240
|
* <a href="/search">Search</a>
|
|
177
241
|
* <a href="/help">Help</a>
|
|
178
242
|
* </pennlibs-header>
|
|
179
|
-
* @prop --max-width: The maximum width of the header.
|
|
243
|
+
* @prop --pl-viewport-max-width: The maximum width of the header.
|
|
244
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the header content.
|
|
180
245
|
*/
|
|
181
246
|
interface PennlibsHeader {
|
|
182
247
|
/**
|
|
@@ -200,7 +265,8 @@ declare namespace LocalJSX {
|
|
|
200
265
|
}
|
|
201
266
|
/**
|
|
202
267
|
* Place your most important content in a prominent space, often at the top of your website.
|
|
203
|
-
* @prop --max-width: The maximum width of the hero inner content.
|
|
268
|
+
* @prop --pl-viewport-max-width: The maximum width of the hero inner content.
|
|
269
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
|
|
204
270
|
*/
|
|
205
271
|
interface PennlibsHero {
|
|
206
272
|
}
|
|
@@ -222,6 +288,26 @@ declare module "@stencil/core" {
|
|
|
222
288
|
"pennlibs-chat": LocalJSX.PennlibsChat & JSXBase.HTMLAttributes<HTMLPennlibsChatElement>;
|
|
223
289
|
"pennlibs-fallback-img": LocalJSX.PennlibsFallbackImg & JSXBase.HTMLAttributes<HTMLPennlibsFallbackImgElement>;
|
|
224
290
|
"pennlibs-feedback": LocalJSX.PennlibsFeedback & JSXBase.HTMLAttributes<HTMLPennlibsFeedbackElement>;
|
|
291
|
+
/**
|
|
292
|
+
* A footer component for Penn Libraries websites that displays contact information,
|
|
293
|
+
* social media links, and custom navigation sections. Automatically organizes
|
|
294
|
+
* child content into navigation sections based on headings and links.
|
|
295
|
+
* @component
|
|
296
|
+
* @example <pennlibs-footer>
|
|
297
|
+
* <section>
|
|
298
|
+
* <h2>Resources</h2>
|
|
299
|
+
* <a href="/databases">Databases</a>
|
|
300
|
+
* <a href="/research-guides">Research Guides</a>
|
|
301
|
+
* </section>
|
|
302
|
+
* <section>
|
|
303
|
+
* <h2>Services</h2>
|
|
304
|
+
* <a href="/consultation">Research Consultation</a>
|
|
305
|
+
* <a href="/instruction">Library Instruction</a>
|
|
306
|
+
* </section>
|
|
307
|
+
* </pennlibs-footer>
|
|
308
|
+
* @prop --pl-viewport-max-width: The maximum width of the footer content.
|
|
309
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
310
|
+
*/
|
|
225
311
|
"pennlibs-footer": LocalJSX.PennlibsFooter & JSXBase.HTMLAttributes<HTMLPennlibsFooterElement>;
|
|
226
312
|
/**
|
|
227
313
|
* A header component for Penn Libraries websites that displays the Penn Libraries logo,
|
|
@@ -234,12 +320,14 @@ declare module "@stencil/core" {
|
|
|
234
320
|
* <a href="/search">Search</a>
|
|
235
321
|
* <a href="/help">Help</a>
|
|
236
322
|
* </pennlibs-header>
|
|
237
|
-
* @prop --max-width: The maximum width of the header.
|
|
323
|
+
* @prop --pl-viewport-max-width: The maximum width of the header.
|
|
324
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the header content.
|
|
238
325
|
*/
|
|
239
326
|
"pennlibs-header": LocalJSX.PennlibsHeader & JSXBase.HTMLAttributes<HTMLPennlibsHeaderElement>;
|
|
240
327
|
/**
|
|
241
328
|
* Place your most important content in a prominent space, often at the top of your website.
|
|
242
|
-
* @prop --max-width: The maximum width of the hero inner content.
|
|
329
|
+
* @prop --pl-viewport-max-width: The maximum width of the hero inner content.
|
|
330
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
|
|
243
331
|
*/
|
|
244
332
|
"pennlibs-hero": LocalJSX.PennlibsHero & JSXBase.HTMLAttributes<HTMLPennlibsHeroElement>;
|
|
245
333
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getAssetPath, c as createEvent, a as getElement } from './p-BAQIT3Vo.js';
|
|
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 = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -17,7 +17,7 @@ const Chat = class {
|
|
|
17
17
|
};
|
|
18
18
|
Chat.style = pennlibsChatCss;
|
|
19
19
|
|
|
20
|
-
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)}";
|
|
20
|
+
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)}";
|
|
21
21
|
|
|
22
22
|
const NoImage = class {
|
|
23
23
|
constructor(hostRef) {
|
|
@@ -31,7 +31,7 @@ const NoImage = class {
|
|
|
31
31
|
};
|
|
32
32
|
NoImage.style = pennlibsFallbackImgCss;
|
|
33
33
|
|
|
34
|
-
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%;
|
|
34
|
+
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}";
|
|
35
35
|
|
|
36
36
|
const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
|
|
37
37
|
const FEEDBACK_QUESTION = 'Did you find what you need?';
|
|
@@ -83,7 +83,7 @@ const PennlibsFeedback = class {
|
|
|
83
83
|
};
|
|
84
84
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|
|
85
85
|
|
|
86
|
-
const pennlibsFooterCss = ":host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n --
|
|
86
|
+
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}";
|
|
87
87
|
|
|
88
88
|
const Footer = class {
|
|
89
89
|
constructor(hostRef) {
|
|
@@ -112,12 +112,12 @@ const Footer = class {
|
|
|
112
112
|
}
|
|
113
113
|
render() {
|
|
114
114
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
115
|
-
return (h("div", { key: '
|
|
116
|
-
background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
115
|
+
return (h("div", { key: '9c2bcb29ada71917ecc4a2d7fe50997680e512c7', class: "website-footer-wrapper" }, h("footer", { key: '9f1407819668d47899efedd7d1a3cb56a2d21890', class: "website-footer", style: {
|
|
116
|
+
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
117
117
|
backgroundSize: 'cover',
|
|
118
|
-
} }, h("div", { key: '
|
|
118
|
+
} }, 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 && [
|
|
119
119
|
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))))))))
|
|
120
|
-
]))), h("div", { key: '
|
|
120
|
+
]))), 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"))))))));
|
|
121
121
|
}
|
|
122
122
|
static get assetsDirs() { return ["assets"]; }
|
|
123
123
|
get hostElement() { return getElement(this); }
|
|
@@ -147,7 +147,7 @@ const LogoBlue = () => {
|
|
|
147
147
|
h("path", { fill: "#fff", d: "M0 0H444.165V95H0z" })))));
|
|
148
148
|
};
|
|
149
149
|
|
|
150
|
-
const pennlibsHeaderCss = ":host{font-family:var(--font-family);font-size:var(--font-size);color:var(--color-fg-default)
|
|
150
|
+
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(--pl-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}}";
|
|
151
151
|
|
|
152
152
|
const Header = class {
|
|
153
153
|
constructor(hostRef) {
|
|
@@ -190,14 +190,14 @@ const Header = class {
|
|
|
190
190
|
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" })));
|
|
191
191
|
}
|
|
192
192
|
render() {
|
|
193
|
-
return (h("header", { key: '
|
|
193
|
+
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" }))));
|
|
194
194
|
}
|
|
195
195
|
static get assetsDirs() { return ["assets"]; }
|
|
196
196
|
get hostElement() { return getElement(this); }
|
|
197
197
|
};
|
|
198
198
|
Header.style = pennlibsHeaderCss;
|
|
199
199
|
|
|
200
|
-
const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--hero-heading-font:var(--font-serif);--
|
|
200
|
+
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}}";
|
|
201
201
|
|
|
202
202
|
const getCurrentImageSource = (pictureElement) => {
|
|
203
203
|
const imgElement = pictureElement.querySelector('img');
|
|
@@ -244,7 +244,7 @@ const Hero = class {
|
|
|
244
244
|
}
|
|
245
245
|
}
|
|
246
246
|
render() {
|
|
247
|
-
return (h("div", { key: '
|
|
247
|
+
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 })))))));
|
|
248
248
|
}
|
|
249
249
|
static get assetsDirs() { return ["assets"]; }
|
|
250
250
|
get hostElement() { return getElement(this); }
|
|
@@ -254,4 +254,4 @@ Hero.style = pennlibsHeroCss;
|
|
|
254
254
|
export { Chat as pennlibs_chat, NoImage as pennlibs_fallback_img, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header, Hero as pennlibs_hero };
|
|
255
255
|
//# sourceMappingURL=pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map
|
|
256
256
|
|
|
257
|
-
//# sourceMappingURL=p-
|
|
257
|
+
//# sourceMappingURL=p-1f149b52.entry.js.map
|