@penn-libraries/web 1.4.0-dev.0 → 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-DBhvAaKX.js → index-DATEsMXP.js} +18 -3
- 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} +80 -7
- package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +2 -2
- package/dist/cjs/pennlibs-hero.cjs.entry.js +2 -2
- 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.js +3 -3
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +1 -1
- 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 +3 -3
- package/dist/components/pennlibs-header.js +1 -1
- package/dist/components/pennlibs-hero.js +1 -1
- package/dist/docs.json +130 -1
- package/dist/{web/p-B2uNboIg.js → esm/index-CgmxDHmi.js} +18 -4
- 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} +80 -8
- package/dist/esm/pennlibs-fallback-img.entry.js +2 -2
- package/dist/esm/pennlibs-hero.entry.js +2 -2
- 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-45f82cb0.entry.js → p-2d7c03b3.entry.js} +2 -2
- package/dist/web/{p-5ff9bc88.entry.js → p-6eef97ad.entry.js} +1 -1
- package/dist/web/{p-6a15d2f0.entry.js → p-6ff0271c.entry.js} +1 -1
- package/dist/web/{p-3a18e805.entry.js → p-7c1febd2.entry.js} +1 -1
- package/dist/{esm/index-B2uNboIg.js → web/p-CgmxDHmi.js} +18 -4
- package/dist/web/p-CgmxDHmi.js.map +1 -0
- package/dist/web/{p-2466b63f.entry.js → p-b674bdca.entry.js} +2 -2
- package/dist/web/{p-aab8ed2e.entry.js → p-eda436e7.entry.js} +1 -1
- package/dist/web/{p-743f4899.entry.js → p-ee89e08f.entry.js} +80 -8
- package/dist/web/pennlibs-expand-text.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -0
- package/dist/web/web.esm.js +3 -3
- package/hydrate/index.js +117 -8
- package/hydrate/index.mjs +117 -8
- package/package.json +1 -1
- package/dist/cjs/index-DBhvAaKX.js.map +0 -1
- package/dist/cjs/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +0 -1
- package/dist/esm/index-B2uNboIg.js.map +0 -1
- package/dist/esm/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +0 -1
- package/dist/web/p-B2uNboIg.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,7 +153,7 @@ 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;
|
|
@@ -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,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 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
|
|
|
@@ -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,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"; }
|
|
@@ -54,12 +54,12 @@ export class Footer {
|
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
56
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
57
|
-
return (h("footer", { key: '
|
|
57
|
+
return (h("footer", { key: '15d1f4477bd137e281fcbf6c1e3b70bf55a8a2e0', class: "website-footer-wrapper" }, h("div", { key: '04954e3b1095b6d510e1bae4e5a453f6ff5cb0ce', class: "website-footer", style: {
|
|
58
58
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
59
59
|
backgroundSize: 'cover',
|
|
60
|
-
} }, h("div", { key: '
|
|
60
|
+
} }, h("div", { key: 'ba8ce4e14e0e9364863fac7a2839397e2e0b941a', class: "viewport-margins" }, h("div", { key: '63f34d4f96b284e724135ed8987cc2d3d2e3fbd1', class: "website-footer__content" }, h("div", { key: 'a1edf943618100610c6624d35193fc9f0f5968b3', class: "website-footer__links-container" }, h("section", { key: 'c7f7f781d1c6b239d520a8dc725381aec6281b8a' }, h("h2", { key: 'dc87452564eb1c1c1e75105ec8195917f7eb97a2', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: '8510d8d758daee5d1c08bdbebf2fd741f6bc3b29', class: "website-footer__links" }, h("li", { key: '5975b1488a02111e692fd80e86db0f72baa4d9d3' }, h("a", { key: '2715c1c9c7a0f2ad1d677906eb5a34ab4c04007c', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: '4d380fd2e056d972944a3866ebc52e25689cd44c' }), "Philadelphia, PA 19104-6206")), h("li", { key: '3d52db897689c923b85c67159f8c53ca346e98c2' }, h("a", { key: '1010c1d279e1cb11c7a853f0997b5d8aabd33bdc', href: "tel:(215) 898-7566" }, "(215) 898-7566")), h("li", { key: 'f1d61d6e01c5e2a1fced55e145f101ccc37fdf29' }, h("a", { key: 'f1dc654a1af81a5847aef7c9fc21e025eb8dfced', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: '1c96e99267b30a59b65f4e3d726ef948be202d2d' }, h("a", { key: '02c308d0c96d6148ca093e5e0882d5d22aa9c1db', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '639a1f5a03b1f646b8a519fa4749980512524f33' }, h("h2", { key: 'e8047c4763458e63d20c4dddd6a35dd6f144c016', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'd496f8fbea5a6c8a9d705c90588b6f750f4a8609', class: "website-footer__links" }, h("li", { key: '57d3280c71d8dcf57db397641c9418910cd4cb84' }, h("a", { key: 'c3203a8e36919031b5a14958765ad05c5e590e50', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: '0025893e79dc5fde2a86c8305ff57bd7a4bd5962' }, h("a", { key: '4f20f07275a082c43e3dfdbf23b42487d0cc94da', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '7d6e64d3f6d921e7967b9eea4f307cba5a3c326d' }, h("a", { key: 'b145fc5809b8f2a8225351bd69296da5f803756d', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: '471174a0eede78d94704c00d28284cfafc0553e9' }, h("a", { key: '031b7d1aad9f6c27a2898c57cab0b2909d5acc78', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
61
61
|
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))))))))
|
|
62
|
-
]))), h("div", { key: '
|
|
62
|
+
]))), h("div", { key: '5ac97b0c44a303ceeb84c88a5da2c7a5417afa55', class: "website-footer__footer" }, h("div", { key: '281481bf6d25945607e1431f634a9f6649b72300', class: "viewport-margins" }, h("ul", { key: '8e4626896cd9dd360eebe55df9f8eb98d485045e', class: "website-footer__links website-footer__links--footer" }, h("li", { key: '021025b20149e8f53e17cf4df1f76a2d9045a52c' }, h("a", { key: '95bd80578f001c06f273800ee9b26c2069c8822c', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: 'be940d241e15c85f07ec8f229e4683ccbaf077e4' }, h("a", { key: '1e8db44efbe98e135495240a42e6e74a3829c665', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: '14a7fb2dfdc4fe417fc66ae05b0e30db13739913' }, h("a", { key: '1e572fd1b6c7c48225a65ef58c1f4cdb2f67afd6', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '1aeecdc1384586c45ea1500e2a908a0bde97668e' }, h("a", { key: '9e94479dd864300421900e0e9fe4fbb3251d7524', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: 'a9d5ce618f8ed4ff4e8360dc11568b067f66101c' }, h("a", { key: '384f77c47f7d28b99fe9fbbf707948a180d973f1', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: 'a203f0efeea4cfd5275cdee380c12bb9d7e04a38' }, h("a", { key: 'a51d4b482d562aca31ff9b97703950562604ad48', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement")))))), this.showBuiltWith && (h("div", { key: '43f89da940afef08331d12e2991fa24220afce99', class: "viewport-margins" }, h("p", { key: '25863d379ecb9e7f46186858974a71e150188015', class: "built-with" }, "Built with the ", h("a", { key: '427150399d8b81e090315c01446452f2142bab63', href: "https://designsystem.library.upenn.edu/" }, "Penn Libraries Design System"), ".")))));
|
|
63
63
|
}
|
|
64
64
|
static get is() { return "pennlibs-footer"; }
|
|
65
65
|
static get encapsulation() { return "shadow"; }
|
|
@@ -63,7 +63,7 @@ export class Header {
|
|
|
63
63
|
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" })));
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
-
return (h("header", { key: '
|
|
66
|
+
return (h("header", { key: '5b9d608f76d32ea50d377d251c2c2153a53b1875', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: 'b15e4a006b6a29f671df20e8bb65d2e9e71c25f3', class: "website-header__inner-container" }, h("div", { key: '5c3e13c63b317a44dee3b07c2dbcbdc4e33fb40a', class: "website-header__logo-name-container" }, h("a", { key: 'aa2d4a9b55fe73eac1b433da51db7e70c2a9100d', 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: 'bff559907d2e26bb2e9f055645a68d7b35558ef5', href: "/", class: "website-header__service-link" }, h("span", { key: '30376d9a13d24c78dd10f11c74acc017bb7ef9ee', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: '6bb01b158d0205a4d534b186379c0e00cb1cb076', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: 'bff814b020b3a7c4eee900c19a871e47bebbfac7', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'f1949adb87868902885d65a65504f4ee4eb9c799', class: "website-header__navigation" }, h("button", { key: '7cd866c7dfb52caa705a74c8af5bba443c55257e', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: '84270b993db01e2c46ce8a94be6c61a95c59f40a', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: 'ff3234593474b8f5a63836a6f519d85a5fe73ba2', name: "end" }))));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "pennlibs-header"; }
|
|
69
69
|
static get encapsulation() { return "shadow"; }
|