@penn-libraries/web 1.2.0-dev.2 → 1.2.0

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.
Files changed (46) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/pennlibs-autocomplete.cjs.entry.js +281 -0
  3. package/dist/cjs/pennlibs-autocomplete.entry.cjs.js.map +1 -0
  4. package/dist/cjs/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -0
  5. package/dist/cjs/{pennlibs-autocomplete_4.cjs.entry.js → pennlibs-feedback_3.cjs.entry.js} +25 -297
  6. package/dist/cjs/web.cjs.js +1 -1
  7. package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.css +21 -0
  8. package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js +25 -21
  9. package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map +1 -1
  10. package/dist/components/pennlibs-feedback.js +26 -22
  11. package/dist/components/pennlibs-feedback.js.map +1 -1
  12. package/dist/docs.json +1 -1
  13. package/dist/esm/{index-CNQ9-Wwh.js → index-mkVX9lU0.js} +3 -3
  14. package/dist/esm/{index-CNQ9-Wwh.js.map → index-mkVX9lU0.js.map} +1 -1
  15. package/dist/esm/index.js +1 -1
  16. package/dist/esm/loader.js +3 -3
  17. package/dist/esm/pennlibs-autocomplete.entry.js +279 -0
  18. package/dist/esm/pennlibs-autocomplete.entry.js.map +1 -0
  19. package/dist/esm/pennlibs-banner.entry.js +1 -1
  20. package/dist/esm/pennlibs-chat.entry.js +1 -1
  21. package/dist/esm/pennlibs-fallback-img.entry.js +1 -1
  22. package/dist/esm/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +1 -0
  23. package/dist/esm/{pennlibs-autocomplete_4.entry.js → pennlibs-feedback_3.entry.js} +27 -298
  24. package/dist/esm/pennlibs-hero.entry.js +1 -1
  25. package/dist/esm/pennlibs-iiif-img.entry.js +1 -1
  26. package/dist/esm/web.js +3 -3
  27. package/dist/types/components/pennlibs-feedback/pennlibs-feedback.d.ts +1 -1
  28. package/dist/web/index.esm.js +1 -1
  29. package/dist/web/{p-a34e1e3e.entry.js → p-0c1113f4.entry.js} +1 -1
  30. package/dist/web/{p-3da26275.entry.js → p-10931f0a.entry.js} +27 -298
  31. package/dist/web/{p-b6e686d1.entry.js → p-154851d1.entry.js} +1 -1
  32. package/dist/web/{p-c96a3643.entry.js → p-190f0293.entry.js} +1 -1
  33. package/dist/web/{p-eb633f4d.entry.js → p-4fb3e5a4.entry.js} +1 -1
  34. package/dist/web/p-7c6382d0.entry.js +279 -0
  35. package/dist/web/{p-662e4125.entry.js → p-e426fb61.entry.js} +1 -1
  36. package/dist/web/{p-CNQ9-Wwh.js → p-mkVX9lU0.js} +3 -3
  37. package/dist/web/{p-CNQ9-Wwh.js.map → p-mkVX9lU0.js.map} +1 -1
  38. package/dist/web/pennlibs-autocomplete.entry.esm.js.map +1 -0
  39. package/dist/web/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -0
  40. package/dist/web/web.esm.js +3 -3
  41. package/hydrate/index.js +26 -22
  42. package/hydrate/index.mjs +26 -22
  43. package/package.json +1 -1
  44. package/dist/cjs/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +0 -1
  45. package/dist/esm/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +0 -1
  46. package/dist/web/pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +0 -1
@@ -1,287 +1,10 @@
1
- import { r as registerInstance, d as createEvent, h, c as getElement, a as getAssetPath } from './index-CNQ9-Wwh.js';
1
+ import { r as registerInstance, c as createEvent, h, d as getAssetPath, a as getElement } from './index-mkVX9lU0.js';
2
2
 
