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