openproject-primer_view_components 0.37.0 → 0.38.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +22 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
  4. data/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +64 -0
  5. data/app/assets/javascripts/app/components/primer/aria_live.d.ts +8 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +4 -0
  7. data/app/assets/javascripts/app/components/primer/shared_events.d.ts +9 -0
  8. data/app/assets/javascripts/primer_view_components.js +1 -1
  9. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  10. data/app/assets/styles/primer_view_components.css +1 -1
  11. data/app/assets/styles/primer_view_components.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.pcss +1 -0
  15. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +0 -11
  17. data/app/components/primer/alpha/action_menu.rb +13 -6
  18. data/app/components/primer/alpha/select_panel.html.erb +100 -0
  19. data/app/components/primer/alpha/select_panel.rb +473 -0
  20. data/app/components/primer/alpha/select_panel_element.d.ts +64 -0
  21. data/app/components/primer/alpha/select_panel_element.js +924 -0
  22. data/app/components/primer/alpha/select_panel_element.ts +1045 -0
  23. data/app/components/primer/aria_live.d.ts +8 -0
  24. data/app/components/primer/aria_live.js +38 -0
  25. data/app/components/primer/aria_live.ts +41 -0
  26. data/app/components/primer/base_component.rb +1 -1
  27. data/app/components/primer/open_project/side_panel/section.css +1 -1
  28. data/app/components/primer/open_project/side_panel/section.css.json +3 -1
  29. data/app/components/primer/open_project/side_panel/section.css.map +1 -1
  30. data/app/components/primer/open_project/side_panel/section.pcss +5 -2
  31. data/app/components/primer/primer.d.ts +4 -0
  32. data/app/components/primer/primer.js +4 -0
  33. data/app/components/primer/primer.ts +4 -0
  34. data/app/components/primer/shared_events.d.ts +9 -0
  35. data/app/components/primer/shared_events.js +1 -0
  36. data/app/components/primer/shared_events.ts +10 -0
  37. data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -1
  38. data/lib/primer/forms/toggle_switch.html.erb +1 -2
  39. data/lib/primer/static/generate_info_arch.rb +3 -2
  40. data/lib/primer/view_components/version.rb +1 -1
  41. data/lib/primer/yard/component_manifest.rb +2 -0
  42. data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +25 -0
  43. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb +16 -0
  44. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb +12 -0
  45. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb +16 -0
  46. data/previews/primer/alpha/select_panel_preview/footer_buttons.html.erb +23 -0
  47. data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +19 -0
  48. data/previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb +15 -0
  49. data/previews/primer/alpha/select_panel_preview/multiselect.html.erb +17 -0
  50. data/previews/primer/alpha/select_panel_preview/multiselect_form.html.erb +31 -0
  51. data/previews/primer/alpha/select_panel_preview/playground.html.erb +19 -0
  52. data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +16 -0
  53. data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +13 -0
  54. data/previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb +12 -0
  55. data/previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb +16 -0
  56. data/previews/primer/alpha/select_panel_preview/single_select.html.erb +20 -0
  57. data/previews/primer/alpha/select_panel_preview/single_select_form.html.erb +33 -0
  58. data/previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb +19 -0
  59. data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb +23 -0
  60. data/previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb +24 -0
  61. data/previews/primer/alpha/select_panel_preview/with_leading_icons.html.erb +31 -0
  62. data/previews/primer/alpha/select_panel_preview/with_subtitle.html.erb +25 -0
  63. data/previews/primer/alpha/select_panel_preview/with_trailing_icons.html.erb +19 -0
  64. data/previews/primer/alpha/select_panel_preview.rb +239 -0
  65. data/static/arguments.json +118 -0
  66. data/static/audited_at.json +1 -0
  67. data/static/constants.json +16 -0
  68. data/static/info_arch.json +902 -112
  69. data/static/previews.json +294 -0
  70. data/static/statuses.json +1 -0
  71. metadata +41 -4