3
- 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,\nb {\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}";
3
+ const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}button.selected{background:var(--pl-color-bg-accent-emphasis);color:var(--pl-color-fg-on-emphasis);border-color:var(--pl-color-bg-accent-emphasis)}.feedback__inline-question+.feedback__share-feedback,p{animation:none}.feedback__content>p{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
4
4
 
5
- const Autocomplete = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.activated = createEvent(this, "pl:activated");
9
- this.showSuggestions = false;
10
- this.currentIndex = -1;
11
- this.originalValue = '';
12
- this.options = [];
13
- this.keyHandlerMap = {
14
- 'Escape': () => this.handleEscape(),
15
- 'ArrowDown': () => this.handleArrowDown(),
16
- 'ArrowUp': () => this.handleArrowUp(),
17
- 'Enter': () => this.handleEnter()
18
- };
19
- this.handleOptionClick = (index) => {
20
- this.currentIndex = index;
21
- this.selectCurrent();
22
- };
23
- }
24
- componentWillLoad() {
25
- this.options = this.parseOptionsFromDOM();
26
- }
27
- componentDidLoad() {
28
- this.setupInput();
29
- this.setupMutationObserver();
30
- }
31
- disconnectedCallback() {
32
- if (this.blurTimeout)
33
- clearTimeout(this.blurTimeout);
34
- if (this.mutationObserver)
35
- this.mutationObserver.disconnect();
36
- }
37
- setupMutationObserver() {
38
- this.mutationObserver = new MutationObserver(() => {
39
- this.options = this.parseOptionsFromDOM();
40
- });
41
- this.mutationObserver.observe(this.el, {
42
- childList: true,
43
- subtree: true,
44
- characterData: true
45
- });
46
- }
47
- parseOptionsFromDOM() {
48
- const listbox = this.findListbox();
49
- if (!listbox)
50
- return [];
51
- const elements = Array.from(listbox.querySelectorAll('[role="option"]'));
52
- return elements.map((el, i) => this.createOption(el, i));
53
- }
54
- findListbox() {
55
- return Array.from(this.el.children).find(child => child.matches('ol[role="listbox"]'));
56
- }
57
- createOption(element, index) {
58
- var _a;
59
- return {
60
- id: element.id || `option-${index}`,
61
- html: element.innerHTML,
62
- value: element.getAttribute('data-pl-value') || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''
63
- };
64
- }
65
- getInput() {
66
- var _a;
67
- if (!this.for)
68
- return null;
69
- const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
70
- if (!slot)
71
- return null;
72
- const assignedElements = slot.assignedElements();
73
- if (assignedElements.length === 0)
74
- return null;
75
- const input = assignedElements[0].querySelector(`input#${this.for}`);
76
- return input || null;
77
- }
78
- isInputFocused() {
79
- return this.getInput() === document.activeElement;
80
- }
81
- isTrackedInput(input) {
82
- return (input === null || input === void 0 ? void 0 : input.getAttribute('data-pl-autocomplete-connected')) === 'true' &&
83
- this.el.contains(input);
84
- }
85
- setupInput() {
86
- if (!this.for) {
87
- console.warn('<pennlibs-autocomplete> Missing "for" attribute. Please add for="input-id" to specify which input to attach to.');
88
- return;
89
- }
90
- const input = this.getInput();
91
- if (!input) {
92
- console.warn(`<pennlibs-autocomplete> No input element found with id="${this.for}". Ensure an input with this id exists.`);
93
- return;
94
- }
95
- this.setComboboxAttributes(input);
96
- input.setAttribute('data-pl-autocomplete-connected', 'true');
97
- }
98
- setComboboxAttributes(input) {
99
- input.setAttribute('role', 'combobox');
100
- input.setAttribute('aria-autocomplete', 'list');
101
- input.setAttribute('aria-expanded', 'false');
102
- input.setAttribute('aria-controls', 'listbox');
103
- }
104
- handleSlotChange() {
105
- this.options = this.parseOptionsFromDOM();
106
- this.setupInput();
107
- }
108
- handleInputEvent(event) {
109
- const input = event.target;
110
- if (this.isTrackedInput(input)) {
111
- this.currentIndex = -1;
112
- this.openSuggestions();
113
- }
114
- }
115
- handleFocusEvent(event) {
116
- const input = event.target;
117
- if (this.isTrackedInput(input))
118
- this.showSuggestionsPanel();
119
- }
120
- handleBlurEvent(event) {
121
- const input = event.target;
122
- if (this.isTrackedInput(input))
123
- this.deferCloseSuggestions();
124
- }
125
- handleFocusOut(event) {
126
- if (this.isFocusLeavingComponent(event))
127
- this.closeSuggestions();
128
- }
129
- handleKeyDown(event) {
130
- if (!this.isInputFocused())
131
- return;
132
- if (event.metaKey || event.ctrlKey)
133
- return; // Ignore keyboard shortcuts
134
- const handler = this.keyHandlerMap[event.key];
135
- if (handler) {
136
- // Don't prevent default for Enter - allow form submission
137
- if (event.key !== 'Enter') {
138
- event.preventDefault();
139
- }
140
- handler();
141
- }
142
- }
143
- handleEscape() {
144
- this.reset();
145
- this.syncAll();
146
- }
147
- handleArrowDown() {
148
- if (!this.showSuggestions)
149
- return;
150
- this.moveNext();
151
- this.syncAll();
152
- }
153
- handleArrowUp() {
154
- if (!this.showSuggestions)
155
- return;
156
- this.movePrevious();
157
- this.syncAll();
158
- }
159
- handleEnter() {
160
- if (this.canSelect())
161
- this.selectCurrent();
162
- }
163
- // Navigation
164
- moveNext() {
165
- const lastIndex = this.options.length - 1;
166
- this.currentIndex = this.currentIndex < lastIndex ? this.currentIndex + 1 : -1;
167
- }
168
- movePrevious() {
169
- const lastIndex = this.options.length - 1;
170
- this.currentIndex = this.currentIndex > -1 ? this.currentIndex - 1 : lastIndex;
171
- }
172
- canSelect() {
173
- return this.showSuggestions && this.currentIndex >= 0;
174
- }
175
- selectCurrent() {
176
- if (this.currentIndex < 0)
177
- return;
178
- const selectedOption = this.options[this.currentIndex];
179
- this.applySelection(selectedOption);
180
- this.emitActivation(selectedOption);
181
- this.closeSuggestions();
182
- }
183
- applySelection(option) {
184
- const input = this.getInput();
185
- if (!input)
186
- return;
187
- input.value = option.value;
188
- this.originalValue = option.value;
189
- }
190
- emitActivation(option) {
191
- this.activated.emit({
192
- index: this.currentIndex,
193
- value: option.value
194
- });
195
- }
196
- openSuggestions() {
197
- if (!this.isInputFocused())
198
- return;
199
- const input = this.getInput();
200
- if (input)
201
- this.originalValue = input.value;
202
- this.showSuggestionsPanel();
203
- }
204
- showSuggestionsPanel() {
205
- this.showSuggestions = true;
206
- this.syncAriaAttributes();
207
- }
208
- closeSuggestions() {
209
- this.reset();
210
- this.syncAll();
211
- }
212
- deferCloseSuggestions() {
213
- if (this.blurTimeout)
214
- clearTimeout(this.blurTimeout);
215
- this.blurTimeout = setTimeout(() => {
216
- if (this.isFocusOutsideComponent())
217
- this.closeSuggestions();
218
- }, 150);
219
- }
220
- reset() {
221
- this.showSuggestions = false;
222
- this.currentIndex = -1;
223
- }
224
- isFocusLeavingComponent(event) {
225
- var _a;
226
- const target = event.relatedTarget;
227
- return !target ||
228
- (!this.el.contains(target) && !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target)));
229
- }
230
- isFocusOutsideComponent() {
231
- var _a;
232
- const active = document.activeElement;
233
- return !((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(active)) && active !== this.getInput();
234
- }
235
- syncAriaAttributes() {
236
- const input = this.getInput();
237
- if (!input)
238
- return;
239
- this.updateAriaExpanded(input);
240
- this.updateAriaActiveDescendant(input);
241
- }
242
- syncInputValueToSelection() {
243
- const input = this.getInput();
244
- if (!input)
245
- return;
246
- input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length
247
- ? this.options[this.currentIndex].value
248
- : this.originalValue;
249
- }
250
- syncAll() {
251
- this.syncAriaAttributes();
252
- this.syncInputValueToSelection();
253
- }
254
- updateAriaExpanded(input) {
255
- input.setAttribute('aria-expanded', this.showSuggestions.toString());
256
- }
257
- updateAriaActiveDescendant(input) {
258
- const hasSelection = this.showSuggestions &&
259
- this.currentIndex >= 0 &&
260
- this.currentIndex < this.options.length;
261
- if (hasSelection) {
262
- input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);
263
- }
264
- else {
265
- input.removeAttribute('aria-activedescendant');
266
- }
267
- }
268
- shouldShowListbox() {
269
- return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
270
- }
271
- render() {
272
- return (h("div", { key: 'ee4ead1b5bec44a561901a29d3d5e119da0d09f8' }, h("slot", { key: '7d7128ab7968544ab25125d30a648136f8d8a566', name: "start" }), this.shouldShowListbox() && (h("ol", { key: '95d45d524847f83b646853a8d919bc88f471f150', 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 })))))));
273
- }
274
- get el() { return getElement(this); }
275
- };
276
- Autocomplete.style = pennlibsAutocompleteCss;
277
-
278
- const pennlibsFeedbackCss = ":host{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{:host{display:none}}*,*::before,*::after{box-sizing:border-box}.viewport-margins{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p{margin:0;padding:calc(0.5em + 1px) 0}strong{font-weight:600}a{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button:hover{cursor:pointer}button:hover span{text-decoration:underline}*:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}p:focus{outline:none;box-shadow:0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2{display:block;width:100%;text-align:center}}.help-us{display:flex;flex-direction:column;gap:0.5em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.visually-hidden:focus,.visually-hidden:active{clip:auto;clip-path:none;height:auto;overflow:visible;position:static;white-space:normal;width:auto}";
279
-
280
- const FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';
281
- const FEEDBACK_TIMESTAMP_KEY = 'pennlibs-feedback-timestamp';
5
+ const FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;
282
6
  const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
