@penn-libraries/web 1.1.0-dev.3 → 1.1.0-dev.5
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/pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-autocomplete_3.cjs.entry.js +15 -3
- package/dist/cjs/pennlibs-autocomplete_3.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +17 -5
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js.map +1 -1
- package/dist/components/pennlibs-autocomplete.js +15 -3
- package/dist/components/pennlibs-autocomplete.js.map +1 -1
- package/dist/docs.json +3 -3
- package/dist/esm/pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.js.map +1 -1
- package/dist/esm/pennlibs-autocomplete_3.entry.js +15 -3
- package/dist/esm/pennlibs-autocomplete_3.entry.js.map +1 -1
- package/dist/types/components/pennlibs-autocomplete/pennlibs-autocomplete.d.ts +2 -6
- package/dist/types/components.d.ts +0 -9
- package/dist/web/{p-d01979e8.entry.js → p-c2cbed77.entry.js} +16 -4
- package/dist/web/p-c2cbed77.entry.js.map +1 -0
- package/dist/web/pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -1
- package/dist/web/web.esm.js +1 -1
- package/hydrate/index.js +15 -3
- package/hydrate/index.mjs +15 -3
- package/package.json +1 -1
- package/dist/web/p-d01979e8.entry.js.map +0 -1
|
@@ -20,10 +20,23 @@ const Autocomplete = class {
|
|
|
20
20
|
}
|
|
21
21
|
componentDidLoad() {
|
|
22
22
|
this.setupInput();
|
|
23
|
+
this.setupMutationObserver();
|
|
23
24
|
}
|
|
24
25
|
disconnectedCallback() {
|
|
25
26
|
if (this.blurTimeout)
|
|
26
27
|
clearTimeout(this.blurTimeout);
|
|
28
|
+
if (this.mutationObserver)
|
|
29
|
+
this.mutationObserver.disconnect();
|
|
30
|
+
}
|
|
31
|
+
setupMutationObserver() {
|
|
32
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
33
|
+
this.options = this.parseOptionsFromDOM();
|
|
34
|
+
});
|
|
35
|
+
this.mutationObserver.observe(this.el, {
|
|
36
|
+
childList: true,
|
|
37
|
+
subtree: true,
|
|
38
|
+
characterData: true
|
|
39
|
+
});
|
|
27
40
|
}
|
|
28
41
|
parseOptionsFromDOM() {
|
|
29
42
|
const listbox = this.findListbox();
|
|
@@ -78,12 +91,12 @@ const Autocomplete = class {
|
|
|
78
91
|
input.setAttribute('aria-controls', 'listbox');
|
|
79
92
|
}
|
|
80
93
|
handleSlotChange() {
|
|
94
|
+
this.options = this.parseOptionsFromDOM();
|
|
81
95
|
this.setupInput();
|
|
82
96
|
}
|
|
83
97
|
handleInputEvent(event) {
|
|
84
98
|
const input = event.target;
|
|
85
99
|
if (this.isTrackedInput(input)) {
|
|
86
|
-
// Reset active option when user manually changes input
|
|
87
100
|
this.currentIndex = -1;
|
|
88
101
|
this.openSuggestions();
|
|
89
102
|
}
|
|
@@ -206,7 +219,6 @@ const Autocomplete = class {
|
|
|
206
219
|
const active = document.activeElement;
|
|
207
220
|
return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
|
|
208
221
|
}
|
|
209
|
-
// Input State Sync
|
|
210
222
|
syncInputState() {
|
|
211
223
|
const input = this.getInput();
|
|
212
224
|
if (!input)
|
|
@@ -236,7 +248,7 @@ const Autocomplete = class {
|
|
|
236
248
|
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
237
249
|
}
|
|
238
250
|
render() {
|
|
239
|
-
return (h("div", { key: '
|
|
251
|
+
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 })))))));
|
|
240
252
|
}
|
|
241
253
|
get el() { return getElement(this); }
|
|
242
254
|
};
|