@penn-libraries/web 1.0.0-dev.2 → 1.1.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-B6HF5D3u.js → index-C0A2bnrZ.js} +76 -3
- package/dist/cjs/index-C0A2bnrZ.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -0
- package/dist/cjs/{pennlibs-chat_6.cjs.entry.js → pennlibs-allow-tracking_4.cjs.entry.js} +264 -121
- package/dist/cjs/pennlibs-allow-tracking_4.cjs.entry.js.map +1 -0
- package/dist/cjs/pennlibs-banner.cjs.entry.js +2 -2
- package/dist/cjs/pennlibs-chat.cjs.entry.js +25 -0
- package/dist/cjs/pennlibs-chat.cjs.entry.js.map +1 -0
- package/dist/cjs/pennlibs-chat.entry.cjs.js.map +1 -0
- package/dist/cjs/pennlibs-fallback-img.cjs.entry.js +22 -0
- package/dist/cjs/pennlibs-fallback-img.cjs.entry.js.map +1 -0
- package/dist/cjs/pennlibs-fallback-img.entry.cjs.js.map +1 -0
- package/dist/cjs/pennlibs-feedback.cjs.entry.js +60 -0
- package/dist/cjs/pennlibs-feedback.cjs.entry.js.map +1 -0
- package/dist/cjs/pennlibs-feedback.entry.cjs.js.map +1 -0
- package/dist/cjs/pennlibs-hero.cjs.entry.js +62 -0
- package/dist/cjs/pennlibs-hero.cjs.entry.js.map +1 -0
- package/dist/cjs/pennlibs-hero.entry.cjs.js.map +1 -0
- package/dist/cjs/web.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/pennlibs-allow-tracking/pennlibs-allow-tracking.css +110 -0
- package/dist/collection/components/pennlibs-allow-tracking/pennlibs-allow-tracking.js +67 -0
- package/dist/collection/components/pennlibs-allow-tracking/pennlibs-allow-tracking.js.map +1 -0
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.css +79 -0
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +309 -0
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js.map +1 -0
- package/dist/collection/components/pennlibs-banner/pennlibs-banner.js +1 -1
- package/dist/collection/components/pennlibs-chat/pennlibs-chat.js +1 -1
- package/dist/collection/components/pennlibs-fallback-img/pennlibs-fallback-img.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 +4 -0
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/pennlibs-allow-tracking.d.ts +11 -0
- package/dist/components/pennlibs-allow-tracking.js +79 -0
- package/dist/components/pennlibs-allow-tracking.js.map +1 -0
- package/dist/components/pennlibs-autocomplete.d.ts +11 -0
- package/dist/components/pennlibs-autocomplete.js +259 -0
- package/dist/components/pennlibs-autocomplete.js.map +1 -0
- package/dist/components/pennlibs-banner.js +1 -1
- package/dist/components/pennlibs-chat.js +1 -1
- package/dist/components/pennlibs-fallback-img.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 +102 -2
- package/dist/{web/p-BAQIT3Vo.js → esm/index-CE_ILdTo.js} +76 -3
- package/dist/{web/p-BAQIT3Vo.js.map → esm/index-CE_ILdTo.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.js.map +1 -0
- package/dist/esm/{pennlibs-chat_6.entry.js → pennlibs-allow-tracking_4.entry.js} +263 -118
- package/dist/esm/pennlibs-allow-tracking_4.entry.js.map +1 -0
- package/dist/esm/pennlibs-banner.entry.js +2 -2
- package/dist/esm/pennlibs-chat.entry.js +23 -0
- package/dist/esm/pennlibs-chat.entry.js.map +1 -0
- package/dist/esm/pennlibs-fallback-img.entry.js +20 -0
- package/dist/esm/pennlibs-fallback-img.entry.js.map +1 -0
- package/dist/esm/pennlibs-feedback.entry.js +58 -0
- package/dist/esm/pennlibs-feedback.entry.js.map +1 -0
- package/dist/esm/pennlibs-hero.entry.js +60 -0
- package/dist/esm/pennlibs-hero.entry.js.map +1 -0
- package/dist/esm/web.js +3 -3
- package/dist/types/components/pennlibs-allow-tracking/pennlibs-allow-tracking.d.ts +11 -0
- package/dist/types/components/pennlibs-autocomplete/pennlibs-autocomplete.d.ts +63 -0
- package/dist/types/components.d.ts +47 -0
- package/dist/web/index.esm.js +1 -1
- package/dist/web/p-07ad051f.entry.js +60 -0
- package/dist/web/p-07ad051f.entry.js.map +1 -0
- package/dist/web/{p-e331a309.entry.js → p-20c0bd7a.entry.js} +3 -3
- package/dist/web/p-370e32b1.entry.js +58 -0
- package/dist/web/p-370e32b1.entry.js.map +1 -0
- package/dist/web/p-5e385536.entry.js +20 -0
- package/dist/web/p-5e385536.entry.js.map +1 -0
- package/dist/{esm/index-BAQIT3Vo.js → web/p-CE_ILdTo.js} +76 -3
- package/dist/web/p-CE_ILdTo.js.map +1 -0
- package/dist/web/p-cbae5952.entry.js +23 -0
- package/dist/web/p-cbae5952.entry.js.map +1 -0
- package/dist/web/{p-ffdd436d.entry.js → p-ceaf55b0.entry.js} +263 -118
- package/dist/web/p-ceaf55b0.entry.js.map +1 -0
- package/dist/web/pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-chat.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-fallback-img.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-feedback.entry.esm.js.map +1 -0
- package/dist/web/pennlibs-hero.entry.esm.js.map +1 -0
- package/dist/web/web.esm.js +3 -3
- package/hydrate/index.js +361 -9
- package/hydrate/index.mjs +361 -9
- package/package.json +2 -2
- package/readme.md +2 -0
- package/dist/cjs/index-B6HF5D3u.js.map +0 -1
- package/dist/cjs/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +0 -1
- package/dist/cjs/pennlibs-chat_6.cjs.entry.js.map +0 -1
- package/dist/esm/index-BAQIT3Vo.js.map +0 -1
- package/dist/esm/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +0 -1
- package/dist/esm/pennlibs-chat_6.entry.js.map +0 -1
- package/dist/web/p-ffdd436d.entry.js.map +0 -1
- package/dist/web/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +0 -1
- /package/dist/web/{p-e331a309.entry.js.map → p-20c0bd7a.entry.js.map} +0 -0
package/hydrate/index.mjs
CHANGED
|
@@ -2150,6 +2150,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
2150
2150
|
}
|
|
2151
2151
|
let maybePromise;
|
|
2152
2152
|
if (isInitialLoad) {
|
|
2153
|
+
{
|
|
2154
|
+
hostRef.$flags$ |= 256 /* isListenReady */;
|
|
2155
|
+
if (hostRef.$queuedListeners$) {
|
|
2156
|
+
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
|
|
2157
|
+
hostRef.$queuedListeners$ = void 0;
|
|
2158
|
+
}
|
|
2159
|
+
}
|
|
2153
2160
|
maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
|
|
2154
2161
|
} else {
|
|
2155
2162
|
maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
|
|
@@ -2493,6 +2500,7 @@ var connectedCallback = (elm) => {
|
|
|
2493
2500
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
2494
2501
|
}
|
|
2495
2502
|
} else {
|
|
2503
|
+
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
2496
2504
|
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
|
|
2497
2505
|
fireConnectedCallback(hostRef.$lazyInstance$, elm);
|
|
2498
2506
|
} else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
@@ -2512,6 +2520,41 @@ var setContentReference = (elm) => {
|
|
|
2512
2520
|
contentRefElm["s-cn"] = true;
|
|
2513
2521
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
2514
2522
|
};
|
|
2523
|
+
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
2524
|
+
if (listeners && win.document) {
|
|
2525
|
+
listeners.map(([flags, name, method]) => {
|
|
2526
|
+
const target = getHostListenerTarget(win.document, elm, flags) ;
|
|
2527
|
+
const handler = hostListenerProxy(hostRef, method);
|
|
2528
|
+
const opts = hostListenerOpts(flags);
|
|
2529
|
+
plt.ael(target, name, handler, opts);
|
|
2530
|
+
(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
|
|
2531
|
+
});
|
|
2532
|
+
}
|
|
2533
|
+
};
|
|
2534
|
+
var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
2535
|
+
var _a;
|
|
2536
|
+
try {
|
|
2537
|
+
{
|
|
2538
|
+
if (hostRef.$flags$ & 256 /* isListenReady */) {
|
|
2539
|
+
(_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
|
|
2540
|
+
} else {
|
|
2541
|
+
(hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
2542
|
+
}
|
|
2543
|
+
}
|
|
2544
|
+
} catch (e) {
|
|
2545
|
+
consoleError(e, hostRef.$hostElement$);
|
|
2546
|
+
}
|
|
2547
|
+
};
|
|
2548
|
+
var getHostListenerTarget = (doc, elm, flags) => {
|
|
2549
|
+
if (flags & 4 /* TargetDocument */) {
|
|
2550
|
+
return doc;
|
|
2551
|
+
}
|
|
2552
|
+
if (flags & 16 /* TargetBody */) {
|
|
2553
|
+
return doc.body;
|
|
2554
|
+
}
|
|
2555
|
+
return elm;
|
|
2556
|
+
};
|
|
2557
|
+
var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
2515
2558
|
|
|
2516
2559
|
// src/runtime/vdom/vdom-annotations.ts
|
|
2517
2560
|
var insertVdomAnnotations = (doc, staticComponents) => {
|
|
@@ -2877,7 +2920,8 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
|
|
|
2877
2920
|
const cmpMeta = Cstr.cmpMeta;
|
|
2878
2921
|
if (cmpMeta != null) {
|
|
2879
2922
|
waitingElements.add(elm);
|
|
2880
|
-
getHostRef(this);
|
|
2923
|
+
const hostRef = getHostRef(this);
|
|
2924
|
+
addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
|
|
2881
2925
|
try {
|
|
2882
2926
|
connectedCallback(elm);
|
|
2883
2927
|
await elm.componentOnReady();
|
|
@@ -3119,6 +3163,312 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3119
3163
|
};
|
|
3120
3164
|
var styles = /* @__PURE__ */ new Map();
|
|
3121
3165
|
|
|
3166
|
+
const pennlibsAllowTrackingCss = ":host {\n background: var(--pl-color-penn-blue);\n display: block;\n margin: 0;\n font-family: var(--pl-font-family);\n font-size: var(--pl-font-size);\n color: var(--pl-color-fg-on-emphasis);\n\n *, *:before, *:after {\n box-sizing: inherit;\n }\n\n & h2 {\n font-size: var(--pl-font-size-xl);\n font-family: var(--pl-font-sans-serif);\n margin-bottom: 0;\n margin-top: 0;\n display: inline-flex;\n flex-wrap: wrap;\n\n & span {\n padding-right: var(--pl-space-xs);\n }\n }\n\n & p {\n margin: 0;\n }\n\n & *:focus {\n box-shadow: 0 0 0 2px var(--pl-color-bg-accent-emphasis), 0 0 0 4px var(--pl-color-bg-accent);\n outline: none;\n }\n\n & a {\n color: var(--pl-color-fg-on-emphasis);\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n\n &:hover {\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: 0.1em;\n }\n }\n}\n\n.container {\n padding: var(--pl-space-m) 0;\n}\n\n.pl-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 display: flex;\n gap: var(--pl-space-m);\n align-items: center;\n justify-content: space-between;\n\n flex-wrap: wrap;\n\n & div:last-of-type {\n display: flex;\n gap: var(--pl-space-xs);\n }\n}\n\nbutton {\n all: unset;\n display: flex;\n align-items: center;\n gap: 0.5em;\n padding: 0.5em 1.5em;\n font-family: var(--pl-font-family);\n font-weight: 500;\n line-height: 1.4;\n color: var(--pl-color-fg-default);\n background: var(--pl-color-bg-default);\n border-radius: 1em;\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: var(--pl-link-text-underline-offset);\n text-decoration-thickness: 0.1em;\n }\n}\n\n.stop-sharing {\n background: none;\n color: var(--pl-color-fg-on-emphasis);\n border: solid 1px var(--pl-color-fg-on-emphasis);\n}\n\n.tracking-message {\n display: flex;\n gap: var(--pl-space-xs);\n align-items: center;\n\n & svg {\n flex-shrink: 0;\n }\n}\n\n.tracking-options {\n flex-wrap: wrap;\n}";
|
|
3167
|
+
|
|
3168
|
+
class AllowTracking {
|
|
3169
|
+
constructor(hostRef) {
|
|
3170
|
+
registerInstance(this, hostRef);
|
|
3171
|
+
this.consentGiven = null;
|
|
3172
|
+
this.hide = true;
|
|
3173
|
+
this.handleAllow = () => {
|
|
3174
|
+
this.setCookie('pennlibs-allow-tracking', 'YES');
|
|
3175
|
+
this.consentGiven = 'YES';
|
|
3176
|
+
};
|
|
3177
|
+
this.handleDoNotTrack = () => {
|
|
3178
|
+
this.setCookie('pennlibs-allow-tracking', 'NO');
|
|
3179
|
+
this.consentGiven = 'NO';
|
|
3180
|
+
};
|
|
3181
|
+
this.handleHide = () => {
|
|
3182
|
+
this.hide = true;
|
|
3183
|
+
};
|
|
3184
|
+
}
|
|
3185
|
+
componentWillLoad() {
|
|
3186
|
+
if (navigator.cookieEnabled) {
|
|
3187
|
+
this.hide = false;
|
|
3188
|
+
}
|
|
3189
|
+
const existingConsent = this.getCookie('pennlibs-allow-tracking');
|
|
3190
|
+
if (existingConsent) {
|
|
3191
|
+
this.consentGiven = existingConsent;
|
|
3192
|
+
}
|
|
3193
|
+
}
|
|
3194
|
+
getCookie(name) {
|
|
3195
|
+
var _a;
|
|
3196
|
+
return ((_a = document.cookie
|
|
3197
|
+
.split('; ')
|
|
3198
|
+
.find(row => row.startsWith(`${name}=`))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) || null;
|
|
3199
|
+
}
|
|
3200
|
+
setCookie(name, value) {
|
|
3201
|
+
document.cookie = `${name}=${value}; path=/; max-age=31536000`;
|
|
3202
|
+
}
|
|
3203
|
+
render() {
|
|
3204
|
+
if (this.hide) {
|
|
3205
|
+
return null;
|
|
3206
|
+
}
|
|
3207
|
+
if (this.consentGiven) {
|
|
3208
|
+
return (hAsync("div", { class: "container" }, hAsync("div", { class: "pl-viewport-margins" }, hAsync("div", null, hAsync("p", null, "You've ", hAsync("strong", null, this.consentGiven === 'YES' ? 'accepted' : 'rejected'), " tracking. You can ", hAsync("a", { href: "#" }, "change this setting"), " at anytime.")), hAsync("div", null, hAsync("button", { onClick: this.handleHide }, "Hide tracking message")))));
|
|
3209
|
+
}
|
|
3210
|
+
return (hAsync("div", { class: "container" }, hAsync("div", { class: "pl-viewport-margins" }, hAsync("div", { class: "tracking-message" }, hAsync(TrackingIcon, null), hAsync("p", null, hAsync("a", { href: "https://www.library.upenn.edu/about/policies/penn-libraries-privacy-policy" }, "We use anonymized data"), " from your visit such as clicks to gather analytics and understand how we can make improvements.")), hAsync("div", { class: "tracking-options" }, hAsync("button", { onClick: this.handleAllow }, "Continue sharing"), hAsync("button", { onClick: this.handleDoNotTrack, class: "stop-sharing" }, "Stop sharing")))));
|
|
3211
|
+
}
|
|
3212
|
+
static get style() { return pennlibsAllowTrackingCss; }
|
|
3213
|
+
static get cmpMeta() { return {
|
|
3214
|
+
"$flags$": 9,
|
|
3215
|
+
"$tagName$": "pennlibs-allow-tracking",
|
|
3216
|
+
"$members$": {
|
|
3217
|
+
"consentGiven": [32],
|
|
3218
|
+
"hide": [32]
|
|
3219
|
+
},
|
|
3220
|
+
"$listeners$": undefined,
|
|
3221
|
+
"$lazyBundleId$": "-",
|
|
3222
|
+
"$attrsToReflect$": []
|
|
3223
|
+
}; }
|
|
3224
|
+
}
|
|
3225
|
+
function TrackingIcon() {
|
|
3226
|
+
return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trending-up-down-icon lucide-trending-up-down" }, hAsync("path", { d: "M14.828 14.828 21 21" }), hAsync("path", { d: "M21 16v5h-5" }), hAsync("path", { d: "m21 3-9 9-4-4-6 6" }), hAsync("path", { d: "M21 8V3h-5" })));
|
|
3227
|
+
}
|
|
3228
|
+
|
|
3229
|
+
const pennlibsAutocompleteCss = ":host {\n display: block;\n border-radius: 1.25rem;\n padding: 0;\n border-top: 0;\n position: relative;\n}\n\n[role=listbox] {\n position: absolute;\n margin-top: var(--pl-space-xs);\n background: var(--pl-color-bg-default);\n border-radius: 1.25rem;\n box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n width: 100%;\n overflow: hidden;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n}\n\np {\n margin: 0;\n font-size: var(--pl-font-size-s);\n color: var(--pl-color-fg-subtle);\n padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n font-size: var(--pl-font-size-s);\n order: 2;\n font-weight: 500;\n background: var(--pl-color-bg-subtle);\n border-radius: 0 0 1.25rem 1.25rem;\n\n display: flex;\n gap: var(--pl-space-s) var(--pl-space-l);\n flex-wrap: wrap;\n}\n\nol {\n list-style: none;\n margin: 0;\n padding: var(--pl-space-xs) 0;\n order: 1;\n}\n\n[role=option] {\n color: var(--pl-color-fg-default);\n padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n text-decoration: none;\n font-weight: 700; \n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n text-decoration-thickness: 2px;\n text-underline-offset: 2px;\n text-decoration: underline;\n }\n}\n\n[aria-selected=true] {\n text-decoration-thickness: 2px;\n text-underline-offset: 2px;\n text-decoration: underline;\n}\n\nmark {\n background: none;\n font-weight: 400;\n}\n\n.suggestion--border {\n border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n margin-bottom: var(--pl-space-2xs);\n}";
|
|
3230
|
+
|
|
3231
|
+
class Autocomplete {
|
|
3232
|
+
constructor(hostRef) {
|
|
3233
|
+
registerInstance(this, hostRef);
|
|
3234
|
+
this.activated = createEvent(this, "pl:activated");
|
|
3235
|
+
this.showSuggestions = false;
|
|
3236
|
+
this.currentIndex = -1;
|
|
3237
|
+
this.originalValue = '';
|
|
3238
|
+
this.options = [];
|
|
3239
|
+
this.handleOptionClick = (index) => {
|
|
3240
|
+
this.currentIndex = index;
|
|
3241
|
+
this.selectCurrent();
|
|
3242
|
+
};
|
|
3243
|
+
}
|
|
3244
|
+
componentWillLoad() {
|
|
3245
|
+
this.options = this.parseOptionsFromDOM();
|
|
3246
|
+
}
|
|
3247
|
+
componentDidLoad() {
|
|
3248
|
+
this.setupInput();
|
|
3249
|
+
}
|
|
3250
|
+
disconnectedCallback() {
|
|
3251
|
+
if (this.blurTimeout)
|
|
3252
|
+
clearTimeout(this.blurTimeout);
|
|
3253
|
+
}
|
|
3254
|
+
parseOptionsFromDOM() {
|
|
3255
|
+
const listbox = this.findListbox();
|
|
3256
|
+
if (!listbox)
|
|
3257
|
+
return [];
|
|
3258
|
+
const elements = Array.from(listbox.querySelectorAll('[role="option"]'));
|
|
3259
|
+
return elements.map((el, i) => this.createOption(el, i));
|
|
3260
|
+
}
|
|
3261
|
+
findListbox() {
|
|
3262
|
+
return Array.from(this.el.children).find(child => child.matches('ol[role="listbox"]'));
|
|
3263
|
+
}
|
|
3264
|
+
createOption(element, index) {
|
|
3265
|
+
var _a;
|
|
3266
|
+
return {
|
|
3267
|
+
id: element.id || `option-${index}`,
|
|
3268
|
+
html: element.innerHTML,
|
|
3269
|
+
value: element.getAttribute('data-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
|
|
3270
|
+
};
|
|
3271
|
+
}
|
|
3272
|
+
getInput() {
|
|
3273
|
+
var _a, _b;
|
|
3274
|
+
const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
|
|
3275
|
+
return ((_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0]) === null || _b === void 0 ? void 0 : _b.querySelector('input')) || null;
|
|
3276
|
+
}
|
|
3277
|
+
isInputFocused() {
|
|
3278
|
+
return this.getInput() === document.activeElement;
|
|
3279
|
+
}
|
|
3280
|
+
isTrackedInput(input) {
|
|
3281
|
+
return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-input')) === 'true' &&
|
|
3282
|
+
this.el.contains(input);
|
|
3283
|
+
}
|
|
3284
|
+
setupInput() {
|
|
3285
|
+
const input = this.getInput();
|
|
3286
|
+
if (!input)
|
|
3287
|
+
return;
|
|
3288
|
+
this.setComboboxAttributes(input);
|
|
3289
|
+
input.setAttribute('data-pl-autocomplete-input', 'true');
|
|
3290
|
+
}
|
|
3291
|
+
setComboboxAttributes(input) {
|
|
3292
|
+
input.setAttribute('role', 'combobox');
|
|
3293
|
+
input.setAttribute('aria-autocomplete', 'list');
|
|
3294
|
+
input.setAttribute('aria-expanded', 'false');
|
|
3295
|
+
input.setAttribute('aria-controls', 'listbox');
|
|
3296
|
+
}
|
|
3297
|
+
handleSlotChange() {
|
|
3298
|
+
this.setupInput();
|
|
3299
|
+
}
|
|
3300
|
+
handleInputEvent(event) {
|
|
3301
|
+
const input = event.target;
|
|
3302
|
+
if (this.isTrackedInput(input))
|
|
3303
|
+
this.openSuggestions();
|
|
3304
|
+
}
|
|
3305
|
+
handleFocusEvent(event) {
|
|
3306
|
+
const input = event.target;
|
|
3307
|
+
if (this.isTrackedInput(input))
|
|
3308
|
+
this.showSuggestionsPanel();
|
|
3309
|
+
}
|
|
3310
|
+
handleBlurEvent(event) {
|
|
3311
|
+
const input = event.target;
|
|
3312
|
+
if (this.isTrackedInput(input))
|
|
3313
|
+
this.deferCloseSuggestions();
|
|
3314
|
+
}
|
|
3315
|
+
handleFocusOut(event) {
|
|
3316
|
+
if (this.isFocusLeavingComponent(event))
|
|
3317
|
+
this.closeSuggestions();
|
|
3318
|
+
}
|
|
3319
|
+
handleKeyDown(event) {
|
|
3320
|
+
if (!this.isInputFocused())
|
|
3321
|
+
return;
|
|
3322
|
+
if (event.metaKey || event.ctrlKey)
|
|
3323
|
+
return; // Ignore keyboard shortcuts
|
|
3324
|
+
const handler = this.keyHandlers()[event.key];
|
|
3325
|
+
if (handler) {
|
|
3326
|
+
event.preventDefault();
|
|
3327
|
+
handler();
|
|
3328
|
+
}
|
|
3329
|
+
}
|
|
3330
|
+
keyHandlers() {
|
|
3331
|
+
return {
|
|
3332
|
+
'Escape': () => this.handleEscape(),
|
|
3333
|
+
'ArrowDown': () => this.handleArrowDown(),
|
|
3334
|
+
'ArrowUp': () => this.handleArrowUp(),
|
|
3335
|
+
'Enter': () => this.handleEnter()
|
|
3336
|
+
};
|
|
3337
|
+
}
|
|
3338
|
+
handleEscape() {
|
|
3339
|
+
this.reset();
|
|
3340
|
+
this.syncInputState();
|
|
3341
|
+
}
|
|
3342
|
+
handleArrowDown() {
|
|
3343
|
+
if (!this.showSuggestions)
|
|
3344
|
+
return;
|
|
3345
|
+
this.moveNext();
|
|
3346
|
+
this.syncInputState();
|
|
3347
|
+
}
|
|
3348
|
+
handleArrowUp() {
|
|
3349
|
+
if (!this.showSuggestions)
|
|
3350
|
+
return;
|
|
3351
|
+
this.movePrevious();
|
|
3352
|
+
this.syncInputState();
|
|
3353
|
+
}
|
|
3354
|
+
handleEnter() {
|
|
3355
|
+
if (this.canSelect())
|
|
3356
|
+
this.selectCurrent();
|
|
3357
|
+
}
|
|
3358
|
+
// Navigation
|
|
3359
|
+
moveNext() {
|
|
3360
|
+
const lastIndex = this.options.length - 1;
|
|
3361
|
+
this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;
|
|
3362
|
+
}
|
|
3363
|
+
movePrevious() {
|
|
3364
|
+
const lastIndex = this.options.length - 1;
|
|
3365
|
+
this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;
|
|
3366
|
+
}
|
|
3367
|
+
canSelect() {
|
|
3368
|
+
return this.showSuggestions && this.currentIndex >= 0;
|
|
3369
|
+
}
|
|
3370
|
+
selectCurrent() {
|
|
3371
|
+
if (this.currentIndex < 0)
|
|
3372
|
+
return;
|
|
3373
|
+
const selectedOption = this.options[this.currentIndex];
|
|
3374
|
+
const input = this.getInput();
|
|
3375
|
+
if (input) {
|
|
3376
|
+
input.value = selectedOption.value;
|
|
3377
|
+
this.originalValue = selectedOption.value;
|
|
3378
|
+
}
|
|
3379
|
+
this.activated.emit({
|
|
3380
|
+
index: this.currentIndex,
|
|
3381
|
+
value: selectedOption.value
|
|
3382
|
+
});
|
|
3383
|
+
this.closeSuggestions();
|
|
3384
|
+
}
|
|
3385
|
+
openSuggestions() {
|
|
3386
|
+
if (!this.isInputFocused())
|
|
3387
|
+
return;
|
|
3388
|
+
const input = this.getInput();
|
|
3389
|
+
if (input)
|
|
3390
|
+
this.originalValue = input.value;
|
|
3391
|
+
this.showSuggestionsPanel();
|
|
3392
|
+
this.syncInputState();
|
|
3393
|
+
}
|
|
3394
|
+
showSuggestionsPanel() {
|
|
3395
|
+
this.showSuggestions = true;
|
|
3396
|
+
this.syncInputState();
|
|
3397
|
+
}
|
|
3398
|
+
closeSuggestions() {
|
|
3399
|
+
this.reset();
|
|
3400
|
+
this.syncInputState();
|
|
3401
|
+
}
|
|
3402
|
+
deferCloseSuggestions() {
|
|
3403
|
+
this.blurTimeout = setTimeout(() => {
|
|
3404
|
+
if (this.isFocusOutsideComponent())
|
|
3405
|
+
this.closeSuggestions();
|
|
3406
|
+
}, 150);
|
|
3407
|
+
}
|
|
3408
|
+
reset() {
|
|
3409
|
+
this.showSuggestions = false;
|
|
3410
|
+
this.currentIndex = -1;
|
|
3411
|
+
}
|
|
3412
|
+
isFocusLeavingComponent(event) {
|
|
3413
|
+
var _a;
|
|
3414
|
+
const target = event.relatedTarget;
|
|
3415
|
+
return !target ||
|
|
3416
|
+
(!this.el.contains(target) && !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target)));
|
|
3417
|
+
}
|
|
3418
|
+
isFocusOutsideComponent() {
|
|
3419
|
+
var _a;
|
|
3420
|
+
const active = document.activeElement;
|
|
3421
|
+
return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
|
|
3422
|
+
}
|
|
3423
|
+
// Input State Sync
|
|
3424
|
+
syncInputState() {
|
|
3425
|
+
const input = this.getInput();
|
|
3426
|
+
if (!input)
|
|
3427
|
+
return;
|
|
3428
|
+
this.updateAriaExpanded(input);
|
|
3429
|
+
this.updateAriaActiveDescendant(input);
|
|
3430
|
+
this.updateInputValue(input);
|
|
3431
|
+
}
|
|
3432
|
+
updateAriaExpanded(input) {
|
|
3433
|
+
input.setAttribute('aria-expanded', this.showSuggestions.toString());
|
|
3434
|
+
}
|
|
3435
|
+
updateAriaActiveDescendant(input) {
|
|
3436
|
+
const hasSelection = this.showSuggestions && this.currentIndex >= 0;
|
|
3437
|
+
if (hasSelection && this.options[this.currentIndex]) {
|
|
3438
|
+
input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);
|
|
3439
|
+
}
|
|
3440
|
+
else {
|
|
3441
|
+
input.removeAttribute('aria-activedescendant');
|
|
3442
|
+
}
|
|
3443
|
+
}
|
|
3444
|
+
updateInputValue(input) {
|
|
3445
|
+
input.value = this.currentIndex >= 0
|
|
3446
|
+
? this.options[this.currentIndex].value
|
|
3447
|
+
: this.originalValue;
|
|
3448
|
+
}
|
|
3449
|
+
shouldShowListbox() {
|
|
3450
|
+
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
3451
|
+
}
|
|
3452
|
+
render() {
|
|
3453
|
+
return (hAsync("div", { key: '115c30f765cf21c38e2e5376da41295850ec76e3' }, hAsync("slot", { key: '878c10f3b561bf8c85f920b7238227a5b0429204', name: "start" }), this.shouldShowListbox() && (hAsync("ol", { key: 'ea491160d597a9c2b553107fb3edad698d652549', role: "listbox", id: "listbox" }, this.options.map((option, index) => (hAsync("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
|
|
3454
|
+
}
|
|
3455
|
+
get el() { return getElement(this); }
|
|
3456
|
+
static get style() { return pennlibsAutocompleteCss; }
|
|
3457
|
+
static get cmpMeta() { return {
|
|
3458
|
+
"$flags$": 9,
|
|
3459
|
+
"$tagName$": "pennlibs-autocomplete",
|
|
3460
|
+
"$members$": {
|
|
3461
|
+
"showSuggestions": [32],
|
|
3462
|
+
"currentIndex": [32],
|
|
3463
|
+
"originalValue": [32],
|
|
3464
|
+
"options": [32]
|
|
3465
|
+
},
|
|
3466
|
+
"$listeners$": [[0, "slotchange", "handleSlotChange"], [16, "input", "handleInputEvent"], [16, "focus", "handleFocusEvent"], [16, "blur", "handleBlurEvent"], [0, "focusout", "handleFocusOut"], [4, "keydown", "handleKeyDown"]],
|
|
3467
|
+
"$lazyBundleId$": "-",
|
|
3468
|
+
"$attrsToReflect$": []
|
|
3469
|
+
}; }
|
|
3470
|
+
}
|
|
3471
|
+
|
|
3122
3472
|
const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
|
|
3123
3473
|
|
|
3124
3474
|
class Banner {
|
|
@@ -3127,7 +3477,7 @@ class Banner {
|
|
|
3127
3477
|
}
|
|
3128
3478
|
render() {
|
|
3129
3479
|
const shieldImageSrc = getAssetPath('./assets/penn-shield.png');
|
|
3130
|
-
return (hAsync("nav", { key: '
|
|
3480
|
+
return (hAsync("nav", { key: 'f318d9a43db0cc13e9fc75457bec729651c57a30', class: "universal-nav", "aria-label": "Penn Libraries Websites" }, hAsync("a", { key: '23a7f51454f2e1b8e80ec136b0b14d74c6b1d4a9', href: "#main-content", class: "skip-to-content-link" }, "Skip to content"), hAsync("div", { key: 'ee4f8ea2959fb10ca40a02a3705ce8e8b138104c', class: "viewport-margins" }, hAsync("ul", { key: '07e19892c97069299148ccc94ba1cf5a9fa2da68' }, hAsync("li", { key: '8abc48c64b5ff7681f79fb21134cd60bebf2e6ea' }, hAsync("a", { key: '7e238689e33ee4d6e20fc7eb1c8d5430b98fe3d1', href: "https://www.library.upenn.edu/", class: "universal-nav__penn-libraries" }, hAsync("img", { key: 'ce41dda7bb3eb573afc63a0620acf0c7bc45dc64', src: shieldImageSrc, class: "universal-nav__shield-image", width: "16", height: "16" }), "Penn Libraries")), hAsync("li", { key: '8167cb151dc399be53b684a1eaae397fefc368e5' }, hAsync("a", { key: '16ddc57bbb75c2995745d16f1206074eb06777b0', href: "https://franklin.library.upenn.edu/" }, "Franklin")), hAsync("li", { key: 'ab465ad5fec2fcdc832819c83344842dfa50305c' }, hAsync("a", { key: '905738aaeea6a6500ff19e03916566a9053f48e8', href: "https://upenn.alma.exlibrisgroup.com/discovery/account?vid=01UPENN_INST:Services&lang=en§ion=overview" }, "Account")), hAsync("li", { key: '818b56e9f2df9f55dbb8b69042522d55b6d5ba22' }, hAsync("a", { key: 'c0fb59b9717ee8f5eb6bf04fbab24e2be2d00d92', href: "https://guides.library.upenn.edu/" }, "Guides")), hAsync("li", { key: 'd4938780fcb24ae14961af161f0a51324a32f886' }, hAsync("a", { key: '83970fd3d39015975f75414fc24a874485529186', href: "https://colenda.library.upenn.edu/" }, "Colenda")), hAsync("li", { key: 'a5e23ba88e82047961b22371d9a0ba327964d21b' }, hAsync("a", { key: '3e89fb2806ec29ab8521e237e7b46fddee608ec1', href: "https://faq.library.upenn.edu/ask" }, "Ask chat"))))));
|
|
3131
3481
|
}
|
|
3132
3482
|
static get assetsDirs() { return ["assets"]; }
|
|
3133
3483
|
static get style() { return pennlibsBannerCss; }
|
|
@@ -3153,7 +3503,7 @@ class Chat {
|
|
|
3153
3503
|
this.href = this.libchat_url + '?referer=' + window.location.href;
|
|
3154
3504
|
}
|
|
3155
3505
|
render() {
|
|
3156
|
-
return (hAsync("a", { key: '
|
|
3506
|
+
return (hAsync("a", { key: '89edeaea008aae32c102d5782e15f09799170956', href: this.href, target: "_blank", "aria-label": "Chat", id: "pennlibs-chat" }, hAsync("svg", { key: '496ef16ba01331ca8601e4549e9c715f970a095e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 82 82" }, hAsync("path", { key: '6bd0f09e3e80faf8ecfefeed9ddc2aa9dbc08eff', fill: "#fff", d: "M66.17 31.97H24.08c-1.19 0-2.17.97-2.17 2.17v28.55c0 1.19.97 2.17 2.17 2.17h24.68c1.19 0 2.17.97 2.17 2.17v2.28c0 1.93 2.33 2.89 3.69 1.53l5.34-5.34c.41-.41.96-.63 1.53-.63h4.67c1.19 0 2.17-.97 2.17-2.17V34.15c0-1.19-.97-2.17-2.17-2.17Z" }), hAsync("path", { key: '8ac87f21317effb697c28cfcc3ebf288ceb9db5e', fill: "#011f5b", d: "M28.91 57.96c-1.01 0-2.01-.39-2.76-1.14l-5.34-5.34c-.08-.08-.19-.13-.31-.13h-4.67c-2.15 0-3.9-1.75-3.9-3.9V18.9c0-2.15 1.75-3.9 3.9-3.9h42.09c2.15 0 3.9 1.75 3.9 3.9v28.55c0 2.15-1.75 3.9-3.9 3.9H33.24c-.24 0-.43.19-.43.43v2.28c0 1.58-.94 2.99-2.41 3.6-.48.2-.99.3-1.5.3ZM15.83 18.47c-.24 0-.43.19-.43.43v28.55c0 .24.19.43.43.43h4.67c1.04 0 2.02.41 2.76 1.14l5.34 5.34c.13.13.29.17.47.09.18-.07.27-.21.27-.4v-2.28c0-2.15 1.75-3.9 3.9-3.9h24.68c.24 0 .43-.19.43-.43V18.89c0-.24-.19-.43-.43-.43H15.83Z" })), hAsync("span", { key: '571e0cfea414ce512ec915e03f891d0b311caedd' }, "Chat")));
|
|
3157
3507
|
}
|
|
3158
3508
|
static get style() { return pennlibsChatCss; }
|
|
3159
3509
|
static get cmpMeta() { return {
|
|
@@ -3222,12 +3572,12 @@ class Footer {
|
|
|
3222
3572
|
}
|
|
3223
3573
|
render() {
|
|
3224
3574
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
3225
|
-
return (hAsync("div", { key: '
|
|
3575
|
+
return (hAsync("div", { key: '968368b94435f332d852c7599308992195df8792', class: "website-footer-wrapper" }, hAsync("footer", { key: '6c709b86bef34533d5350e7040d043fd2dd5caf2', class: "website-footer", style: {
|
|
3226
3576
|
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
3227
3577
|
backgroundSize: 'cover',
|
|
3228
|
-
} }, hAsync("div", { key: '
|
|
3578
|
+
} }, hAsync("div", { key: 'cfb33794f711d427f8cc64026bc1caff589ff444', class: "viewport-margins" }, hAsync("div", { key: '7f7518568ef5884a0014be4e10b4ba6d00b14d9c', class: "website-footer__content" }, hAsync("div", { key: '8fb9612358f3c42b3a5621f54cb646c06307776a', class: "website-footer__links-container" }, hAsync("section", { key: '1bed43fbe1c161d8d4de0381f71f093bab6a3791' }, hAsync("h2", { key: 'bdd5487da839597ce52715eff9fae099301a3f4b', class: "website-footer__heading" }, "Penn Libraries"), hAsync("ul", { key: '0579c77c9120b73f67eb5560716cc9194182e645', class: "website-footer__links" }, hAsync("li", { key: 'c8cadddc0867b4bded9f22975bc6e80210501737' }, hAsync("a", { key: '34a076d9417b0da1a390f9757be5cece974b8658', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", hAsync("br", { key: '159e1ceed4693f7a85489ad4a1ef8f916f505955' }), "Philadelphia, PA 19104-6206")), hAsync("li", { key: '3de1e966c16afc1ae5c82d25b1d87e24f27af826' }, hAsync("a", { key: '39a6709291115a6f6ead9116171b97c31c6e77d9', href: "tel:(215) 898-7555" }, "(215) 898-7555")), hAsync("li", { key: '7236b41454b66bc155bc4a7568f603c70504f01b' }, hAsync("a", { key: '49b285935d3240e900079b62c8d90eb564e5707d', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), hAsync("li", { key: '9329fe40a9aef5e1eaa74c6b22b33aee5b94f624' }, hAsync("a", { key: 'd2bc79dff8b3a5c01cbc1ece4268b4fdddc56954', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), hAsync("section", { key: '8b05b90f531f99c6223a7a080baa9472bb00b2b0' }, hAsync("h2", { key: 'c950fd6a248e5d673a8a4e050f3aaa84f91c5014', class: "website-footer__heading" }, "Stay in touch"), hAsync("ul", { key: '7ce913dd26948c9c1bb6f5ab14f1febc07425836', class: "website-footer__links" }, hAsync("li", { key: 'ccd80b1eee71f058caad49e3da56cbf1a8d28aa2' }, hAsync("a", { key: 'b09d62df23e341bd9424ff541a842c3b17a24637', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), hAsync("li", { key: '7b7c04fdf9d6673fef77fecd460c110f55700350' }, hAsync("a", { key: '08cd159b59ff63471f4075913a644bbd171c5e90', href: "https://www.instagram.com/upennlib/" }, "Instagram")), hAsync("li", { key: 'f0fffc02b5a55f41ad9e97b1e35dd7217e4d3aa6' }, hAsync("a", { key: '0269c87d87e2b2b3db93fae2d5e33d19cf6a82a1', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), hAsync("li", { key: '3c008831c4c3e5d700d4f16427b3cfd50082a8a6' }, hAsync("a", { key: 'db56894184243b375d3f8c7c42458720f70a34f2', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
3229
3579
|
this.navigationByChildren.map(section => (hAsync("section", null, hAsync("h2", { class: "website-footer__heading" }, section.heading), hAsync("ul", { class: "website-footer__links" }, section.links.map(link => (hAsync("li", null, hAsync("a", { href: link.href }, link.label))))))))
|
|
3230
|
-
]))), hAsync("div", { key: '
|
|
3580
|
+
]))), hAsync("div", { key: '3a48e365b66300beeb261d3c14e8d98e7565373d', class: "website-footer__footer" }, hAsync("div", { key: '699738c3f57f35796a1f4397a6fada44eaaa1683', class: "viewport-margins" }, hAsync("ul", { key: 'c88fb2fb6bbc3fc5eb13664f7288d7afe3ec7e57', class: "website-footer__links website-footer__links--footer" }, hAsync("li", { key: '8c3ecc9499cb5fdf180906d2d681eba515dae399' }, hAsync("a", { key: 'ae916ed72fc00e93f0e9c73b49878c75790a0227', href: "https://www.upenn.edu/" }, "UPenn")), hAsync("li", { key: 'c5a51aabc04937e09ae3df7c0fe13fbb9ff9b0d8' }, hAsync("a", { key: '359a6693330af0a701ff2e9a13fffb9e5ca573b6', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), hAsync("li", { key: '1e323f9c47a94933f48abaf0c1c5fef1479a1395' }, hAsync("a", { key: '55dde719bb09dc79fc158f931adaf2b1926120c9', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), hAsync("li", { key: 'e83955780f877039da38ddd946fd9ab0455812e1' }, hAsync("a", { key: '7ed5e27e6f6ea677a35c7f3e78dba2e72f629488', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), hAsync("li", { key: 'cd28d78bec76cc13e0272cbb30e11bcde6459cb9' }, hAsync("a", { key: 'a6a64d9949ea4cbbc8f90703d886e83dd9f0df9b', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), hAsync("li", { key: 'cbc668f7728653b15748a8488f9694c632884d6f' }, hAsync("a", { key: 'b681b57236ee23c3be9c85c4f199ef7f4c66b607', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
|
|
3231
3581
|
}
|
|
3232
3582
|
static get assetsDirs() { return ["assets"]; }
|
|
3233
3583
|
get hostElement() { return getElement(this); }
|
|
@@ -3330,7 +3680,7 @@ class Header {
|
|
|
3330
3680
|
return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, hAsync("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
3331
3681
|
}
|
|
3332
3682
|
render() {
|
|
3333
|
-
return (hAsync("header", { key: '
|
|
3683
|
+
return (hAsync("header", { key: '7764d8c5041a19eba4786e6469e6b915066523da', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, hAsync("div", { key: 'f7ab412767f5cf4e8d4cb9c1c05e969ece062927', class: "website-header__inner-container" }, hAsync("div", { key: '55a8d55b15be439e772c59bd6fb1d6d34cf073f3', class: "website-header__logo-name-container" }, hAsync("a", { key: 'edb380951b11d45b9b61b39253eebf0df32131de', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? hAsync(LogoWhite, null) : hAsync(LogoBlue, null)), this.serviceName && (hAsync("a", { key: '036d3e3eac035f8eb8c8999892bc3322f5171e05', href: "/", class: "website-header__service-link" }, hAsync("span", { key: '8d8ae853e2ce7ef8713226317260c2fdd79ae11b', class: "website-header__service-name" }, this.serviceName), this.serviceLede && hAsync("span", { key: '5c878d5bb98689268362d76cdf04db42d7444560', class: "website-header__service-lede" }, this.serviceLede))), hAsync("slot", { key: '3370137e9c3099f534c890d7422608fcf8bae09a', name: "name-end" })), this.navigation.length > 0 && (hAsync("nav", { key: '50751b716f9600691093ace08e2c90a92a2274c5', class: "website-header__navigation" }, hAsync("button", { key: 'e57793641ed5d314f1fec03821586d71cc82d889', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (hAsync("ol", { key: '8c6f479cf0da87a289593fceab55a4ce1436b146', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => hAsync("li", { innerHTML: element.outerHTML })))))), hAsync("slot", { key: '04edf00df086103b723f3e2bcf2241aa7a4624f2', name: "end" }))));
|
|
3334
3684
|
}
|
|
3335
3685
|
static get assetsDirs() { return ["assets"]; }
|
|
3336
3686
|
get hostElement() { return getElement(this); }
|
|
@@ -3407,7 +3757,7 @@ class Hero {
|
|
|
3407
3757
|
}
|
|
3408
3758
|
}
|
|
3409
3759
|
render() {
|
|
3410
|
-
return (hAsync("div", { key: '
|
|
3760
|
+
return (hAsync("div", { key: '2bfc2fc02554851ded092ebdcecb68688a6f935f', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, hAsync("div", { key: '7478c83cce6840513cd69986ecea53ee3d8c6822', class: "hero__content" }, hAsync("slot", { key: 'be29866c255988aa292e4406bccc1f65bd676fe2', name: "start" }), hAsync("div", { key: '32de0b18788e090b1779a5454a5f128fbe501d9a', class: "hero__heading-container" }, this.heroHeadingElement && (hAsync("div", { key: '7aa696c4acb519580d109ba6fb2d75099d35519a', class: "viewport-margins" }, hAsync("h1", { key: 'ac51221966fb7bb98e22d934ac591a66690e12bd', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && hAsync("p", { key: 'c496699e3c7f8898cdab88c408bb188bbaf3f93a', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
3411
3761
|
}
|
|
3412
3762
|
static get assetsDirs() { return ["assets"]; }
|
|
3413
3763
|
get hostElement() { return getElement(this); }
|
|
@@ -3435,7 +3785,7 @@ class NoImage {
|
|
|
3435
3785
|
}
|
|
3436
3786
|
render() {
|
|
3437
3787
|
const shieldImg = getAssetPath('./assets/simplified-shield.webp');
|
|
3438
|
-
return (hAsync("img", { key: '
|
|
3788
|
+
return (hAsync("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
|
|
3439
3789
|
}
|
|
3440
3790
|
static get assetsDirs() { return ["assets"]; }
|
|
3441
3791
|
static get style() { return pennlibsFallbackImgCss; }
|
|
@@ -3513,6 +3863,8 @@ class PennlibsFeedback {
|
|
|
3513
3863
|
}
|
|
3514
3864
|
|
|
3515
3865
|
registerComponents([
|
|
3866
|
+
AllowTracking,
|
|
3867
|
+
Autocomplete,
|
|
3516
3868
|
Banner,
|
|
3517
3869
|
Chat,
|
|
3518
3870
|
Footer,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penn-libraries/web",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.1.0-dev.0",
|
|
4
|
+
"description": "Reusable web designs for University of Pennsylvania Libraries websites. This package contains our code for shared Web Components and Cascading Style Sheets (CSS).",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
7
|
"es2015": "dist/esm/index.js",
|
package/readme.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Reusable web designs for University of Pennsylvania Libraries websites. This repo contains our code for shared Web Components and Cascading Style Sheets (CSS).
|
|
4
4
|
|
|
5
|
+
[Visit the documentation website](https://penn-libraries-design-system.netlify.app/)
|
|
6
|
+
|
|
5
7
|
## Get started
|
|
6
8
|
|
|
7
9
|
You can start using the components immediately by adding these tags to the `<head>`:
|