283
- const FEEDBACK_QUESTION = 'Is this page useful?';
284
- const FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';
7
+ const FEEDBACK_QUESTION = 'Did you find what you need?';
285
8
  const PennlibsFeedback = class {
286
9
  constructor(hostRef) {
287
10
  registerInstance(this, hostRef);
@@ -290,27 +13,30 @@ const PennlibsFeedback = class {
290
13
  * When true, hides the yes/no question and only shows the "share your feedback" link.
291
14
  */
292
15
  this.hideQuestion = false;
293
- this.error = false;
294
16
  this.answer = undefined;
17
+ this.selected = undefined;
295
18
  }
296
19
  componentWillLoad() {
297
- const timestamp = sessionStorage.getItem(FEEDBACK_TIMESTAMP_KEY);
298
- if (timestamp && Date.now() - Number(timestamp) > FEEDBACK_TTL) {
299
- sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
300
- sessionStorage.removeItem(FEEDBACK_TIMESTAMP_KEY);
301
- }
302
- if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {
303
- this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
304
- }
305
- if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {
306
- this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
20
+ const stored = sessionStorage.getItem(FEEDBACK_STORAGE_KEY);
21
+ if (stored) {
22
+ try {
23
+ const { answer, timestamp } = JSON.parse(stored);
24
+ if (Date.now() - timestamp > FEEDBACK_TTL) {
25
+ sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
26
+ }
27
+ else {
28
+ this.answer = answer;
29
+ }
30
+ }
31
+ catch (_a) {
32
+ sessionStorage.removeItem(FEEDBACK_STORAGE_KEY);
33
+ }
307
34
  }
308
35
  }
309
36
  handleFeedback(answer) {
310
37
  var _a;
311
- this.answer = answer;
312
- sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
313
- sessionStorage.setItem(FEEDBACK_TIMESTAMP_KEY, String(Date.now()));
38
+ this.selected = answer;
39
+ sessionStorage.setItem(FEEDBACK_STORAGE_KEY, JSON.stringify({ answer, timestamp: Date.now() }));
314
40
  this.feedbackEvent.emit({
315
41
  question: FEEDBACK_QUESTION,
316
42
  answer: answer,
@@ -318,9 +44,12 @@ const PennlibsFeedback = class {
318
44
  pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
319
45
  pageTitle: document.title || undefined
320
46
  });
47
+ setTimeout(() => {
48
+ this.answer = answer;
49
+ }, 600);
321
50
  }
322
51
  render() {
323
- return (h("div", { key: '04053c96e964ee9f240ca1a77d7944ae0f53248d', class: "feedback__container" }, h("div", { key: 'f5f524b449d3473c1ecc2d454787034c54a811a0', class: "viewport-margins" }, h("div", { key: 'd0c832edc9361dac49d9cbfc143332fea04434ea', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "Thank you for letting us know. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " if you need help.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { onClick: () => this.handleFeedback('no') }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '9d4de668c9e3696d8983c48fcc20ea89b2163ea1', class: "feedback__share-feedback" }, h("p", { key: '1377153ebba81c48b0a70756b190503b9cd33c61' }, "To help us improve, ", h("a", { key: '26f3f05b0af848ff58d959190a380d5b64db254a', href: "http://library.upenn.edu/feedback" }, "share your feedback"), "."))))));
52
+ return (h("div", { key: 'e470cb9ce96fecddda37c8a557c6670b581d8414', class: "feedback__container" }, h("div", { key: '0f3729d63102379f7219fd9a65c370f05c3f271c', class: "viewport-margins" }, h("div", { key: '3eaa8419d9b5fed5d7cf33de60ab93dd911afa34', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("div", { class: "feedback__inline-question" }, h("h2", null, "Did you find what you need?"), h("button", { class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected, onClick: () => this.handleFeedback('yes') }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { class: { 'selected': this.selected === 'no' }, disabled: !!this.selected, onClick: () => this.handleFeedback('no') }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: '50da9c1f23d14feeb6a2c408b0461a439331fcd9', class: "feedback__share-feedback" }, h("p", { key: '3580e25ecd7b463bb46103a6aee54a710e88c0ff' }, "To help us improve, ", h("a", { key: '276e226f4487ce94b9de30ae40f964e63f0d045b', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
324
53
  }
325
54
  };
326
55
  PennlibsFeedback.style = pennlibsFeedbackCss;
@@ -428,5 +157,5 @@ const Header = class {
428
157
  };
429
158
  Header.style = pennlibsHeaderCss;
430
159
 
431
- export { Autocomplete as pennlibs_autocomplete, PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
432
- //# sourceMappingURL=pennlibs-autocomplete.pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map
160
+ export { PennlibsFeedback as pennlibs_feedback, Footer as pennlibs_footer, Header as pennlibs_header };
161
+ //# sourceMappingURL=pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, h, c as getElement } from './index-CNQ9-Wwh.js';
1
+ import { r as registerInstance, h, a as getElement } from './index-mkVX9lU0.js';
2
2
 
3
3
  const pennlibsHeroCss = ":host{--pl-hero-height:clamp(42vh, 32rem, 26rem);--pl-hero-heading-font:var(--pl-font-serif);--pl-hero-color:var(--pl-color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.hero{position:relative;min-height:var(--pl-hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:var(--pl-space-3xl);padding-bottom:var(--pl-space-3xl)}.hero__heading{text-shadow:1px 1px 2px var(--pl-color-fg-default);line-height:1.1;font-size:3em;font-weight:400;font-family:var(--pl-hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--pl-hero-color)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.25em;font-family:var(--pl-font-family);font-weight:500;color:var(--pl-hero-color);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-text-decoration-thickness);color:var(--pl-hero-color)}.hero__sub-heading a:hover{text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2.75em}.hero__sub-heading{font-size:1em}}";
4
4
 
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, h, c as getElement } from './index-CNQ9-Wwh.js';
1
+ import { r as registerInstance, h, a as getElement } from './index-mkVX9lU0.js';
2
2
 
3
3
  const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
4
4
 
package/dist/esm/web.js CHANGED
@@ -1,5 +1,5 @@
1
- import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CNQ9-Wwh.js';
2
- export { s as setNonce } from './index-CNQ9-Wwh.js';
1
+ import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-mkVX9lU0.js';
2
+ export { s as setNonce } from './index-mkVX9lU0.js';
3
3
 
4
4
  /*
5
5
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-autocomplete_4",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"error":[32],"answer":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
19
+ return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-feedback_3",[[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"answer":[32],"selected":[32]}],[257,"pennlibs-footer",{"showBuiltWith":[4,"show-built-with"],"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-autocomplete",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
20
20
  });
21
21
  //# sourceMappingURL=web.js.map
@@ -15,8 +15,8 @@ export declare class PennlibsFeedback {
15
15
  * When true, hides the yes/no question and only shows the "share your feedback" link.
16
16
  */
17
17
  hideQuestion: boolean;
18
- error: boolean;
19
18
  answer: string | undefined;
19
+ selected: string | undefined;
20
20
  /**
21
21
  * Emitted when a visitor answers the feedback question. Includes the question,
22
22
  * answer, current URL, and page heading/title for context.
@@ -1,2 +1,2 @@
1
- export { e as setAssetPath } from './p-CNQ9-Wwh.js';
1
+ export { e as setAssetPath } from './p-mkVX9lU0.js';
2
2
  //# sourceMappingURL=index.esm.js.map
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, a as getAssetPath, h } from './p-CNQ9-Wwh.js';
1
+ import { r as registerInstance, d as getAssetPath, h } from './p-mkVX9lU0.js';
2
2
 
3
3
  const pennlibsBannerCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);--max-width:1080px}.viewport-margins{max-width:calc(var(--max-width) + 0.5em);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.skip-to-content-link{position:absolute;transform:translateY(-300%);background:var(--pl-color-bg-default);left:0.5em;padding:0.5em 1em;margin-top:0.5em;position:absolute}.skip-to-content-link:focus{transform:translateY(0%);color:var(--pl-color-fg-default)}.universal-nav{background:var(--pl-color-penn-blue)}.universal-nav ul{display:flex;align-items:baseline;flex-wrap:wrap;scrollbar-color:var(--pl-color-penn-red);list-style:none;padding:0;margin:0}.universal-nav li{display:inline-block}.universal-nav a{display:inline-block;text-transform:uppercase;font-size:0.75em;letter-spacing:0.075em;font-weight:600;color:var(--pl-color-fg-subtle-on-emphasis);padding:0.5em;text-decoration:none}.universal-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}.universal-nav__shield-image{vertical-align:sub;height:1em;padding-right:0.5em;height:auto}";
4
4