@penn-libraries/web 1.1.0-dev.0 → 1.1.0-dev.1
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-allow-tracking.pennlibs-autocomplete.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-allow-tracking_4.cjs.entry.js +8 -3
- package/dist/cjs/pennlibs-allow-tracking_4.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.css +1 -0
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js +7 -2
- package/dist/collection/components/pennlibs-autocomplete/pennlibs-autocomplete.js.map +1 -1
- package/dist/components/pennlibs-autocomplete.js +8 -3
- package/dist/components/pennlibs-autocomplete.js.map +1 -1
- package/dist/docs.json +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 +8 -3
- package/dist/esm/pennlibs-allow-tracking_4.entry.js.map +1 -1
- package/dist/web/{p-ceaf55b0.entry.js → p-36195ae1.entry.js} +9 -4
- package/dist/web/p-36195ae1.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 +8 -3
- package/hydrate/index.mjs +8 -3
- 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) {
|
|
@@ -109,8 +109,13 @@ const Autocomplete = class {
|
|
|
109
109
|
}
|
|
110
110
|
setupInput() {
|
|
111
111
|
const input = this.getInput();
|
|
112
|
-
if (!input)
|
|
112
|
+
if (!input) {
|
|
113
|
+
console.warn('<pennlibs-autocomplete> No input element found. Ensure your input has the data-pl-autocomplete-input attribute.');
|
|
113
114
|
return;
|
|
115
|
+
}
|
|
116
|
+
if (!input.hasAttribute('data-pl-autocomplete-input')) {
|
|
117
|
+
console.warn('<pennlibs-autocomplete> Input element is missing the data-pl-autocomplete-input attribute. Please add it to your input element.');
|
|
118
|
+
}
|
|
114
119
|
this.setComboboxAttributes(input);
|
|
115
120
|
input.setAttribute('data-pl-autocomplete-input', 'true');
|
|
116
121
|
}
|
|
@@ -276,7 +281,7 @@ const Autocomplete = class {
|
|
|
276
281
|
return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
|
|
277
282
|
}
|
|
278
283
|
render() {
|
|
279
|
-
return (h("div", { key: '
|
|
284
|
+
return (h("div", { key: '64bcd2b815b654072ea9b515307d21542168496e' }, h("slot", { key: '56eb649dfbbb6677533b968bb6530651ceb645c7', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '1f7de6b579ac890907c43f2e96b41078d6ad1278', 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
285
|
}
|
|
281
286
|
get el() { return getElement(this); }
|
|
282
287
|
};
|