@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
|
@@ -54,7 +54,7 @@ function TrackingIcon() {
|
|
|
54
54
|
}
|
|
55
55
|
AllowTracking.style = pennlibsAllowTrackingCss;
|
|
56
56
|
|
|
57
|
-
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}";
|
|
57
|
+
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}";
|
|
58
58
|
|
|
59
59
|
const Autocomplete = class {
|
|
60
60
|
constructor(hostRef) {
|
|
@@ -94,27 +94,36 @@ const Autocomplete = class {
|
|
|
94
94
|
return {
|
|
95
95
|
id: element.id || `option-${index}`,
|
|
96
96
|
html: element.innerHTML,
|
|
97
|
-
value: element.getAttribute('data-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
|
|
97
|
+
value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
|
|
98
98
|
};
|
|
99
99
|
}
|
|
100
100
|
getInput() {
|
|
101
|
-
var _a
|
|
101
|
+
var _a;
|
|
102
|
+
if (!this.for)
|
|
103
|
+
return null;
|
|
102
104
|
const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
|
|
103
|
-
|
|
105
|
+
const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
|
|
106
|
+
return input || null;
|
|
104
107
|
}
|
|
105
108
|
isInputFocused() {
|
|
106
109
|
return this.getInput() === document.activeElement;
|
|
107
110
|
}
|
|
108
111
|
isTrackedInput(input) {
|
|
109
|
-
return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-
|
|
112
|
+
return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
|
|
110
113
|
this.el.contains(input);
|
|
111
114
|
}
|
|
112
115
|
setupInput() {
|
|
116
|
+
if (!this.for) {
|
|
117
|
+
console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
113
120
|
const input = this.getInput();
|
|
114
|
-
if (!input)
|
|
121
|
+
if (!input) {
|
|
122
|
+
console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
|
|
115
123
|
return;
|
|
124
|
+
}
|
|
116
125
|
this.setComboboxAttributes(input);
|
|
117
|
-
input.setAttribute('data-pl-autocomplete-
|
|
126
|
+
input.setAttribute('data-pl-autocomplete-connected', 'true');
|
|
118
127
|
}
|
|
119
128
|
setComboboxAttributes(input) {
|
|
120
129
|
input.setAttribute('role', 'combobox');
|
|
@@ -278,7 +287,7 @@ const Autocomplete = class {
|
|
|
278
287
|
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
279
288
|
}
|
|
280
289
|
render() {
|
|
281
|
-
return (index.h("div", { key: '
|
|
290
|
+
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 })))))));
|
|
282
291
|
}
|
|
283
292
|
get el() { return index.getElement(this); }
|
|
284
293
|
};
|