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

package/dist/cjs/pennlibs-allow-tracking_4.cjs.entry.js

@@ -94,32 +94,36 @@ const Autocomplete = class {
         return {
             id: element.id || `option-${index}`,
             html: element.innerHTML,
-            value: element.getAttribute('data-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
+            value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
         };
     }
     getInput() {
-        var _a, _b;
+        var _a;
+        if (!this.for)
+            return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        return ((_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0]) === null || _b === void 0 ? void 0 : _b.querySelector('input')) || null;
+        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        return input || null;
     }
     isInputFocused() {
         return this.getInput() === document.activeElement;
     }
     isTrackedInput(input) {
-        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-input')) === 'true' &&
+        return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
             this.el.contains(input);
     }
     setupInput() {
+        if (!this.for) {
+            console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
+            return;
+        }
         const input = this.getInput();
         if (!input) {
-            console.warn('<pennlibs-autocomplete> No input element found. Ensure your input has the data-pl-autocomplete-input attribute.');
+            console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
             return;
         }
-        if (!input.hasAttribute('data-pl-autocomplete-input')) {
-            console.warn('<pennlibs-autocomplete> Input element is missing the data-pl-autocomplete-input attribute. Please add it to your input element.');
-        }
         this.setComboboxAttributes(input);
-        input.setAttribute('data-pl-autocomplete-input', 'true');
+        input.setAttribute('data-pl-autocomplete-connected', 'true');
     }
     setComboboxAttributes(input) {
         input.setAttribute('role', 'combobox');
@@ -283,7 +287,7 @@ const Autocomplete = class {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (index.h("div", { key: '64bcd2b815b654072ea9b515307d21542168496e' }, index.h("slot", { key: '56eb649dfbbb6677533b968bb6530651ceb645c7', name: "start" }), this.shouldShowListbox() && (index.h("ol", { key: '1f7de6b579ac890907c43f2e96b41078d6ad1278', role: "listbox", id: "listbox" }, this.options.map((option, index$1) => (index.h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index$1 ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index$1), innerHTML: option.html })))))));
+        return (index.h("div", { key: '2091f8acacac10714c4d607e294248f3bd7e5fd7' }, index.h("slot", { key: '628a216ce90ee693a354a74f91bcce2fe61b74a5', name: "start" }), this.shouldShowListbox() && (index.h("ol", { key: '916eba0f4b2148616fac4cc96cac4c7506a9bd0e', role: "listbox", id: "listbox" }, this.options.map((option, index$1) => (index.h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index$1 ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index$1), innerHTML: option.html })))))));
     }
     get el() { return index.getElement(this); }
 };