@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
|
@@ -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();
|
|
@@ -80,12 +93,12 @@ const Autocomplete = class {
|
|
|
80
93
|
input.setAttribute('aria-controls', 'listbox');
|
|
81
94
|
}
|
|
82
95
|
handleSlotChange() {
|
|
96
|
+
this.options = this.parseOptionsFromDOM();
|
|
83
97
|
this.setupInput();
|
|
84
98
|
}
|
|
85
99
|
handleInputEvent(event) {
|
|
86
100
|
const input = event.target;
|
|
87
101
|
if (this.isTrackedInput(input)) {
|
|
88
|
-
// Reset active option when user manually changes input
|
|
89
102
|
this.currentIndex = -1;
|
|
90
103
|
this.openSuggestions();
|
|
91
104
|
}
|
|
@@ -208,7 +221,6 @@ const Autocomplete = class {
|
|
|
208
221
|
const active = document.activeElement;
|
|
209
222
|
return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
|
|
210
223
|
}
|
|
211
|
-
// Input State Sync
|
|
212
224
|
syncInputState() {
|
|
213
225
|
const input = this.getInput();
|
|
214
226
|
if (!input)
|
|
@@ -238,7 +250,7 @@ const Autocomplete = class {
|
|
|
238
250
|
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
239
251
|
}
|
|
240
252
|
render() {
|
|
241
|
-
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 })))))));
|
|
242
254
|
}
|
|
243
255
|
get el() { return index.getElement(this); }
|
|
244
256
|
};
|