@aurodesignsystem-dev/auro-formkit 0.0.0-pr1379.0 → 0.0.0-pr1379.10

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 (226) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/README.md +87 -113
  3. package/components/combobox/demo/keyboardBehavior.html +81 -0
  4. package/components/counter/demo/keyboardBehavior.html +81 -0
  5. package/components/datepicker/demo/keyboard-behavior.html +81 -0
  6. package/components/dropdown/demo/keyboardBehavior.html +81 -0
  7. package/components/select/demo/keyboardBehavior.html +81 -0
  8. package/package.json +64 -53
  9. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -66
  10. package/components/bibtemplate/dist/buttonVersion.d.ts +0 -2
  11. package/components/bibtemplate/dist/headerVersion.d.ts +0 -2
  12. package/components/bibtemplate/dist/iconVersion.d.ts +0 -2
  13. package/components/bibtemplate/dist/index.d.ts +0 -2
  14. package/components/bibtemplate/dist/index.js +0 -395
  15. package/components/bibtemplate/dist/registered.js +0 -395
  16. package/components/bibtemplate/dist/styles/color-css.d.ts +0 -2
  17. package/components/bibtemplate/dist/styles/style-css.d.ts +0 -2
  18. package/components/bibtemplate/dist/styles/tokens-css.d.ts +0 -2
  19. package/components/checkbox/demo/api.md +0 -489
  20. package/components/checkbox/demo/api.min.js +0 -2133
  21. package/components/checkbox/demo/index.md +0 -55
  22. package/components/checkbox/demo/index.min.js +0 -2108
  23. package/components/checkbox/demo/readme.md +0 -142
  24. package/components/checkbox/dist/auro-checkbox-group.d.ts +0 -176
  25. package/components/checkbox/dist/auro-checkbox.d.ts +0 -209
  26. package/components/checkbox/dist/index.d.ts +0 -3
  27. package/components/checkbox/dist/index.js +0 -2057
  28. package/components/checkbox/dist/registered.js +0 -2058
  29. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +0 -2
  30. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +0 -2
  31. package/components/checkbox/dist/styles/color-css.d.ts +0 -2
  32. package/components/checkbox/dist/styles/colorGroup-css.d.ts +0 -2
  33. package/components/checkbox/dist/styles/tokens-css.d.ts +0 -2
  34. package/components/combobox/demo/api.md +0 -2287
  35. package/components/combobox/demo/api.min.js +0 -17549
  36. package/components/combobox/demo/index.md +0 -196
  37. package/components/combobox/demo/index.min.js +0 -17454
  38. package/components/combobox/demo/readme.md +0 -158
  39. package/components/combobox/dist/auro-combobox.d.ts +0 -552
  40. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +0 -6
  41. package/components/combobox/dist/index.d.ts +0 -2
  42. package/components/combobox/dist/index.js +0 -15474
  43. package/components/combobox/dist/registered.js +0 -15476
  44. package/components/combobox/dist/styles/emphasized/style-css.d.ts +0 -2
  45. package/components/combobox/dist/styles/snowflake/style-css.d.ts +0 -2
  46. package/components/combobox/dist/styles/style-css.d.ts +0 -2
  47. package/components/counter/demo/api.md +0 -1285
  48. package/components/counter/demo/api.min.js +0 -7993
  49. package/components/counter/demo/index.md +0 -92
  50. package/components/counter/demo/index.min.js +0 -7974
  51. package/components/counter/demo/readme.md +0 -161
  52. package/components/counter/dist/auro-counter-button.d.ts +0 -14
  53. package/components/counter/dist/auro-counter-group.d.ts +0 -390
  54. package/components/counter/dist/auro-counter-wrapper.d.ts +0 -17
  55. package/components/counter/dist/auro-counter.d.ts +0 -126
  56. package/components/counter/dist/buttonVersion.d.ts +0 -2
  57. package/components/counter/dist/iconVersion.d.ts +0 -2
  58. package/components/counter/dist/index.d.ts +0 -3
  59. package/components/counter/dist/index.js +0 -7896
  60. package/components/counter/dist/registered.js +0 -7897
  61. package/components/counter/dist/styles/color-css.d.ts +0 -2
  62. package/components/counter/dist/styles/counter-button-color-css.d.ts +0 -2
  63. package/components/counter/dist/styles/counter-button-css.d.ts +0 -2
  64. package/components/counter/dist/styles/counter-group-css.d.ts +0 -2
  65. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +0 -2
  66. package/components/counter/dist/styles/counter-wrapper-css.d.ts +0 -2
  67. package/components/counter/dist/styles/shapeSize-css.d.ts +0 -2
  68. package/components/counter/dist/styles/style-css.d.ts +0 -2
  69. package/components/counter/dist/styles/tokens-css.d.ts +0 -2
  70. package/components/datepicker/demo/api.md +0 -1824
  71. package/components/datepicker/demo/api.min.js +0 -24530
  72. package/components/datepicker/demo/index.md +0 -158
  73. package/components/datepicker/demo/index.min.js +0 -24251
  74. package/components/datepicker/demo/readme.md +0 -137
  75. package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -169
  76. package/components/datepicker/dist/auro-calendar-month.d.ts +0 -20
  77. package/components/datepicker/dist/auro-calendar.d.ts +0 -173
  78. package/components/datepicker/dist/auro-datepicker.d.ts +0 -722
  79. package/components/datepicker/dist/buttonVersion.d.ts +0 -2
  80. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  81. package/components/datepicker/dist/index.d.ts +0 -2
  82. package/components/datepicker/dist/index.js +0 -24166
  83. package/components/datepicker/dist/popoverVersion.d.ts +0 -2
  84. package/components/datepicker/dist/registered.js +0 -24166
  85. package/components/datepicker/dist/styles/classic/color-css.d.ts +0 -2
  86. package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
  87. package/components/datepicker/dist/styles/color-calendar-css.d.ts +0 -2
  88. package/components/datepicker/dist/styles/color-cell-css.d.ts +0 -2
  89. package/components/datepicker/dist/styles/color-css.d.ts +0 -2
  90. package/components/datepicker/dist/styles/color-month-css.d.ts +0 -2
  91. package/components/datepicker/dist/styles/shapeSize-css.d.ts +0 -2
  92. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +0 -2
  93. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +0 -2
  94. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +0 -2
  95. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +0 -2
  96. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +0 -2
  97. package/components/datepicker/dist/styles/style-css.d.ts +0 -2
  98. package/components/datepicker/dist/styles/tokens-css.d.ts +0 -2
  99. package/components/datepicker/dist/utilities.d.ts +0 -78
  100. package/components/datepicker/dist/utilitiesCalendar.d.ts +0 -38
  101. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +0 -50
  102. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +0 -5
  103. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -60
  104. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +0 -1
  105. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +0 -57
  106. package/components/dropdown/demo/api.md +0 -1358
  107. package/components/dropdown/demo/api.min.js +0 -4853
  108. package/components/dropdown/demo/index.md +0 -283
  109. package/components/dropdown/demo/index.min.js +0 -4788
  110. package/components/dropdown/demo/readme.md +0 -160
  111. package/components/dropdown/dist/auro-dropdown.d.ts +0 -482
  112. package/components/dropdown/dist/auro-dropdownBib.d.ts +0 -155
  113. package/components/dropdown/dist/iconVersion.d.ts +0 -2
  114. package/components/dropdown/dist/index.d.ts +0 -2
  115. package/components/dropdown/dist/index.js +0 -4685
  116. package/components/dropdown/dist/keyboardUtils.d.ts +0 -18
  117. package/components/dropdown/dist/registered.js +0 -4685
  118. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +0 -2
  119. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +0 -2
  120. package/components/dropdown/dist/styles/classic/color-css.d.ts +0 -2
  121. package/components/dropdown/dist/styles/classic/style-css.d.ts +0 -2
  122. package/components/dropdown/dist/styles/color-css.d.ts +0 -2
  123. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +0 -2
  124. package/components/dropdown/dist/styles/shapeSize-css.d.ts +0 -2
  125. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +0 -2
  126. package/components/dropdown/dist/styles/style-css.d.ts +0 -2
  127. package/components/dropdown/dist/styles/tokens-css.d.ts +0 -2
  128. package/components/form/demo/api.md +0 -319
  129. package/components/form/demo/api.min.js +0 -69996
  130. package/components/form/demo/index.md +0 -128
  131. package/components/form/demo/index.min.js +0 -69996
  132. package/components/form/demo/readme.md +0 -145
  133. package/components/form/dist/auro-form.d.ts +0 -280
  134. package/components/form/dist/index.d.ts +0 -2
  135. package/components/form/dist/index.js +0 -718
  136. package/components/form/dist/registered.d.ts +0 -1
  137. package/components/form/dist/registered.js +0 -718
  138. package/components/form/dist/styles/style-css.d.ts +0 -2
  139. package/components/helptext/dist/auro-helptext.d.ts +0 -69
  140. package/components/helptext/dist/index.d.ts +0 -2
  141. package/components/helptext/dist/index.js +0 -231
  142. package/components/helptext/dist/registered.js +0 -231
  143. package/components/helptext/dist/styles/color-css.d.ts +0 -2
  144. package/components/helptext/dist/styles/style-css.d.ts +0 -2
  145. package/components/helptext/dist/styles/tokens-css.d.ts +0 -2
  146. package/components/input/demo/api.md +0 -1397
  147. package/components/input/demo/api.min.js +0 -7435
  148. package/components/input/demo/index.md +0 -161
  149. package/components/input/demo/index.min.js +0 -7355
  150. package/components/input/demo/readme.md +0 -134
  151. package/components/input/dist/auro-input.d.ts +0 -195
  152. package/components/input/dist/base-input.d.ts +0 -628
  153. package/components/input/dist/buttonVersion.d.ts +0 -2
  154. package/components/input/dist/i18n.d.ts +0 -18
  155. package/components/input/dist/iconVersion.d.ts +0 -2
  156. package/components/input/dist/index.d.ts +0 -2
  157. package/components/input/dist/index.js +0 -7278
  158. package/components/input/dist/registered.js +0 -7278
  159. package/components/input/dist/styles/classic/color-css.d.ts +0 -2
  160. package/components/input/dist/styles/classic/style-css.d.ts +0 -2
  161. package/components/input/dist/styles/color-css.d.ts +0 -2
  162. package/components/input/dist/styles/default/borders-css.d.ts +0 -2
  163. package/components/input/dist/styles/default/color-css.d.ts +0 -2
  164. package/components/input/dist/styles/default/mixins-css.d.ts +0 -2
  165. package/components/input/dist/styles/default/notificationIcons-css.d.ts +0 -2
  166. package/components/input/dist/styles/default/style-css.d.ts +0 -2
  167. package/components/input/dist/styles/emphasized/color-css.d.ts +0 -2
  168. package/components/input/dist/styles/emphasized/style-css.d.ts +0 -2
  169. package/components/input/dist/styles/mixins-css.d.ts +0 -2
  170. package/components/input/dist/styles/shapeSize-css.d.ts +0 -2
  171. package/components/input/dist/styles/snowflake/style-css.d.ts +0 -2
  172. package/components/input/dist/styles/style-css.d.ts +0 -2
  173. package/components/input/dist/styles/tokens-css.d.ts +0 -2
  174. package/components/input/dist/utilities.d.ts +0 -25
  175. package/components/layoutElement/dist/auroElement.d.ts +0 -40
  176. package/components/layoutElement/dist/index.d.ts +0 -2
  177. package/components/layoutElement/dist/index.js +0 -107
  178. package/components/layoutElement/dist/registered.js +0 -107
  179. package/components/menu/demo/api.md +0 -1200
  180. package/components/menu/demo/api.min.js +0 -2292
  181. package/components/menu/demo/index.md +0 -72
  182. package/components/menu/demo/index.min.js +0 -2185
  183. package/components/menu/demo/readme.md +0 -145
  184. package/components/menu/dist/auro-menu-utils.d.ts +0 -34
  185. package/components/menu/dist/auro-menu.context.d.ts +0 -227
  186. package/components/menu/dist/auro-menu.d.ts +0 -324
  187. package/components/menu/dist/auro-menuoption.d.ts +0 -210
  188. package/components/menu/dist/iconVersion.d.ts +0 -2
  189. package/components/menu/dist/index.d.ts +0 -4
  190. package/components/menu/dist/index.js +0 -2148
  191. package/components/menu/dist/registered.js +0 -2096
  192. package/components/menu/dist/styles/default/color-menu-css.d.ts +0 -2
  193. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +0 -2
  194. package/components/menu/dist/styles/default/style-menu-css.d.ts +0 -2
  195. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +0 -2
  196. package/components/menu/dist/styles/default/tokens-css.d.ts +0 -2
  197. package/components/radio/demo/api.md +0 -675
  198. package/components/radio/demo/api.min.js +0 -2210
  199. package/components/radio/demo/index.md +0 -73
  200. package/components/radio/demo/index.min.js +0 -2167
  201. package/components/radio/demo/readme.md +0 -141
  202. package/components/radio/dist/auro-radio-group.d.ts +0 -250
  203. package/components/radio/dist/auro-radio.d.ts +0 -180
  204. package/components/radio/dist/index.d.ts +0 -3
  205. package/components/radio/dist/index.js +0 -2116
  206. package/components/radio/dist/registered.js +0 -2117
  207. package/components/radio/dist/styles/auro-radio-group-css.d.ts +0 -2
  208. package/components/radio/dist/styles/color-css.d.ts +0 -2
  209. package/components/radio/dist/styles/groupColor-css.d.ts +0 -2
  210. package/components/radio/dist/styles/style-css.d.ts +0 -2
  211. package/components/radio/dist/styles/tokens-css.d.ts +0 -2
  212. package/components/select/demo/api.md +0 -2378
  213. package/components/select/demo/api.min.js +0 -10133
  214. package/components/select/demo/index.md +0 -355
  215. package/components/select/demo/index.min.js +0 -10040
  216. package/components/select/demo/readme.md +0 -148
  217. package/components/select/dist/auro-select.d.ts +0 -545
  218. package/components/select/dist/index.d.ts +0 -2
  219. package/components/select/dist/index.js +0 -8072
  220. package/components/select/dist/registered.js +0 -8072
  221. package/components/select/dist/selectKeyboardStrategy.d.ts +0 -8
  222. package/components/select/dist/styles/emphasized/color-css.d.ts +0 -2
  223. package/components/select/dist/styles/shapeSize-css.d.ts +0 -2
  224. package/components/select/dist/styles/style-css.d.ts +0 -2
  225. package/components/select/dist/styles/tokens-css.d.ts +0 -2
  226. package/custom-elements.json +0 -18656
