@penn-libraries/web 1.1.0-dev.2 → 1.1.0-dev.4

package/dist/web/{p-270fd846.entry.js → p-40119068.entry.js}

@@ -1,56 +1,4 @@
-import { r as registerInstance, h, c as createEvent, a as getElement, g as getAssetPath } from './p-CE_ILdTo.js';
-
-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}";
-
-const AllowTracking = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.consentGiven = null;
-        this.hide = true;
-        this.handleAllow = () => {
-            this.setCookie('pennlibs-allow-tracking', 'YES');
-            this.consentGiven = 'YES';
-        };
-        this.handleDoNotTrack = () => {
-            this.setCookie('pennlibs-allow-tracking', 'NO');
-            this.consentGiven = 'NO';
-        };
-        this.handleHide = () => {
-            this.hide = true;
-        };
-    }
-    componentWillLoad() {
-        if (navigator.cookieEnabled) {
-            this.hide = false;
-        }
-        const existingConsent = this.getCookie('pennlibs-allow-tracking');
-        if (existingConsent) {
-            this.consentGiven = existingConsent;
-        }
-    }
-    getCookie(name) {
-        var _a;
-        return ((_a = document.cookie
-            .split('; ')
-            .find(row => row.startsWith(`${name}=`))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) || null;
-    }
-    setCookie(name, value) {
-        document.cookie = `${name}=${value}; path=/; max-age=31536000`;
-    }
-    render() {
-        if (this.hide) {
-            return null;
-        }
-        if (this.consentGiven) {
-            return (h("div", { class: "container" }, h("div", { class: "pl-viewport-margins" }, h("div", null, h("p", null, "You've ", h("strong", null, this.consentGiven === 'YES' ? 'accepted' : 'rejected'), " tracking. You can ", h("a", { href: "#" }, "change this setting"), " at anytime.")), h("div", null, h("button", { onClick: this.handleHide }, "Hide tracking message")))));
-        }
-        return (h("div", { class: "container" }, h("div", { class: "pl-viewport-margins" }, h("div", { class: "tracking-message" }, h(TrackingIcon, null), h("p", null, h("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.")), h("div", { class: "tracking-options" }, h("button", { onClick: this.handleAllow }, "Continue sharing"), h("button", { onClick: this.handleDoNotTrack, class: "stop-sharing" }, "Stop sharing")))));
-    }
-};
-function TrackingIcon() {
-    return (h("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" }, h("path", { d: "M14.828 14.828 21 21" }), h("path", { d: "M21 16v5h-5" }), h("path", { d: "m21 3-9 9-4-4-6 6" }), h("path", { d: "M21 8V3h-5" })));
-}
-AllowTracking.style = pennlibsAllowTrackingCss;
+import { r as registerInstance, c as createEvent, h, a as getElement, g as getAssetPath } from './p-CE_ILdTo.js';
 
 const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\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}";
 
@@ -130,12 +78,16 @@ const Autocomplete = class {
         input.setAttribute('aria-controls', 'listbox');
     }
     handleSlotChange() {
+        this.options = this.parseOptionsFromDOM();
         this.setupInput();
     }
     handleInputEvent(event) {
         const input = event.target;
-        if (this.isTrackedInput(input))
+        if (this.isTrackedInput(input)) {
+            // Reset active option when user manually changes input
+            this.currentIndex = -1;
             this.openSuggestions();
+        }
     }
     handleFocusEvent(event) {
         const input = event.target;
@@ -285,7 +237,7 @@ const Autocomplete = class {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (h("div", { key: '2091f8acacac10714c4d607e294248f3bd7e5fd7' }, h("slot", { key: '628a216ce90ee693a354a74f91bcce2fe61b74a5', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '916eba0f4b2148616fac4cc96cac4c7506a9bd0e', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (h("div", { key: 'c9d88ed9a19ef99b53d0849d03c0a64d4e08a39c' }, h("slot", { key: 'bc5c0c3e42f40269818cd7a8f78ec4bb5f5f0d49', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '4ad4f80d38a7de2537f343ec02e1bad3e5c2b100', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return getElement(this); }
 };
@@ -405,7 +357,7 @@ const Header = class {
 };
 Header.style = pennlibsHeaderCss;
 
-export { AllowTracking as pennlibs_allow_tracking, Autocomplete as pennlibs_autocomplete, Footer as pennlibs_footer, Header as pennlibs_header };
-//# sourceMappingURL=pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.esm.js.map
+export { Autocomplete as pennlibs_autocomplete, Footer as pennlibs_footer, Header as pennlibs_header };
+//# sourceMappingURL=pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.esm.js.map
 
-//# sourceMappingURL=p-270fd846.entry.js.map
+//# sourceMappingURL=p-40119068.entry.js.map