@@ -0,0 +1,924 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
13
+ if (kind === "m") throw new TypeError("Private method is not writable");
14
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
15
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
16
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
17
+ };
18
+ var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
19
+ import { getAnchoredPosition } from '@primer/behaviors';
20
+ import { controller, target } from '@github/catalyst';
21
+ import { announceFromElement, announce } from '../aria_live';
22
+ import { IncludeFragmentElement } from '@github/include-fragment-element';
23
+ import '@oddbird/popover-polyfill';
24
+ const validSelectors = ['[role="option"]'];
25
+ const menuItemSelectors = validSelectors.join(',');
26
+ const visibleMenuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(',');
27
+ var FetchStrategy;
28
+ (function (FetchStrategy) {
29
+ FetchStrategy[FetchStrategy["REMOTE"] = 0] = "REMOTE";
30
+ FetchStrategy[FetchStrategy["EVENTUALLY_LOCAL"] = 1] = "EVENTUALLY_LOCAL";
31
+ FetchStrategy[FetchStrategy["LOCAL"] = 2] = "LOCAL";
32
+ })(FetchStrategy || (FetchStrategy = {}));
33
+ var ErrorStateType;
34
+ (function (ErrorStateType) {
35
+ ErrorStateType[ErrorStateType["BODY"] = 0] = "BODY";
36
+ ErrorStateType[ErrorStateType["BANNER"] = 1] = "BANNER";
37
+ })(ErrorStateType || (ErrorStateType = {}));
38
+ const updateWhenVisible = (() => {
39
+ const anchors = new Set();
40
+ let resizeObserver = null;
41
+ function updateVisibleAnchors() {
42
+ for (const anchor of anchors) {
43
+ anchor.updateAnchorPosition();
44
+ }
45
+ }
46
+ return (el) => {
47
+ // eslint-disable-next-line github/prefer-observers
48
+ window.addEventListener('resize', updateVisibleAnchors);
49
+ // eslint-disable-next-line github/prefer-observers
50
+ window.addEventListener('scroll', updateVisibleAnchors);
51
+ resizeObserver || (resizeObserver = new ResizeObserver(() => {
52
+ for (const anchor of anchors) {
53
+ anchor.updateAnchorPosition();
54
+ }
55
+ }));
56
+ resizeObserver.observe(el.ownerDocument.documentElement);
57
+ el.addEventListener('dialog:close', () => {
58
+ anchors.delete(el);
59
+ });
60
+ el.addEventListener('dialog:open', () => {
61
+ anchors.add(el);
62
+ });
63
+ };
64
+ })();
65
+ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
66
+ constructor() {
67
+ super(...arguments);
68
+ _SelectPanelElement_instances.add(this);
69
+ _SelectPanelElement_dialogIntersectionObserver.set(this, void 0);
70
+ _SelectPanelElement_abortController.set(this, void 0);
71
+ _SelectPanelElement_originalLabel.set(this, '');
72
+ _SelectPanelElement_inputName.set(this, '');
73
+ _SelectPanelElement_selectedItems.set(this, new Map());
74
+ _SelectPanelElement_loadingDelayTimeoutId.set(this, null);
75
+ _SelectPanelElement_loadingAnnouncementTimeoutId.set(this, null);
76
+ }
77
+ get open() {
78
+ return this.dialog.open;
79
+ }
80
+ get selectVariant() {
81
+ return this.getAttribute('data-select-variant');
82
+ }
83
+ get ariaSelectionType() {
84
+ return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected';
85
+ }
86
+ set selectVariant(variant) {
87
+ if (variant) {
88
+ this.setAttribute('data-select-variant', variant);
89
+ }
90
+ else {
91
+ this.removeAttribute('variant');
92
+ }
93
+ }
94
+ get dynamicLabelPrefix() {
95
+ const prefix = this.getAttribute('data-dynamic-label-prefix');
96
+ if (!prefix)
97
+ return '';
98
+ return `${prefix}:`;
99
+ }
100
+ get dynamicAriaLabelPrefix() {
101
+ const prefix = this.getAttribute('data-dynamic-aria-label-prefix');
102
+ if (!prefix)
103
+ return '';
104
+ return `${prefix}:`;
105
+ }
106
+ set dynamicLabelPrefix(value) {
107
+ this.setAttribute('data-dynamic-label', value);
108
+ }
109
+ get dynamicLabel() {
110
+ return this.hasAttribute('data-dynamic-label');
111
+ }
112
+ set dynamicLabel(value) {
113
+ this.toggleAttribute('data-dynamic-label', value);
114
+ }
115
+ get invokerElement() {
116
+ const id = this.querySelector('dialog')?.id;
117
+ if (!id)
118
+ return null;
119
+ for (const el of this.querySelectorAll(`[aria-controls]`)) {
120
+ if (el.getAttribute('aria-controls') === id) {
121
+ return el;
122
+ }
123
+ }
124
+ return null;
125
+ }
126
+ get closeButton() {
127
+ return this.querySelector('button[data-close-dialog-id]');
128
+ }
129
+ get invokerLabel() {
130
+ if (!this.invokerElement)
131
+ return null;
132
+ return this.invokerElement.querySelector('.Button-label');
133
+ }
134
+ get selectedItems() {
135
+ return Array.from(__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").values());
136
+ }
137
+ get align() {
138
+ return (this.getAttribute('anchor-align') || 'start');
139
+ }
140
+ get side() {
141
+ return (this.getAttribute('anchor-side') || 'outside-bottom');
142
+ }
143
+ updateAnchorPosition() {
144
+ // If the selectPanel is removed from the screen on resize close the dialog
145
+ if (this && this.offsetParent === null) {
146
+ this.dialog.close();
147
+ }
148
+ if (this.invokerElement) {
149
+ const { top, left } = getAnchoredPosition(this.dialog, this.invokerElement, {
150
+ align: this.align,
151
+ side: this.side,
152
+ anchorOffset: 4,
153
+ });
154
+ this.dialog.style.top = `${top}px`;
155
+ this.dialog.style.left = `${left}px`;
156
+ this.dialog.style.bottom = 'auto';
157
+ this.dialog.style.right = 'auto';
158
+ }
159
+ }
160
+ connectedCallback() {
161
+ const { signal } = (__classPrivateFieldSet(this, _SelectPanelElement_abortController, new AbortController(), "f"));
162
+ this.addEventListener('keydown', this, { signal });
163
+ this.addEventListener('click', this, { signal });
164
+ this.addEventListener('mousedown', this, { signal });
165
+ this.addEventListener('input', this, { signal });
166
+ this.addEventListener('remote-input-success', this, { signal });
167
+ this.addEventListener('remote-input-error', this, { signal });
168
+ this.addEventListener('loadstart', this, { signal });
169
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
170
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
171
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_softDisableItems).call(this);
172
+ updateWhenVisible(this);
173
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.remoteInput), () => {
174
+ this.remoteInput.addEventListener('loadstart', this, { signal });
175
+ this.remoteInput.addEventListener('loadend', this, { signal });
176
+ });
177
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.includeFragment), () => {
178
+ this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
179
+ this.includeFragment.addEventListener('error', this, { signal });
180
+ this.includeFragment.addEventListener('loadend', this, { signal });
181
+ });
182
+ __classPrivateFieldSet(this, _SelectPanelElement_dialogIntersectionObserver, new IntersectionObserver(entries => {
183
+ for (const entry of entries) {
184
+ const elem = entry.target;
185
+ if (entry.isIntersecting && elem === this.dialog) {
186
+ this.updateAnchorPosition();
187
+ }
188
+ }
189
+ }), "f");
190
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
191
+ if (this.getAttribute('data-open-on-load') === 'true') {
192
+ this.show();
193
+ }
194
+ __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
195
+ this.dialog.addEventListener('close', this, { signal });
196
+ });
197
+ if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
198
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => this.items.length > 0, () => {
199
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
200
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
201
+ });
202
+ }
203
+ }
204
+ disconnectedCallback() {
205
+ __classPrivateFieldGet(this, _SelectPanelElement_abortController, "f").abort();
206
+ }
207
+ handleEvent(event) {
208
+ if (event.target === this.filterInputTextField) {
209
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleSearchFieldEvent).call(this, event);
210
+ return;
211
+ }
212
+ if (event.target === this.remoteInput) {
213
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleRemoteInputEvent).call(this, event);
214
+ return;
215
+ }
216
+ const targetIsInvoker = this.invokerElement?.contains(event.target);
217
+ const targetIsCloseButton = this.closeButton?.contains(event.target);
218
+ const eventIsActivation = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_isActivation).call(this, event);
219
+ if (targetIsInvoker && event.type === 'mousedown') {
220
+ return;
221
+ }
222
+ if (event.type === 'mousedown' && event.target instanceof HTMLInputElement) {
223
+ return;
224
+ }
225
+ // Prevent safari bug that dismisses menu on mousedown instead of allowing
226
+ // the click event to propagate to the button
227
+ if (event.type === 'mousedown') {
228
+ event.preventDefault();
229
+ return;
230
+ }
231
+ if (targetIsInvoker && eventIsActivation) {
232
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleInvokerActivated).call(this, event);
233
+ return;
234
+ }
235
+ if (targetIsCloseButton && eventIsActivation) {
236
+ // hide() will automatically be called by dialog event triggered from `data-close-dialog-id`
237
+ return;
238
+ }
239
+ if (event.target === this.dialog && event.type === 'close') {
240
+ this.dispatchEvent(new CustomEvent('panelClosed', {
241
+ detail: { panel: this },
242
+ bubbles: true,
243
+ }));
244
+ return;
245
+ }
246
+ const item = event.target.closest(visibleMenuItemSelectors)?.parentElement;
247
+ const targetIsItem = item !== null && item !== undefined;
248
+ if (targetIsItem && eventIsActivation) {
249
+ if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_potentiallyDisallowActivation).call(this, event))
250
+ return;
251
+ const dialogInvoker = item.closest('[data-show-dialog-id]');
252
+ if (dialogInvoker) {
253
+ const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '');
254
+ if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
255
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleDialogItemActivated).call(this, event, dialog);
256
+ return;
257
+ }
258
+ }
259
+ // Pressing the space key on a link will cause the page to scroll unless preventDefault() is called.
260
+ // We then click it manually to navigate.
261
+ if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_isAnchorActivationViaSpace).call(this, event)) {
262
+ event.preventDefault();
263
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item)?.click();
264
+ }
265
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item);
266
+ return;
267
+ }
268
+ if (event.type === 'click') {
269
+ const rect = this.dialog.getBoundingClientRect();
270
+ const clickWasInsideDialog = rect.top <= event.clientY &&
271
+ event.clientY <= rect.top + rect.height &&
272
+ rect.left <= event.clientX &&
273
+ event.clientX <= rect.left + rect.width;
274
+ if (!clickWasInsideDialog) {
275
+ this.hide();
276
+ }
277
+ }
278
+ // The include fragment will have been removed from the DOM by the time
279
+ // the include-fragment-replaced event has been dispatched, so we have to
280
+ // check for the type of the event target manually, since this.includeFragment
281
+ // will be null.
282
+ if (event.target instanceof IncludeFragmentElement) {
283
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleIncludeFragmentEvent).call(this, event);
284
+ }
285
+ }
286
+ show() {
287
+ this.updateAnchorPosition();
288
+ this.dialog.showModal();
289
+ const event = new CustomEvent('dialog:open', {
290
+ detail: { dialog: this.dialog },
291
+ });
292
+ this.dispatchEvent(event);
293
+ }
294
+ hide() {
295
+ this.dialog.close();
296
+ }
297
+ get visibleItems() {
298
+ return Array.from(this.querySelectorAll(visibleMenuItemSelectors)).map(element => element.parentElement);
299
+ }
300
+ get items() {
301
+ return Array.from(this.querySelectorAll(menuItemSelectors)).map(element => element.parentElement);
302
+ }
303
+ get focusableItem() {
304
+ for (const item of this.items) {
305
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
306
+ if (!itemContent)
307
+ continue;
308
+ if (itemContent.getAttribute('tabindex') === '0') {
309
+ return itemContent;
310
+ }
311
+ }
312
+ }
313
+ getItemById(itemId) {
314
+ return this.querySelector(`li[data-item-id="${itemId}"`);
315
+ }
316
+ isItemDisabled(item) {
317
+ if (item) {
318
+ return item.classList.contains('ActionListItem--disabled');
319
+ }
320
+ else {
321
+ return false;
322
+ }
323
+ }
324
+ disableItem(item) {
325
+ if (item) {
326
+ item.classList.add('ActionListItem--disabled');
327
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).setAttribute('aria-disabled', 'true');
328
+ }
329
+ }
330
+ enableItem(item) {
331
+ if (item) {
332
+ item.classList.remove('ActionListItem--disabled');
333
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).removeAttribute('aria-disabled');
334
+ }
335
+ }
336
+ isItemHidden(item) {
337
+ if (item) {
338
+ return item.hasAttribute('hidden');
339
+ }
340
+ else {
341
+ return false;
342
+ }
343
+ }
344
+ isItemChecked(item) {
345
+ if (item) {
346
+ return __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).getAttribute(this.ariaSelectionType) === 'true';
347
+ }
348
+ else {
349
+ return false;
350
+ }
351
+ }
352
+ checkItem(item) {
353
+ if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
354
+ if (!this.isItemChecked(item)) {
355
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item);
356
+ }
357
+ }
358
+ }
359
+ uncheckItem(item) {
360
+ if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
361
+ if (this.isItemChecked(item)) {
362
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item);
363
+ }
364
+ }
365
+ }
366
+ };
367
+ _SelectPanelElement_dialogIntersectionObserver = new WeakMap();
368
+ _SelectPanelElement_abortController = new WeakMap();
369
+ _SelectPanelElement_originalLabel = new WeakMap();
370
+ _SelectPanelElement_inputName = new WeakMap();
371
+ _SelectPanelElement_selectedItems = new WeakMap();
372
+ _SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
373
+ _SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
374
+ _SelectPanelElement_instances = new WeakSet();
375
+ _SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
376
+ if (condition()) {
377
+ body();
378
+ }
379
+ else {
380
+ const mutationObserver = new MutationObserver(() => {
381
+ if (condition()) {
382
+ body();
383
+ mutationObserver.disconnect();
384
+ }
385
+ });
386
+ mutationObserver.observe(this, { childList: true, subtree: true });
387
+ }
388
+ };
389
+ _SelectPanelElement_softDisableItems = function _SelectPanelElement_softDisableItems() {
390
+ const { signal } = __classPrivateFieldGet(this, _SelectPanelElement_abortController, "f");
391
+ for (const item of this.querySelectorAll(validSelectors.join(','))) {
392
+ item.addEventListener('click', __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_potentiallyDisallowActivation).bind(this), { signal });
393
+ item.addEventListener('keydown', __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_potentiallyDisallowActivation).bind(this), { signal });
394
+ }
395
+ };
396
+ _SelectPanelElement_updateTabIndices = function _SelectPanelElement_updateTabIndices() {
397
+ let setZeroTabIndex = false;
398
+ if (this.selectVariant === 'single') {
399
+ for (const item of this.items) {
400
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
401
+ if (!itemContent)
402
+ continue;
403
+ if (!this.isItemHidden(item) && this.isItemChecked(item) && !setZeroTabIndex) {
404
+ itemContent.setAttribute('tabindex', '0');
405
+ setZeroTabIndex = true;
406
+ }
407
+ else {
408
+ itemContent.setAttribute('tabindex', '-1');
409
+ }
410
+ // <li> elements should not themselves be tabbable
411
+ item.setAttribute('tabindex', '-1');
412
+ }
413
+ }
414
+ else {
415
+ for (const item of this.items) {
416
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
417
+ if (!itemContent)
418
+ continue;
419
+ if (!this.isItemHidden(item) && !setZeroTabIndex) {
420
+ setZeroTabIndex = true;
421
+ }
422
+ else {
423
+ itemContent.setAttribute('tabindex', '-1');
424
+ }
425
+ // <li> elements should not themselves be tabbable
426
+ item.setAttribute('tabindex', '-1');
427
+ }
428
+ }
429
+ if (!setZeroTabIndex && __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_firstItem_get)) {
430
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_firstItem_get))?.setAttribute('tabindex', '0');
431
+ }
432
+ };
433
+ _SelectPanelElement_potentiallyDisallowActivation = function _SelectPanelElement_potentiallyDisallowActivation(event) {
434
+ if (!__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_isActivation).call(this, event))
435
+ return false;
436
+ const item = event.target.closest(visibleMenuItemSelectors);
437
+ if (!item)
438
+ return false;
439
+ if (item.getAttribute('aria-disabled')) {
440
+ event.preventDefault();
441
+ // eslint-disable-next-line no-restricted-syntax
442
+ event.stopPropagation();
443
+ // eslint-disable-next-line no-restricted-syntax
444
+ event.stopImmediatePropagation();
445
+ return true;
446
+ }
447
+ return false;
448
+ };
449
+ _SelectPanelElement_isAnchorActivationViaSpace = function _SelectPanelElement_isAnchorActivationViaSpace(event) {
450
+ return (event.target instanceof HTMLAnchorElement &&
451
+ event instanceof KeyboardEvent &&
452
+ event.type === 'keydown' &&
453
+ !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
454
+ event.key === ' ');
455
+ };
456
+ _SelectPanelElement_isActivation = function _SelectPanelElement_isActivation(event) {
457
+ // Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
458
+ // enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
459
+ // inherits from MouseEvent, it is enough to check for MouseEvent here.
460
+ return (event instanceof MouseEvent && event.type === 'click') || __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_isAnchorActivationViaSpace).call(this, event);
461
+ };
462
+ _SelectPanelElement_checkSelectedItems = function _SelectPanelElement_checkSelectedItems() {
463
+ for (const item of this.items) {
464
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
465
+ if (!itemContent)
466
+ continue;
467
+ const value = itemContent.getAttribute('data-value');
468
+ if (value) {
469
+ if (__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value)) {
470
+ itemContent.setAttribute(this.ariaSelectionType, 'true');
471
+ }
472
+ }
473
+ }
474
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
475
+ };
476
+ _SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedItem(item) {
477
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
478
+ if (!itemContent)
479
+ return;
480
+ const value = itemContent.getAttribute('data-value');
481
+ if (value) {
482
+ __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").set(value, {
483
+ value,
484
+ label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
485
+ inputName: itemContent.getAttribute('data-input-name'),
486
+ element: item,
487
+ });
488
+ }
489
+ };
490
+ _SelectPanelElement_removeSelectedItem = function _SelectPanelElement_removeSelectedItem(item) {
491
+ const value = item.getAttribute('data-value');
492
+ if (value) {
493
+ __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").delete(value);
494
+ }
495
+ };
496
+ _SelectPanelElement_setTextFieldLoadingSpinnerTimer = function _SelectPanelElement_setTextFieldLoadingSpinnerTimer() {
497
+ if (__classPrivateFieldGet(this, _SelectPanelElement_loadingDelayTimeoutId, "f"))
498
+ clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingDelayTimeoutId, "f"));
499
+ if (__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"))
500
+ clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"));
501
+ __classPrivateFieldSet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, setTimeout(() => {
502
+ announce('Loading', { element: this.ariaLiveContainer });
503
+ }, 2000), "f");
504
+ __classPrivateFieldSet(this, _SelectPanelElement_loadingDelayTimeoutId, setTimeout(() => {
505
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get).showLeadingSpinner();
506
+ }, 1000), "f");
507
+ };
508
+ _SelectPanelElement_handleIncludeFragmentEvent = function _SelectPanelElement_handleIncludeFragmentEvent(event) {
509
+ switch (event.type) {
510
+ case 'include-fragment-replaced': {
511
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
512
+ break;
513
+ }
514
+ case 'loadstart': {
515
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_toggleIncludeFragmentElements).call(this, false);
516
+ break;
517
+ }
518
+ case 'loadend': {
519
+ this.dispatchEvent(new CustomEvent('loadend'));
520
+ break;
521
+ }
522
+ case 'error': {
523
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_toggleIncludeFragmentElements).call(this, true);
524
+ const errorElement = this.fragmentErrorElement;
525
+ // check if the errorElement is visible in the dom
526
+ if (errorElement && !errorElement.hasAttribute('hidden')) {
527
+ announceFromElement(errorElement, { element: this.ariaLiveContainer, assertive: true });
528
+ return;
529
+ }
530
+ break;
531
+ }
532
+ }
533
+ };
534
+ _SelectPanelElement_toggleIncludeFragmentElements = function _SelectPanelElement_toggleIncludeFragmentElements(showError) {
535
+ for (const el of this.includeFragment.querySelectorAll('[data-show-on-error]')) {
536
+ if (el instanceof HTMLElement)
537
+ el.hidden = !showError;
538
+ }
539
+ for (const el of this.includeFragment.querySelectorAll('[data-hide-on-error]')) {
540
+ if (el instanceof HTMLElement)
541
+ el.hidden = showError;
542
+ }
543
+ };
544
+ _SelectPanelElement_handleRemoteInputEvent = function _SelectPanelElement_handleRemoteInputEvent(event) {
545
+ switch (event.type) {
546
+ case 'remote-input-success': {
547
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_clearErrorState).call(this);
548
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
549
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_checkSelectedItems).call(this);
550
+ break;
551
+ }
552
+ case 'remote-input-error': {
553
+ this.bodySpinner?.setAttribute('hidden', '');
554
+ if (this.includeFragment || this.visibleItems.length === 0) {
555
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setErrorState).call(this, ErrorStateType.BODY);
556
+ }
557
+ else {
558
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setErrorState).call(this, ErrorStateType.BANNER);
559
+ }
560
+ break;
561
+ }
562
+ case 'loadstart': {
563
+ if (!__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_performFilteringLocally).call(this)) {
564
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_clearErrorState).call(this);
565
+ this.bodySpinner?.removeAttribute('hidden');
566
+ if (this.bodySpinner)
567
+ break;
568
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setTextFieldLoadingSpinnerTimer).call(this);
569
+ }
570
+ break;
571
+ }
572
+ case 'loadend': {
573
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get).hideLeadingSpinner();
574
+ if (__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"))
575
+ clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"));
576
+ if (__classPrivateFieldGet(this, _SelectPanelElement_loadingDelayTimeoutId, "f"))
577
+ clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingDelayTimeoutId, "f"));
578
+ this.dispatchEvent(new CustomEvent('loadend'));
579
+ break;
580
+ }
581
+ }
582
+ };
583
+ _SelectPanelElement_defaultFilterFn = function _SelectPanelElement_defaultFilterFn(item, query) {
584
+ const text = (item.getAttribute('data-filter-string') || item.textContent || '').toLowerCase();
585
+ return text.indexOf(query.toLowerCase()) > -1;
586
+ };
587
+ _SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handleSearchFieldEvent(event) {
588
+ if (event.type === 'keydown' && event.key === 'ArrowDown') {
589
+ if (this.focusableItem) {
590
+ this.focusableItem.focus();
591
+ event.preventDefault();
592
+ }
593
+ }
594
+ if (event.type !== 'input')
595
+ return;
596
+ // remote-input-element does not trigger another loadstart event if a request is
597
+ // already in-flight, so we use the input event on the text field to reset the
598
+ // loading spinner timer instead
599
+ if (!this.bodySpinner && !__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_performFilteringLocally).call(this)) {
600
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setTextFieldLoadingSpinnerTimer).call(this);
601
+ }
602
+ if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL || __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.EVENTUALLY_LOCAL) {
603
+ if (this.includeFragment) {
604
+ this.includeFragment.refetch();
605
+ return;
606
+ }
607
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
608
+ }
609
+ };
610
+ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateItemVisibility() {
611
+ if (!this.list)
612
+ return;
613
+ let atLeastOneResult = false;
614
+ if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_performFilteringLocally).call(this)) {
615
+ const query = this.filterInputTextField?.value ?? '';
616
+ const filter = this.filterFn || __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_defaultFilterFn);
617
+ for (const item of this.items) {
618
+ if (filter(item, query)) {
619
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_showItem).call(this, item);
620
+ atLeastOneResult = true;
621
+ }
622
+ else {
623
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_hideItem).call(this, item);
624
+ }
625
+ }
626
+ }
627
+ else {
628
+ atLeastOneResult = this.items.length > 0;
629
+ }
630
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
631
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_maybeAnnounce).call(this);
632
+ for (const item of this.items) {
633
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
634
+ if (!itemContent)
635
+ continue;
636
+ const value = itemContent.getAttribute('data-value');
637
+ if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
638
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
639
+ }
640
+ }
641
+ if (!this.noResults)
642
+ return;
643
+ if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_inErrorState).call(this)) {
644
+ this.noResults.setAttribute('hidden', '');
645
+ return;
646
+ }
647
+ if (atLeastOneResult) {
648
+ this.noResults.setAttribute('hidden', '');
649
+ // TODO can we change this to search for `@panelId-list`
650
+ this.list?.querySelector('.ActionListWrap')?.removeAttribute('hidden');
651
+ }
652
+ else {
653
+ this.list?.querySelector('.ActionListWrap')?.setAttribute('hidden', '');
654
+ this.noResults.removeAttribute('hidden');
655
+ }
656
+ };
657
+ _SelectPanelElement_inErrorState = function _SelectPanelElement_inErrorState() {
658
+ if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) {
659
+ return true;
660
+ }
661
+ return !this.bannerErrorElement.hasAttribute('hidden');
662
+ };
663
+ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(type) {
664
+ let errorElement = this.fragmentErrorElement;
665
+ if (type === ErrorStateType.BODY) {
666
+ this.fragmentErrorElement?.removeAttribute('hidden');
667
+ this.bannerErrorElement.setAttribute('hidden', '');
668
+ }
669
+ else {
670
+ errorElement = this.bannerErrorElement;
671
+ this.bannerErrorElement?.removeAttribute('hidden');
672
+ this.fragmentErrorElement?.setAttribute('hidden', '');
673
+ }
674
+ // check if the errorElement is visible in the dom
675
+ if (errorElement && !errorElement.hasAttribute('hidden')) {
676
+ announceFromElement(errorElement, { element: this.ariaLiveContainer, assertive: true });
677
+ return;
678
+ }
679
+ };
680
+ _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorState() {
681
+ this.fragmentErrorElement?.setAttribute('hidden', '');
682
+ this.bannerErrorElement.setAttribute('hidden', '');
683
+ };
684
+ _SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
685
+ if (this.open && this.list) {
686
+ const items = this.items;
687
+ if (items.length > 0) {
688
+ const instructions = 'tab for results';
689
+ announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`, {
690
+ element: this.ariaLiveContainer,
691
+ });
692
+ }
693
+ else {
694
+ const noResultsEl = this.noResults;
695
+ if (noResultsEl) {
696
+ announceFromElement(noResultsEl, { element: this.ariaLiveContainer });
697
+ }
698
+ }
699
+ }
700
+ };
701
+ _SelectPanelElement_fetchStrategy_get = function _SelectPanelElement_fetchStrategy_get() {
702
+ if (!this.list)
703
+ return FetchStrategy.REMOTE;
704
+ switch (this.list.getAttribute('data-fetch-strategy')) {
705
+ case 'local':
706
+ return FetchStrategy.LOCAL;
707
+ case 'eventually_local':
708
+ return FetchStrategy.EVENTUALLY_LOCAL;
709
+ default:
710
+ return FetchStrategy.REMOTE;
711
+ }
712
+ };
713
+ _SelectPanelElement_filterInputTextFieldElement_get = function _SelectPanelElement_filterInputTextFieldElement_get() {
714
+ return this.filterInputTextField.closest('primer-text-field');
715
+ };
716
+ _SelectPanelElement_performFilteringLocally = function _SelectPanelElement_performFilteringLocally() {
717
+ return __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL || __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.EVENTUALLY_LOCAL;
718
+ };
719
+ _SelectPanelElement_handleInvokerActivated = function _SelectPanelElement_handleInvokerActivated(event) {
720
+ event.preventDefault();
721
+ // eslint-disable-next-line no-restricted-syntax
722
+ event.stopPropagation();
723
+ if (this.open) {
724
+ this.hide();
725
+ }
726
+ else {
727
+ this.show();
728
+ }
729
+ };
730
+ _SelectPanelElement_handleDialogItemActivated = function _SelectPanelElement_handleDialogItemActivated(event, dialog) {
731
+ this.querySelector('.ActionListWrap').style.display = 'none';
732
+ const dialog_controller = new AbortController();
733
+ const { signal } = dialog_controller;
734
+ const handleDialogClose = () => {
735
+ dialog_controller.abort();
736
+ this.querySelector('.ActionListWrap').style.display = '';
737
+ if (this.open) {
738
+ this.hide();
739
+ }
740
+ const activeElement = this.ownerDocument.activeElement;
741
+ const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body;
742
+ const focusInClosedMenu = this.contains(activeElement);
743
+ if (lostFocus || focusInClosedMenu) {
744
+ setTimeout(() => this.invokerElement?.focus(), 0);
745
+ }
746
+ };
747
+ // a modal <dialog> element will close all popovers
748
+ dialog.addEventListener('close', handleDialogClose, { signal });
749
+ dialog.addEventListener('cancel', handleDialogClose, { signal });
750
+ };
751
+ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item) {
752
+ // Hide popover after current event loop to prevent changes in focus from
753
+ // altering the target of the event. Not doing this specifically affects
754
+ // <a> tags. It causes the event to be sent to the currently focused element
755
+ // instead of the anchor, which effectively prevents navigation, i.e. it
756
+ // appears as if hitting enter does nothing. Curiously, clicking instead
757
+ // works fine.
758
+ if (this.selectVariant !== 'multiple') {
759
+ setTimeout(() => {
760
+ if (this.open) {
761
+ this.hide();
762
+ }
763
+ });
764
+ }
765
+ // The rest of the code below deals with single/multiple selection behavior, and should not
766
+ // interfere with events fired by menu items whose behavior is specified outside the library.
767
+ if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
768
+ return;
769
+ const checked = !this.isItemChecked(item);
770
+ const activationSuccess = this.dispatchEvent(new CustomEvent('beforeItemActivated', {
771
+ bubbles: true,
772
+ detail: { item, checked },
773
+ cancelable: true,
774
+ }));
775
+ if (!activationSuccess)
776
+ return;
777
+ const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
778
+ if (this.selectVariant === 'single') {
779
+ // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
780
+ if (checked) {
781
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
782
+ itemContent?.setAttribute(this.ariaSelectionType, 'true');
783
+ }
784
+ for (const checkedItem of this.querySelectorAll(`[${this.ariaSelectionType}]`)) {
785
+ if (checkedItem !== itemContent) {
786
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, checkedItem);
787
+ checkedItem.setAttribute(this.ariaSelectionType, 'false');
788
+ }
789
+ }
790
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
791
+ }
792
+ else {
793
+ // multi-select mode allows unchecking a checked item
794
+ itemContent?.setAttribute(this.ariaSelectionType, `${checked}`);
795
+ if (checked) {
796
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
797
+ }
798
+ else {
799
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, item);
800
+ }
801
+ }
802
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
803
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
804
+ this.dispatchEvent(new CustomEvent('itemActivated', {
805
+ bubbles: true,
806
+ detail: { item, checked },
807
+ }));
808
+ };
809
+ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLabel() {
810
+ if (!this.dynamicLabel)
811
+ return;
812
+ const invokerLabel = this.invokerLabel;
813
+ if (!invokerLabel)
814
+ return;
815
+ __classPrivateFieldSet(this, _SelectPanelElement_originalLabel, __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
816
+ const itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f");
817
+ if (itemLabel) {
818
+ const prefixSpan = document.createElement('span');
819
+ prefixSpan.classList.add('color-fg-muted');
820
+ const contentSpan = document.createElement('span');
821
+ prefixSpan.textContent = `${this.dynamicLabelPrefix} `;
822
+ contentSpan.textContent = itemLabel;
823
+ invokerLabel.replaceChildren(prefixSpan, contentSpan);
824
+ if (this.dynamicAriaLabelPrefix) {
825
+ this.invokerElement?.setAttribute('aria-label', `${this.dynamicAriaLabelPrefix} ${itemLabel.trim()}`);
826
+ }
827
+ }
828
+ else {
829
+ invokerLabel.textContent = __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f");
830
+ }
831
+ };
832
+ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
833
+ if (this.selectVariant === 'single') {
834
+ const input = this.querySelector(`[data-list-inputs=true] input`);
835
+ if (!input)
836
+ return;
837
+ const selectedItem = this.selectedItems[0];
838
+ if (selectedItem) {
839
+ input.value = (selectedItem.value || selectedItem.label || '').trim();
840
+ if (selectedItem.inputName)
841
+ input.name = selectedItem.inputName;
842
+ input.removeAttribute('disabled');
843
+ }
844
+ else {
845
+ input.setAttribute('disabled', 'disabled');
846
+ }
847
+ }
848
+ else if (this.selectVariant !== 'none') {
849
+ // multiple select variant
850
+ const inputList = this.querySelector('[data-list-inputs=true]');
851
+ if (!inputList)
852
+ return;
853
+ const inputs = inputList.querySelectorAll('input');
854
+ if (inputs.length > 0) {
855
+ __classPrivateFieldSet(this, _SelectPanelElement_inputName, __classPrivateFieldGet(this, _SelectPanelElement_inputName, "f") || inputs[0].name, "f");
856
+ }
857
+ for (const selectedItem of this.selectedItems) {
858
+ const newInput = document.createElement('input');
859
+ newInput.setAttribute('data-list-input', 'true');
860
+ newInput.type = 'hidden';
861
+ newInput.autocomplete = 'off';
862
+ newInput.name = selectedItem.inputName || __classPrivateFieldGet(this, _SelectPanelElement_inputName, "f");
863
+ newInput.value = (selectedItem.value || selectedItem.label || '').trim();
864
+ inputList.append(newInput);
865
+ }
866
+ for (const input of inputs) {
867
+ input.remove();
868
+ }
869
+ }
870
+ };
871
+ _SelectPanelElement_firstItem_get = function _SelectPanelElement_firstItem_get() {
872
+ return (this.querySelector(visibleMenuItemSelectors)?.parentElement || null);
873
+ };
874
+ _SelectPanelElement_hideItem = function _SelectPanelElement_hideItem(item) {
875
+ if (item) {
876
+ item.setAttribute('hidden', 'hidden');
877
+ }
878
+ };
879
+ _SelectPanelElement_showItem = function _SelectPanelElement_showItem(item) {
880
+ if (item) {
881
+ item.removeAttribute('hidden');
882
+ }
883
+ };
884
+ _SelectPanelElement_getItemContent = function _SelectPanelElement_getItemContent(item) {
885
+ return item.querySelector('.ActionListContent');
886
+ };
887
+ __decorate([
888
+ target
889
+ ], SelectPanelElement.prototype, "includeFragment", void 0);
890
+ __decorate([
891
+ target
892
+ ], SelectPanelElement.prototype, "dialog", void 0);
893
+ __decorate([
894
+ target
895
+ ], SelectPanelElement.prototype, "filterInputTextField", void 0);
896
+ __decorate([
897
+ target
898
+ ], SelectPanelElement.prototype, "remoteInput", void 0);
899
+ __decorate([
900
+ target
901
+ ], SelectPanelElement.prototype, "list", void 0);
902
+ __decorate([
903
+ target
904
+ ], SelectPanelElement.prototype, "ariaLiveContainer", void 0);
905
+ __decorate([
906
+ target
907
+ ], SelectPanelElement.prototype, "noResults", void 0);
908
+ __decorate([
909
+ target
910
+ ], SelectPanelElement.prototype, "fragmentErrorElement", void 0);
911
+ __decorate([
912
+ target
913
+ ], SelectPanelElement.prototype, "bannerErrorElement", void 0);
914
+ __decorate([
915
+ target
916
+ ], SelectPanelElement.prototype, "bodySpinner", void 0);
917
+ SelectPanelElement = __decorate([
918
+ controller
919
+ ], SelectPanelElement);
920
+ export { SelectPanelElement };
921
+ if (!window.customElements.get('select-panel')) {
922
+ window.SelectPanelElement = SelectPanelElement;
923
+ window.customElements.define('select-panel', SelectPanelElement);
924
+ }