@penn-libraries/web 1.3.1 → 1.4.0-dev.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-BZwAUTFd.js → index-DATEsMXP.js} +19 -4
- package/dist/cjs/index-DATEsMXP.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pennlibs-autocomplete.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-chat.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -0
- package/dist/cjs/{pennlibs-feedback_3.cjs.entry.js → pennlibs-expand-text_4.cjs.entry.js} +81 -8
- package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +2 -2
- package/dist/cjs/pennlibs-hero.cjs.entry.js +3 -3
- package/dist/cjs/pennlibs-hero.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-iiif-img.cjs.entry.js +1 -1
- package/dist/cjs/web.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/pennlibs-expand-text/pennlibs-expand-text.css +88 -0
- package/dist/collection/components/pennlibs-expand-text/pennlibs-expand-text.js +168 -0
- package/dist/collection/components/pennlibs-expand-text/pennlibs-expand-text.js.map +1 -0
- package/dist/collection/components/pennlibs-fallback-img/pennlibs-fallback-img.js +1 -1
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js +1 -1
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.css +1 -1
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +3 -3
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +5 -10
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/pennlibs-expand-text.d.ts +11 -0
- package/dist/components/pennlibs-expand-text.js +105 -0
- package/dist/components/pennlibs-expand-text.js.map +1 -0
- package/dist/components/pennlibs-fallback-img2.js +1 -1
- package/dist/components/pennlibs-feedback.js +1 -1
- package/dist/components/pennlibs-footer.js +4 -4
- package/dist/components/pennlibs-footer.js.map +1 -1
- package/dist/components/pennlibs-header.js +1 -1
- package/dist/components/pennlibs-hero.js +2 -2
- package/dist/components/pennlibs-hero.js.map +1 -1
- package/dist/docs.json +130 -1
- package/dist/{web/p-DF84VN1-.js → esm/index-CgmxDHmi.js} +19 -5
- package/dist/esm/index-CgmxDHmi.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pennlibs-autocomplete.entry.js +1 -1
- package/dist/esm/pennlibs-banner.entry.js +1 -1
- package/dist/esm/pennlibs-chat.entry.js +1 -1
- package/dist/esm/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +1 -0
- package/dist/esm/{pennlibs-feedback_3.entry.js → pennlibs-expand-text_4.entry.js} +81 -9
- package/dist/esm/pennlibs-fallback-img.entry.js +2 -2
- package/dist/esm/pennlibs-hero.entry.js +3 -3
- package/dist/esm/pennlibs-hero.entry.js.map +1 -1
- package/dist/esm/pennlibs-iiif-img.entry.js +1 -1
- package/dist/esm/web.js +3 -3
- package/dist/types/components/pennlibs-expand-text/pennlibs-expand-text.d.ts +35 -0
- package/dist/types/components.d.ts +69 -0
- package/dist/web/index.esm.js +1 -1
- package/dist/web/{p-fc772aef.entry.js → p-2d7c03b3.entry.js} +3 -3
- package/dist/web/{p-17a97fcf.entry.js → p-6eef97ad.entry.js} +1 -1
- package/dist/web/{p-c978cff4.entry.js → p-6ff0271c.entry.js} +1 -1
- package/dist/web/{p-4d671d86.entry.js → p-7c1febd2.entry.js} +1 -1
- package/dist/{esm/index-DF84VN1-.js → web/p-CgmxDHmi.js} +19 -5
- package/dist/web/p-CgmxDHmi.js.map +1 -0
- package/dist/web/{p-dc790d88.entry.js → p-b674bdca.entry.js} +2 -2
- package/dist/web/{p-15aaa482.entry.js → p-eda436e7.entry.js} +1 -1
- package/dist/web/{p-f797c7a7.entry.js → p-ee89e08f.entry.js} +81 -9
- package/dist/web/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-hero.entry.esm.js.map +1 -1
- package/dist/web/web.css +9 -1
- package/dist/web/web.esm.js +3 -3
- package/hydrate/index.js +119 -10
- package/hydrate/index.mjs +119 -10
- package/package.json +1 -1
- package/dist/cjs/index-BZwAUTFd.js.map +0 -1
- package/dist/cjs/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +0 -1
- package/dist/esm/index-DF84VN1-.js.map +0 -1
- package/dist/esm/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +0 -1
- package/dist/web/p-DF84VN1-.js.map +0 -1
- package/dist/web/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +0 -1
|
@@ -1,6 +1,78 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DATEsMXP.js');
|
|
4
|
+
|
|
5
|
+
const pennlibsExpandTextCss = ":host{display:inline-block;position:relative;max-width:100%;vertical-align:bottom}.expand-text{display:block}.expand-text--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pl-expand-text-lines, 3);line-clamp:var(--pl-expand-text-lines, 3);overflow:hidden}.expand-text--expanded{display:inline}.expand-text__fade{position:absolute;right:0;bottom:0;padding-left:2em;background:linear-gradient(\n to right,\n transparent,\n var(--pl-expand-text-bg, var(--pl-color-bg-default)) 1.5em\n );pointer-events:none}.expand-text__toggle{display:inline-block;vertical-align:baseline;pointer-events:auto;padding:var(--pl-space-3xs) var(--pl-space-s);border:none;background:var(--pl-color-bg-subtle);color:var(--pl-color-fg-default);font-family:var(--pl-font-family);border-radius:var(--pl-border-radius-subtle);font-size:var(--pl-font-size-xs);font-weight:500;line-height:1.5;letter-spacing:0.075rem;text-transform:uppercase;cursor:pointer}.expand-text__toggle:hover{text-decoration:underline;text-decoration-thickness:var(--pl-link-text-decoration-thickness);text-underline-offset:var(--pl-link-text-underline-offset)}.expand-text__toggle:focus-visible{outline:none;box-shadow:var(--pl-focus-box-shadow)}.expand-text__fade--inline{position:static;padding-left:0;background:none;margin-inline-start:var(--pl-space-2xs, 0.25rem)}";
|
|
6
|
+
|
|
7
|
+
const ExpandText = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
/**
|
|
11
|
+
* Maximum number of lines to show before truncating.
|
|
12
|
+
* @prop lines
|
|
13
|
+
*/
|
|
14
|
+
this.lines = 3;
|
|
15
|
+
/**
|
|
16
|
+
* Label for the toggle when content is collapsed.
|
|
17
|
+
* @prop expand-label
|
|
18
|
+
*/
|
|
19
|
+
this.expandLabel = 'More';
|
|
20
|
+
/**
|
|
21
|
+
* Label for the toggle when content is expanded.
|
|
22
|
+
* @prop collapse-label
|
|
23
|
+
*/
|
|
24
|
+
this.collapseLabel = 'Less';
|
|
25
|
+
this.expanded = false;
|
|
26
|
+
this.hasOverflow = false;
|
|
27
|
+
this.measured = false;
|
|
28
|
+
this.checkOverflow = () => {
|
|
29
|
+
if (!this.contentEl || this.expanded)
|
|
30
|
+
return;
|
|
31
|
+
const lineHeight = parseFloat(getComputedStyle(this.contentEl).lineHeight);
|
|
32
|
+
if (Number.isFinite(lineHeight) && this.lines > 0) {
|
|
33
|
+
// Require at least two full extra lines of hidden content before the
|
|
34
|
+
// toggle is worth showing. A near-flush overflow (a few extra words)
|
|
35
|
+
// makes the toggle look like it reveals nothing meaningful.
|
|
36
|
+
this.hasOverflow = this.contentEl.scrollHeight > lineHeight * (this.lines + 2);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.hasOverflow = this.contentEl.scrollHeight > this.contentEl.clientHeight + 1;
|
|
40
|
+
}
|
|
41
|
+
this.measured = true;
|
|
42
|
+
};
|
|
43
|
+
this.toggle = () => {
|
|
44
|
+
this.expanded = !this.expanded;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
componentDidLoad() {
|
|
48
|
+
var _a;
|
|
49
|
+
if (!this.contentEl)
|
|
50
|
+
return;
|
|
51
|
+
// Observe the host (always inline-block) rather than the content span,
|
|
52
|
+
// which becomes inline when unclamped and stops firing resize events.
|
|
53
|
+
this.resizeObserver = new ResizeObserver(() => this.checkOverflow());
|
|
54
|
+
this.resizeObserver.observe(this.el);
|
|
55
|
+
this.checkOverflow();
|
|
56
|
+
(_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready.then(() => this.checkOverflow());
|
|
57
|
+
}
|
|
58
|
+
disconnectedCallback() {
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
61
|
+
}
|
|
62
|
+
render() {
|
|
63
|
+
const isClamped = !this.expanded && (!this.measured || this.hasOverflow);
|
|
64
|
+
return (index.h(index.Host, { key: '9c1a5be21f67022923982179319c9b0920a3ee00', style: { '--pl-expand-text-lines': String(this.lines) } }, index.h("span", { key: '54b5721c9df1a81b08e3823b93029f72a8e66852', class: {
|
|
65
|
+
'expand-text': true,
|
|
66
|
+
'expand-text--clamped': isClamped,
|
|
67
|
+
'expand-text--expanded': this.expanded,
|
|
68
|
+
}, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: 'f4df852b0d1513741e07825551428807f8cb27c3' })), this.hasOverflow && (index.h("span", { key: '79104493f870c13070468612a7269072c9607779', class: {
|
|
69
|
+
'expand-text__fade': true,
|
|
70
|
+
'expand-text__fade--inline': this.expanded,
|
|
71
|
+
} }, index.h("button", { key: 'f723f0265093c78b45b4f3cb6d2fce2549361cdd', type: "button", class: "expand-text__toggle", "aria-expanded": String(this.expanded), onClick: this.toggle }, this.expanded ? this.collapseLabel : this.expandLabel)))));
|
|
72
|
+
}
|
|
73
|
+
get el() { return index.getElement(this); }
|
|
74
|
+
};
|
|
75
|
+
ExpandText.style = pennlibsExpandTextCss;
|
|
4
76
|
|
|
5
77
|
const pennlibsFeedbackCss = ".feedback__container{display:block;background:#eeeff4;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;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}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-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;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}button.selected{background:var(--pl-color-bg-accent-emphasis);color:var(--pl-color-fg-on-emphasis);border-color:var(--pl-color-bg-accent-emphasis)}.feedback__inline-question+.feedback__share-feedback,p{animation:none}.feedback__content>p{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%}}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
6
78
|
|
|
@@ -81,12 +153,12 @@ const PennlibsFeedback = class {
|
|
|
81
153
|
}, 600);
|
|
82
154
|
}
|
|
83
155
|
render() {
|
|
84
|
-
return (index.h("div", { key: '
|
|
156
|
+
return (index.h("div", { key: '718c9b67ab9bfec7c946489ca3fa3e607a143889', class: "feedback__container" }, index.h("div", { key: 'f1d7fb08215224e80ec85ab381a20d017480bc4c', class: "viewport-margins" }, index.h("div", { key: 'a80b211eb18b1144704eb9dcb7e605328acde70c', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (index.h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (index.h("p", null, "We'd like to help. ", index.h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (index.h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, index.h("h2", null, "Did you find what you need?"), index.h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, index.h("span", null, "Yes"), index.h("span", { class: "visually-hidden" }, ", I found what I needed.")), index.h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, index.h("span", null, "No"), index.h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), index.h("div", { key: 'e441824f32084a83a0e22c0f282ca73f8295464e', class: "feedback__share-feedback" }, index.h("p", { key: '7df4f4d3b6f6a2b893be59fbe7517aa8f63eb690' }, "To help us improve, ", index.h("a", { key: '6defbfffc7839fb2038716844998eeb897ed71b0', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
|
|
85
157
|
}
|
|
86
158
|
};
|
|
87
159
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|
|
88
160
|
|
|
89
|
-
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\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-margins-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.built-with,\n.built-with a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n font-weight: 500;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n }\n}\n\n.built-with {\n opacity: 0.875;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\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.75em;\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.
|
|
161
|
+
const pennlibsFooterCss = ":host {\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n --padding-bottom: 3em;\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-margins-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.built-with,\n.built-with a {\n color: var(--pl-color-fg-subtle-on-emphasis);\n}\n\n.built-with a {\n font-weight: 500;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);\n }\n}\n\n.built-with {\n opacity: 0.875;\n margin: 0; \n padding: 1.5em 0;\n font-size: 0.875em;\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.75em;\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.75;\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}";
|
|
90
162
|
|
|
91
163
|
const Footer = class {
|
|
92
164
|
constructor(hostRef) {
|
|
@@ -119,12 +191,12 @@ const Footer = class {
|
|
|
119
191
|
}
|
|
120
192
|
render() {
|
|
121
193
|
const footerBackgroundSrc = index.getAssetPath('./assets/footer-bg.webp');
|
|
122
|
-
return (index.h("footer", { key: '
|
|
194
|
+
return (index.h("footer", { key: '15d1f4477bd137e281fcbf6c1e3b70bf55a8a2e0', class: "website-footer-wrapper" }, index.h("div", { key: '04954e3b1095b6d510e1bae4e5a453f6ff5cb0ce', class: "website-footer", style: {
|
|
123
195
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
124
196
|
backgroundSize: 'cover',
|
|
125
|
-
} }, index.h("div", { key: '
|
|
197
|
+
} }, index.h("div", { key: 'ba8ce4e14e0e9364863fac7a2839397e2e0b941a', class: "viewport-margins" }, index.h("div", { key: '63f34d4f96b284e724135ed8987cc2d3d2e3fbd1', class: "website-footer__content" }, index.h("div", { key: 'a1edf943618100610c6624d35193fc9f0f5968b3', class: "website-footer__links-container" }, index.h("section", { key: 'c7f7f781d1c6b239d520a8dc725381aec6281b8a' }, index.h("h2", { key: 'dc87452564eb1c1c1e75105ec8195917f7eb97a2', class: "website-footer__heading" }, "Penn Libraries"), index.h("ul", { key: '8510d8d758daee5d1c08bdbebf2fd741f6bc3b29', class: "website-footer__links" }, index.h("li", { key: '5975b1488a02111e692fd80e86db0f72baa4d9d3' }, index.h("a", { key: '2715c1c9c7a0f2ad1d677906eb5a34ab4c04007c', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", index.h("br", { key: '4d380fd2e056d972944a3866ebc52e25689cd44c' }), "Philadelphia, PA 19104-6206")), index.h("li", { key: '3d52db897689c923b85c67159f8c53ca346e98c2' }, index.h("a", { key: '1010c1d279e1cb11c7a853f0997b5d8aabd33bdc', href: "tel:(215) 898-7566" }, "(215) 898-7566")), index.h("li", { key: 'f1d61d6e01c5e2a1fced55e145f101ccc37fdf29' }, index.h("a", { key: 'f1dc654a1af81a5847aef7c9fc21e025eb8dfced', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), index.h("li", { key: '1c96e99267b30a59b65f4e3d726ef948be202d2d' }, index.h("a", { key: '02c308d0c96d6148ca093e5e0882d5d22aa9c1db', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), index.h("section", { key: '639a1f5a03b1f646b8a519fa4749980512524f33' }, index.h("h2", { key: 'e8047c4763458e63d20c4dddd6a35dd6f144c016', class: "website-footer__heading" }, "Stay in touch"), index.h("ul", { key: 'd496f8fbea5a6c8a9d705c90588b6f750f4a8609', class: "website-footer__links" }, index.h("li", { key: '57d3280c71d8dcf57db397641c9418910cd4cb84' }, index.h("a", { key: 'c3203a8e36919031b5a14958765ad05c5e590e50', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), index.h("li", { key: '0025893e79dc5fde2a86c8305ff57bd7a4bd5962' }, index.h("a", { key: '4f20f07275a082c43e3dfdbf23b42487d0cc94da', href: "https://www.instagram.com/upennlib/" }, "Instagram")), index.h("li", { key: '7d6e64d3f6d921e7967b9eea4f307cba5a3c326d' }, index.h("a", { key: 'b145fc5809b8f2a8225351bd69296da5f803756d', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), index.h("li", { key: '471174a0eede78d94704c00d28284cfafc0553e9' }, index.h("a", { key: '031b7d1aad9f6c27a2898c57cab0b2909d5acc78', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
126
198
|
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))))))))
|
|
127
|
-
]))), index.h("div", { key: '
|
|
199
|
+
]))), index.h("div", { key: '5ac97b0c44a303ceeb84c88a5da2c7a5417afa55', class: "website-footer__footer" }, index.h("div", { key: '281481bf6d25945607e1431f634a9f6649b72300', class: "viewport-margins" }, index.h("ul", { key: '8e4626896cd9dd360eebe55df9f8eb98d485045e', class: "website-footer__links website-footer__links--footer" }, index.h("li", { key: '021025b20149e8f53e17cf4df1f76a2d9045a52c' }, index.h("a", { key: '95bd80578f001c06f273800ee9b26c2069c8822c', href: "https://www.upenn.edu/" }, "UPenn")), index.h("li", { key: 'be940d241e15c85f07ec8f229e4683ccbaf077e4' }, index.h("a", { key: '1e8db44efbe98e135495240a42e6e74a3829c665', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), index.h("li", { key: '14a7fb2dfdc4fe417fc66ae05b0e30db13739913' }, index.h("a", { key: '1e572fd1b6c7c48225a65ef58c1f4cdb2f67afd6', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), index.h("li", { key: '1aeecdc1384586c45ea1500e2a908a0bde97668e' }, index.h("a", { key: '9e94479dd864300421900e0e9fe4fbb3251d7524', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), index.h("li", { key: 'a9d5ce618f8ed4ff4e8360dc11568b067f66101c' }, index.h("a", { key: '384f77c47f7d28b99fe9fbbf707948a180d973f1', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), index.h("li", { key: 'a203f0efeea4cfd5275cdee380c12bb9d7e04a38' }, index.h("a", { key: 'a51d4b482d562aca31ff9b97703950562604ad48', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (index.h("div", { key: '43f89da940afef08331d12e2991fa24220afce99', class: "viewport-margins" }, index.h("p", { key: '25863d379ecb9e7f46186858974a71e150188015', class: "built-with" }, "Built with the ", index.h("a", { key: '427150399d8b81e090315c01446452f2142bab63', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
|
|
128
200
|
}
|
|
129
201
|
static get assetsDirs() { return ["assets"]; }
|
|
130
202
|
get hostElement() { return index.getElement(this); }
|
|
@@ -182,14 +254,15 @@ const Header = class {
|
|
|
182
254
|
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" })));
|
|
183
255
|
}
|
|
184
256
|
render() {
|
|
185
|
-
return (index.h("header", { key: '
|
|
257
|
+
return (index.h("header", { key: '5b9d608f76d32ea50d377d251c2c2153a53b1875', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: 'b15e4a006b6a29f671df20e8bb65d2e9e71c25f3', class: "website-header__inner-container" }, index.h("div", { key: '5c3e13c63b317a44dee3b07c2dbcbdc4e33fb40a', class: "website-header__logo-name-container" }, index.h("a", { key: 'aa2d4a9b55fe73eac1b433da51db7e70c2a9100d', 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: 'bff559907d2e26bb2e9f055645a68d7b35558ef5', href: "/", class: "website-header__service-link" }, index.h("span", { key: '30376d9a13d24c78dd10f11c74acc017bb7ef9ee', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: '6bb01b158d0205a4d534b186379c0e00cb1cb076', class: "website-header__service-lede" }, this.serviceLede))), index.h("slot", { key: 'bff814b020b3a7c4eee900c19a871e47bebbfac7', name: "name-end" })), this.navigation.length > 0 && (index.h("nav", { key: 'f1949adb87868902885d65a65504f4ee4eb9c799', class: "website-header__navigation" }, index.h("button", { key: '7cd866c7dfb52caa705a74c8af5bba443c55257e', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '84270b993db01e2c46ce8a94be6c61a95c59f40a', 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: 'ff3234593474b8f5a63836a6f519d85a5fe73ba2', name: "end" }))));
|
|
186
258
|
}
|
|
187
259
|
static get assetsDirs() { return ["assets"]; }
|
|
188
260
|
get hostElement() { return index.getElement(this); }
|
|
189
261
|
};
|
|
190
262
|
Header.style = pennlibsHeaderCss;
|
|
191
263
|
|
|
264
|
+
exports.pennlibs_expand_text = ExpandText;
|
|
192
265
|
exports.pennlibs_feedback = PennlibsFeedback;
|
|
193
266
|
exports.pennlibs_footer = Footer;
|
|
194
267
|
exports.pennlibs_header = Header;
|
|
195
|
-
//# sourceMappingURL=pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map
|
|
268
|
+
//# sourceMappingURL=pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DATEsMXP.js');
|
|
4
4
|
|
|
5
5
|
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)}";
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ const NoImage = class {
|
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
12
|
const shieldImg = index.getAssetPath('./assets/simplified-shield.webp');
|
|
13
|
-
return (index.h("img", { key: '
|
|
13
|
+
return (index.h("img", { key: 'fcb8177bb7decae1ffc943b5bc6ddeeabc148cd2', src: shieldImg, alt: "", class: "no-image__img" }));
|
|
14
14
|
}
|
|
15
15
|
static get assetsDirs() { return ["assets"]; }
|
|
16
16
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DATEsMXP.js');
|
|
4
4
|
|
|
5
|
-
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-margins-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:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}
|
|
5
|
+
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-margins-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;container-type:inline-size}.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:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1;font-size:var(--pl-font-size-5xl);font-size:clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:400;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:var(--pl-space-s);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__sub-heading{font-size:1em}}";
|
|
6
6
|
|
|
7
7
|
const getCurrentImageSource = (pictureElement) => {
|
|
8
8
|
const imgElement = pictureElement.querySelector('img');
|
|
@@ -49,7 +49,7 @@ const Hero = class {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (index.h("div", { key: '
|
|
52
|
+
return (index.h("div", { key: '4234b8c7129b9ad562e979a62124bb8b059f4906', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: '48e60ea4da5432ca67ad355d79043fdefc9f916f', class: "hero__content" }, index.h("slot", { key: 'f08f58488b758cb0a5fe88d8c05b37fda2332ca4', name: "start" }), index.h("div", { key: '17a6b7a12512779048dcfa5ef68f58be34743541', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: 'e059b09f3797425587c268e714e605f8abdd20d7', class: "viewport-margins" }, index.h("h1", { key: '152d036ee2d7838c6faa072c0ea795c31ea7b120', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: 'e942105a04ab4e75a502dbd19d5f465efb2acb18', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
53
53
|
}
|
|
54
54
|
static get assetsDirs() { return ["assets"]; }
|
|
55
55
|
get hostElement() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-hero.entry.cjs.js","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-margins-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: var(--pl-space-3xl);\n padding-bottom: var(--pl-space-3xl);\n}\n\n.hero__heading {\n text-shadow: 1px 1px 2px var(--pl-color-fg-default);\n line-height: 1;\n font-size: var(--pl-font-size-5xl);\n font-weight: 400;\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
|
|
1
|
+
{"version":3,"file":"pennlibs-hero.entry.cjs.js","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-margins-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 /* Establish a container so .hero__heading can scale fluidly with the\n hero's own width via `cqi` units. */\n container-type: inline-size;\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: var(--pl-space-3xl);\n padding-bottom: var(--pl-space-3xl);\n}\n\n.hero__heading {\n text-shadow: 1px 1px 2px var(--pl-color-fg-default);\n line-height: 1;\n /* Fallback for browsers that don't parse `cqi`. */\n font-size: var(--pl-font-size-5xl);\n font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n font-weight: 400;\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.hero__sub-heading {\n font-size: 1.25em;\n font-family: var(--pl-font-family);\n font-weight: 400;\n color: var(--pl-hero-color);\n max-width: 52ch;\n text-wrap: pretty;\n margin-top: var(--pl-space-s);\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__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-margins-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}"],"names":["h"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DATEsMXP.js');
|
|
4
4
|
|
|
5
5
|
const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
|
|
6
6
|
|
package/dist/cjs/web.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DATEsMXP.js');
|
|
4
4
|
|
|
5
5
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
6
6
|
/*
|
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["pennlibs-iiif-img.cjs",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-
|
|
21
|
+
return index.bootstrapLazy([["pennlibs-iiif-img.cjs",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-expand-text_4.cjs",[[257,"pennlibs-expand-text",{"lines":[2],"expandLabel":[1,"expand-label"],"collapseLabel":[1,"collapse-label"],"expanded":[32],"hasOverflow":[32],"measured":[32]}],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-autocomplete.cjs",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["pennlibs-banner.cjs",[[257,"pennlibs-banner"]]],["pennlibs-chat.cjs",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero.cjs",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img.cjs",[[257,"pennlibs-fallback-img"]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
"components/pennlibs-autocomplete/pennlibs-autocomplete.js",
|
|
4
4
|
"components/pennlibs-banner/pennlibs-banner.js",
|
|
5
5
|
"components/pennlibs-chat/pennlibs-chat.js",
|
|
6
|
+
"components/pennlibs-expand-text/pennlibs-expand-text.js",
|
|
6
7
|
"components/pennlibs-fallback-img/pennlibs-fallback-img.js",
|
|
7
8
|
"components/pennlibs-feedback/pennlibs-feedback.js",
|
|
8
9
|
"components/pennlibs-footer/pennlibs-footer.js",
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
position: relative;
|
|
4
|
+
max-width: 100%;
|
|
5
|
+
vertical-align: bottom;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* `block` so scrollHeight reports the full wrapped content height (inline
|
|
9
|
+
spans don't, which breaks resize-based overflow detection). */
|
|
10
|
+
.expand-text {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Clamping only applies when the JS measurement says the content meaningfully
|
|
15
|
+
overflows. Pre-measurement, .expand-text--clamped is on by default so we
|
|
16
|
+
don't flash the full text before clamping. Post-measurement, it stays on
|
|
17
|
+
only if the threshold was hit; otherwise the content flows freely. */
|
|
18
|
+
.expand-text--clamped {
|
|
19
|
+
display: -webkit-box;
|
|
20
|
+
-webkit-box-orient: vertical;
|
|
21
|
+
-webkit-line-clamp: var(--pl-expand-text-lines, 3);
|
|
22
|
+
line-clamp: var(--pl-expand-text-lines, 3);
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* When expanded, switch back to inline so the inline-flow fade button
|
|
27
|
+
appears at the end of the text on the same line. */
|
|
28
|
+
.expand-text--expanded {
|
|
29
|
+
display: inline;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* The fade wrapper inherits the parent's font-size and line-height (via
|
|
33
|
+
the host), so its `1em` and `1lh` resolve against the parent. That gives
|
|
34
|
+
us a line-box the height of one parent line, with a baseline at the
|
|
35
|
+
right place for the inline-block toggle. */
|
|
36
|
+
.expand-text__fade {
|
|
37
|
+
position: absolute;
|
|
38
|
+
right: 0;
|
|
39
|
+
bottom: 0;
|
|
40
|
+
padding-left: 2em;
|
|
41
|
+
background:
|
|
42
|
+
linear-gradient(
|
|
43
|
+
to right,
|
|
44
|
+
transparent,
|
|
45
|
+
var(--pl-expand-text-bg, var(--pl-color-bg-default)) 1.5em
|
|
46
|
+
);
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.expand-text__toggle {
|
|
51
|
+
/* Pill chip. inline-block + vertical-align: baseline aligns the toggle's
|
|
52
|
+
text baseline to the parent's last-line baseline (via the fade's line-box). */
|
|
53
|
+
display: inline-block;
|
|
54
|
+
vertical-align: baseline;
|
|
55
|
+
pointer-events: auto;
|
|
56
|
+
padding: var(--pl-space-3xs) var(--pl-space-s);
|
|
57
|
+
border: none;
|
|
58
|
+
background: var(--pl-color-bg-subtle);
|
|
59
|
+
color: var(--pl-color-fg-default);
|
|
60
|
+
font-family: var(--pl-font-family);
|
|
61
|
+
border-radius: var(--pl-border-radius-subtle);
|
|
62
|
+
font-size: var(--pl-font-size-xs);
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
line-height: 1.5;
|
|
65
|
+
letter-spacing: 0.075rem;
|
|
66
|
+
text-transform: uppercase;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.expand-text__toggle:hover {
|
|
71
|
+
text-decoration: underline;
|
|
72
|
+
text-decoration-thickness: var(--pl-link-text-decoration-thickness);
|
|
73
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.expand-text__toggle:focus-visible {
|
|
77
|
+
outline: none;
|
|
78
|
+
box-shadow: var(--pl-focus-box-shadow);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* When expanded, drop the fade out of absolute flow so the toggle appears
|
|
82
|
+
inline at the end of the now-full text. */
|
|
83
|
+
.expand-text__fade--inline {
|
|
84
|
+
position: static;
|
|
85
|
+
padding-left: 0;
|
|
86
|
+
background: none;
|
|
87
|
+
margin-inline-start: var(--pl-space-2xs, 0.25rem);
|
|
88
|
+
}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* Clamp long text to a set number of lines with an inline "More" / "Less"
|
|
4
|
+
* toggle. Useful for headings, descriptions, or any prose block that can
|
|
5
|
+
* run long in narrow containers.
|
|
6
|
+
*
|
|
7
|
+
* @slot - The content to truncate. Accepts any flow content.
|
|
8
|
+
*/
|
|
9
|
+
export class ExpandText {
|
|
10
|
+
constructor() {
|
|
11
|
+
/**
|
|
12
|
+
* Maximum number of lines to show before truncating.
|
|
13
|
+
* @prop lines
|
|
14
|
+
*/
|
|
15
|
+
this.lines = 3;
|
|
16
|
+
/**
|
|
17
|
+
* Label for the toggle when content is collapsed.
|
|
18
|
+
* @prop expand-label
|
|
19
|
+
*/
|
|
20
|
+
this.expandLabel = 'More';
|
|
21
|
+
/**
|
|
22
|
+
* Label for the toggle when content is expanded.
|
|
23
|
+
* @prop collapse-label
|
|
24
|
+
*/
|
|
25
|
+
this.collapseLabel = 'Less';
|
|
26
|
+
this.expanded = false;
|
|
27
|
+
this.hasOverflow = false;
|
|
28
|
+
this.measured = false;
|
|
29
|
+
this.checkOverflow = () => {
|
|
30
|
+
if (!this.contentEl || this.expanded)
|
|
31
|
+
return;
|
|
32
|
+
const lineHeight = parseFloat(getComputedStyle(this.contentEl).lineHeight);
|
|
33
|
+
if (Number.isFinite(lineHeight) && this.lines > 0) {
|
|
34
|
+
// Require at least two full extra lines of hidden content before the
|
|
35
|
+
// toggle is worth showing. A near-flush overflow (a few extra words)
|
|
36
|
+
// makes the toggle look like it reveals nothing meaningful.
|
|
37
|
+
this.hasOverflow = this.contentEl.scrollHeight > lineHeight * (this.lines + 2);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
this.hasOverflow = this.contentEl.scrollHeight > this.contentEl.clientHeight + 1;
|
|
41
|
+
}
|
|
42
|
+
this.measured = true;
|
|
43
|
+
};
|
|
44
|
+
this.toggle = () => {
|
|
45
|
+
this.expanded = !this.expanded;
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
componentDidLoad() {
|
|
49
|
+
var _a;
|
|
50
|
+
if (!this.contentEl)
|
|
51
|
+
return;
|
|
52
|
+
// Observe the host (always inline-block) rather than the content span,
|
|
53
|
+
// which becomes inline when unclamped and stops firing resize events.
|
|
54
|
+
this.resizeObserver = new ResizeObserver(() => this.checkOverflow());
|
|
55
|
+
this.resizeObserver.observe(this.el);
|
|
56
|
+
this.checkOverflow();
|
|
57
|
+
(_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready.then(() => this.checkOverflow());
|
|
58
|
+
}
|
|
59
|
+
disconnectedCallback() {
|
|
60
|
+
var _a;
|
|
61
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
62
|
+
}
|
|
63
|
+
render() {
|
|
64
|
+
const isClamped = !this.expanded && (!this.measured || this.hasOverflow);
|
|
65
|
+
return (h(Host, { key: '9c1a5be21f67022923982179319c9b0920a3ee00', style: { '--pl-expand-text-lines': String(this.lines) } }, h("span", { key: '54b5721c9df1a81b08e3823b93029f72a8e66852', class: {
|
|
66
|
+
'expand-text': true,
|
|
67
|
+
'expand-text--clamped': isClamped,
|
|
68
|
+
'expand-text--expanded': this.expanded,
|
|
69
|
+
}, ref: (el) => (this.contentEl = el) }, h("slot", { key: 'f4df852b0d1513741e07825551428807f8cb27c3' })), this.hasOverflow && (h("span", { key: '79104493f870c13070468612a7269072c9607779', class: {
|
|
70
|
+
'expand-text__fade': true,
|
|
71
|
+
'expand-text__fade--inline': this.expanded,
|
|
72
|
+
} }, h("button", { key: 'f723f0265093c78b45b4f3cb6d2fce2549361cdd', type: "button", class: "expand-text__toggle", "aria-expanded": String(this.expanded), onClick: this.toggle }, this.expanded ? this.collapseLabel : this.expandLabel)))));
|
|
73
|
+
}
|
|
74
|
+
static get is() { return "pennlibs-expand-text"; }
|
|
75
|
+
static get encapsulation() { return "shadow"; }
|
|
76
|
+
static get originalStyleUrls() {
|
|
77
|
+
return {
|
|
78
|
+
"$": ["pennlibs-expand-text.css"]
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
static get styleUrls() {
|
|
82
|
+
return {
|
|
83
|
+
"$": ["pennlibs-expand-text.css"]
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
static get properties() {
|
|
87
|
+
return {
|
|
88
|
+
"lines": {
|
|
89
|
+
"type": "number",
|
|
90
|
+
"mutable": false,
|
|
91
|
+
"complexType": {
|
|
92
|
+
"original": "number",
|
|
93
|
+
"resolved": "number",
|
|
94
|
+
"references": {}
|
|
95
|
+
},
|
|
96
|
+
"required": false,
|
|
97
|
+
"optional": false,
|
|
98
|
+
"docs": {
|
|
99
|
+
"tags": [{
|
|
100
|
+
"name": "prop",
|
|
101
|
+
"text": "lines"
|
|
102
|
+
}],
|
|
103
|
+
"text": "Maximum number of lines to show before truncating."
|
|
104
|
+
},
|
|
105
|
+
"getter": false,
|
|
106
|
+
"setter": false,
|
|
107
|
+
"reflect": false,
|
|
108
|
+
"attribute": "lines",
|
|
109
|
+
"defaultValue": "3"
|
|
110
|
+
},
|
|
111
|
+
"expandLabel": {
|
|
112
|
+
"type": "string",
|
|
113
|
+
"mutable": false,
|
|
114
|
+
"complexType": {
|
|
115
|
+
"original": "string",
|
|
116
|
+
"resolved": "string",
|
|
117
|
+
"references": {}
|
|
118
|
+
},
|
|
119
|
+
"required": false,
|
|
120
|
+
"optional": false,
|
|
121
|
+
"docs": {
|
|
122
|
+
"tags": [{
|
|
123
|
+
"name": "prop",
|
|
124
|
+
"text": "expand-label"
|
|
125
|
+
}],
|
|
126
|
+
"text": "Label for the toggle when content is collapsed."
|
|
127
|
+
},
|
|
128
|
+
"getter": false,
|
|
129
|
+
"setter": false,
|
|
130
|
+
"reflect": false,
|
|
131
|
+
"attribute": "expand-label",
|
|
132
|
+
"defaultValue": "'More'"
|
|
133
|
+
},
|
|
134
|
+
"collapseLabel": {
|
|
135
|
+
"type": "string",
|
|
136
|
+
"mutable": false,
|
|
137
|
+
"complexType": {
|
|
138
|
+
"original": "string",
|
|
139
|
+
"resolved": "string",
|
|
140
|
+
"references": {}
|
|
141
|
+
},
|
|
142
|
+
"required": false,
|
|
143
|
+
"optional": false,
|
|
144
|
+
"docs": {
|
|
145
|
+
"tags": [{
|
|
146
|
+
"name": "prop",
|
|
147
|
+
"text": "collapse-label"
|
|
148
|
+
}],
|
|
149
|
+
"text": "Label for the toggle when content is expanded."
|
|
150
|
+
},
|
|
151
|
+
"getter": false,
|
|
152
|
+
"setter": false,
|
|
153
|
+
"reflect": false,
|
|
154
|
+
"attribute": "collapse-label",
|
|
155
|
+
"defaultValue": "'Less'"
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
}
|
|
159
|
+
static get states() {
|
|
160
|
+
return {
|
|
161
|
+
"expanded": {},
|
|
162
|
+
"hasOverflow": {},
|
|
163
|
+
"measured": {}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
static get elementRef() { return "el"; }
|
|
167
|
+
}
|
|
168
|
+
//# sourceMappingURL=pennlibs-expand-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pennlibs-expand-text.js","sourceRoot":"","sources":["../../../src/components/pennlibs-expand-text/pennlibs-expand-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Element, Host, h } from '@stencil/core';\n\n/**\n * Clamp long text to a set number of lines with an inline \"More\" / \"Less\"\n * toggle. Useful for headings, descriptions, or any prose block that can\n * run long in narrow containers.\n *\n * @slot - The content to truncate. Accepts any flow content.\n */\n@Component({\n tag: 'pennlibs-expand-text',\n styleUrl: 'pennlibs-expand-text.css',\n shadow: true,\n})\nexport class ExpandText {\n @Element() el!: HTMLElement;\n\n /**\n * Maximum number of lines to show before truncating.\n * @prop lines\n */\n @Prop() lines: number = 3;\n\n /**\n * Label for the toggle when content is collapsed.\n * @prop expand-label\n */\n @Prop() expandLabel: string = 'More';\n\n /**\n * Label for the toggle when content is expanded.\n * @prop collapse-label\n */\n @Prop() collapseLabel: string = 'Less';\n\n @State() expanded: boolean = false;\n @State() hasOverflow: boolean = false;\n @State() measured: boolean = false;\n\n private contentEl?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n\n componentDidLoad() {\n if (!this.contentEl) return;\n // Observe the host (always inline-block) rather than the content span,\n // which becomes inline when unclamped and stops firing resize events.\n this.resizeObserver = new ResizeObserver(() => this.checkOverflow());\n this.resizeObserver.observe(this.el);\n this.checkOverflow();\n document.fonts?.ready.then(() => this.checkOverflow());\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n private checkOverflow = () => {\n if (!this.contentEl || this.expanded) return;\n const lineHeight = parseFloat(getComputedStyle(this.contentEl).lineHeight);\n if (Number.isFinite(lineHeight) && this.lines > 0) {\n // Require at least two full extra lines of hidden content before the\n // toggle is worth showing. A near-flush overflow (a few extra words)\n // makes the toggle look like it reveals nothing meaningful.\n this.hasOverflow = this.contentEl.scrollHeight > lineHeight * (this.lines + 2);\n } else {\n this.hasOverflow = this.contentEl.scrollHeight > this.contentEl.clientHeight + 1;\n }\n this.measured = true;\n };\n\n private toggle = () => {\n this.expanded = !this.expanded;\n };\n\n render() {\n const isClamped = !this.expanded && (!this.measured || this.hasOverflow);\n return (\n <Host style={{ '--pl-expand-text-lines': String(this.lines) }}>\n <span\n class={{\n 'expand-text': true,\n 'expand-text--clamped': isClamped,\n 'expand-text--expanded': this.expanded,\n }}\n ref={(el) => (this.contentEl = el)}\n >\n <slot />\n </span>\n {this.hasOverflow && (\n <span\n class={{\n 'expand-text__fade': true,\n 'expand-text__fade--inline': this.expanded,\n }}\n >\n <button\n type=\"button\"\n class=\"expand-text__toggle\"\n aria-expanded={String(this.expanded)}\n onClick={this.toggle}\n >\n {this.expanded ? this.collapseLabel : this.expandLabel}\n </button>\n </span>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { h, getAssetPath } from "@stencil/core";
|
|
|
2
2
|
export class NoImage {
|
|
3
3
|
render() {
|
|
4
4
|
const shieldImg = getAssetPath('./assets/simplified-shield.webp');
|
|
5
|
-
return (h("img", { key: '
|
|
5
|
+
return (h("img", { key: 'fcb8177bb7decae1ffc943b5bc6ddeeabc148cd2', src: shieldImg, alt: "", class: "no-image__img" }));
|
|
6
6
|
}
|
|
7
7
|
static get is() { return "pennlibs-fallback-img"; }
|
|
8
8
|
static get encapsulation() { return "shadow"; }
|
|
@@ -85,7 +85,7 @@ export class PennlibsFeedback {
|
|
|
85
85
|
}, 600);
|
|
86
86
|
}
|
|
87
87
|
render() {
|
|
88
|
-
return (h("div", { key: '
|
|
88
|
+
return (h("div", { key: '718c9b67ab9bfec7c946489ca3fa3e607a143889', class: "feedback__container" }, h("div", { key: 'f1d7fb08215224e80ec85ab381a20d017480bc4c', class: "viewport-margins" }, h("div", { key: 'a80b211eb18b1144704eb9dcb7e605328acde70c', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: 'e441824f32084a83a0e22c0f282ca73f8295464e', class: "feedback__share-feedback" }, h("p", { key: '7df4f4d3b6f6a2b893be59fbe7517aa8f63eb690' }, "To help us improve, ", h("a", { key: '6defbfffc7839fb2038716844998eeb897ed71b0', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
|
|
89
89
|
}
|
|
90
90
|
static get is() { return "pennlibs-feedback"; }
|
|
91
91
|
static get encapsulation() { return "shadow"; }
|