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

package/dist/types/components/pennlibs-autocomplete/pennlibs-autocomplete.d.ts

@@ -10,22 +10,18 @@ export interface ActivatedEvent {
 }
 export declare class Autocomplete {
     el: HTMLElement;
-    /**
-     * The id of the input element to attach autocomplete functionality to
-     */
     for?: string;
     showSuggestions: boolean;
     currentIndex: number;
     originalValue: string;
     options: ListboxOption[];
-    /**
-     * Emitted when a user activates (selects) an autocomplete option
-     */
     activated: EventEmitter<ActivatedEvent>;
     private blurTimeout;
+    private mutationObserver;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private setupMutationObserver;
     private parseOptionsFromDOM;
     private findListbox;
     private createOption;

package/dist/types/components.d.ts

@@ -9,9 +9,6 @@ import { ActivatedEvent } from "./components/pennlibs-autocomplete/pennlibs-auto
 export { ActivatedEvent } from "./components/pennlibs-autocomplete/pennlibs-autocomplete";
 export namespace Components {
     interface PennlibsAutocomplete {
-        /**
-          * The id of the input element to attach autocomplete functionality to
-         */
         "for"?: string;
     }
     interface PennlibsBanner {
@@ -223,13 +220,7 @@ declare global {
 }
 declare namespace LocalJSX {
     interface PennlibsAutocomplete {
-        /**
-          * The id of the input element to attach autocomplete functionality to
-         */
         "for"?: string;
-        /**
-          * Emitted when a user activates (selects) an autocomplete option
-         */
         "onPl:activated"?: (event: PennlibsAutocompleteCustomEvent<ActivatedEvent>) => void;
     }
     interface PennlibsBanner {

package/dist/web/{p-40119068.entry.js → p-909144f6.entry.js}

@@ -1,6 +1,6 @@
 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}";
+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,\nb {\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}";
 
 const Autocomplete = class {
     constructor(hostRef) {
@@ -20,10 +20,23 @@ const Autocomplete = class {
     }
     componentDidLoad() {
         this.setupInput();
+        this.setupMutationObserver();
     }
     disconnectedCallback() {
         if (this.blurTimeout)
             clearTimeout(this.blurTimeout);
+        if (this.mutationObserver)
+            this.mutationObserver.disconnect();
+    }
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.options = this.parseOptionsFromDOM();
+        });
+        this.mutationObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
     }
     parseOptionsFromDOM() {
         const listbox = this.findListbox();
@@ -84,7 +97,6 @@ const Autocomplete = class {
     handleInputEvent(event) {
         const input = event.target;
         if (this.isTrackedInput(input)) {
-            // Reset active option when user manually changes input
             this.currentIndex = -1;
             this.openSuggestions();
         }
@@ -207,7 +219,6 @@ const Autocomplete = class {
         const active = document.activeElement;
         return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
     }
-    // Input State Sync
     syncInputState() {
         const input = this.getInput();
         if (!input)
@@ -237,7 +248,7 @@ const Autocomplete = class {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        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 })))))));
+        return (h("div", { key: '71422b55533372a9d8697e648e49f87fe223f4e0' }, h("slot", { key: '951511fd2090b9816c2e6c1a5a40169ea08e72fd', name: "start" }), this.shouldShowListbox() && (h("ol", { key: 'e3f6f14686bc99b6e25d34d8e053f01174f23438', 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); }
 };
@@ -360,4 +371,4 @@ Header.style = pennlibsHeaderCss;
 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-40119068.entry.js.map
+//# sourceMappingURL=p-909144f6.entry.js.map