@@ -1,4853 +0,0 @@
1
- function errorExample() {
2
- const btn = document.querySelector('#errorButton');
3
- const dropdown = document.querySelector('#error');
4
-
5
- btn?.addEventListener('click', () => {
6
- dropdown?.hide();
7
- });
8
- }
9
-
10
- function inverseErrorExample() {
11
- const btn = document.querySelector('#inverseErrorButton');
12
- const dropdown = document.querySelector('#inverseError');
13
-
14
- btn?.addEventListener('click', () => {
15
- dropdown?.hide();
16
- });
17
- }
18
-
19
- function fullscreenBreakpointExample() {
20
- const btn = document.querySelector('#fullscreenButton');
21
- const dropdown = document.querySelector('#fullscreen');
22
-
23
- btn?.addEventListener('click', () => {
24
- dropdown?.hide();
25
- });
26
- }
27
-
28
- function classicExample() {
29
- const btn = document.querySelector('#classicButton');
30
- const dropdown = document.querySelector('#classic');
31
-
32
- btn?.addEventListener('click', () => {
33
- dropdown?.hide();
34
- });
35
- }
36
-
37
- function classicInverseExample() {
38
- const btn = document.querySelector('#classicInverseButton');
39
- const dropdown = document.querySelector('#classicInverse');
40
-
41
- btn?.addEventListener('click', () => {
42
- dropdown?.hide();
43
- });
44
- }
45
-
46
- function matchWidthExample() {
47
- const btn = document.querySelector('#matchWidthButton');
48
- const dropdown = document.querySelector('#matchWidth');
49
-
50
- btn?.addEventListener('click', () => {
51
- dropdown?.hide();
52
- });
53
- }
54
-
55
- function hideExample() {
56
- const btn = document.querySelector('#hideExampleBtn');
57
- const dropdown = document.querySelector('#hideExample');
58
-
59
- btn?.addEventListener('click', () => {
60
- dropdown?.hide();
61
- });
62
- }
63
-
64
- function showExample() {
65
- const triggerInput = document.querySelector('#showExampleTriggerInput');
66
- const dropdownElem = document.querySelector('#showMethodExample');
67
-
68
- triggerInput?.addEventListener('keydown', () => {
69
- dropdownElem?.show();
70
- });
71
- }
72
-
73
- function inDialogExample() {
74
- const openBtn = document.querySelector("#dropdown-dialog-opener");
75
- const closeBtn = document.querySelector("#in-dialog-dismiss-btn");
76
- const dropdown = document.querySelector("#in-dialog-dropdown");
77
-
78
- openBtn?.addEventListener("click", () => {
79
- const dialog = document.querySelector("#dropdown-dialog");
80
- dialog.open = true;
81
- });
82
-
83
- closeBtn?.addEventListener("click", () => {
84
- dropdown?.hide();
85
- });
86
- }
87
-
88
- /**
89
- * @license
90
- * Copyright 2017 Google LLC
91
- * SPDX-License-Identifier: BSD-3-Clause
92
- */
93
- const t$2=globalThis,i$5=t=>t,s$4=t$2.trustedTypes,e$5=s$4?s$4.createPolicy("lit-html",{createHTML:t=>t}):void 0,h$3="$lit$",o$7=`lit$${Math.random().toFixed(9).slice(2)}$`,n$5="?"+o$7,r$4=`<${n$5}>`,l$2=document,c$3=()=>l$2.createComment(""),a$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$3=Array.isArray,d$1=t=>u$3(t)||"function"==typeof t?.[Symbol.iterator],f$3="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$1=/-->/g,m$1=/>/g,p$2=RegExp(`>|${f$3}(?:([^\\s"'>=/]+)(${f$3}*=${f$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$1=/'/g,$=/"/g,y$2=/^(?:script|style|textarea|title)$/i,x$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b$1=x$1(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$2.createTreeWalker(l$2,129);function V(t,i){if(!u$3(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$5?e$5.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_$1:void 0!==u[1]?c=m$1:void 0!==u[2]?(y$2.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$2):void 0!==u[3]&&(c=p$2):c===p$2?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$2:'"'===u[3]?$:g$1):c===$||c===g$1?c=p$2:c===_$1||c===m$1?c=v:(c=p$2,n=void 0);const x=c===p$2&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r$4:d>=0?(e.push(a),s.slice(0,d)+h$3+s.slice(d)+o$7+x):s+o$7+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};let S$1 = class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h$3)){const i=v[a++],s=r.getAttribute(t).split(o$7),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z$1:H}),r.removeAttribute(t);}else t.startsWith(o$7)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$2.test(r.tagName)){const t=r.textContent.split(o$7),i=t.length-1;if(i>0){r.textContent=s$4?s$4.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c$3()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c$3());}}}else if(8===r.nodeType)if(r.data===n$5)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$7,t+1));)d.push({type:7,index:l}),t+=o$7.length-1;}l++;}}static createElement(t,i){const s=l$2.createElement("template");return s.innerHTML=t,s}};function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a$2(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$2).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$2,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M(this,t,i),a$2(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d$1(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a$2(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S$1.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S$1(t)),i}k(t){u$3(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c$3()),this.O(c$3()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$5(t).nextSibling;i$5(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M(this,t,i,0),o=!a$2(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$2(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}let z$1 = class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t);}}const B=t$2.litHtmlPolyfillSupport;B?.(S$1,k),(t$2.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k(i.insertBefore(c$3(),t),t,void 0,s??{});}return h._$AI(t),h};
94
-
95
- /**
96
- * @license
97
- * Copyright 2020 Google LLC
98
- * SPDX-License-Identifier: BSD-3-Clause
99
- */
100
- const a$1=Symbol.for(""),o$6=t=>{if(t?.r===a$1)return t?._$litStatic$},s$3=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1],t[0]),r:a$1}),l$1=new Map,n$4=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$6(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$2=n$4(b$1);
101
-
102
- /**
103
- * @license
104
- * Copyright 2017 Google LLC
105
- * SPDX-License-Identifier: BSD-3-Clause
106
- */
107
- const t$1={ATTRIBUTE:1,CHILD:2},e$4=t=>(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
108
-
109
- /**
110
- * @license
111
- * Copyright 2018 Google LLC
112
- * SPDX-License-Identifier: BSD-3-Clause
113
- */const e$3=e$4(class extends i$3{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
114
-
115
- /**
116
- * @license
117
- * Copyright 2020 Google LLC
118
- * SPDX-License-Identifier: BSD-3-Clause
119
- */const r$3=o=>void 0===o.strings;
120
-
121
- /**
122
- * @license
123
- * Copyright 2017 Google LLC
124
- * SPDX-License-Identifier: BSD-3-Clause
125
- */const s$2=(i,t)=>{const e=i._$AN;if(void 0===e)return false;for(const i of e)i._$AO?.(t,false),s$2(i,t);return true},o$5=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t;}while(0===e?.size)},r$2=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c$2(t);}};function h$2(i){ void 0!==this._$AN?(o$5(this),this._$AM=i,r$2(this)):this._$AM=i;}function n$3(i,t=false,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s$2(r[i],false),o$5(r[i]);else null!=r&&(s$2(r,false),o$5(r));else s$2(this,i);}const c$2=i=>{i.type==t$1.CHILD&&(i._$AP??=n$3,i._$AQ??=h$2);};let f$2 = class f extends i$3{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,e){super._$AT(i,t,e),r$2(this),this.isConnected=i._$AU;}_$AO(i,t=true){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s$2(this,i),o$5(this));}setValue(t){if(r$3(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}};
126
-
127
- /**
128
- * @license
129
- * Copyright 2020 Google LLC
130
- * SPDX-License-Identifier: BSD-3-Clause
131
- */const e$2=()=>new h$1;let h$1 = class h{};const o$4=new WeakMap,n$2=e$4(class extends f$2{render(i){return A}update(i,[s]){const e=s!==this.G;return e&&void 0!==this.G&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),A}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o$4.get(i);void 0===s&&(s=new WeakMap,o$4.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t);}else this.G.value=t;}get lt(){return "function"==typeof this.G?o$4.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
132
-
133
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
134
- // See LICENSE in the project root for license information.
135
-
136
- // ---------------------------------------------------------------------
137
-
138
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
139
-
140
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
141
-
142
- /* eslint-disable jsdoc/require-param */
143
-
144
- /**
145
- * This will register a new custom element with the browser.
146
- * @param {String} name - The name of the custom element.
147
- * @param {Object} componentClass - The class to register as a custom element.
148
- * @returns {void}
149
- */
150
- registerComponent(name, componentClass) {
151
- if (!customElements.get(name)) {
152
- customElements.define(name, class extends componentClass {});
153
- }
154
- }
155
-
156
- /**
157
- * Finds and returns the closest HTML Element based on a selector.
158
- * @returns {void}
159
- */
160
- closestElement(
161
- selector, // selector like in .closest()
162
- base = this, // extra functionality to skip a parent
163
- __Closest = (el, found = el && el.closest(selector)) =>
164
- !el || el === document || el === window
165
- ? null // standard .closest() returns null for non-found selectors also
166
- : found
167
- ? found // found a selector INside this element
168
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
169
- ) {
170
- return __Closest(base);
171
- }
172
- /* eslint-enable jsdoc/require-param */
173
-
174
- /**
175
- * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
176
- * @param {Object} elem - The element to check.
177
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
178
- * @returns {void}
179
- */
180
- handleComponentTagRename(elem, tagName) {
181
- const tag = tagName.toLowerCase();
182
- const elemTag = elem.tagName.toLowerCase();
183
-
184
- if (elemTag !== tag) {
185
- elem.setAttribute(tag, true);
186
- }
187
- }
188
-
189
- /**
190
- * Validates if an element is a specific Auro component.
191
- * @param {Object} elem - The element to validate.
192
- * @param {String} tagName - The name of the Auro component to check against.
193
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
194
- */
195
- elementMatch(elem, tagName) {
196
- const tag = tagName.toLowerCase();
197
- const elemTag = elem.tagName.toLowerCase();
198
-
199
- return elemTag === tag || elem.hasAttribute(tag);
200
- }
201
-
202
- /**
203
- * Gets the text content of a named slot.
204
- * @returns {String}
205
- * @private
206
- */
207
- getSlotText(elem, name) {
208
- const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
209
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
210
- const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
211
-
212
- return text || null;
213
- }
214
- };
215
-
216
- /**
217
- * Custom positioning reference element.
218
- * @see https://floating-ui.com/docs/virtual-elements
219
- */
220
-
221
- const sides = ['top', 'right', 'bottom', 'left'];
222
- const alignments = ['start', 'end'];
223
- const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
224
- const min = Math.min;
225
- const max = Math.max;
226
- const round = Math.round;
227
- const floor = Math.floor;
228
- const createCoords = v => ({
229
- x: v,
230
- y: v
231
- });
232
- const oppositeSideMap = {
233
- left: 'right',
234
- right: 'left',
235
- bottom: 'top',
236
- top: 'bottom'
237
- };
238
- const oppositeAlignmentMap = {
239
- start: 'end',
240
- end: 'start'
241
- };
242
- function clamp(start, value, end) {
243
- return max(start, min(value, end));
244
- }
245
- function evaluate(value, param) {
246
- return typeof value === 'function' ? value(param) : value;
247
- }
248
- function getSide(placement) {
249
- return placement.split('-')[0];
250
- }
251
- function getAlignment(placement) {
252
- return placement.split('-')[1];
253
- }
254
- function getOppositeAxis(axis) {
255
- return axis === 'x' ? 'y' : 'x';
256
- }
257
- function getAxisLength(axis) {
258
- return axis === 'y' ? 'height' : 'width';
259
- }
260
- const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
261
- function getSideAxis(placement) {
262
- return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
263
- }
264
- function getAlignmentAxis(placement) {
265
- return getOppositeAxis(getSideAxis(placement));
266
- }
267
- function getAlignmentSides(placement, rects, rtl) {
268
- if (rtl === void 0) {
269
- rtl = false;
270
- }
271
- const alignment = getAlignment(placement);
272
- const alignmentAxis = getAlignmentAxis(placement);
273
- const length = getAxisLength(alignmentAxis);
274
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
275
- if (rects.reference[length] > rects.floating[length]) {
276
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
277
- }
278
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
279
- }
280
- function getExpandedPlacements(placement) {
281
- const oppositePlacement = getOppositePlacement(placement);
282
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
283
- }
284
- function getOppositeAlignmentPlacement(placement) {
285
- return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
286
- }
287
- const lrPlacement = ['left', 'right'];
288
- const rlPlacement = ['right', 'left'];
289
- const tbPlacement = ['top', 'bottom'];
290
- const btPlacement = ['bottom', 'top'];
291
- function getSideList(side, isStart, rtl) {
292
- switch (side) {
293
- case 'top':
294
- case 'bottom':
295
- if (rtl) return isStart ? rlPlacement : lrPlacement;
296
- return isStart ? lrPlacement : rlPlacement;
297
- case 'left':
298
- case 'right':
299
- return isStart ? tbPlacement : btPlacement;
300
- default:
301
- return [];
302
- }
303
- }
304
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
305
- const alignment = getAlignment(placement);
306
- let list = getSideList(getSide(placement), direction === 'start', rtl);
307
- if (alignment) {
308
- list = list.map(side => side + "-" + alignment);
309
- if (flipAlignment) {
310
- list = list.concat(list.map(getOppositeAlignmentPlacement));
311
- }
312
- }
313
- return list;
314
- }
315
- function getOppositePlacement(placement) {
316
- return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
317
- }
318
- function expandPaddingObject(padding) {
319
- return {
320
- top: 0,
321
- right: 0,
322
- bottom: 0,
323
- left: 0,
324
- ...padding
325
- };
326
- }
327
- function getPaddingObject(padding) {
328
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
329
- top: padding,
330
- right: padding,
331
- bottom: padding,
332
- left: padding
333
- };
334
- }
335
- function rectToClientRect(rect) {
336
- const {
337
- x,
338
- y,
339
- width,
340
- height
341
- } = rect;
342
- return {
343
- width,
344
- height,
345
- top: y,
346
- left: x,
347
- right: x + width,
348
- bottom: y + height,
349
- x,
350
- y
351
- };
352
- }
353
-
354
- function computeCoordsFromPlacement(_ref, placement, rtl) {
355
- let {
356
- reference,
357
- floating
358
- } = _ref;
359
- const sideAxis = getSideAxis(placement);
360
- const alignmentAxis = getAlignmentAxis(placement);
361
- const alignLength = getAxisLength(alignmentAxis);
362
- const side = getSide(placement);
363
- const isVertical = sideAxis === 'y';
364
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
365
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
366
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
367
- let coords;
368
- switch (side) {
369
- case 'top':
370
- coords = {
371
- x: commonX,
372
- y: reference.y - floating.height
373
- };
374
- break;
375
- case 'bottom':
376
- coords = {
377
- x: commonX,
378
- y: reference.y + reference.height
379
- };
380
- break;
381
- case 'right':
382
- coords = {
383
- x: reference.x + reference.width,
384
- y: commonY
385
- };
386
- break;
387
- case 'left':
388
- coords = {
389
- x: reference.x - floating.width,
390
- y: commonY
391
- };
392
- break;
393
- default:
394
- coords = {
395
- x: reference.x,
396
- y: reference.y
397
- };
398
- }
399
- switch (getAlignment(placement)) {
400
- case 'start':
401
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
402
- break;
403
- case 'end':
404
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
405
- break;
406
- }
407
- return coords;
408
- }
409
-
410
- /**
411
- * Resolves with an object of overflow side offsets that determine how much the
412
- * element is overflowing a given clipping boundary on each side.
413
- * - positive = overflowing the boundary by that number of pixels
414
- * - negative = how many pixels left before it will overflow
415
- * - 0 = lies flush with the boundary
416
- * @see https://floating-ui.com/docs/detectOverflow
417
- */
418
- async function detectOverflow(state, options) {
419
- var _await$platform$isEle;
420
- if (options === void 0) {
421
- options = {};
422
- }
423
- const {
424
- x,
425
- y,
426
- platform,
427
- rects,
428
- elements,
429
- strategy
430
- } = state;
431
- const {
432
- boundary = 'clippingAncestors',
433
- rootBoundary = 'viewport',
434
- elementContext = 'floating',
435
- altBoundary = false,
436
- padding = 0
437
- } = evaluate(options, state);
438
- const paddingObject = getPaddingObject(padding);
439
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
440
- const element = elements[altBoundary ? altContext : elementContext];
441
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
442
- element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
443
- boundary,
444
- rootBoundary,
445
- strategy
446
- }));
447
- const rect = elementContext === 'floating' ? {
448
- x,
449
- y,
450
- width: rects.floating.width,
451
- height: rects.floating.height
452
- } : rects.reference;
453
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
454
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
455
- x: 1,
456
- y: 1
457
- } : {
458
- x: 1,
459
- y: 1
460
- };
461
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
462
- elements,
463
- rect,
464
- offsetParent,
465
- strategy
466
- }) : rect);
467
- return {
468
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
469
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
470
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
471
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
472
- };
473
- }
474
-
475
- /**
476
- * Computes the `x` and `y` coordinates that will place the floating element
477
- * next to a given reference element.
478
- *
479
- * This export does not have any `platform` interface logic. You will need to
480
- * write one for the platform you are using Floating UI with.
481
- */
482
- const computePosition$1 = async (reference, floating, config) => {
483
- const {
484
- placement = 'bottom',
485
- strategy = 'absolute',
486
- middleware = [],
487
- platform
488
- } = config;
489
- const validMiddleware = middleware.filter(Boolean);
490
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
491
- let rects = await platform.getElementRects({
492
- reference,
493
- floating,
494
- strategy
495
- });
496
- let {
497
- x,
498
- y
499
- } = computeCoordsFromPlacement(rects, placement, rtl);
500
- let statefulPlacement = placement;
501
- let middlewareData = {};
502
- let resetCount = 0;
503
- for (let i = 0; i < validMiddleware.length; i++) {
504
- var _platform$detectOverf;
505
- const {
506
- name,
507
- fn
508
- } = validMiddleware[i];
509
- const {
510
- x: nextX,
511
- y: nextY,
512
- data,
513
- reset
514
- } = await fn({
515
- x,
516
- y,
517
- initialPlacement: placement,
518
- placement: statefulPlacement,
519
- strategy,
520
- middlewareData,
521
- rects,
522
- platform: {
523
- ...platform,
524
- detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
525
- },
526
- elements: {
527
- reference,
528
- floating
529
- }
530
- });
531
- x = nextX != null ? nextX : x;
532
- y = nextY != null ? nextY : y;
533
- middlewareData = {
534
- ...middlewareData,
535
- [name]: {
536
- ...middlewareData[name],
537
- ...data
538
- }
539
- };
540
- if (reset && resetCount <= 50) {
541
- resetCount++;
542
- if (typeof reset === 'object') {
543
- if (reset.placement) {
544
- statefulPlacement = reset.placement;
545
- }
546
- if (reset.rects) {
547
- rects = reset.rects === true ? await platform.getElementRects({
548
- reference,
549
- floating,
550
- strategy
551
- }) : reset.rects;
552
- }
553
- ({
554
- x,
555
- y
556
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
557
- }
558
- i = -1;
559
- }
560
- }
561
- return {
562
- x,
563
- y,
564
- placement: statefulPlacement,
565
- strategy,
566
- middlewareData
567
- };
568
- };
569
-
570
- function getPlacementList(alignment, autoAlignment, allowedPlacements) {
571
- const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
572
- return allowedPlacementsSortedByAlignment.filter(placement => {
573
- if (alignment) {
574
- return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
575
- }
576
- return true;
577
- });
578
- }
579
- /**
580
- * Optimizes the visibility of the floating element by choosing the placement
581
- * that has the most space available automatically, without needing to specify a
582
- * preferred placement. Alternative to `flip`.
583
- * @see https://floating-ui.com/docs/autoPlacement
584
- */
585
- const autoPlacement$1 = function (options) {
586
- if (options === void 0) {
587
- options = {};
588
- }
589
- return {
590
- name: 'autoPlacement',
591
- options,
592
- async fn(state) {
593
- var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
594
- const {
595
- rects,
596
- middlewareData,
597
- placement,
598
- platform,
599
- elements
600
- } = state;
601
- const {
602
- crossAxis = false,
603
- alignment,
604
- allowedPlacements = placements,
605
- autoAlignment = true,
606
- ...detectOverflowOptions
607
- } = evaluate(options, state);
608
- const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
609
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
610
- const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
611
- const currentPlacement = placements$1[currentIndex];
612
- if (currentPlacement == null) {
613
- return {};
614
- }
615
- const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
616
-
617
- // Make `computeCoords` start from the right place.
618
- if (placement !== currentPlacement) {
619
- return {
620
- reset: {
621
- placement: placements$1[0]
622
- }
623
- };
624
- }
625
- const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
626
- const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
627
- placement: currentPlacement,
628
- overflows: currentOverflows
629
- }];
630
- const nextPlacement = placements$1[currentIndex + 1];
631
-
632
- // There are more placements to check.
633
- if (nextPlacement) {
634
- return {
635
- data: {
636
- index: currentIndex + 1,
637
- overflows: allOverflows
638
- },
639
- reset: {
640
- placement: nextPlacement
641
- }
642
- };
643
- }
644
- const placementsSortedByMostSpace = allOverflows.map(d => {
645
- const alignment = getAlignment(d.placement);
646
- return [d.placement, alignment && crossAxis ?
647
- // Check along the mainAxis and main crossAxis side.
648
- d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
649
- // Check only the mainAxis.
650
- d.overflows[0], d.overflows];
651
- }).sort((a, b) => a[1] - b[1]);
652
- const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
653
- // Aligned placements should not check their opposite crossAxis
654
- // side.
655
- getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
656
- const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
657
- if (resetPlacement !== placement) {
658
- return {
659
- data: {
660
- index: currentIndex + 1,
661
- overflows: allOverflows
662
- },
663
- reset: {
664
- placement: resetPlacement
665
- }
666
- };
667
- }
668
- return {};
669
- }
670
- };
671
- };
672
-
673
- /**
674
- * Optimizes the visibility of the floating element by flipping the `placement`
675
- * in order to keep it in view when the preferred placement(s) will overflow the
676
- * clipping boundary. Alternative to `autoPlacement`.
677
- * @see https://floating-ui.com/docs/flip
678
- */
679
- const flip$1 = function (options) {
680
- if (options === void 0) {
681
- options = {};
682
- }
683
- return {
684
- name: 'flip',
685
- options,
686
- async fn(state) {
687
- var _middlewareData$arrow, _middlewareData$flip;
688
- const {
689
- placement,
690
- middlewareData,
691
- rects,
692
- initialPlacement,
693
- platform,
694
- elements
695
- } = state;
696
- const {
697
- mainAxis: checkMainAxis = true,
698
- crossAxis: checkCrossAxis = true,
699
- fallbackPlacements: specifiedFallbackPlacements,
700
- fallbackStrategy = 'bestFit',
701
- fallbackAxisSideDirection = 'none',
702
- flipAlignment = true,
703
- ...detectOverflowOptions
704
- } = evaluate(options, state);
705
-
706
- // If a reset by the arrow was caused due to an alignment offset being
707
- // added, we should skip any logic now since `flip()` has already done its
708
- // work.
709
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
710
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
711
- return {};
712
- }
713
- const side = getSide(placement);
714
- const initialSideAxis = getSideAxis(initialPlacement);
715
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
716
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
717
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
718
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
719
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
720
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
721
- }
722
- const placements = [initialPlacement, ...fallbackPlacements];
723
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
724
- const overflows = [];
725
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
726
- if (checkMainAxis) {
727
- overflows.push(overflow[side]);
728
- }
729
- if (checkCrossAxis) {
730
- const sides = getAlignmentSides(placement, rects, rtl);
731
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
732
- }
733
- overflowsData = [...overflowsData, {
734
- placement,
735
- overflows
736
- }];
737
-
738
- // One or more sides is overflowing.
739
- if (!overflows.every(side => side <= 0)) {
740
- var _middlewareData$flip2, _overflowsData$filter;
741
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
742
- const nextPlacement = placements[nextIndex];
743
- if (nextPlacement) {
744
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
745
- if (!ignoreCrossAxisOverflow ||
746
- // We leave the current main axis only if every placement on that axis
747
- // overflows the main axis.
748
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
749
- // Try next placement and re-run the lifecycle.
750
- return {
751
- data: {
752
- index: nextIndex,
753
- overflows: overflowsData
754
- },
755
- reset: {
756
- placement: nextPlacement
757
- }
758
- };
759
- }
760
- }
761
-
762
- // First, find the candidates that fit on the mainAxis side of overflow,
763
- // then find the placement that fits the best on the main crossAxis side.
764
- let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
765
-
766
- // Otherwise fallback.
767
- if (!resetPlacement) {
768
- switch (fallbackStrategy) {
769
- case 'bestFit':
770
- {
771
- var _overflowsData$filter2;
772
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
773
- if (hasFallbackAxisSideDirection) {
774
- const currentSideAxis = getSideAxis(d.placement);
775
- return currentSideAxis === initialSideAxis ||
776
- // Create a bias to the `y` side axis due to horizontal
777
- // reading directions favoring greater width.
778
- currentSideAxis === 'y';
779
- }
780
- return true;
781
- }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
782
- if (placement) {
783
- resetPlacement = placement;
784
- }
785
- break;
786
- }
787
- case 'initialPlacement':
788
- resetPlacement = initialPlacement;
789
- break;
790
- }
791
- }
792
- if (placement !== resetPlacement) {
793
- return {
794
- reset: {
795
- placement: resetPlacement
796
- }
797
- };
798
- }
799
- }
800
- return {};
801
- }
802
- };
803
- };
804
-
805
- const originSides = /*#__PURE__*/new Set(['left', 'top']);
806
-
807
- // For type backwards-compatibility, the `OffsetOptions` type was also
808
- // Derivable.
809
-
810
- async function convertValueToCoords(state, options) {
811
- const {
812
- placement,
813
- platform,
814
- elements
815
- } = state;
816
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
817
- const side = getSide(placement);
818
- const alignment = getAlignment(placement);
819
- const isVertical = getSideAxis(placement) === 'y';
820
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
821
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
822
- const rawValue = evaluate(options, state);
823
-
824
- // eslint-disable-next-line prefer-const
825
- let {
826
- mainAxis,
827
- crossAxis,
828
- alignmentAxis
829
- } = typeof rawValue === 'number' ? {
830
- mainAxis: rawValue,
831
- crossAxis: 0,
832
- alignmentAxis: null
833
- } : {
834
- mainAxis: rawValue.mainAxis || 0,
835
- crossAxis: rawValue.crossAxis || 0,
836
- alignmentAxis: rawValue.alignmentAxis
837
- };
838
- if (alignment && typeof alignmentAxis === 'number') {
839
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
840
- }
841
- return isVertical ? {
842
- x: crossAxis * crossAxisMulti,
843
- y: mainAxis * mainAxisMulti
844
- } : {
845
- x: mainAxis * mainAxisMulti,
846
- y: crossAxis * crossAxisMulti
847
- };
848
- }
849
-
850
- /**
851
- * Modifies the placement by translating the floating element along the
852
- * specified axes.
853
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
854
- * object may be passed.
855
- * @see https://floating-ui.com/docs/offset
856
- */
857
- const offset$1 = function (options) {
858
- if (options === void 0) {
859
- options = 0;
860
- }
861
- return {
862
- name: 'offset',
863
- options,
864
- async fn(state) {
865
- var _middlewareData$offse, _middlewareData$arrow;
866
- const {
867
- x,
868
- y,
869
- placement,
870
- middlewareData
871
- } = state;
872
- const diffCoords = await convertValueToCoords(state, options);
873
-
874
- // If the placement is the same and the arrow caused an alignment offset
875
- // then we don't need to change the positioning coordinates.
876
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
877
- return {};
878
- }
879
- return {
880
- x: x + diffCoords.x,
881
- y: y + diffCoords.y,
882
- data: {
883
- ...diffCoords,
884
- placement
885
- }
886
- };
887
- }
888
- };
889
- };
890
-
891
- /**
892
- * Optimizes the visibility of the floating element by shifting it in order to
893
- * keep it in view when it will overflow the clipping boundary.
894
- * @see https://floating-ui.com/docs/shift
895
- */
896
- const shift$1 = function (options) {
897
- if (options === void 0) {
898
- options = {};
899
- }
900
- return {
901
- name: 'shift',
902
- options,
903
- async fn(state) {
904
- const {
905
- x,
906
- y,
907
- placement,
908
- platform
909
- } = state;
910
- const {
911
- mainAxis: checkMainAxis = true,
912
- crossAxis: checkCrossAxis = false,
913
- limiter = {
914
- fn: _ref => {
915
- let {
916
- x,
917
- y
918
- } = _ref;
919
- return {
920
- x,
921
- y
922
- };
923
- }
924
- },
925
- ...detectOverflowOptions
926
- } = evaluate(options, state);
927
- const coords = {
928
- x,
929
- y
930
- };
931
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
932
- const crossAxis = getSideAxis(getSide(placement));
933
- const mainAxis = getOppositeAxis(crossAxis);
934
- let mainAxisCoord = coords[mainAxis];
935
- let crossAxisCoord = coords[crossAxis];
936
- if (checkMainAxis) {
937
- const minSide = mainAxis === 'y' ? 'top' : 'left';
938
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
939
- const min = mainAxisCoord + overflow[minSide];
940
- const max = mainAxisCoord - overflow[maxSide];
941
- mainAxisCoord = clamp(min, mainAxisCoord, max);
942
- }
943
- if (checkCrossAxis) {
944
- const minSide = crossAxis === 'y' ? 'top' : 'left';
945
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
946
- const min = crossAxisCoord + overflow[minSide];
947
- const max = crossAxisCoord - overflow[maxSide];
948
- crossAxisCoord = clamp(min, crossAxisCoord, max);
949
- }
950
- const limitedCoords = limiter.fn({
951
- ...state,
952
- [mainAxis]: mainAxisCoord,
953
- [crossAxis]: crossAxisCoord
954
- });
955
- return {
956
- ...limitedCoords,
957
- data: {
958
- x: limitedCoords.x - x,
959
- y: limitedCoords.y - y,
960
- enabled: {
961
- [mainAxis]: checkMainAxis,
962
- [crossAxis]: checkCrossAxis
963
- }
964
- }
965
- };
966
- }
967
- };
968
- };
969
-
970
- function hasWindow() {
971
- return typeof window !== 'undefined';
972
- }
973
- function getNodeName(node) {
974
- if (isNode(node)) {
975
- return (node.nodeName || '').toLowerCase();
976
- }
977
- // Mocked nodes in testing environments may not be instances of Node. By
978
- // returning `#document` an infinite loop won't occur.
979
- // https://github.com/floating-ui/floating-ui/issues/2317
980
- return '#document';
981
- }
982
- function getWindow(node) {
983
- var _node$ownerDocument;
984
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
985
- }
986
- function getDocumentElement(node) {
987
- var _ref;
988
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
989
- }
990
- function isNode(value) {
991
- if (!hasWindow()) {
992
- return false;
993
- }
994
- return value instanceof Node || value instanceof getWindow(value).Node;
995
- }
996
- function isElement(value) {
997
- if (!hasWindow()) {
998
- return false;
999
- }
1000
- return value instanceof Element || value instanceof getWindow(value).Element;
1001
- }
1002
- function isHTMLElement(value) {
1003
- if (!hasWindow()) {
1004
- return false;
1005
- }
1006
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
1007
- }
1008
- function isShadowRoot(value) {
1009
- if (!hasWindow() || typeof ShadowRoot === 'undefined') {
1010
- return false;
1011
- }
1012
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
1013
- }
1014
- const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
1015
- function isOverflowElement(element) {
1016
- const {
1017
- overflow,
1018
- overflowX,
1019
- overflowY,
1020
- display
1021
- } = getComputedStyle$1(element);
1022
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
1023
- }
1024
- const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
1025
- function isTableElement(element) {
1026
- return tableElements.has(getNodeName(element));
1027
- }
1028
- const topLayerSelectors = [':popover-open', ':modal'];
1029
- function isTopLayer(element) {
1030
- return topLayerSelectors.some(selector => {
1031
- try {
1032
- return element.matches(selector);
1033
- } catch (_e) {
1034
- return false;
1035
- }
1036
- });
1037
- }
1038
- const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
1039
- const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
1040
- const containValues = ['paint', 'layout', 'strict', 'content'];
1041
- function isContainingBlock(elementOrCss) {
1042
- const webkit = isWebKit();
1043
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
1044
-
1045
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1046
- // https://drafts.csswg.org/css-transforms-2/#individual-transforms
1047
- return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
1048
- }
1049
- function getContainingBlock(element) {
1050
- let currentNode = getParentNode(element);
1051
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
1052
- if (isContainingBlock(currentNode)) {
1053
- return currentNode;
1054
- } else if (isTopLayer(currentNode)) {
1055
- return null;
1056
- }
1057
- currentNode = getParentNode(currentNode);
1058
- }
1059
- return null;
1060
- }
1061
- function isWebKit() {
1062
- if (typeof CSS === 'undefined' || !CSS.supports) return false;
1063
- return CSS.supports('-webkit-backdrop-filter', 'none');
1064
- }
1065
- const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
1066
- function isLastTraversableNode(node) {
1067
- return lastTraversableNodeNames.has(getNodeName(node));
1068
- }
1069
- function getComputedStyle$1(element) {
1070
- return getWindow(element).getComputedStyle(element);
1071
- }
1072
- function getNodeScroll(element) {
1073
- if (isElement(element)) {
1074
- return {
1075
- scrollLeft: element.scrollLeft,
1076
- scrollTop: element.scrollTop
1077
- };
1078
- }
1079
- return {
1080
- scrollLeft: element.scrollX,
1081
- scrollTop: element.scrollY
1082
- };
1083
- }
1084
- function getParentNode(node) {
1085
- if (getNodeName(node) === 'html') {
1086
- return node;
1087
- }
1088
- const result =
1089
- // Step into the shadow DOM of the parent of a slotted node.
1090
- node.assignedSlot ||
1091
- // DOM Element detected.
1092
- node.parentNode ||
1093
- // ShadowRoot detected.
1094
- isShadowRoot(node) && node.host ||
1095
- // Fallback.
1096
- getDocumentElement(node);
1097
- return isShadowRoot(result) ? result.host : result;
1098
- }
1099
- function getNearestOverflowAncestor(node) {
1100
- const parentNode = getParentNode(node);
1101
- if (isLastTraversableNode(parentNode)) {
1102
- return node.ownerDocument ? node.ownerDocument.body : node.body;
1103
- }
1104
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
1105
- return parentNode;
1106
- }
1107
- return getNearestOverflowAncestor(parentNode);
1108
- }
1109
- function getOverflowAncestors(node, list, traverseIframes) {
1110
- var _node$ownerDocument2;
1111
- if (list === void 0) {
1112
- list = [];
1113
- }
1114
- if (traverseIframes === void 0) {
1115
- traverseIframes = true;
1116
- }
1117
- const scrollableAncestor = getNearestOverflowAncestor(node);
1118
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
1119
- const win = getWindow(scrollableAncestor);
1120
- if (isBody) {
1121
- const frameElement = getFrameElement(win);
1122
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
1123
- }
1124
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
1125
- }
1126
- function getFrameElement(win) {
1127
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
1128
- }
1129
-
1130
- function getCssDimensions(element) {
1131
- const css = getComputedStyle$1(element);
1132
- // In testing environments, the `width` and `height` properties are empty
1133
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
1134
- let width = parseFloat(css.width) || 0;
1135
- let height = parseFloat(css.height) || 0;
1136
- const hasOffset = isHTMLElement(element);
1137
- const offsetWidth = hasOffset ? element.offsetWidth : width;
1138
- const offsetHeight = hasOffset ? element.offsetHeight : height;
1139
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
1140
- if (shouldFallback) {
1141
- width = offsetWidth;
1142
- height = offsetHeight;
1143
- }
1144
- return {
1145
- width,
1146
- height,
1147
- $: shouldFallback
1148
- };
1149
- }
1150
-
1151
- function unwrapElement(element) {
1152
- return !isElement(element) ? element.contextElement : element;
1153
- }
1154
-
1155
- function getScale(element) {
1156
- const domElement = unwrapElement(element);
1157
- if (!isHTMLElement(domElement)) {
1158
- return createCoords(1);
1159
- }
1160
- const rect = domElement.getBoundingClientRect();
1161
- const {
1162
- width,
1163
- height,
1164
- $
1165
- } = getCssDimensions(domElement);
1166
- let x = ($ ? round(rect.width) : rect.width) / width;
1167
- let y = ($ ? round(rect.height) : rect.height) / height;
1168
-
1169
- // 0, NaN, or Infinity should always fallback to 1.
1170
-
1171
- if (!x || !Number.isFinite(x)) {
1172
- x = 1;
1173
- }
1174
- if (!y || !Number.isFinite(y)) {
1175
- y = 1;
1176
- }
1177
- return {
1178
- x,
1179
- y
1180
- };
1181
- }
1182
-
1183
- const noOffsets = /*#__PURE__*/createCoords(0);
1184
- function getVisualOffsets(element) {
1185
- const win = getWindow(element);
1186
- if (!isWebKit() || !win.visualViewport) {
1187
- return noOffsets;
1188
- }
1189
- return {
1190
- x: win.visualViewport.offsetLeft,
1191
- y: win.visualViewport.offsetTop
1192
- };
1193
- }
1194
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
1195
- if (isFixed === void 0) {
1196
- isFixed = false;
1197
- }
1198
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
1199
- return false;
1200
- }
1201
- return isFixed;
1202
- }
1203
-
1204
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
1205
- if (includeScale === void 0) {
1206
- includeScale = false;
1207
- }
1208
- if (isFixedStrategy === void 0) {
1209
- isFixedStrategy = false;
1210
- }
1211
- const clientRect = element.getBoundingClientRect();
1212
- const domElement = unwrapElement(element);
1213
- let scale = createCoords(1);
1214
- if (includeScale) {
1215
- if (offsetParent) {
1216
- if (isElement(offsetParent)) {
1217
- scale = getScale(offsetParent);
1218
- }
1219
- } else {
1220
- scale = getScale(element);
1221
- }
1222
- }
1223
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
1224
- let x = (clientRect.left + visualOffsets.x) / scale.x;
1225
- let y = (clientRect.top + visualOffsets.y) / scale.y;
1226
- let width = clientRect.width / scale.x;
1227
- let height = clientRect.height / scale.y;
1228
- if (domElement) {
1229
- const win = getWindow(domElement);
1230
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
1231
- let currentWin = win;
1232
- let currentIFrame = getFrameElement(currentWin);
1233
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
1234
- const iframeScale = getScale(currentIFrame);
1235
- const iframeRect = currentIFrame.getBoundingClientRect();
1236
- const css = getComputedStyle$1(currentIFrame);
1237
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
1238
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
1239
- x *= iframeScale.x;
1240
- y *= iframeScale.y;
1241
- width *= iframeScale.x;
1242
- height *= iframeScale.y;
1243
- x += left;
1244
- y += top;
1245
- currentWin = getWindow(currentIFrame);
1246
- currentIFrame = getFrameElement(currentWin);
1247
- }
1248
- }
1249
- return rectToClientRect({
1250
- width,
1251
- height,
1252
- x,
1253
- y
1254
- });
1255
- }
1256
-
1257
- // If <html> has a CSS width greater than the viewport, then this will be
1258
- // incorrect for RTL.
1259
- function getWindowScrollBarX(element, rect) {
1260
- const leftScroll = getNodeScroll(element).scrollLeft;
1261
- if (!rect) {
1262
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
1263
- }
1264
- return rect.left + leftScroll;
1265
- }
1266
-
1267
- function getHTMLOffset(documentElement, scroll) {
1268
- const htmlRect = documentElement.getBoundingClientRect();
1269
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
1270
- const y = htmlRect.top + scroll.scrollTop;
1271
- return {
1272
- x,
1273
- y
1274
- };
1275
- }
1276
-
1277
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1278
- let {
1279
- elements,
1280
- rect,
1281
- offsetParent,
1282
- strategy
1283
- } = _ref;
1284
- const isFixed = strategy === 'fixed';
1285
- const documentElement = getDocumentElement(offsetParent);
1286
- const topLayer = elements ? isTopLayer(elements.floating) : false;
1287
- if (offsetParent === documentElement || topLayer && isFixed) {
1288
- return rect;
1289
- }
1290
- let scroll = {
1291
- scrollLeft: 0,
1292
- scrollTop: 0
1293
- };
1294
- let scale = createCoords(1);
1295
- const offsets = createCoords(0);
1296
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1297
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1298
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1299
- scroll = getNodeScroll(offsetParent);
1300
- }
1301
- if (isHTMLElement(offsetParent)) {
1302
- const offsetRect = getBoundingClientRect(offsetParent);
1303
- scale = getScale(offsetParent);
1304
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1305
- offsets.y = offsetRect.y + offsetParent.clientTop;
1306
- }
1307
- }
1308
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1309
- return {
1310
- width: rect.width * scale.x,
1311
- height: rect.height * scale.y,
1312
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
1313
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
1314
- };
1315
- }
1316
-
1317
- function getClientRects(element) {
1318
- return Array.from(element.getClientRects());
1319
- }
1320
-
1321
- // Gets the entire size of the scrollable document area, even extending outside
1322
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
1323
- function getDocumentRect(element) {
1324
- const html = getDocumentElement(element);
1325
- const scroll = getNodeScroll(element);
1326
- const body = element.ownerDocument.body;
1327
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
1328
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
1329
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
1330
- const y = -scroll.scrollTop;
1331
- if (getComputedStyle$1(body).direction === 'rtl') {
1332
- x += max(html.clientWidth, body.clientWidth) - width;
1333
- }
1334
- return {
1335
- width,
1336
- height,
1337
- x,
1338
- y
1339
- };
1340
- }
1341
-
1342
- // Safety check: ensure the scrollbar space is reasonable in case this
1343
- // calculation is affected by unusual styles.
1344
- // Most scrollbars leave 15-18px of space.
1345
- const SCROLLBAR_MAX = 25;
1346
- function getViewportRect(element, strategy) {
1347
- const win = getWindow(element);
1348
- const html = getDocumentElement(element);
1349
- const visualViewport = win.visualViewport;
1350
- let width = html.clientWidth;
1351
- let height = html.clientHeight;
1352
- let x = 0;
1353
- let y = 0;
1354
- if (visualViewport) {
1355
- width = visualViewport.width;
1356
- height = visualViewport.height;
1357
- const visualViewportBased = isWebKit();
1358
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
1359
- x = visualViewport.offsetLeft;
1360
- y = visualViewport.offsetTop;
1361
- }
1362
- }
1363
- const windowScrollbarX = getWindowScrollBarX(html);
1364
- // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
1365
- // visual width of the <html> but this is not considered in the size
1366
- // of `html.clientWidth`.
1367
- if (windowScrollbarX <= 0) {
1368
- const doc = html.ownerDocument;
1369
- const body = doc.body;
1370
- const bodyStyles = getComputedStyle(body);
1371
- const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
1372
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
1373
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
1374
- width -= clippingStableScrollbarWidth;
1375
- }
1376
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
1377
- // If the <body> scrollbar is on the left, the width needs to be extended
1378
- // by the scrollbar amount so there isn't extra space on the right.
1379
- width += windowScrollbarX;
1380
- }
1381
- return {
1382
- width,
1383
- height,
1384
- x,
1385
- y
1386
- };
1387
- }
1388
-
1389
- const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
1390
- // Returns the inner client rect, subtracting scrollbars if present.
1391
- function getInnerBoundingClientRect(element, strategy) {
1392
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
1393
- const top = clientRect.top + element.clientTop;
1394
- const left = clientRect.left + element.clientLeft;
1395
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
1396
- const width = element.clientWidth * scale.x;
1397
- const height = element.clientHeight * scale.y;
1398
- const x = left * scale.x;
1399
- const y = top * scale.y;
1400
- return {
1401
- width,
1402
- height,
1403
- x,
1404
- y
1405
- };
1406
- }
1407
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
1408
- let rect;
1409
- if (clippingAncestor === 'viewport') {
1410
- rect = getViewportRect(element, strategy);
1411
- } else if (clippingAncestor === 'document') {
1412
- rect = getDocumentRect(getDocumentElement(element));
1413
- } else if (isElement(clippingAncestor)) {
1414
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
1415
- } else {
1416
- const visualOffsets = getVisualOffsets(element);
1417
- rect = {
1418
- x: clippingAncestor.x - visualOffsets.x,
1419
- y: clippingAncestor.y - visualOffsets.y,
1420
- width: clippingAncestor.width,
1421
- height: clippingAncestor.height
1422
- };
1423
- }
1424
- return rectToClientRect(rect);
1425
- }
1426
- function hasFixedPositionAncestor(element, stopNode) {
1427
- const parentNode = getParentNode(element);
1428
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
1429
- return false;
1430
- }
1431
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
1432
- }
1433
-
1434
- // A "clipping ancestor" is an `overflow` element with the characteristic of
1435
- // clipping (or hiding) child elements. This returns all clipping ancestors
1436
- // of the given element up the tree.
1437
- function getClippingElementAncestors(element, cache) {
1438
- const cachedResult = cache.get(element);
1439
- if (cachedResult) {
1440
- return cachedResult;
1441
- }
1442
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
1443
- let currentContainingBlockComputedStyle = null;
1444
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
1445
- let currentNode = elementIsFixed ? getParentNode(element) : element;
1446
-
1447
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1448
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
1449
- const computedStyle = getComputedStyle$1(currentNode);
1450
- const currentNodeIsContaining = isContainingBlock(currentNode);
1451
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
1452
- currentContainingBlockComputedStyle = null;
1453
- }
1454
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1455
- if (shouldDropCurrentNode) {
1456
- // Drop non-containing blocks.
1457
- result = result.filter(ancestor => ancestor !== currentNode);
1458
- } else {
1459
- // Record last containing block for next iteration.
1460
- currentContainingBlockComputedStyle = computedStyle;
1461
- }
1462
- currentNode = getParentNode(currentNode);
1463
- }
1464
- cache.set(element, result);
1465
- return result;
1466
- }
1467
-
1468
- // Gets the maximum area that the element is visible in due to any number of
1469
- // clipping ancestors.
1470
- function getClippingRect(_ref) {
1471
- let {
1472
- element,
1473
- boundary,
1474
- rootBoundary,
1475
- strategy
1476
- } = _ref;
1477
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1478
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1479
- const firstClippingAncestor = clippingAncestors[0];
1480
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
1481
- const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
1482
- accRect.top = max(rect.top, accRect.top);
1483
- accRect.right = min(rect.right, accRect.right);
1484
- accRect.bottom = min(rect.bottom, accRect.bottom);
1485
- accRect.left = max(rect.left, accRect.left);
1486
- return accRect;
1487
- }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
1488
- return {
1489
- width: clippingRect.right - clippingRect.left,
1490
- height: clippingRect.bottom - clippingRect.top,
1491
- x: clippingRect.left,
1492
- y: clippingRect.top
1493
- };
1494
- }
1495
-
1496
- function getDimensions(element) {
1497
- const {
1498
- width,
1499
- height
1500
- } = getCssDimensions(element);
1501
- return {
1502
- width,
1503
- height
1504
- };
1505
- }
1506
-
1507
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1508
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1509
- const documentElement = getDocumentElement(offsetParent);
1510
- const isFixed = strategy === 'fixed';
1511
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
1512
- let scroll = {
1513
- scrollLeft: 0,
1514
- scrollTop: 0
1515
- };
1516
- const offsets = createCoords(0);
1517
-
1518
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1519
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1520
- function setLeftRTLScrollbarOffset() {
1521
- offsets.x = getWindowScrollBarX(documentElement);
1522
- }
1523
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1524
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1525
- scroll = getNodeScroll(offsetParent);
1526
- }
1527
- if (isOffsetParentAnElement) {
1528
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
1529
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1530
- offsets.y = offsetRect.y + offsetParent.clientTop;
1531
- } else if (documentElement) {
1532
- setLeftRTLScrollbarOffset();
1533
- }
1534
- }
1535
- if (isFixed && !isOffsetParentAnElement && documentElement) {
1536
- setLeftRTLScrollbarOffset();
1537
- }
1538
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1539
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1540
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1541
- return {
1542
- x,
1543
- y,
1544
- width: rect.width,
1545
- height: rect.height
1546
- };
1547
- }
1548
-
1549
- function isStaticPositioned(element) {
1550
- return getComputedStyle$1(element).position === 'static';
1551
- }
1552
-
1553
- function getTrueOffsetParent(element, polyfill) {
1554
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
1555
- return null;
1556
- }
1557
- if (polyfill) {
1558
- return polyfill(element);
1559
- }
1560
- let rawOffsetParent = element.offsetParent;
1561
-
1562
- // Firefox returns the <html> element as the offsetParent if it's non-static,
1563
- // while Chrome and Safari return the <body> element. The <body> element must
1564
- // be used to perform the correct calculations even if the <html> element is
1565
- // non-static.
1566
- if (getDocumentElement(element) === rawOffsetParent) {
1567
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
1568
- }
1569
- return rawOffsetParent;
1570
- }
1571
-
1572
- // Gets the closest ancestor positioned element. Handles some edge cases,
1573
- // such as table ancestors and cross browser bugs.
1574
- function getOffsetParent(element, polyfill) {
1575
- const win = getWindow(element);
1576
- if (isTopLayer(element)) {
1577
- return win;
1578
- }
1579
- if (!isHTMLElement(element)) {
1580
- let svgOffsetParent = getParentNode(element);
1581
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1582
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1583
- return svgOffsetParent;
1584
- }
1585
- svgOffsetParent = getParentNode(svgOffsetParent);
1586
- }
1587
- return win;
1588
- }
1589
- let offsetParent = getTrueOffsetParent(element, polyfill);
1590
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1591
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1592
- }
1593
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1594
- return win;
1595
- }
1596
- return offsetParent || getContainingBlock(element) || win;
1597
- }
1598
-
1599
- const getElementRects = async function (data) {
1600
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1601
- const getDimensionsFn = this.getDimensions;
1602
- const floatingDimensions = await getDimensionsFn(data.floating);
1603
- return {
1604
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1605
- floating: {
1606
- x: 0,
1607
- y: 0,
1608
- width: floatingDimensions.width,
1609
- height: floatingDimensions.height
1610
- }
1611
- };
1612
- };
1613
-
1614
- function isRTL(element) {
1615
- return getComputedStyle$1(element).direction === 'rtl';
1616
- }
1617
-
1618
- const platform = {
1619
- convertOffsetParentRelativeRectToViewportRelativeRect,
1620
- getDocumentElement,
1621
- getClippingRect,
1622
- getOffsetParent,
1623
- getElementRects,
1624
- getClientRects,
1625
- getDimensions,
1626
- getScale,
1627
- isElement,
1628
- isRTL
1629
- };
1630
-
1631
- function rectsAreEqual(a, b) {
1632
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
1633
- }
1634
-
1635
- // https://samthor.au/2021/observing-dom/
1636
- function observeMove(element, onMove) {
1637
- let io = null;
1638
- let timeoutId;
1639
- const root = getDocumentElement(element);
1640
- function cleanup() {
1641
- var _io;
1642
- clearTimeout(timeoutId);
1643
- (_io = io) == null || _io.disconnect();
1644
- io = null;
1645
- }
1646
- function refresh(skip, threshold) {
1647
- if (skip === void 0) {
1648
- skip = false;
1649
- }
1650
- if (threshold === void 0) {
1651
- threshold = 1;
1652
- }
1653
- cleanup();
1654
- const elementRectForRootMargin = element.getBoundingClientRect();
1655
- const {
1656
- left,
1657
- top,
1658
- width,
1659
- height
1660
- } = elementRectForRootMargin;
1661
- if (!skip) {
1662
- onMove();
1663
- }
1664
- if (!width || !height) {
1665
- return;
1666
- }
1667
- const insetTop = floor(top);
1668
- const insetRight = floor(root.clientWidth - (left + width));
1669
- const insetBottom = floor(root.clientHeight - (top + height));
1670
- const insetLeft = floor(left);
1671
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
1672
- const options = {
1673
- rootMargin,
1674
- threshold: max(0, min(1, threshold)) || 1
1675
- };
1676
- let isFirstUpdate = true;
1677
- function handleObserve(entries) {
1678
- const ratio = entries[0].intersectionRatio;
1679
- if (ratio !== threshold) {
1680
- if (!isFirstUpdate) {
1681
- return refresh();
1682
- }
1683
- if (!ratio) {
1684
- // If the reference is clipped, the ratio is 0. Throttle the refresh
1685
- // to prevent an infinite loop of updates.
1686
- timeoutId = setTimeout(() => {
1687
- refresh(false, 1e-7);
1688
- }, 1000);
1689
- } else {
1690
- refresh(false, ratio);
1691
- }
1692
- }
1693
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
1694
- // It's possible that even though the ratio is reported as 1, the
1695
- // element is not actually fully within the IntersectionObserver's root
1696
- // area anymore. This can happen under performance constraints. This may
1697
- // be a bug in the browser's IntersectionObserver implementation. To
1698
- // work around this, we compare the element's bounding rect now with
1699
- // what it was at the time we created the IntersectionObserver. If they
1700
- // are not equal then the element moved, so we refresh.
1701
- refresh();
1702
- }
1703
- isFirstUpdate = false;
1704
- }
1705
-
1706
- // Older browsers don't support a `document` as the root and will throw an
1707
- // error.
1708
- try {
1709
- io = new IntersectionObserver(handleObserve, {
1710
- ...options,
1711
- // Handle <iframe>s
1712
- root: root.ownerDocument
1713
- });
1714
- } catch (_e) {
1715
- io = new IntersectionObserver(handleObserve, options);
1716
- }
1717
- io.observe(element);
1718
- }
1719
- refresh(true);
1720
- return cleanup;
1721
- }
1722
-
1723
- /**
1724
- * Automatically updates the position of the floating element when necessary.
1725
- * Should only be called when the floating element is mounted on the DOM or
1726
- * visible on the screen.
1727
- * @returns cleanup function that should be invoked when the floating element is
1728
- * removed from the DOM or hidden from the screen.
1729
- * @see https://floating-ui.com/docs/autoUpdate
1730
- */
1731
- function autoUpdate(reference, floating, update, options) {
1732
- if (options === void 0) {
1733
- options = {};
1734
- }
1735
- const {
1736
- ancestorScroll = true,
1737
- ancestorResize = true,
1738
- elementResize = typeof ResizeObserver === 'function',
1739
- layoutShift = typeof IntersectionObserver === 'function',
1740
- animationFrame = false
1741
- } = options;
1742
- const referenceEl = unwrapElement(reference);
1743
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
1744
- ancestors.forEach(ancestor => {
1745
- ancestorScroll && ancestor.addEventListener('scroll', update, {
1746
- passive: true
1747
- });
1748
- ancestorResize && ancestor.addEventListener('resize', update);
1749
- });
1750
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
1751
- let reobserveFrame = -1;
1752
- let resizeObserver = null;
1753
- if (elementResize) {
1754
- resizeObserver = new ResizeObserver(_ref => {
1755
- let [firstEntry] = _ref;
1756
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
1757
- // Prevent update loops when using the `size` middleware.
1758
- // https://github.com/floating-ui/floating-ui/issues/1740
1759
- resizeObserver.unobserve(floating);
1760
- cancelAnimationFrame(reobserveFrame);
1761
- reobserveFrame = requestAnimationFrame(() => {
1762
- var _resizeObserver;
1763
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1764
- });
1765
- }
1766
- update();
1767
- });
1768
- if (referenceEl && !animationFrame) {
1769
- resizeObserver.observe(referenceEl);
1770
- }
1771
- resizeObserver.observe(floating);
1772
- }
1773
- let frameId;
1774
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
1775
- if (animationFrame) {
1776
- frameLoop();
1777
- }
1778
- function frameLoop() {
1779
- const nextRefRect = getBoundingClientRect(reference);
1780
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
1781
- update();
1782
- }
1783
- prevRefRect = nextRefRect;
1784
- frameId = requestAnimationFrame(frameLoop);
1785
- }
1786
- update();
1787
- return () => {
1788
- var _resizeObserver2;
1789
- ancestors.forEach(ancestor => {
1790
- ancestorScroll && ancestor.removeEventListener('scroll', update);
1791
- ancestorResize && ancestor.removeEventListener('resize', update);
1792
- });
1793
- cleanupIo == null || cleanupIo();
1794
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1795
- resizeObserver = null;
1796
- if (animationFrame) {
1797
- cancelAnimationFrame(frameId);
1798
- }
1799
- };
1800
- }
1801
-
1802
- /**
1803
- * Modifies the placement by translating the floating element along the
1804
- * specified axes.
1805
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
1806
- * object may be passed.
1807
- * @see https://floating-ui.com/docs/offset
1808
- */
1809
- const offset = offset$1;
1810
-
1811
- /**
1812
- * Optimizes the visibility of the floating element by choosing the placement
1813
- * that has the most space available automatically, without needing to specify a
1814
- * preferred placement. Alternative to `flip`.
1815
- * @see https://floating-ui.com/docs/autoPlacement
1816
- */
1817
- const autoPlacement = autoPlacement$1;
1818
-
1819
- /**
1820
- * Optimizes the visibility of the floating element by shifting it in order to
1821
- * keep it in view when it will overflow the clipping boundary.
1822
- * @see https://floating-ui.com/docs/shift
1823
- */
1824
- const shift = shift$1;
1825
-
1826
- /**
1827
- * Optimizes the visibility of the floating element by flipping the `placement`
1828
- * in order to keep it in view when the preferred placement(s) will overflow the
1829
- * clipping boundary. Alternative to `autoPlacement`.
1830
- * @see https://floating-ui.com/docs/flip
1831
- */
1832
- const flip = flip$1;
1833
-
1834
- /**
1835
- * Computes the `x` and `y` coordinates that will place the floating element
1836
- * next to a given reference element.
1837
- */
1838
- const computePosition = (reference, floating, options) => {
1839
- // This caches the expensive `getClippingElementAncestors` function so that
1840
- // multiple lifecycle resets re-use the same result. It only lives for a
1841
- // single call. If other functions become expensive, we can add them as well.
1842
- const cache = new Map();
1843
- const mergedOptions = {
1844
- platform,
1845
- ...options
1846
- };
1847
- const platformWithCache = {
1848
- ...mergedOptions.platform,
1849
- _c: cache
1850
- };
1851
- return computePosition$1(reference, floating, {
1852
- ...mergedOptions,
1853
- platform: platformWithCache
1854
- });
1855
- };
1856
-
1857
- /* eslint-disable line-comment-position, no-inline-comments */
1858
-
1859
-
1860
- const MAX_CONFIGURATION_COUNT = 10;
1861
-
1862
- class AuroFloatingUI {
1863
- /**
1864
- * @private
1865
- */
1866
- static isMousePressed = false;
1867
-
1868
- /**
1869
- * @private
1870
- */
1871
- static isMousePressHandlerInitialized = false;
1872
-
1873
- /**
1874
- * @private
1875
- */
1876
- static setupMousePressChecker() {
1877
- if (
1878
- !AuroFloatingUI.isMousePressHandlerInitialized &&
1879
- window &&
1880
- window.addEventListener
1881
- ) {
1882
- AuroFloatingUI.isMousePressHandlerInitialized = true;
1883
-
1884
- // Track timeout for isMousePressed reset to avoid race conditions
1885
- if (!AuroFloatingUI._mousePressedTimeout) {
1886
- AuroFloatingUI._mousePressedTimeout = null;
1887
- }
1888
- const mouseEventGlobalHandler = (event) => {
1889
- const isPressed = event.type === "mousedown";
1890
- if (isPressed) {
1891
- // Clear any pending timeout to prevent race condition
1892
- if (AuroFloatingUI._mousePressedTimeout !== null) {
1893
- clearTimeout(AuroFloatingUI._mousePressedTimeout);
1894
- AuroFloatingUI._mousePressedTimeout = null;
1895
- }
1896
- if (!AuroFloatingUI.isMousePressed) {
1897
- AuroFloatingUI.isMousePressed = true;
1898
- }
1899
- } else if (AuroFloatingUI.isMousePressed && !isPressed) {
1900
- // Schedule reset and track timeout ID
1901
- AuroFloatingUI._mousePressedTimeout = setTimeout(() => {
1902
- AuroFloatingUI.isMousePressed = false;
1903
- AuroFloatingUI._mousePressedTimeout = null;
1904
- }, 0);
1905
- }
1906
- };
1907
-
1908
- window.addEventListener("mousedown", mouseEventGlobalHandler);
1909
- window.addEventListener("mouseup", mouseEventGlobalHandler);
1910
- }
1911
- }
1912
-
1913
- constructor(element, behavior) {
1914
- this.element = element;
1915
- this.behavior = behavior;
1916
-
1917
- // Store event listener references for cleanup
1918
- this.focusHandler = null;
1919
- this.clickHandler = null;
1920
- this.keyDownHandler = null;
1921
-
1922
- /**
1923
- * @private
1924
- */
1925
- this.configureTrial = 0;
1926
-
1927
- /**
1928
- * @private
1929
- */
1930
- this.eventPrefix = undefined;
1931
-
1932
- /**
1933
- * @private
1934
- */
1935
- this.id = undefined;
1936
-
1937
- /**
1938
- * @private
1939
- */
1940
- this.showing = false;
1941
-
1942
- /**
1943
- * @private
1944
- */
1945
- this.strategy = undefined;
1946
- }
1947
-
1948
- /**
1949
- * Mirrors the size of the bibSizer element to the bib content.
1950
- * Copies the width, height, max-width, and max-height styles from the bibSizer element to the bib content container.
1951
- * This ensures that the bib content has the same dimensions as the sizer element.
1952
- */
1953
- mirrorSize() {
1954
- // mirror the boxsize from bibSizer
1955
- if (this.element.bibSizer && this.element.matchWidth) {
1956
- const sizerStyle = window.getComputedStyle(this.element.bibSizer);
1957
- const bibContent =
1958
- this.element.bib.shadowRoot.querySelector(".container");
1959
- if (sizerStyle.width !== "0px") {
1960
- bibContent.style.width = sizerStyle.width;
1961
- }
1962
- if (sizerStyle.height !== "0px") {
1963
- bibContent.style.height = sizerStyle.height;
1964
- }
1965
- bibContent.style.maxWidth = sizerStyle.maxWidth;
1966
- bibContent.style.maxHeight = sizerStyle.maxHeight;
1967
- }
1968
- }
1969
-
1970
- /**
1971
- * @private
1972
- * Determines the positioning strategy based on the current viewport size and mobile breakpoint.
1973
- *
1974
- * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
1975
- * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
1976
- *
1977
- * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
1978
- */
1979
- getPositioningStrategy() {
1980
- const breakpoint =
1981
- this.element.bib.mobileFullscreenBreakpoint ||
1982
- this.element.floaterConfig?.fullscreenBreakpoint;
1983
- switch (this.behavior) {
1984
- case "tooltip":
1985
- return "floating";
1986
- case "dialog":
1987
- case "drawer":
1988
- if (breakpoint) {
1989
- const smallerThanBreakpoint = window.matchMedia(
1990
- `(max-width: ${breakpoint})`,
1991
- ).matches;
1992
-
1993
- this.element.expanded = smallerThanBreakpoint;
1994
- }
1995
- if (this.element.nested) {
1996
- return "cover";
1997
- }
1998
- return "fullscreen";
1999
- case "dropdown":
2000
- case undefined:
2001
- case null:
2002
- if (breakpoint) {
2003
- const smallerThanBreakpoint = window.matchMedia(
2004
- `(max-width: ${breakpoint})`,
2005
- ).matches;
2006
- if (smallerThanBreakpoint) {
2007
- return "fullscreen";
2008
- }
2009
- }
2010
- return "floating";
2011
- default:
2012
- return this.behavior;
2013
- }
2014
- }
2015
-
2016
- /**
2017
- * @private
2018
- * Positions the bib element based on the current configuration and positioning strategy.
2019
- *
2020
- * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
2021
- * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
2022
- * and applies the calculated position to the bib's style.
2023
- */
2024
- position() {
2025
- const strategy = this.getPositioningStrategy();
2026
- this.configureBibStrategy(strategy);
2027
-
2028
- if (strategy === "floating") {
2029
- this.mirrorSize();
2030
- // Define the middlware for the floater configuration
2031
- const middleware = [
2032
- offset(this.element.floaterConfig?.offset || 0),
2033
- ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
2034
- ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
2035
- ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
2036
- ];
2037
-
2038
- // Compute the position of the bib
2039
- computePosition(this.element.trigger, this.element.bib, {
2040
- strategy: this.element.floaterConfig?.strategy || "fixed",
2041
- placement: this.element.floaterConfig?.placement,
2042
- middleware: middleware || [],
2043
- }).then(({ x, y }) => {
2044
- // eslint-disable-line id-length
2045
- Object.assign(this.element.bib.style, {
2046
- left: `${x}px`,
2047
- top: `${y}px`,
2048
- });
2049
- });
2050
- } else if (strategy === "cover") {
2051
- // Compute the position of the bib
2052
- computePosition(this.element.parentNode, this.element.bib, {
2053
- placement: "bottom-start",
2054
- }).then(({ x, y }) => {
2055
- // eslint-disable-line id-length
2056
- Object.assign(this.element.bib.style, {
2057
- left: `${x}px`,
2058
- top: `${y - this.element.parentNode.offsetHeight}px`,
2059
- width: `${this.element.parentNode.offsetWidth}px`,
2060
- height: `${this.element.parentNode.offsetHeight}px`,
2061
- });
2062
- });
2063
- }
2064
- }
2065
-
2066
- /**
2067
- * @private
2068
- * Controls whether to lock the scrolling for the document's body.
2069
- * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
2070
- */
2071
- lockScroll(lock = true) {
2072
- if (lock) {
2073
- document.body.style.overflow = "hidden"; // hide body's scrollbar
2074
-
2075
- // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
2076
- this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
2077
- } else {
2078
- document.body.style.overflow = "";
2079
- }
2080
- }
2081
-
2082
- /**
2083
- * @private
2084
- * Configures the bib element's display strategy.
2085
- *
2086
- * Sets the bib to fullscreen or floating mode based on the provided strategy.
2087
- * Dispatches a 'strategy-change' event if the strategy changes.
2088
- *
2089
- * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
2090
- */
2091
- configureBibStrategy(value) {
2092
- if (value === "fullscreen") {
2093
- this.element.isBibFullscreen = true;
2094
- // reset the prev position
2095
- this.element.bib.setAttribute("isfullscreen", "");
2096
- this.element.bib.style.position = "fixed";
2097
- this.element.bib.style.top = "0px";
2098
- this.element.bib.style.left = "0px";
2099
- this.element.bib.style.width = "";
2100
- this.element.bib.style.height = "";
2101
- this.element.style.contain = "";
2102
-
2103
- // reset the size that was mirroring `size` css-part
2104
- const bibContent =
2105
- this.element.bib.shadowRoot.querySelector(".container");
2106
- if (bibContent) {
2107
- bibContent.style.width = "";
2108
- bibContent.style.height = "";
2109
- bibContent.style.maxWidth = "";
2110
- bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
2111
- this.configureTrial = 0;
2112
- } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
2113
- this.configureTrial += 1;
2114
-
2115
- setTimeout(() => {
2116
- this.configureBibStrategy(value);
2117
- }, 0);
2118
- }
2119
-
2120
- if (this.element.isPopoverVisible) {
2121
- this.lockScroll(true);
2122
- }
2123
- } else {
2124
- this.element.bib.style.position = "";
2125
- this.element.bib.removeAttribute("isfullscreen");
2126
- this.element.isBibFullscreen = false;
2127
- this.element.style.contain = "layout";
2128
- }
2129
-
2130
- const isChanged = this.strategy && this.strategy !== value;
2131
- this.strategy = value;
2132
- if (isChanged) {
2133
- const event = new CustomEvent(
2134
- this.eventPrefix
2135
- ? `${this.eventPrefix}-strategy-change`
2136
- : "strategy-change",
2137
- {
2138
- detail: {
2139
- value,
2140
- },
2141
- composed: true,
2142
- },
2143
- );
2144
-
2145
- this.element.dispatchEvent(event);
2146
- }
2147
- }
2148
-
2149
- updateState() {
2150
- const isVisible = this.element.isPopoverVisible;
2151
- if (!isVisible) {
2152
- this.cleanupHideHandlers();
2153
- try {
2154
- this.element.cleanup?.();
2155
- } catch (error) {
2156
- // Do nothing
2157
- }
2158
- }
2159
- }
2160
-
2161
- /**
2162
- * @private
2163
- * getting called on 'blur' in trigger or `focusin` in document
2164
- *
2165
- * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
2166
- * This method checks if the currently active element is still within the trigger or bib.
2167
- * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
2168
- */
2169
- handleFocusLoss() {
2170
- // if mouse is being pressed, skip and let click event to handle the action
2171
- if (AuroFloatingUI.isMousePressed) {
2172
- return;
2173
- }
2174
-
2175
- if (
2176
- this.element.noHideOnThisFocusLoss ||
2177
- this.element.hasAttribute("noHideOnThisFocusLoss")
2178
- ) {
2179
- return;
2180
- }
2181
-
2182
- const { activeElement } = document;
2183
- // if focus is still inside of trigger or bib, do not close
2184
- if (
2185
- this.element.contains(activeElement) ||
2186
- this.element.bib?.contains(activeElement)
2187
- ) {
2188
- return;
2189
- }
2190
-
2191
- // if fullscreen bib is in fullscreen mode, do not close
2192
- if (this.element.bib.hasAttribute("isfullscreen")) {
2193
- return;
2194
- }
2195
-
2196
- this.hideBib("keydown");
2197
- }
2198
-
2199
- setupHideHandlers() {
2200
- // Define handlers & store references
2201
- this.focusHandler = () => this.handleFocusLoss();
2202
-
2203
- this.clickHandler = (evt) => {
2204
- // When the bib is fullscreen (modal dialog), don't close on outside
2205
- // clicks. VoiceOver's synthetic click events inside a top-layer modal
2206
- // <dialog> may not include the bib in composedPath(), causing false
2207
- // positives. This mirrors the fullscreen guard in handleFocusLoss().
2208
- if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
2209
- return;
2210
- }
2211
-
2212
- if (
2213
- (!evt.composedPath().includes(this.element.trigger) &&
2214
- !evt.composedPath().includes(this.element.bib)) ||
2215
- (this.element.bib.backdrop &&
2216
- evt.composedPath().includes(this.element.bib.backdrop))
2217
- ) {
2218
- const existedVisibleFloatingUI =
2219
- document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
2220
-
2221
- if (
2222
- existedVisibleFloatingUI &&
2223
- existedVisibleFloatingUI.element.isPopoverVisible
2224
- ) {
2225
- // if something else is open, close that
2226
- existedVisibleFloatingUI.hideBib();
2227
- document.expandedAuroFormkitDropdown = null;
2228
- document.expandedAuroFloater = this;
2229
- } else {
2230
- this.hideBib("click");
2231
- }
2232
- }
2233
- };
2234
-
2235
- // ESC key handler
2236
- this.keyDownHandler = (evt) => {
2237
- if (evt.key === "Escape" && this.element.isPopoverVisible) {
2238
- const existedVisibleFloatingUI =
2239
- document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
2240
- if (
2241
- existedVisibleFloatingUI &&
2242
- existedVisibleFloatingUI !== this &&
2243
- existedVisibleFloatingUI.element.isPopoverVisible
2244
- ) {
2245
- // if something else is open, let it handle itself
2246
- return;
2247
- }
2248
- this.hideBib("keydown");
2249
- }
2250
- };
2251
-
2252
- if (this.behavior !== "drawer" && this.behavior !== "dialog") {
2253
- // Add event listeners using the stored references
2254
- document.addEventListener("focusin", this.focusHandler);
2255
- }
2256
-
2257
- document.addEventListener("keydown", this.keyDownHandler);
2258
-
2259
- // send this task to the end of queue to prevent conflicting
2260
- // it conflicts if showBib gets call from a button that's not this.element.trigger
2261
- setTimeout(() => {
2262
- window.addEventListener("click", this.clickHandler);
2263
- }, 0);
2264
- }
2265
-
2266
- cleanupHideHandlers() {
2267
- // Remove event listeners if they exist
2268
-
2269
- if (this.focusHandler) {
2270
- document.removeEventListener("focusin", this.focusHandler);
2271
- this.focusHandler = null;
2272
- }
2273
-
2274
- if (this.clickHandler) {
2275
- window.removeEventListener("click", this.clickHandler);
2276
- this.clickHandler = null;
2277
- }
2278
-
2279
- if (this.keyDownHandler) {
2280
- document.removeEventListener("keydown", this.keyDownHandler);
2281
- this.keyDownHandler = null;
2282
- }
2283
- }
2284
-
2285
- handleUpdate(changedProperties) {
2286
- if (changedProperties.has("isPopoverVisible")) {
2287
- this.updateState();
2288
- }
2289
- }
2290
-
2291
- updateCurrentExpandedDropdown() {
2292
- // Close any other dropdown that is already open
2293
- const existedVisibleFloatingUI =
2294
- document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
2295
- if (
2296
- existedVisibleFloatingUI &&
2297
- existedVisibleFloatingUI !== this &&
2298
- existedVisibleFloatingUI.element.isPopoverVisible &&
2299
- existedVisibleFloatingUI.eventPrefix === this.eventPrefix
2300
- ) {
2301
- existedVisibleFloatingUI.hideBib();
2302
- }
2303
-
2304
- document.expandedAuroFloater = this;
2305
- }
2306
-
2307
- showBib() {
2308
- if (!this.element.disabled && !this.showing) {
2309
- this.updateCurrentExpandedDropdown();
2310
- this.element.triggerChevron?.setAttribute("data-expanded", true);
2311
-
2312
- // prevent double showing: isPopovervisible gets first and showBib gets called later
2313
- if (!this.showing) {
2314
- if (!this.element.modal) {
2315
- this.setupHideHandlers();
2316
- }
2317
- this.showing = true;
2318
- this.element.isPopoverVisible = true;
2319
- this.position();
2320
- this.dispatchEventDropdownToggle();
2321
- }
2322
-
2323
- // Setup auto update to handle resize and scroll
2324
- this.element.cleanup = autoUpdate(
2325
- this.element.trigger || this.element.parentNode,
2326
- this.element.bib,
2327
- () => {
2328
- this.position();
2329
- },
2330
- );
2331
- }
2332
- }
2333
-
2334
- /**
2335
- * Hides the floating UI element.
2336
- * @param {String} eventType - The event type that triggered the hiding action.
2337
- */
2338
- hideBib(eventType = "unknown") {
2339
- if (!this.element.disabled && !this.element.noToggle) {
2340
- this.lockScroll(false);
2341
- this.element.triggerChevron?.removeAttribute("data-expanded");
2342
-
2343
- if (this.element.isPopoverVisible) {
2344
- this.element.isPopoverVisible = false;
2345
- }
2346
- if (this.showing) {
2347
- this.cleanupHideHandlers();
2348
- this.showing = false;
2349
- this.dispatchEventDropdownToggle(eventType);
2350
- }
2351
- }
2352
- document.expandedAuroFloater = null;
2353
- }
2354
-
2355
- /**
2356
- * @private
2357
- * @returns {void} Dispatches event with an object showing the state of the dropdown.
2358
- * @param {String} eventType - The event type that triggered the toggle action.
2359
- */
2360
- dispatchEventDropdownToggle(eventType) {
2361
- const event = new CustomEvent(
2362
- this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
2363
- {
2364
- detail: {
2365
- expanded: this.showing,
2366
- eventType: eventType || "unknown",
2367
- },
2368
- composed: true,
2369
- },
2370
- );
2371
-
2372
- this.element.dispatchEvent(event);
2373
- }
2374
-
2375
- handleClick() {
2376
- if (this.element.isPopoverVisible) {
2377
- this.hideBib("click");
2378
- } else {
2379
- this.showBib();
2380
- }
2381
-
2382
- const event = new CustomEvent(
2383
- this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
2384
- {
2385
- composed: true,
2386
- detail: {
2387
- expanded: this.element.isPopoverVisible,
2388
- },
2389
- },
2390
- );
2391
-
2392
- this.element.dispatchEvent(event);
2393
- }
2394
-
2395
- handleEvent(event) {
2396
- if (!this.element.disableEventShow) {
2397
- switch (event.type) {
2398
- case "keydown": {
2399
- // Support both Enter and Space keys for accessibility
2400
- // Space is included as it's expected behavior for interactive elements
2401
-
2402
- const origin = event.composedPath()[0];
2403
- if (
2404
- event.key === "Enter" ||
2405
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
2406
- ) {
2407
- event.preventDefault();
2408
- this.handleClick();
2409
- }
2410
- break;
2411
- }
2412
- case "mouseenter":
2413
- if (this.element.hoverToggle) {
2414
- this.showBib();
2415
- }
2416
- break;
2417
- case "mouseleave":
2418
- if (this.element.hoverToggle) {
2419
- this.hideBib("mouseleave");
2420
- }
2421
- break;
2422
- case "focus":
2423
- if (this.element.focusShow) {
2424
- /*
2425
- This needs to better handle clicking that gives focus -
2426
- currently it shows and then immediately hides the bib
2427
- */
2428
- this.showBib();
2429
- }
2430
- break;
2431
- case "blur":
2432
- // send this task 100ms later queue to
2433
- // wait a frame in case focus moves within the floating element/bib
2434
- setTimeout(() => this.handleFocusLoss(), 0);
2435
- break;
2436
- case "click":
2437
- if (document.activeElement === document.body) {
2438
- event.currentTarget.focus();
2439
- }
2440
- this.handleClick();
2441
- break;
2442
- // Do nothing
2443
- }
2444
- }
2445
- }
2446
-
2447
- /**
2448
- * Manages the tabIndex of the trigger element based on its focusability.
2449
- *
2450
- * If the trigger element or any of its children are inherently focusable, the tabIndex of the component is set to -1.
2451
- * This prevents the component itself from being focusable when the trigger element already handles focus.
2452
- */
2453
- handleTriggerTabIndex() {
2454
- const focusableElementSelectors = [
2455
- "a",
2456
- "button",
2457
- 'input:not([type="hidden"])',
2458
- "select",
2459
- "textarea",
2460
- '[tabindex]:not([tabindex="-1"])',
2461
- "auro-button",
2462
- "auro-input",
2463
- "auro-hyperlink",
2464
- ];
2465
-
2466
- const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
2467
- if (!triggerNode) {
2468
- return;
2469
- }
2470
- const triggerNodeTagName = triggerNode.tagName.toLowerCase();
2471
-
2472
- focusableElementSelectors.forEach((selector) => {
2473
- // Check if the trigger node element is focusable
2474
- if (triggerNodeTagName === selector) {
2475
- this.element.tabIndex = -1;
2476
- return;
2477
- }
2478
-
2479
- // Check if any child is focusable
2480
- if (triggerNode.querySelector(selector)) {
2481
- this.element.tabIndex = -1;
2482
- }
2483
- });
2484
- }
2485
-
2486
- /**
2487
- *
2488
- * @param {*} eventPrefix
2489
- */
2490
- regenerateBibId() {
2491
- this.id = this.element.getAttribute("id");
2492
- if (!this.id) {
2493
- this.id = window.crypto.randomUUID();
2494
- this.element.setAttribute("id", this.id);
2495
- }
2496
-
2497
- this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
2498
- }
2499
-
2500
- configure(elem, eventPrefix) {
2501
- AuroFloatingUI.setupMousePressChecker();
2502
-
2503
- this.eventPrefix = eventPrefix;
2504
- if (this.element !== elem) {
2505
- this.element = elem;
2506
- }
2507
-
2508
- if (this.behavior !== this.element.behavior) {
2509
- this.behavior = this.element.behavior;
2510
- }
2511
-
2512
- if (this.element.trigger) {
2513
- this.disconnect();
2514
- }
2515
- this.element.trigger =
2516
- this.element.triggerElement ||
2517
- this.element.shadowRoot.querySelector("#trigger") ||
2518
- this.element.trigger;
2519
- this.element.bib =
2520
- this.element.shadowRoot.querySelector("#bib") || this.element.bib;
2521
- this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
2522
- this.element.triggerChevron =
2523
- this.element.shadowRoot.querySelector("#showStateIcon");
2524
-
2525
- if (this.element.floaterConfig) {
2526
- this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
2527
- }
2528
-
2529
- this.regenerateBibId();
2530
- this.handleTriggerTabIndex();
2531
-
2532
- this.handleEvent = this.handleEvent.bind(this);
2533
- if (this.element.trigger) {
2534
- this.element.trigger.addEventListener("keydown", this.handleEvent);
2535
- this.element.trigger.addEventListener("click", this.handleEvent);
2536
- this.element.trigger.addEventListener("mouseenter", this.handleEvent);
2537
- this.element.trigger.addEventListener("mouseleave", this.handleEvent);
2538
- this.element.trigger.addEventListener("focus", this.handleEvent);
2539
- this.element.trigger.addEventListener("blur", this.handleEvent);
2540
- }
2541
- }
2542
-
2543
- disconnect() {
2544
- this.cleanupHideHandlers();
2545
- if (this.element) {
2546
- this.element.cleanup?.();
2547
-
2548
- if (this.element.bib) {
2549
- this.element.shadowRoot.append(this.element.bib);
2550
- }
2551
-
2552
- // Remove event & keyboard listeners
2553
- if (this.element?.trigger) {
2554
- this.element.trigger.removeEventListener("keydown", this.handleEvent);
2555
- this.element.trigger.removeEventListener("click", this.handleEvent);
2556
- this.element.trigger.removeEventListener(
2557
- "mouseenter",
2558
- this.handleEvent,
2559
- );
2560
- this.element.trigger.removeEventListener(
2561
- "mouseleave",
2562
- this.handleEvent,
2563
- );
2564
- this.element.trigger.removeEventListener("focus", this.handleEvent);
2565
- this.element.trigger.removeEventListener("blur", this.handleEvent);
2566
- }
2567
- }
2568
- }
2569
- }
2570
-
2571
- // Selectors for focusable elements
2572
- const FOCUSABLE_SELECTORS = [
2573
- "a[href]",
2574
- "button:not([disabled])",
2575
- "textarea:not([disabled])",
2576
- "input:not([disabled])",
2577
- "select:not([disabled])",
2578
- '[role="tab"]:not([disabled])',
2579
- '[role="link"]:not([disabled])',
2580
- '[role="button"]:not([disabled])',
2581
- '[tabindex]:not([tabindex="-1"])',
2582
- '[contenteditable]:not([contenteditable="false"])',
2583
- ];
2584
-
2585
- // List of custom components that are known to be focusable
2586
- const FOCUSABLE_COMPONENTS = [
2587
- "auro-checkbox",
2588
- "auro-radio",
2589
- "auro-dropdown",
2590
- "auro-button",
2591
- "auro-combobox",
2592
- "auro-input",
2593
- "auro-counter",
2594
- // 'auro-menu', // Auro menu is not focusable by default, it uses a different interaction model
2595
- "auro-select",
2596
- "auro-datepicker",
2597
- "auro-hyperlink",
2598
- "auro-accordion",
2599
- ];
2600
-
2601
- /**
2602
- * Determines if a given element is a custom focusable component.
2603
- * Returns true if the element matches a known focusable component and is not disabled.
2604
- *
2605
- * @param {HTMLElement} element The element to check for focusability.
2606
- * @returns {boolean} True if the element is a focusable custom component, false otherwise.
2607
- */
2608
- function isFocusableComponent(element) {
2609
- const componentName = element.tagName.toLowerCase();
2610
-
2611
- // Guard Clause: Element is a focusable component
2612
- if (
2613
- !FOCUSABLE_COMPONENTS.some(
2614
- (name) => element.hasAttribute(name) || componentName === name,
2615
- )
2616
- )
2617
- return false;
2618
-
2619
- // Guard Clause: Element is not disabled
2620
- if (element.hasAttribute("disabled")) return false;
2621
-
2622
- // Guard Clause: The element is a hyperlink and has no href attribute
2623
- if (componentName.match("hyperlink") && !element.hasAttribute("href"))
2624
- return false;
2625
-
2626
- // If all guard clauses pass, the element is a focusable component
2627
- return true;
2628
- }
2629
-
2630
- /**
2631
- * Safely get a numeric tabindex for an element.
2632
- * Returns a number if the tabindex is a valid integer, otherwise null.
2633
- *
2634
- * @param {HTMLElement} element The element whose tabindex to read.
2635
- * @returns {?number} The numeric tabindex or null if missing/invalid.
2636
- */
2637
- function getNumericTabIndex(element) {
2638
- const raw = element.getAttribute("tabindex");
2639
- if (raw == null) return null;
2640
-
2641
- const value = Number.parseInt(raw, 10);
2642
- return Number.isNaN(value) ? null : value;
2643
- }
2644
-
2645
- /**
2646
- * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2647
- * Returns a unique, ordered array of elements that can receive focus.
2648
- * Also sorts elements with tabindex first, preserving their order.
2649
- *
2650
- * @param {HTMLElement} container The container to search within
2651
- * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2652
- */
2653
- function getFocusableElements(container) {
2654
- // Get elements in DOM order by walking the tree
2655
- const orderedFocusableElements = [];
2656
-
2657
- // Define a recursive function to collect focusable elements in DOM order
2658
- const collectFocusableElements = (root) => {
2659
- // Check if current element is focusable
2660
- if (root.nodeType === Node.ELEMENT_NODE) {
2661
- // Check if this is a custom component that is focusable
2662
- const isComponentFocusable = isFocusableComponent(root);
2663
-
2664
- if (isComponentFocusable) {
2665
- // Add the component itself as a focusable element and don't traverse its shadow DOM
2666
- orderedFocusableElements.push(root);
2667
- return; // Skip traversing inside this component
2668
- }
2669
-
2670
- // Check if the element itself matches any selector
2671
- for (const selector of FOCUSABLE_SELECTORS) {
2672
- if (root.matches?.(selector)) {
2673
- orderedFocusableElements.push(root);
2674
- break; // Once we know it's focusable, no need to check other selectors
2675
- }
2676
- }
2677
-
2678
- // Process shadow DOM only for non-Auro components
2679
- if (root.shadowRoot) {
2680
- // Process shadow DOM children in order
2681
- if (root.shadowRoot.children) {
2682
- Array.from(root.shadowRoot.children).forEach((child) => {
2683
- collectFocusableElements(child);
2684
- });
2685
- }
2686
- }
2687
-
2688
- // Process slots and their assigned nodes in order
2689
- if (root.tagName === "SLOT") {
2690
- const assignedNodes = root.assignedNodes({ flatten: true });
2691
- for (const node of assignedNodes) {
2692
- collectFocusableElements(node);
2693
- }
2694
- } else {
2695
- // Process light DOM children in order
2696
- if (root.children) {
2697
- Array.from(root.children).forEach((child) => {
2698
- collectFocusableElements(child);
2699
- });
2700
- }
2701
- }
2702
- }
2703
- };
2704
-
2705
- // Start the traversal from the container
2706
- collectFocusableElements(container);
2707
-
2708
- // Remove duplicates that might have been collected through different paths
2709
- // while preserving order
2710
- const uniqueElements = [];
2711
- const seen = new Set();
2712
-
2713
- for (const element of orderedFocusableElements) {
2714
- if (!seen.has(element)) {
2715
- seen.add(element);
2716
- uniqueElements.push(element);
2717
- }
2718
- }
2719
-
2720
- // Move tab-indexed elements to the front while preserving their order
2721
- // This ensures that elements with tabindex are prioritized in the focus order
2722
-
2723
- // First extract elements with valid positive tabindex
2724
- const elementsWithTabindex = uniqueElements.filter((el) => {
2725
- const tabindex = getNumericTabIndex(el);
2726
- return tabindex !== null && tabindex > 0;
2727
- });
2728
-
2729
- // Sort these elements by their tabindex value
2730
- elementsWithTabindex.sort((a, b) => {
2731
- const aIndex = getNumericTabIndex(a) ?? 0;
2732
- const bIndex = getNumericTabIndex(b) ?? 0;
2733
- return aIndex - bIndex;
2734
- });
2735
-
2736
- // Elements without tabindex (preserving their original order)
2737
- const elementsWithoutTabindex = uniqueElements.filter((el) => {
2738
- const tabindex = getNumericTabIndex(el);
2739
-
2740
- // Elements without tabindex or with tabindex of 0 stay in DOM order
2741
- return tabindex === null || tabindex === 0;
2742
- });
2743
-
2744
- // Combine both arrays with tabindex elements first
2745
- const tabIndexedUniqueElements = [
2746
- ...elementsWithTabindex,
2747
- ...elementsWithoutTabindex,
2748
- ];
2749
-
2750
- return tabIndexedUniqueElements;
2751
- }
2752
-
2753
- /**
2754
- * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
2755
- * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
2756
- */
2757
- class FocusTrap {
2758
- /**
2759
- * Creates a new FocusTrap instance for the given container element.
2760
- * Initializes event listeners and prepares the container for focus management.
2761
- *
2762
- * @param {HTMLElement} container The DOM element to trap focus within.
2763
- * @param {boolean} [controlTabOrder=false] If true enables manual control of the tab order by the FocusTrap.
2764
- * @throws {Error} If the provided container is not a valid HTMLElement.
2765
- */
2766
- constructor(container, controlTabOrder = false) {
2767
- if (!container || !(container instanceof HTMLElement)) {
2768
- throw new Error("FocusTrap requires a valid HTMLElement.");
2769
- }
2770
-
2771
- this.container = container;
2772
- this.tabDirection = "forward"; // or 'backward';
2773
- this.controlTabOrder = controlTabOrder;
2774
-
2775
- this._init();
2776
- }
2777
-
2778
- /**
2779
- * Initializes the focus trap by setting up event listeners and attributes on the container.
2780
- * Prepares the container for focus management, including support for shadow DOM and inert attributes.
2781
- *
2782
- * @private
2783
- */
2784
- _init() {
2785
- // Add inert attribute to prevent focusing programmatically as well (if supported)
2786
- if ("inert" in HTMLElement.prototype) {
2787
- this.container.inert = false; // Ensure the container isn't inert
2788
- this.container.setAttribute("data-focus-trap-container", true); // Mark for identification
2789
- }
2790
-
2791
- // Track tab direction
2792
- this.container.addEventListener("keydown", this._onKeydown);
2793
- }
2794
-
2795
- /**
2796
- * Gets an array of currently active (focused) elements in the document and shadow DOM.
2797
- * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2798
- * @private
2799
- */
2800
- _getActiveElements() {
2801
- // Get the active element(s) in the document and shadow root
2802
- // This will include the active element in the shadow DOM if it exists
2803
- // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
2804
- let { activeElement } = document;
2805
- const actives = [activeElement];
2806
- while (activeElement?.shadowRoot?.activeElement) {
2807
- actives.push(activeElement.shadowRoot.activeElement);
2808
- activeElement = activeElement.shadowRoot.activeElement;
2809
- }
2810
- return actives;
2811
- }
2812
-
2813
- /**
2814
- * Gets the next focus index based on the current index and focusable elements.
2815
- * @param {number} currentIndex The current index of the focused element.
2816
- * @param {Array<HTMLElement>} focusables The array of focusable elements.
2817
- * @returns {number|null} The next focus index or null if not determined.
2818
- */
2819
- _getNextFocusIndex(currentIndex, focusables, actives) {
2820
- if (this.controlTabOrder) {
2821
- // Calculate the new index based on the current index and tab direction
2822
- let newFocusIndex =
2823
- currentIndex + (this.tabDirection === "forward" ? 1 : -1);
2824
-
2825
- // Wrap-around logic
2826
- if (newFocusIndex < 0) newFocusIndex = focusables.length - 1;
2827
- if (newFocusIndex >= focusables.length) newFocusIndex = 0;
2828
-
2829
- // Early return with the new index
2830
- return newFocusIndex;
2831
- }
2832
-
2833
- // Determine if we need to wrap
2834
- const atFirst =
2835
- actives.includes(focusables[0]) || actives.includes(this.container);
2836
- const atLast = actives.includes(focusables[focusables.length - 1]);
2837
-
2838
- // Only wrap if at the ends
2839
- if (this.tabDirection === "backward" && atFirst) {
2840
- return focusables.length - 1;
2841
- }
2842
-
2843
- if (this.tabDirection === "forward" && atLast) {
2844
- return 0;
2845
- }
2846
-
2847
- // No wrap, so don't change focus, return early
2848
- return null;
2849
- }
2850
-
2851
- /**
2852
- * Handles the Tab key press event to manage focus within the container.
2853
- * @param {KeyboardEvent} e The keyboard event triggered by the user.
2854
- * @returns {void}
2855
- */
2856
- _handleTabKey(e) {
2857
- // Update the focusable elements
2858
- const focusables = this._getFocusableElements();
2859
-
2860
- // If there are no focusable elements, exit
2861
- if (!focusables.length) return;
2862
-
2863
- // Set the tab direction based on the key pressed
2864
- this.tabDirection = e.shiftKey ? "backward" : "forward";
2865
-
2866
- // Get the active elements that are currently focused
2867
- const actives = this._getActiveElements();
2868
-
2869
- // If we're at either end of the focusable elements, wrap around to the other end
2870
- let focusIndex = focusables.findIndex((el) => actives.includes(el));
2871
-
2872
- // Fallback if we have no focused element
2873
- if (focusIndex === -1) focusIndex = 0;
2874
-
2875
- // Get the next focus index based on the current focus index, tab direction, and controlTabOrder setting
2876
- // Is null if no new focus index is determined
2877
- const newFocusIndex = this._getNextFocusIndex(
2878
- focusIndex,
2879
- focusables,
2880
- actives,
2881
- );
2882
-
2883
- // If we have a new focus index, set focus to that element
2884
- if (newFocusIndex !== null) {
2885
- e.preventDefault();
2886
- focusables[newFocusIndex].focus();
2887
- }
2888
- }
2889
-
2890
- /**
2891
- * Catches the keydown event
2892
- * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
2893
- * @private
2894
- */
2895
- _onKeydown = (e) => {
2896
- // Handle tab
2897
- if (e.key === "Tab") this._handleTabKey(e);
2898
- };
2899
-
2900
- /**
2901
- * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2902
- * Returns a unique, ordered array of elements that can receive focus.
2903
- *
2904
- * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2905
- * @private
2906
- */
2907
- _getFocusableElements() {
2908
- // Use the imported utility function to get focusable elements
2909
- const elements = getFocusableElements(this.container);
2910
-
2911
- // Return the elements found
2912
- return elements;
2913
- }
2914
-
2915
- /**
2916
- * Moves focus to the first focusable element within the container.
2917
- * Useful for setting initial focus when activating the focus trap.
2918
- */
2919
- focusFirstElement() {
2920
- const focusables = this._getFocusableElements();
2921
- if (focusables.length) focusables[0].focus();
2922
- }
2923
-
2924
- /**
2925
- * Moves focus to the last focusable element within the container.
2926
- * Useful for setting focus when deactivating or cycling focus in reverse.
2927
- */
2928
- focusLastElement() {
2929
- const focusables = this._getFocusableElements();
2930
- if (focusables.length) focusables[focusables.length - 1].focus();
2931
- }
2932
-
2933
- /**
2934
- * Removes event listeners and attributes added by the focus trap.
2935
- * Call this method to clean up when the focus trap is no longer needed.
2936
- */
2937
- disconnect() {
2938
- if (this.container.hasAttribute("data-focus-trap-container")) {
2939
- this.container.removeAttribute("data-focus-trap-container");
2940
- }
2941
-
2942
- this.container.removeEventListener("keydown", this._onKeydown);
2943
- }
2944
- }
2945
-
2946
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
2947
- // See LICENSE in the project root for license information.
2948
-
2949
-
2950
- class AuroDependencyVersioning {
2951
-
2952
- /**
2953
- * Generates a unique string to be used for child auro element naming.
2954
- * @private
2955
- * @param {string} baseName - Defines the first part of the unique element name.
2956
- * @param {string} version - Version of the component that will be appended to the baseName.
2957
- * @returns {string} - Unique string to be used for naming.
2958
- */
2959
- generateElementName(baseName, version) {
2960
- let result = baseName;
2961
-
2962
- result += '-';
2963
- result += version.replace(/[.]/g, '_');
2964
-
2965
- return result;
2966
- }
2967
-
2968
- /**
2969
- * Generates a unique string to be used for child auro element naming.
2970
- * @param {string} baseName - Defines the first part of the unique element name.
2971
- * @param {string} version - Version of the component that will be appended to the baseName.
2972
- * @returns {string} - Unique string to be used for naming.
2973
- */
2974
- generateTag(baseName, version, tagClass) {
2975
- const elementName = this.generateElementName(baseName, version);
2976
- const tag = i$4`${s$3(elementName)}`;
2977
-
2978
- if (!customElements.get(elementName)) {
2979
- customElements.define(elementName, class extends tagClass {});
2980
- }
2981
-
2982
- return tag;
2983
- }
2984
- }
2985
-
2986
- /**
2987
- * @license
2988
- * Copyright 2019 Google LLC
2989
- * SPDX-License-Identifier: BSD-3-Clause
2990
- */
2991
- const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$1("string"==typeof t?t:t+"",void 0,s$1),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$1(o,t,s$1)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
2992
-
2993
- /**
2994
- * @license
2995
- * Copyright 2017 Google LLC
2996
- * SPDX-License-Identifier: BSD-3-Clause
2997
- */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p$1=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d("elementProperties")]=new Map,y$1[d("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a.reactiveElementVersions??=[]).push("2.1.2");
2998
-
2999
- /**
3000
- * @license
3001
- * Copyright 2017 Google LLC
3002
- * SPDX-License-Identifier: BSD-3-Clause
3003
- */const s=globalThis;class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o$1=s.litElementPolyfillSupport;o$1?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.2");
3004
-
3005
- /**
3006
- * @license
3007
- * Copyright 2018 Google LLC
3008
- * SPDX-License-Identifier: BSD-3-Clause
3009
- */const o=o=>o??A;
3010
-
3011
- class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
3012
- `;class z extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$2`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
3013
- `;var y=i$2`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
3014
- `;var x=i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
3015
- `;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b$1`
3016
- <div class="componentWrapper">
3017
- <div
3018
- class="${e$3({svgWrapper:true})}"
3019
- title="${o(this.title||void 0)}">
3020
- <span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
3021
- ${this.customSvg?b$1`
3022
- <slot name="svg"></slot>
3023
- `:b$1`
3024
- ${this.svg}
3025
- `}
3026
- </span>
3027
- </div>
3028
-
3029
- <div class="${e$3(t)}" part="label">
3030
- <slot></slot>
3031
- </div>
3032
- </div>
3033
- `}}
3034
-
3035
- var iconVersion = '9.1.2';
3036
-
3037
- var styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
3038
-
3039
- var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
3040
-
3041
- var tokensCss$1 = i$2`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
3042
-
3043
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3044
- // See LICENSE in the project root for license information.
3045
- /* eslint-disable max-lines */
3046
- // ---------------------------------------------------------------------
3047
-
3048
-
3049
- const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
3050
- const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
3051
- 'xl',
3052
- 'lg',
3053
- 'md',
3054
- 'sm',
3055
- 'xs',
3056
- ];
3057
-
3058
- /**
3059
- * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
3060
- * @csspart bibContainer - Apply css to the bib container.
3061
- */
3062
-
3063
- class AuroDropdownBib extends i {
3064
- // not extending AuroElement because Bib needs only `shape` prop
3065
- constructor() {
3066
- super();
3067
-
3068
- /**
3069
- * @private
3070
- */
3071
- this._mobileBreakpointValue = undefined;
3072
-
3073
- AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
3074
-
3075
- this.shape = "rounded";
3076
- this.matchWidth = false;
3077
- }
3078
-
3079
- static get styles() {
3080
- return [
3081
- styleCss$2,
3082
- colorCss$2,
3083
- tokensCss$1
3084
- ];
3085
- }
3086
-
3087
- static get properties() {
3088
- return {
3089
-
3090
- /**
3091
- * If declared, will take the fullscreen when the bib is displayed.
3092
- */
3093
- isFullscreen: {
3094
- type: Boolean,
3095
- reflect: true
3096
- },
3097
-
3098
- /**
3099
- * If declared, will apply all styles for the common theme.
3100
- */
3101
- common: {
3102
- type: Boolean,
3103
- reflect: true
3104
- },
3105
-
3106
- /**
3107
- * If declared, will apply extra padding to bib content.
3108
- */
3109
- inset: {
3110
- type: Boolean,
3111
- reflect: true
3112
- },
3113
-
3114
- /**
3115
- * If declared, the bib width will match the trigger width.
3116
- * @private
3117
- */
3118
- matchWidth: {
3119
- type: Boolean,
3120
- reflect: true
3121
- },
3122
-
3123
- /**
3124
- * If declared, will apply border-radius to the bib.
3125
- */
3126
- rounded: {
3127
- type: Boolean,
3128
- reflect: true
3129
- },
3130
-
3131
- /**
3132
- * A reference to the associated bib template element.
3133
- */
3134
- bibTemplate: {
3135
- type: Object
3136
- },
3137
-
3138
- shape: {
3139
- type: String,
3140
- reflect: true
3141
- },
3142
-
3143
- /**
3144
- * Accessible label for the dialog element, used when displayed as a modal.
3145
- * Applied via aria-labelledby on a visually hidden element rather than
3146
- * aria-label because iOS VoiceOver does not reliably read aria-label
3147
- * on <dialog> elements.
3148
- * @private
3149
- */
3150
- dialogLabel: {
3151
- type: String
3152
- },
3153
-
3154
- /**
3155
- * Overrides the native role of the dialog element.
3156
- * For example, set to `"presentation"` on desktop combobox to prevent
3157
- * VoiceOver from announcing "listbox inside of a dialog".
3158
- * When `undefined`, the dialog keeps its native role.
3159
- * @private
3160
- */
3161
- dialogRole: {
3162
- type: String
3163
- }
3164
- };
3165
- }
3166
-
3167
- set mobileFullscreenBreakpoint(value) {
3168
- // verify the defined breakpoint is valid and exit out if not
3169
- // 'disabled' is a design token breakpoint so it acts as our "undefined" value
3170
- const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
3171
- if (!validatedValue) {
3172
- this._mobileBreakpointValue = undefined;
3173
- } else {
3174
- // get the pixel value for the defined breakpoint
3175
- const docStyle = getComputedStyle(document.documentElement);
3176
- this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value);
3177
- }
3178
- }
3179
-
3180
- get mobileFullscreenBreakpoint() {
3181
- return this._mobileBreakpointValue;
3182
- }
3183
-
3184
- updated(changedProperties) {
3185
- if (changedProperties.has('isFullscreen')) {
3186
- this.childNodes.forEach((child) => {
3187
- // skip any text that is not in an HTMLElement on setting `isFullscreen` attr.
3188
- if (child.nodeName !== '#text') {
3189
- if (this.isFullscreen) {
3190
- child.setAttribute('isFullscreen', 'true');
3191
- } else {
3192
- child.removeAttribute('isFullscreen');
3193
- }
3194
- }
3195
- });
3196
-
3197
- if (this.bibTemplate) {
3198
- // If the bib template is found, set the fullscreen attribute
3199
- if (this.isFullscreen) {
3200
- this.bibTemplate.setAttribute('isFullscreen', 'true');
3201
- } else {
3202
- this.bibTemplate.removeAttribute('isFullscreen');
3203
- }
3204
- }
3205
- }
3206
- }
3207
-
3208
- connectedCallback() {
3209
- super.connectedCallback();
3210
-
3211
- // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
3212
- this.addEventListener('auro-bibtemplate-connected', (event) => {
3213
- const bibTemplate = event.detail.element;
3214
- this.bibTemplate = bibTemplate;
3215
-
3216
- if (bibTemplate) {
3217
- // If the bib template is found, set the fullscreen attribute
3218
- if (this.isFullscreen) {
3219
- bibTemplate.setAttribute('isFullscreen', 'true');
3220
- } else {
3221
- bibTemplate.removeAttribute('isFullscreen');
3222
- }
3223
- }
3224
- });
3225
- }
3226
-
3227
- firstUpdated(changedProperties) {
3228
- super.firstUpdated(changedProperties);
3229
-
3230
- const dialog = this.shadowRoot.querySelector('dialog');
3231
- this._setupCancelHandler(dialog);
3232
- this._setupKeyboardBridge(dialog);
3233
-
3234
- this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
3235
- bubbles: true,
3236
- composed: true,
3237
- detail: {
3238
- element: this
3239
- }
3240
- }));
3241
- }
3242
-
3243
- /**
3244
- * Forwards the dialog's native `cancel` event (fired on ESC) as
3245
- * an `auro-bib-cancel` custom event so parent components can close.
3246
- * @param {HTMLDialogElement} dialog
3247
- * @private
3248
- */
3249
- _setupCancelHandler(dialog) {
3250
- dialog.addEventListener('cancel', (event) => {
3251
- event.preventDefault();
3252
- this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
3253
- bubbles: true,
3254
- composed: true
3255
- }));
3256
- });
3257
- }
3258
-
3259
- /**
3260
- * showModal() creates a closed focus scope — keyboard events inside
3261
- * the dialog's shadow DOM do NOT bubble out to the combobox/select
3262
- * keydown handlers in the parent shadow DOM. This handler bridges
3263
- * that gap by re-dispatching navigation keys so they cross the
3264
- * shadow boundary and reach the menu navigation logic in the parent
3265
- * component.
3266
- *
3267
- * The trade-off: intercepting these keys means native keyboard
3268
- * behaviors that would normally "just work" must be manually
3269
- * re-implemented here:
3270
- *
3271
- * - Enter on buttons: Custom elements (auro-button) don't get the
3272
- * native Enter→click that <button> provides, so we call .click()
3273
- * directly when Enter is pressed on a button-like element.
3274
- *
3275
- * - Tab: Intercepted and re-dispatched so parent components
3276
- * (select/combobox) can select the active option and close the
3277
- * dialog. The <dialog> provides containment and isolation
3278
- * (inert background, VoiceOver focus trapping, top layer), while
3279
- * the content inside is a role="listbox" navigated via
3280
- * aria-activedescendant (options are not focusable). Tab keyboard
3281
- * behavior follows listbox conventions (select + close) because
3282
- * the dialog's native Tab trap only cycles between the close
3283
- * button and browser chrome.
3284
- *
3285
- * - Escape: The native <dialog> fires a `cancel` event on ESC
3286
- * (handled by _setupCancelHandler), so the re-dispatched Escape
3287
- * is a secondary path for parent components that also listen for
3288
- * Escape keydown.
3289
- *
3290
- * @param {HTMLDialogElement} dialog
3291
- * @private
3292
- */
3293
- _setupKeyboardBridge(dialog) {
3294
- const navKeys = new Set([
3295
- 'ArrowUp',
3296
- 'ArrowDown',
3297
- 'Enter',
3298
- 'Escape',
3299
- 'Tab'
3300
- ]);
3301
-
3302
- dialog.addEventListener('keydown', (event) => {
3303
- if (!navKeys.has(event.key)) {
3304
- return;
3305
- }
3306
-
3307
- // Custom elements (auro-button) don't get the native Enter→click
3308
- // behavior that <button> has. Find the button in the composed path
3309
- // and click it directly.
3310
- if (event.key === 'Enter') {
3311
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3312
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3313
- if (btn) {
3314
- event.preventDefault();
3315
- event.stopPropagation();
3316
- btn.click();
3317
- return;
3318
- }
3319
- }
3320
-
3321
- event.preventDefault();
3322
- event.stopPropagation();
3323
- const newEvent = new KeyboardEvent('keydown', {
3324
- key: event.key,
3325
- code: event.code,
3326
- shiftKey: event.shiftKey,
3327
- altKey: event.altKey,
3328
- ctrlKey: event.ctrlKey,
3329
- metaKey: event.metaKey,
3330
- bubbles: true,
3331
- composed: true,
3332
- cancelable: true
3333
- });
3334
- this.dispatchEvent(newEvent);
3335
- });
3336
- }
3337
-
3338
- /**
3339
- * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
3340
- *
3341
- * The showModal() function places the dialog in the browser's **top layer**,
3342
- * which is a separate rendering layer above the normal DOM. On mobile, the
3343
- * compositor processes visual-viewport panning before top-layer touch
3344
- * handling. This means the entire viewport — including the top-layer dialog
3345
- * — can be panned by a touch gesture, causing the page behind the dialog to
3346
- * scroll into view. To prevent this, we add a touchmove listener that cancels
3347
- * the event if the touch started outside the dialog or any scrollable child within it.
3348
- *
3349
- * @private
3350
- */
3351
- _lockTouchScroll() {
3352
- const dialog = this.shadowRoot.querySelector('dialog');
3353
-
3354
- this._touchMoveHandler = (event) => {
3355
- // Walk the composed path (which crosses shadow DOM boundaries) to
3356
- // check whether the touch started inside a scrollable element that
3357
- // lives within the dialog. If so, allow the scroll.
3358
- for (const el of event.composedPath()) {
3359
- if (el === dialog) {
3360
- // Reached the dialog boundary without finding a scrollable child.
3361
- break;
3362
- }
3363
- if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
3364
- const { overflowY } = getComputedStyle(el);
3365
- if (overflowY === 'auto' || overflowY === 'scroll') {
3366
- return;
3367
- }
3368
- }
3369
- }
3370
-
3371
- event.preventDefault();
3372
- };
3373
-
3374
- document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
3375
- }
3376
-
3377
- /**
3378
- * Removes the touchmove listener added by _lockTouchScroll().
3379
- * @private
3380
- */
3381
- _unlockTouchScroll() {
3382
- if (this._touchMoveHandler) {
3383
- document.removeEventListener('touchmove', this._touchMoveHandler);
3384
- this._touchMoveHandler = undefined;
3385
- }
3386
- }
3387
-
3388
- open(modal = true) {
3389
- const dialog = this.shadowRoot.querySelector('dialog');
3390
-
3391
- if (dialog && !dialog.open) {
3392
- if (modal) {
3393
- // Prevent showModal() from scrolling the page to bring the dialog
3394
- // into view. Locking overflow on <html> blocks the viewport scroll
3395
- // that browsers perform natively; we release it immediately after
3396
- // so it doesn't interfere with the modal's focus management.
3397
- const { documentElement } = document;
3398
- const prevOverflow = documentElement.style.overflow;
3399
- documentElement.style.overflow = 'hidden';
3400
-
3401
- try {
3402
- dialog.showModal();
3403
- } finally {
3404
- // Restore overflow immediately — the lock was only needed to
3405
- // suppress the browser's native scroll-into-view behavior
3406
- // triggered by showModal(). Keeping it locked would block
3407
- // scrolling inside the modal.
3408
- documentElement.style.overflow = prevOverflow;
3409
- }
3410
-
3411
- this._lockTouchScroll();
3412
-
3413
- } else {
3414
- // Open the inner dialog so slotted content renders.
3415
- dialog.setAttribute('open', '');
3416
-
3417
- // Use popover on the host for top-layer placement without focus
3418
- // management or inertness. This escapes ancestor container-type
3419
- // containment that would trap position:fixed relative to the container.
3420
- // Set popover dynamically to avoid UA [popover]:not(:popover-open) { display: none }
3421
- // interfering with Floating UI measurement before showPopover().
3422
- this.setAttribute('popover', 'manual');
3423
- this.showPopover();
3424
- }
3425
- }
3426
- }
3427
-
3428
- /**
3429
- * Closes the dialog.
3430
- */
3431
- close() {
3432
- const dialog = this.shadowRoot.querySelector('dialog');
3433
-
3434
- if (dialog && dialog.open) {
3435
- this._unlockTouchScroll();
3436
- dialog.close();
3437
- }
3438
- // Clean up the popover used for desktop top-layer placement.
3439
- // Remove the attribute entirely so the UA rule
3440
- // [popover]:not(:popover-open) { display: none } doesn't hide
3441
- // the host while Floating UI measures it for the next open.
3442
- if (this.matches(':popover-open')) {
3443
- this.hidePopover();
3444
- this.removeAttribute('popover');
3445
- }
3446
- }
3447
-
3448
- // function that renders the HTML and CSS into the scope of the component
3449
- render() {
3450
- const classes = {
3451
- container: true
3452
- };
3453
-
3454
- // Since this class does not inherit from AuroElement, we apply the shape-related class within the `render` function,
3455
- // mimicking the class naming convention used in AuroElement.resetShapeClasses.
3456
- classes[`shape-${this.shape}`] = true;
3457
-
3458
- return u$2`
3459
- <dialog class="${e$3(classes)}" part="bibContainer" role="${o(this.dialogRole)}" aria-labelledby="${o(this.dialogLabel ? 'dialogLabel' : undefined)}">
3460
- ${this.dialogLabel ? u$2`<span id="dialogLabel" class="util_displayHiddenVisually">${this.dialogLabel}</span>` : ''}
3461
- <slot></slot>
3462
- </dialog>
3463
- `;
3464
- }
3465
- }
3466
-
3467
- var shapeSizeCss = i$2`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
3468
-
3469
- var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([disabled],[onDark])) .wrapper:focus-within,:host(:not([disabled],[onDark])) .wrapper:active,:host(:not([disabled],[appearance=inverse])) .wrapper:focus-within,:host(:not([disabled],[appearance=inverse])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([disabled],[onDark])) .wrapper:hover,:host(:not([disabled],[appearance=inverse])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([ondark])) .wrapper,:host(:not([appearance=inverse])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([onDark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([onDark])[disabled]) #triggerLabel,:host(:not([appearance=inverse])[disabled]) #triggerLabel{cursor:default}:host(:not([ondark])[error]),:host(:not([appearance=inverse])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([disabled])[onDark]) .wrapper:focus-within,:host(:not([disabled])[onDark]) .wrapper:active,:host(:not([disabled])[appearance=inverse]) .wrapper:focus-within,:host(:not([disabled])[appearance=inverse]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host(:not([disabled])[onDark]) .wrapper:hover,:host(:not([disabled])[appearance=inverse]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark]) .label,:host([onDark]) .helpText,:host([appearance=inverse]) .label,:host([appearance=inverse]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper,:host([appearance=inverse]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([onDark][disabled]) #triggerLabel,:host([appearance=inverse][disabled]) #triggerLabel{cursor:default}:host([ondark][error]),:host([appearance=inverse][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
3470
-
3471
- var styleCss$1 = i$2`:host{position:relative;display:block;text-align:left}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
3472
-
3473
- var classicColorCss = i$2``;
3474
-
3475
- var classicLayoutCss = i$2`@media(hover: hover){:host(:not([disabled])) .wrapper:hover{cursor:pointer}}:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
3476
-
3477
- var styleEmphasizedCss = i$2`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
3478
-
3479
- var styleSnowflakeCss = i$2`:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-400, 2rem));margin-left:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-400, 2rem));margin-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .trigger,:host([layout*=snowflake]) .helpText{text-align:center}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-200, 1rem)}`;
3480
-
3481
- var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]),:host([appearance=inverse]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]),:host([appearance=inverse][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
3482
-
3483
- var styleCss = i$2`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{position:relative;display:block}.helptext-wrapper{display:none}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
3484
-
3485
- var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
3486
-
3487
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3488
- // See LICENSE in the project root for license information.
3489
-
3490
- // ---------------------------------------------------------------------
3491
-
3492
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
3493
-
3494
- class AuroLibraryRuntimeUtils {
3495
-
3496
- /* eslint-disable jsdoc/require-param */
3497
-
3498
- /**
3499
- * This will register a new custom element with the browser.
3500
- * @param {String} name - The name of the custom element.
3501
- * @param {Object} componentClass - The class to register as a custom element.
3502
- * @returns {void}
3503
- */
3504
- registerComponent(name, componentClass) {
3505
- if (!customElements.get(name)) {
3506
- customElements.define(name, class extends componentClass {});
3507
- }
3508
- }
3509
-
3510
- /**
3511
- * Finds and returns the closest HTML Element based on a selector.
3512
- * @returns {void}
3513
- */
3514
- closestElement(
3515
- selector, // selector like in .closest()
3516
- base = this, // extra functionality to skip a parent
3517
- __Closest = (el, found = el && el.closest(selector)) =>
3518
- !el || el === document || el === window
3519
- ? null // standard .closest() returns null for non-found selectors also
3520
- : found
3521
- ? found // found a selector INside this element
3522
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
3523
- ) {
3524
- return __Closest(base);
3525
- }
3526
- /* eslint-enable jsdoc/require-param */
3527
-
3528
- /**
3529
- * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
3530
- * @param {Object} elem - The element to check.
3531
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
3532
- * @returns {void}
3533
- */
3534
- handleComponentTagRename(elem, tagName) {
3535
- const tag = tagName.toLowerCase();
3536
- const elemTag = elem.tagName.toLowerCase();
3537
-
3538
- if (elemTag !== tag) {
3539
- elem.setAttribute(tag, true);
3540
- }
3541
- }
3542
-
3543
- /**
3544
- * Validates if an element is a specific Auro component.
3545
- * @param {Object} elem - The element to validate.
3546
- * @param {String} tagName - The name of the Auro component to check against.
3547
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
3548
- */
3549
- elementMatch(elem, tagName) {
3550
- const tag = tagName.toLowerCase();
3551
- const elemTag = elem.tagName.toLowerCase();
3552
-
3553
- return elemTag === tag || elem.hasAttribute(tag);
3554
- }
3555
-
3556
- /**
3557
- * Gets the text content of a named slot.
3558
- * @returns {String}
3559
- * @private
3560
- */
3561
- getSlotText(elem, name) {
3562
- const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
3563
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
3564
- const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
3565
-
3566
- return text || null;
3567
- }
3568
- }
3569
-
3570
- // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3571
- // See LICENSE in the project root for license information.
3572
-
3573
-
3574
- /**
3575
- * Displays help text or error messages within form elements - Internal Use Only.
3576
- */
3577
- class AuroHelpText extends i {
3578
-
3579
- constructor() {
3580
- super();
3581
-
3582
- this.error = false;
3583
- this.appearance = "default";
3584
- this.onDark = false;
3585
- this.hasTextContent = false;
3586
-
3587
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
3588
- }
3589
-
3590
- static get styles() {
3591
- return [
3592
- colorCss,
3593
- styleCss,
3594
- tokensCss
3595
- ];
3596
- }
3597
-
3598
- // function to define props used within the scope of this component
3599
- static get properties() {
3600
- return {
3601
-
3602
- /**
3603
- * Defines whether the component will be on lighter or darker backgrounds.
3604
- * @property {'default', 'inverse'}
3605
- * @default 'default'
3606
- */
3607
- appearance: {
3608
- type: String,
3609
- reflect: true
3610
- },
3611
-
3612
- /**
3613
- * @private
3614
- */
3615
- slotNodes: {
3616
- type: Boolean,
3617
- },
3618
-
3619
- /**
3620
- * @private
3621
- */
3622
- hasTextContent: {
3623
- type: Boolean,
3624
- },
3625
-
3626
- /**
3627
- * If declared, make font color red.
3628
- */
3629
- error: {
3630
- type: Boolean,
3631
- reflect: true,
3632
- },
3633
-
3634
- /**
3635
- * DEPRECATED - use `appearance` instead.
3636
- */
3637
- onDark: {
3638
- type: Boolean,
3639
- reflect: true
3640
- }
3641
- };
3642
- }
3643
-
3644
- /**
3645
- * This will register this element with the browser.
3646
- * @param {string} [name="auro-helptext"] - The name of element that you want to register to.
3647
- *
3648
- * @example
3649
- * AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
3650
- *
3651
- */
3652
- static register(name = "auro-helptext") {
3653
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
3654
- }
3655
-
3656
- updated() {
3657
- this.handleSlotChange();
3658
- }
3659
-
3660
- handleSlotChange(event) {
3661
- if (event) {
3662
- this.slotNodes = event.target.assignedNodes();
3663
- }
3664
-
3665
- this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
3666
- }
3667
-
3668
- /**
3669
- * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
3670
- *
3671
- * @param {NodeList|Array} nodes - The list of nodes to check for content.
3672
- * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
3673
- * @private
3674
- */
3675
- checkSlotsForContent(nodes) {
3676
- if (!nodes) {
3677
- return false;
3678
- }
3679
-
3680
- return nodes.some((node) => {
3681
- if (node.textContent.trim()) {
3682
- return true;
3683
- }
3684
-
3685
- if (!node.querySelector) {
3686
- return false;
3687
- }
3688
-
3689
- const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
3690
- if (!nestedSlot) {
3691
- return false;
3692
- }
3693
-
3694
- const nestedSlotNodes = nestedSlot.assignedNodes();
3695
- return this.checkSlotsForContent(nestedSlotNodes);
3696
- });
3697
- }
3698
-
3699
- // function that renders the HTML and CSS into the scope of the component
3700
- render() {
3701
- return b$1`
3702
- <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
3703
- <slot @slotchange=${this.handleSlotChange}></slot>
3704
- </div>
3705
- `;
3706
- }
3707
- }
3708
-
3709
- var formkitVersion = '202603172151';
3710
-
3711
- class AuroElement extends i {
3712
- static get properties() {
3713
- return {
3714
-
3715
- /**
3716
- * Defines the language of an element.
3717
- * @default {'default'}
3718
- */
3719
- layout: {
3720
- type: String,
3721
- attribute: "layout",
3722
- reflect: true
3723
- },
3724
-
3725
- shape: {
3726
- type: String,
3727
- attribute: "shape",
3728
- reflect: true
3729
- },
3730
-
3731
- size: {
3732
- type: String,
3733
- attribute: "size",
3734
- reflect: true
3735
- },
3736
-
3737
- onDark: {
3738
- type: Boolean,
3739
- attribute: "ondark",
3740
- reflect: true
3741
- }
3742
- };
3743
- }
3744
-
3745
- /**
3746
- * Returns true if the element has focus.
3747
- * @private
3748
- * @returns {boolean} - Returns true if the element has focus.
3749
- */
3750
- get componentHasFocus() {
3751
- return this.matches(':focus') || this.matches(':focus-within');
3752
- }
3753
-
3754
- resetShapeClasses() {
3755
- const wrapper = this.shadowRoot.querySelector('.wrapper');
3756
-
3757
- if (wrapper) {
3758
- wrapper.classList.forEach((className) => {
3759
- if (className.startsWith('shape-')) {
3760
- wrapper.classList.remove(className);
3761
- }
3762
- });
3763
-
3764
- if (this.shape && this.size) {
3765
- wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
3766
- } else {
3767
- wrapper.classList.add('shape-none');
3768
- }
3769
- }
3770
-
3771
- }
3772
-
3773
- resetLayoutClasses() {
3774
- if (this.layout) {
3775
- const wrapper = this.shadowRoot.querySelector('.wrapper');
3776
-
3777
- if (wrapper) {
3778
- wrapper.classList.forEach((className) => {
3779
- if (className.startsWith('layout-')) {
3780
- wrapper.classList.remove(className);
3781
- }
3782
- });
3783
-
3784
- wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
3785
- }
3786
- }
3787
- }
3788
-
3789
- updateComponentArchitecture() {
3790
- this.resetLayoutClasses();
3791
- this.resetShapeClasses();
3792
- }
3793
-
3794
- updated(changedProperties) {
3795
- if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
3796
- this.updateComponentArchitecture();
3797
- }
3798
- }
3799
-
3800
- // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
3801
- // This will catch if an invalid layout value is passed in and render the default layout if so.
3802
- render() {
3803
- try {
3804
- return this.renderLayout();
3805
- } catch (error) {
3806
- // failed to get the defined layout
3807
- console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
3808
-
3809
- // fallback to the default layout
3810
- return this.getLayout('default');
3811
- }
3812
- }
3813
- }
3814
-
3815
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3816
- // See LICENSE in the project root for license information.
3817
-
3818
-
3819
- /**
3820
- * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
3821
- * @customElement auro-dropdown
3822
- *
3823
- * @slot - Default slot for the dropdown bib content.
3824
- * @slot helpText - Defines the content of the helpText.
3825
- * @slot trigger - Defines the content of the trigger.
3826
- * @csspart trigger - The trigger content container.
3827
- * @csspart chevron - The collapsed/expanded state icon container.
3828
- * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
3829
- * @csspart helpText - The helpText content container.
3830
- * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
3831
- * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
3832
- * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
3833
- */
3834
- class AuroDropdown extends AuroElement {
3835
- static get shadowRootOptions() {
3836
- return {
3837
- ...AuroElement.shadowRootOptions,
3838
- delegatesFocus: true,
3839
- };
3840
- }
3841
-
3842
- constructor() {
3843
- super();
3844
-
3845
- this.isPopoverVisible = false;
3846
- this.isBibFullscreen = false;
3847
- this.matchWidth = false;
3848
- this.noHideOnThisFocusLoss = false;
3849
-
3850
- this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3851
-
3852
- // Layout Config
3853
- this.layout = undefined;
3854
- this.shape = undefined;
3855
- this.size = undefined;
3856
-
3857
- this.parentBorder = false;
3858
-
3859
- /** @private */
3860
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3861
-
3862
- /** @private */
3863
- this.bibElement = e$2();
3864
-
3865
- this._intializeDefaults();
3866
- }
3867
-
3868
- /**
3869
- * @private
3870
- * @returns {object} Class definition for the wrapper element.
3871
- */
3872
- get commonWrapperClasses() {
3873
- return {
3874
- 'trigger': true,
3875
- 'wrapper': true,
3876
- 'hasFocus': this.hasFocus,
3877
- 'simple': this.simple,
3878
- 'parentBorder': this.parentBorder
3879
- };
3880
- }
3881
-
3882
- /**
3883
- * @private
3884
- * @returns {void} Internal defaults.
3885
- */
3886
- _intializeDefaults() {
3887
- this.appearance = 'default';
3888
- this.chevron = false;
3889
- this.disabled = false;
3890
- this.disableFocusTrap = false;
3891
- this.error = false;
3892
- this.tabIndex = 0;
3893
- this.noToggle = false;
3894
- this.a11yRole = 'button';
3895
- this.onDark = false;
3896
- this.showTriggerBorders = true;
3897
- this.triggerContentFocusable = false;
3898
- this.simple = false;
3899
-
3900
- // floaterConfig
3901
- this.placement = 'bottom-start';
3902
- this.offset = 0;
3903
- this.noFlip = false;
3904
- this.shift = false;
3905
- this.autoPlacement = false;
3906
-
3907
- /**
3908
- * @private
3909
- */
3910
- this.hasTriggerContent = false;
3911
-
3912
- /**
3913
- * @private
3914
- */
3915
- this.triggerContentSlot = undefined;
3916
-
3917
- /**
3918
- * @private
3919
- */
3920
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
3921
-
3922
- /**
3923
- * @private
3924
- */
3925
- this.floater = new AuroFloatingUI();
3926
-
3927
- /**
3928
- * Generate unique names for dependency components.
3929
- */
3930
- const versioning = new AuroDependencyVersioning();
3931
-
3932
- /**
3933
- * @private
3934
- */
3935
- this.iconTag = versioning.generateTag('auro-formkit-dropdown-icon', iconVersion, _);
3936
-
3937
- /**
3938
- * @private
3939
- */
3940
- this.dropdownBibTag = versioning.generateTag('auro-formkit-dropdown-dropdownbib', formkitVersion, AuroDropdownBib);
3941
-
3942
- /**
3943
- * @private
3944
- */
3945
- this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', formkitVersion, AuroHelpText);
3946
-
3947
- /**
3948
- * @private
3949
- */
3950
- this.bindFocusEventToTrigger = this.bindFocusEventToTrigger.bind(this);
3951
- }
3952
-
3953
- /**
3954
- * @ignore
3955
- */
3956
- get floaterConfig() {
3957
- return {
3958
- placement: this.placement,
3959
- flip: !this.noFlip,
3960
- shift: this.shift,
3961
- autoPlacement: this.autoPlacement,
3962
- offset: this.offset,
3963
- };
3964
- }
3965
-
3966
- /**
3967
- * Public method to hide the dropdown.
3968
- * @returns {void}
3969
- */
3970
- hide() {
3971
- this.floater.hideBib();
3972
- }
3973
-
3974
- /**
3975
- * Public method to show the dropdown.
3976
- * @returns {void}
3977
- */
3978
- show() {
3979
- this.floater.showBib();
3980
-
3981
- // Open dialog synchronously so callers remain in the user gesture
3982
- // chain. This is critical for mobile browsers (iOS Safari) to keep
3983
- // the virtual keyboard open when transitioning from the trigger
3984
- // input to an input inside the fullscreen dialog. Without this,
3985
- // showModal() fires asynchronously via Lit's update cycle, which
3986
- // falls outside the user activation window and causes iOS to
3987
- // dismiss the keyboard.
3988
- if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
3989
- const useModal = !this.disableFocusTrap;
3990
- this.bibElement.value.open(useModal);
3991
- }
3992
- }
3993
-
3994
- /**
3995
- * When bib is open, focus on the first element inside of bib.
3996
- * If not, trigger element will get focus.
3997
- */
3998
- focus() {
3999
- if (this.isPopoverVisible && this.bibContent) {
4000
- const focusables = getFocusableElements(this.bibContent);
4001
- if (focusables.length > 0) {
4002
- focusables[0].focus();
4003
- }
4004
- } else {
4005
- this.trigger.focus();
4006
- }
4007
- }
4008
-
4009
- /**
4010
- * Sets the active descendant element for accessibility.
4011
- * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
4012
- * This function is used in components that contain `auro-dropdown` to set the active descendant.
4013
- * @private
4014
- * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
4015
- * @returns {void}
4016
- */
4017
- setActiveDescendant(element) {
4018
- if (!this.trigger) {
4019
- return;
4020
- }
4021
-
4022
- if (element) {
4023
- this.trigger.ariaActiveDescendantElement = element;
4024
- } else {
4025
- this.trigger.ariaActiveDescendantElement = null;
4026
- this.trigger.removeAttribute('aria-activedescendant');
4027
- }
4028
- }
4029
-
4030
- // function to define props used within the scope of this component
4031
- static get properties() {
4032
- return {
4033
-
4034
- /**
4035
- * The value for the role attribute of the trigger element.
4036
- */
4037
- a11yRole: {
4038
- type: String,
4039
- attribute: false,
4040
- reflect: false
4041
- },
4042
-
4043
- /**
4044
- * Defines whether the component will be on lighter or darker backgrounds.
4045
- * @type {'default' | 'inverse'}
4046
- * @default 'default'
4047
- */
4048
- appearance: {
4049
- type: String,
4050
- reflect: true
4051
- },
4052
-
4053
- /**
4054
- * If declared, bib's position will be automatically calculated where to appear.
4055
- */
4056
- autoPlacement: {
4057
- type: Boolean,
4058
- reflect: true
4059
- },
4060
-
4061
- /**
4062
- * If declared, the dropdown will only show by calling the API .show() public method.
4063
- */
4064
- disableEventShow: {
4065
- type: Boolean,
4066
- reflect: true
4067
- },
4068
-
4069
- /**
4070
- * If declared, applies a border around the trigger slot.
4071
- */
4072
- simple: {
4073
- type: Boolean,
4074
- reflect: true
4075
- },
4076
-
4077
- /**
4078
- * If declared, the dropdown displays a chevron on the right.
4079
- */
4080
- chevron: {
4081
- type: Boolean,
4082
- reflect: true,
4083
- attribute: 'chevron'
4084
- },
4085
-
4086
- /**
4087
- * If declared, the dropdown is not interactive.
4088
- */
4089
- disabled: {
4090
- type: Boolean,
4091
- reflect: true
4092
- },
4093
-
4094
- /**
4095
- * If declared, the focus trap inside of bib will be turned off.
4096
- */
4097
- disableFocusTrap: {
4098
- type: Boolean,
4099
- reflect: true
4100
- },
4101
-
4102
- /**
4103
- * @private
4104
- */
4105
- dropdownWidth: {
4106
- type: Number
4107
- },
4108
-
4109
- /**
4110
- * The unique ID for the dropdown bib element.
4111
- * @private
4112
- */
4113
- dropdownId: {
4114
- type: String,
4115
- reflect: false,
4116
- attribute: false
4117
- },
4118
-
4119
- /**
4120
- * If declared, will apply error UI to the dropdown.
4121
- */
4122
- error: {
4123
- type: Boolean,
4124
- reflect: true
4125
- },
4126
-
4127
- /**
4128
- * Contains the help text message for the current validity error.
4129
- */
4130
- errorMessage: {
4131
- type: String
4132
- },
4133
-
4134
- /**
4135
- * If declared, the bib will display when focus is applied to the trigger.
4136
- */
4137
- focusShow: {
4138
- type: Boolean,
4139
- reflect: true
4140
- },
4141
-
4142
- /**
4143
- * If true, the dropdown bib is displayed.
4144
- */
4145
- isPopoverVisible: {
4146
- type: Boolean,
4147
- reflect: true,
4148
- attribute: 'open'
4149
- },
4150
-
4151
- /**
4152
- * If true, the dropdown bib is taking the fullscreen when it's open.
4153
- */
4154
- isBibFullscreen: {
4155
- type: Boolean,
4156
- reflect: true
4157
- },
4158
-
4159
- /**
4160
- * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
4161
- */
4162
- hoverToggle: {
4163
- type: Boolean,
4164
- reflect: true
4165
- },
4166
-
4167
- /**
4168
- * @private
4169
- */
4170
- hasTriggerContent: {
4171
- type: Boolean
4172
- },
4173
-
4174
- /**
4175
- * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
4176
- *
4177
- * When expanded, the dropdown will automatically display in fullscreen mode
4178
- * if the screen size is equal to or smaller than the selected breakpoint.
4179
- * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
4180
- * @default 'sm'
4181
- */
4182
- fullscreenBreakpoint: {
4183
- type: String,
4184
- reflect: true
4185
- },
4186
-
4187
- /**
4188
- * Sets the layout of the dropdown.
4189
- * @type {'classic' | 'emphasized' | 'snowflake'}
4190
- * @default 'classic'
4191
- */
4192
- layout: {
4193
- type: String,
4194
- reflect: true
4195
- },
4196
-
4197
- /**
4198
- * Defines if the trigger should size based on the parent element providing the border UI.
4199
- * @private
4200
- */
4201
- parentBorder: {
4202
- type: Boolean,
4203
- reflect: true
4204
- },
4205
-
4206
- /**
4207
- * If declared, the popover and trigger will be set to the same width.
4208
- */
4209
- matchWidth: {
4210
- type: Boolean,
4211
- reflect: true
4212
- },
4213
-
4214
- /**
4215
- * If declared, the bib will NOT flip to an alternate position
4216
- * when there isn't enough space in the specified `placement`.
4217
- */
4218
- noFlip: {
4219
- type: Boolean,
4220
- reflect: true
4221
- },
4222
-
4223
- /**
4224
- * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
4225
- */
4226
- shift: {
4227
- type: Boolean,
4228
- reflect: true
4229
- },
4230
-
4231
- /**
4232
- * If declared, the dropdown will not hide when moving focus outside the element.
4233
- */
4234
- noHideOnThisFocusLoss: {
4235
- type: Boolean,
4236
- reflect: true
4237
- },
4238
-
4239
- /**
4240
- * If declared, the trigger will only show the dropdown bib.
4241
- */
4242
- noToggle: {
4243
- type: Boolean,
4244
- reflect: true
4245
- },
4246
-
4247
- /**
4248
- * Gap between the trigger element and bib.
4249
- * @default 0
4250
- */
4251
- offset: {
4252
- type: Number,
4253
- reflect: true
4254
- },
4255
-
4256
- /**
4257
- * DEPRECATED - use `appearance="inverse"` instead.
4258
- */
4259
- onDark: {
4260
- type: Boolean,
4261
- reflect: true
4262
- },
4263
-
4264
- /**
4265
- * If declared, and a function is set, that function will execute when the slot content is updated.
4266
- */
4267
- onSlotChange: {
4268
- type: Function,
4269
- reflect: false
4270
- },
4271
-
4272
- /**
4273
- * Position where the bib should appear relative to the trigger.
4274
- * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
4275
- * @default 'bottom-start'
4276
- */
4277
- placement: {
4278
- type: String,
4279
- reflect: true
4280
- },
4281
-
4282
- /**
4283
- * @private
4284
- */
4285
- tabIndex: {
4286
- type: Number
4287
- },
4288
-
4289
- /**
4290
- * Accessible label for the dropdown bib dialog element.
4291
- * @private
4292
- */
4293
- bibDialogLabel: {
4294
- type: String,
4295
- attribute: false,
4296
- reflect: false
4297
- }
4298
- };
4299
- }
4300
-
4301
- static get styles() {
4302
- return [
4303
- styleCss$1,
4304
- tokensCss$1,
4305
- colorCss$1,
4306
-
4307
- // default layout
4308
- classicColorCss,
4309
- classicLayoutCss,
4310
-
4311
- // emphasized layout
4312
- styleEmphasizedCss,
4313
-
4314
- // snowflake layout
4315
- styleSnowflakeCss,
4316
-
4317
- shapeSizeCss
4318
- ];
4319
- }
4320
-
4321
- /**
4322
- * This will register this element with the browser.
4323
- * @param {string} [name="auro-dropdown"] - The name of the element that you want to register.
4324
- *
4325
- * @example
4326
- * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
4327
- *
4328
- */
4329
- static register(name = "auro-dropdown") {
4330
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
4331
- }
4332
-
4333
- /**
4334
- * Accessor for reusing the focusable entity query string.
4335
- * @private
4336
- * @returns {string}
4337
- */
4338
- get focusableEntityQuery () {
4339
- return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
4340
- }
4341
-
4342
- connectedCallback() {
4343
- super.connectedCallback();
4344
- }
4345
-
4346
- disconnectedCallback() {
4347
- super.disconnectedCallback();
4348
- if (this.floater) {
4349
- this.floater.hideBib('disconnect');
4350
- this.floater.disconnect();
4351
- }
4352
- this.clearTriggerFocusEventBinding();
4353
- }
4354
-
4355
- updated(changedProperties) {
4356
- super.updated(changedProperties);
4357
- this.floater.handleUpdate(changedProperties);
4358
-
4359
- // Note: `disabled` is not a breakpoint (it is not a screen size),
4360
- // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
4361
- if (changedProperties.has('fullscreenBreakpoint')) {
4362
- this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
4363
- }
4364
-
4365
- // when trigger's content is changed without any attribute or node change,
4366
- // `requestUpdate` needs to be called to update hasTriggerContent
4367
- if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4368
- this.handleTriggerContentSlotChange();
4369
- }
4370
-
4371
- if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
4372
- if (this.isPopoverVisible) {
4373
- // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
4374
- // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
4375
- const useModal = this.isBibFullscreen && !this.disableFocusTrap;
4376
- this.bibElement.value.open(useModal);
4377
- } else {
4378
- this.bibElement.value.close();
4379
- }
4380
- }
4381
-
4382
- // When fullscreen strategy changes while open, re-open dialog with correct mode
4383
- // (e.g. resizing from desktop → mobile while dropdown is open)
4384
- if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
4385
- const useModal = this.isBibFullscreen && !this.disableFocusTrap;
4386
- this.bibElement.value.close();
4387
- this.bibElement.value.open(useModal);
4388
- }
4389
- }
4390
-
4391
- /**
4392
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
4393
- * @private
4394
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
4395
- */
4396
- handleDropdownToggle(event) {
4397
- this.updateFocusTrap();
4398
- this.isPopoverVisible = event.detail.expanded;
4399
- const eventType = event.detail.eventType || "unknown";
4400
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4401
- this.trigger.focus();
4402
- }
4403
- }
4404
-
4405
- firstUpdated() {
4406
- // Configure the floater to, this will generate the ID for the bib
4407
- this.floater.configure(this, 'auroDropdown');
4408
-
4409
- // Prevent `contain: layout` on the dropdown host. Layout containment
4410
- // creates a containing block for position:fixed descendants (the bib),
4411
- // which clips the bib inside ancestor overflow contexts such as a
4412
- // <dialog> element. Without it, the bib's position:fixed is relative
4413
- // to the viewport, letting Floating UI's flip middleware detect
4414
- // viewport boundaries and the bib escape overflow clipping.
4415
- const origConfigureBibStrategy = this.floater.configureBibStrategy.bind(this.floater);
4416
- this.floater.configureBibStrategy = (value) => {
4417
- origConfigureBibStrategy(value);
4418
- this.style.contain = '';
4419
- };
4420
-
4421
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4422
-
4423
- // Handle ESC key from dialog's cancel event
4424
- this.addEventListener('auro-bib-cancel', () => {
4425
- this.floater.hideBib('keydown');
4426
- });
4427
-
4428
- /**
4429
- * @description Let subscribers know that the dropdown ID ha been generated and added.
4430
- * @event auroDropdown-idAdded
4431
- * @type {Object<key: 'id', value: string>} - The ID of the dropdown bib element.
4432
- */
4433
- this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
4434
-
4435
- // Set the bib ID locally for aria-controls (must be in the same shadow root as the trigger)
4436
- if (!this.triggerContentFocusable) {
4437
- this.dropdownId = this.floater.element.bib.id;
4438
- }
4439
-
4440
- this.bibContent = this.floater.element.bib;
4441
-
4442
- // Add the tag name as an attribute if it is different than the component name
4443
- this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
4444
-
4445
- this.trigger.addEventListener('click', () => {
4446
- this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
4447
- bubbles: true,
4448
- composed: true
4449
- }));
4450
- });
4451
- }
4452
-
4453
- /**
4454
- * Exposes CSS parts for styling from parent components.
4455
- * @returns {void}
4456
- */
4457
- exposeCssParts() {
4458
- this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, size:dropdownSize');
4459
- }
4460
-
4461
- /**
4462
- * Determines if content is within a custom slot.
4463
- * @private
4464
- * @param {HTMLElement} element - The element to check.
4465
- * @returns {Boolean}
4466
- */
4467
- isCustomSlotContent(element) {
4468
- let currentElement = element;
4469
-
4470
- let inCustomSlot = false;
4471
-
4472
- while (currentElement) {
4473
- currentElement = currentElement.parentElement;
4474
-
4475
- if (currentElement && currentElement.hasAttribute('slot')) {
4476
- inCustomSlot = true;
4477
- break;
4478
- }
4479
- }
4480
-
4481
- return inCustomSlot;
4482
- }
4483
-
4484
- /**
4485
- * Function to support @focusin event.
4486
- * @private
4487
- * @return {void}
4488
- */
4489
- handleFocusin() {
4490
- this.hasFocus = true;
4491
- }
4492
-
4493
- /**
4494
- * @private
4495
- */
4496
- updateFocusTrap() {
4497
- if (this.isPopoverVisible && !this.disableFocusTrap) {
4498
- if (!this.isBibFullscreen) {
4499
- // Desktop: show() doesn't trap focus, so use FocusTrap
4500
- this.focusTrap = new FocusTrap(this.bibContent);
4501
- this.focusTrap.focusFirstElement();
4502
- }
4503
- // Fullscreen: showModal() provides native focus trapping
4504
- return;
4505
- }
4506
-
4507
- if (this.focusTrap) {
4508
- this.focusTrap.disconnect();
4509
- this.focusTrap = undefined;
4510
- }
4511
- }
4512
-
4513
- /**
4514
- * Function to support @focusout event.
4515
- * @private
4516
- * @return {void}
4517
- */
4518
- handleFocusout() {
4519
- this.hasFocus = false;
4520
- }
4521
-
4522
- /**
4523
- * Creates and dispatches a duplicate focus event on the trigger element.
4524
- * @private
4525
- * @param {Event} event - The original focus event.
4526
- */
4527
- bindFocusEventToTrigger(event) {
4528
- const dupEvent = new FocusEvent(event.type, {
4529
- bubbles: false,
4530
- cancelable: false,
4531
- composed: true,
4532
- });
4533
- this.trigger.dispatchEvent(dupEvent);
4534
- }
4535
-
4536
- /**
4537
- * Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
4538
- * This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
4539
- * @private
4540
- */
4541
- setupTriggerFocusEventBinding() {
4542
- if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
4543
- return;
4544
- }
4545
-
4546
- this.triggerContentSlot.forEach((node) => {
4547
- if (node.querySelectorAll) {
4548
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4549
- auroElements.forEach((auroEl) => {
4550
- auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
4551
- auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
4552
- });
4553
- }
4554
- });
4555
- }
4556
-
4557
- /**
4558
- * Clears focus and blur event listeners from nested Auro components within the trigger slot.
4559
- * @private
4560
- * @returns {void}
4561
- */
4562
- clearTriggerFocusEventBinding() {
4563
- if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
4564
- return;
4565
- }
4566
-
4567
- this.triggerContentSlot.forEach((node) => {
4568
- if (node.querySelectorAll) {
4569
- const auroElements = node.querySelectorAll(this.focusableEntityQuery);
4570
- auroElements.forEach((auroEl) => {
4571
- auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
4572
- auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
4573
- });
4574
- }
4575
- });
4576
- }
4577
-
4578
- /*
4579
- * Sets aria attributes for the trigger element if a custom one is passed in.
4580
- * @private
4581
- * @method setTriggerAriaAttributes
4582
- * @param { HTMLElement } triggerElement - The custom trigger element.
4583
- */
4584
- clearTriggerA11yAttributes(triggerElement) {
4585
-
4586
- if (!triggerElement || !triggerElement.removeAttribute) {
4587
- return;
4588
- }
4589
-
4590
- // Reset appropriate attributes for a11y
4591
- triggerElement.removeAttribute('aria-labelledby');
4592
- if (triggerElement.getAttribute('id') === `${this.id}-trigger-element`) {
4593
- triggerElement.removeAttribute('id');
4594
- }
4595
- triggerElement.removeAttribute('role');
4596
- triggerElement.removeAttribute('aria-expanded');
4597
-
4598
- triggerElement.removeAttribute('aria-controls');
4599
- triggerElement.removeAttribute('aria-autocomplete');
4600
- }
4601
-
4602
- /**
4603
- * Handles changes to the trigger content slot and updates related properties.
4604
- *
4605
- * It first updates the floater settings
4606
- * Then, it retrieves the assigned nodes from the event target and checks if any of
4607
- * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
4608
- *
4609
- * @private
4610
- * @method handleTriggerContentSlotChange
4611
- * @param {Event} event - Native slotchange event.
4612
- * @returns {void}
4613
- */
4614
- handleTriggerContentSlotChange(event) {
4615
- this.floater.handleTriggerTabIndex();
4616
-
4617
- // Get the trigger
4618
- const trigger = this.shadowRoot.querySelector('#trigger');
4619
-
4620
- // Get the trigger slot
4621
- const triggerSlot = this.shadowRoot.querySelector('.triggerContentWrapper slot');
4622
-
4623
- // If there's a trigger slot
4624
- if (triggerSlot) {
4625
-
4626
- // Get the content nodes to see if there are any children
4627
- const triggerContentNodes = triggerSlot.assignedNodes();
4628
-
4629
- // If there are children
4630
- if (triggerContentNodes) {
4631
-
4632
- // See if any of them are focusable elements
4633
- this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
4634
-
4635
- // If any of them are focusable elements
4636
- if (this.triggerContentFocusable) {
4637
-
4638
- // Assume the consumer will be providing their own a11y in whatever they passed in
4639
- this.clearTriggerA11yAttributes(trigger);
4640
-
4641
- // Remove the tabindex from the trigger so it doesn't interrupt focus flow
4642
- trigger.removeAttribute('tabindex');
4643
- } else {
4644
-
4645
- // Add the tabindex to the trigger so that it's in the focus flow
4646
- trigger.setAttribute('tabindex', '0');
4647
- }
4648
- }
4649
- }
4650
-
4651
- if (event) {
4652
- // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
4653
- try {
4654
- this.triggerNode = event.target;
4655
- this.triggerContentSlot = event.target.assignedNodes();
4656
- } catch (error) {
4657
- console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
4658
- }
4659
- }
4660
-
4661
- if (this.triggerContentSlot) {
4662
- this.setupTriggerFocusEventBinding();
4663
-
4664
- this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
4665
- if (slot.textContent.trim()) {
4666
- return true;
4667
- }
4668
- const slotInSlot = slot.querySelector('slot');
4669
- if (!slotInSlot) {
4670
- return false;
4671
- }
4672
- const slotsInSlotNodes = slotInSlot.assignedNodes();
4673
- return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
4674
- });
4675
- } else {
4676
- this.hasTriggerContent = false;
4677
- }
4678
- }
4679
-
4680
- /**
4681
- * Handles the default slot change event and updates the content.
4682
- *
4683
- * This method retrieves all nodes assigned to the default slot of the event target and appends them
4684
- * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
4685
- * notify about the slot change.
4686
- *
4687
- * @private
4688
- * @method handleDefaultSlot
4689
- * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
4690
- */
4691
- handleDefaultSlot() {
4692
-
4693
- if (this.onSlotChange) {
4694
- this.onSlotChange();
4695
- }
4696
- }
4697
-
4698
- /**
4699
- * Returns HTML for the common portion of the layouts.
4700
- * @private
4701
- * @param {Object} helpTextClasses - Classes to apply to the help text container.
4702
- * @returns {html} - Returns HTML.
4703
- */
4704
- renderBasicHtml(helpTextClasses) {
4705
- return u$2`
4706
- <div>
4707
- <div
4708
- id="trigger"
4709
- class="${e$3(this.commonWrapperClasses)}" part="wrapper"
4710
- tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
4711
- role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
4712
- aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4713
- aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
4714
- aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
4715
- @focusin="${this.handleFocusin}"
4716
- @blur="${this.handleFocusOut}">
4717
- <div class="triggerContentWrapper" id="triggerLabel">
4718
- <slot
4719
- name="trigger"
4720
- @slotchange="${this.handleTriggerContentSlotChange}"></slot>
4721
- </div>
4722
- ${this.chevron ? u$2`
4723
- <div
4724
- id="showStateIcon"
4725
- class="chevron"
4726
- part="chevron"
4727
- aria-hidden="true">
4728
- <${this.iconTag}
4729
- category="interface"
4730
- name="${this.isPopoverVisible ? 'chevron-up' : `chevron-down`}"
4731
- appearance="${this.onDark ? 'inverse' : this.appearance}"
4732
- variant="${this.disabled ? 'disabled' : 'muted'}"
4733
- ariaHidden="true">
4734
- </${this.iconTag}>
4735
- </div>
4736
- ` : undefined }
4737
- </div>
4738
- <div class="${e$3(helpTextClasses)}">
4739
- <slot name="helpText"></slot>
4740
- </div>
4741
- <div id="bibSizer" part="size"></div>
4742
- <${this.dropdownBibTag}
4743
- id="bib"
4744
- shape="${this.shape}"
4745
- ?data-show="${this.isPopoverVisible}"
4746
- ?isfullscreen="${this.isBibFullscreen}"
4747
- .dialogLabel="${this.bibDialogLabel}"
4748
- ${n$2(this.bibElement)}
4749
- >
4750
- <div class="slotContent">
4751
- <slot @slotchange="${this.handleDefaultSlot}"></slot>
4752
- </div>
4753
- </${this.dropdownBibTag}>
4754
- </div>
4755
- `;
4756
- }
4757
-
4758
- /**
4759
- * Returns HTML for the classic layout. Does not support type="*".
4760
- * @private
4761
- * @returns {html} - Returns HTML for the classic layout.
4762
- */
4763
- renderLayoutClassic() {
4764
- // TODO: check with Doug why this was never used?
4765
- const helpTextClasses = {
4766
- 'helpText': true
4767
- };
4768
-
4769
- return u$2`
4770
- ${this.renderBasicHtml(helpTextClasses)}
4771
- `;
4772
- }
4773
-
4774
- /**
4775
- * Returns HTML for the snowflake layout. Does not support type="*".
4776
- * @private
4777
- * @returns {html} - Returns HTML for the snowflake layout.
4778
- */
4779
- renderLayoutSnowflake() {
4780
- const helpTextClasses = {
4781
- 'helpText': true,
4782
- 'leftIndent': true,
4783
- 'rightIndent': true
4784
- };
4785
-
4786
- return u$2`
4787
- ${this.renderBasicHtml(helpTextClasses)}
4788
- `;
4789
- }
4790
-
4791
- /**
4792
- * Returns HTML for the emphasized layout. Does not support type="*".
4793
- * @private
4794
- * @returns {html} - Returns HTML for the emphasized layout.
4795
- */
4796
- renderLayoutEmphasized() {
4797
- const helpTextClasses = {
4798
- 'helpText': true,
4799
- 'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
4800
- 'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
4801
- };
4802
-
4803
- return u$2`
4804
- ${this.renderBasicHtml(helpTextClasses)}
4805
- `;
4806
- }
4807
-
4808
- /**
4809
- * Logic to determine the layout of the component.
4810
- * @private
4811
- * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
4812
- * @returns {HTMLCollection} - Returns the HTML for the layout.
4813
- */
4814
- renderLayout(ForcedLayout) {
4815
- const layout = ForcedLayout || this.layout;
4816
-
4817
- switch (layout) {
4818
- case 'emphasized':
4819
- return this.renderLayoutEmphasized();
4820
- case 'emphasized-left':
4821
- return this.renderLayoutEmphasized();
4822
- case 'emphasized-right':
4823
- return this.renderLayoutEmphasized();
4824
- case 'snowflake':
4825
- return this.renderLayoutSnowflake();
4826
- case 'snowflake-left':
4827
- return this.renderLayoutSnowflake();
4828
- case 'snowflake-right':
4829
- return this.renderLayoutSnowflake();
4830
- default:
4831
- return this.renderLayoutClassic();
4832
- }
4833
- }
4834
- }
4835
-
4836
- AuroDropdown.register();
4837
-
4838
- /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
4839
-
4840
- function initExamples() {
4841
- // javascript example function calls to be added here upon creation to test examples
4842
- errorExample();
4843
- inverseErrorExample();
4844
- fullscreenBreakpointExample();
4845
- classicExample();
4846
- classicInverseExample();
4847
- matchWidthExample();
4848
- hideExample();
4849
- showExample();
4850
- inDialogExample();
4851
- }
4852
-
4853
- export { initExamples };