@penn-libraries/web 1.1.0-dev.0 → 1.1.0-dev.2
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/loader.cjs.js +1 -1
- package/dist/cjs/pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-allow-tracking_4.cjs.entry.js +17 -8
- package/dist/cjs/pennlibs-allow-tracking_4.cjs.entry.js.map +1 -1
- package/dist/cjs/web.cjs.js +1 -1
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.css +1 -0
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +39 -7
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js.map +1 -1
- package/dist/components/pennlibs-autocomplete.js +18 -8
- package/dist/components/pennlibs-autocomplete.js.map +1 -1
- package/dist/docs.json +26 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.js.map +1 -1
- package/dist/esm/pennlibs-allow-tracking_4.entry.js +17 -8
- package/dist/esm/pennlibs-allow-tracking_4.entry.js.map +1 -1
- package/dist/esm/web.js +1 -1
- package/dist/types/components/pennlibs-autocomplete/pennlibs-autocomplete.d.ts +4 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/web/{p-ceaf55b0.entry.js → p-270fd846.entry.js} +18 -9
- package/dist/web/p-270fd846.entry.js.map +1 -0
- package/dist/web/pennlibs-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -1
- package/dist/web/web.esm.js +1 -1
- package/hydrate/index.js +18 -8
- package/hydrate/index.mjs +18 -8
- package/package.json +1 -1
- package/dist/web/p-ceaf55b0.entry.js.map +0 -1
|
@@ -52,7 +52,7 @@ function TrackingIcon() {
|
|
|
52
52
|
}
|
|
53
53
|
AllowTracking.style = pennlibsAllowTrackingCss;
|
|
54
54
|
|
|
55
|
-
const pennlibsAutocompleteCss = ":host {\n display: block;\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}";
|
|
55
|
+
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}";
|
|
56
56
|
|
|
57
57
|
const Autocomplete = class {
|
|
58
58
|
constructor(hostRef) {
|
|
@@ -92,27 +92,36 @@ const Autocomplete = class {
|
|
|
92
92
|
return {
|
|
93
93
|
id: element.id || `option-${index}`,
|
|
94
94
|
html: element.innerHTML,
|
|
95
|
-
value: element.getAttribute('data-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
|
|
95
|
+
value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
98
|
getInput() {
|
|
99
|
-
var _a
|
|
99
|
+
var _a;
|
|
100
|
+
if (!this.for)
|
|
101
|
+
return null;
|
|
100
102
|
const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
|
|
101
|
-
|
|
103
|
+
const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
|
|
104
|
+
return input || null;
|
|
102
105
|
}
|
|
103
106
|
isInputFocused() {
|
|
104
107
|
return this.getInput() === document.activeElement;
|
|
105
108
|
}
|
|
106
109
|
isTrackedInput(input) {
|
|
107
|
-
return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-
|
|
110
|
+
return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
|
|
108
111
|
this.el.contains(input);
|
|
109
112
|
}
|
|
110
113
|
setupInput() {
|
|
114
|
+
if (!this.for) {
|
|
115
|
+
console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
111
118
|
const input = this.getInput();
|
|
112
|
-
if (!input)
|
|
119
|
+
if (!input) {
|
|
120
|
+
console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
|
|
113
121
|
return;
|
|
122
|
+
}
|
|
114
123
|
this.setComboboxAttributes(input);
|
|
115
|
-
input.setAttribute('data-pl-autocomplete-
|
|
124
|
+
input.setAttribute('data-pl-autocomplete-connected', 'true');
|
|
116
125
|
}
|
|
117
126
|
setComboboxAttributes(input) {
|
|
118
127
|
input.setAttribute('role', 'combobox');
|
|
@@ -276,7 +285,7 @@ const Autocomplete = class {
|
|
|
276
285
|
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
277
286
|
}
|
|
278
287
|
render() {
|
|
279
|
-
return (h("div", { key: '
|
|
288
|
+
return (h("div", { key: '2091f8acacac10714c4d607e294248f3bd7e5fd7' }, h("slot", { key: '628a216ce90ee693a354a74f91bcce2fe61b74a5', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '916eba0f4b2148616fac4cc96cac4c7506a9bd0e', 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 })))))));
|
|
280
289
|
}
|
|
281
290
|
get el() { return getElement(this); }
|
|
282
291
|
};
|