@penn-libraries/web 1.1.0-dev.4 → 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 +14 -3
- package/dist/cjs/pennlibs-autocomplete_3.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +16 -5
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js.map +1 -1
- package/dist/components/pennlibs-autocomplete.js +14 -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 +14 -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-40119068.entry.js → p-c2cbed77.entry.js} +15 -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 +14 -3
- package/hydrate/index.mjs +14 -3
- package/package.json +1 -1
- package/dist/web/p-40119068.entry.js.map +0 -1
|
@@ -22,10 +22,23 @@ const Autocomplete = class {
|
|
|
22
22
|
}
|
|
23
23
|
componentDidLoad() {
|
|
24
24
|
this.setupInput();
|
|
25
|
+
this.setupMutationObserver();
|
|
25
26
|
}
|
|
26
27
|
disconnectedCallback() {
|
|
27
28
|
if (this.blurTimeout)
|
|
28
29
|
clearTimeout(this.blurTimeout);
|
|
30
|
+
if (this.mutationObserver)
|
|
31
|
+
this.mutationObserver.disconnect();
|
|
32
|
+
}
|
|
33
|
+
setupMutationObserver() {
|
|
34
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
35
|
+
this.options = this.parseOptionsFromDOM();
|
|
36
|
+
});
|
|
37
|
+
this.mutationObserver.observe(this.el, {
|
|
38
|
+
childList: true,
|
|
39
|
+
subtree: true,
|
|
40
|
+
characterData: true
|
|
41
|
+
});
|
|
29
42
|
}
|
|
30
43
|
parseOptionsFromDOM() {
|
|
31
44
|
const listbox = this.findListbox();
|
|
@@ -86,7 +99,6 @@ const Autocomplete = class {
|
|
|
86
99
|
handleInputEvent(event) {
|
|
87
100
|
const input = event.target;
|
|
88
101
|
if (this.isTrackedInput(input)) {
|
|
89
|
-
// Reset active option when user manually changes input
|
|
90
102
|
this.currentIndex = -1;
|
|
91
103
|
this.openSuggestions();
|
|
92
104
|
}
|
|
@@ -209,7 +221,6 @@ const Autocomplete = class {
|
|
|
209
221
|
const active = document.activeElement;
|
|
210
222
|
return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
|
|
211
223
|
}
|
|
212
|
-
// Input State Sync
|
|
213
224
|
syncInputState() {
|
|
214
225
|
const input = this.getInput();
|
|
215
226
|
if (!input)
|
|
@@ -239,7 +250,7 @@ const Autocomplete = class {
|
|
|
239
250
|
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
240
251
|
}
|
|
241
252
|
render() {
|
|
242
|
-
return (index.h("div", { key: '
|
|
253
|
+
return (index.h("div", { key: '71422b55533372a9d8697e648e49f87fe223f4e0' }, index.h("slot", { key: '951511fd2090b9816c2e6c1a5a40169ea08e72fd', name: "start" }), this.shouldShowListbox() && (index.h("ol", { key: 'e3f6f14686bc99b6e25d34d8e053f01174f23438', 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 })))))));
|
|
243
254
|
}
|
|
244
255
|
get el() { return index.getElement(this); }
|
|
245
256
|
};
|