@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (281) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +10 -10
  3. package/components/bibtemplate/dist/registered.js +10 -10
  4. package/components/checkbox/README.md +26 -56
  5. package/components/checkbox/demo/accessibility.html +48 -0
  6. package/components/checkbox/demo/accessibility.md +44 -0
  7. package/components/checkbox/demo/api.html +17 -26
  8. package/components/checkbox/demo/api.md +0 -396
  9. package/components/checkbox/demo/api.min.js +2 -2106
  10. package/components/checkbox/demo/customize.html +51 -0
  11. package/components/checkbox/demo/customize.md +361 -0
  12. package/components/checkbox/demo/demo-support.js +60 -0
  13. package/components/checkbox/demo/demo-support.min.js +55732 -0
  14. package/components/checkbox/demo/design.html +51 -0
  15. package/components/checkbox/demo/design.md +149 -0
  16. package/components/checkbox/demo/getting-started.html +51 -0
  17. package/components/checkbox/demo/getting-started.md +261 -0
  18. package/components/checkbox/demo/index.html +17 -21
  19. package/components/checkbox/demo/index.md +158 -45
  20. package/components/checkbox/demo/index.min.js +2 -3
  21. package/components/checkbox/demo/install.md +82 -0
  22. package/components/checkbox/demo/keyboard-behavior.html +48 -0
  23. package/components/checkbox/demo/readme.html +10 -18
  24. package/components/checkbox/demo/readme.md +26 -56
  25. package/components/checkbox/demo/styles.min.css +1 -0
  26. package/components/checkbox/demo/styles.scss +1 -0
  27. package/components/checkbox/demo/voiceover.html +48 -0
  28. package/components/checkbox/demo/voiceover.md +37 -0
  29. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  30. package/components/checkbox/dist/auro-checkbox.d.ts +8 -9
  31. package/components/checkbox/dist/index.js +2 -3
  32. package/components/checkbox/dist/registered.js +2 -3
  33. package/components/combobox/README.md +41 -66
  34. package/components/combobox/demo/accessibility.html +50 -0
  35. package/components/combobox/demo/accessibility.md +77 -0
  36. package/components/combobox/demo/api.html +8 -20
  37. package/components/combobox/demo/api.md +54 -2334
  38. package/components/combobox/demo/api.min.js +3 -17971
  39. package/components/combobox/demo/customize.html +52 -0
  40. package/components/combobox/demo/customize.js +24 -0
  41. package/components/combobox/demo/customize.md +1249 -0
  42. package/components/combobox/demo/customize.min.js +177 -0
  43. package/components/combobox/demo/demo-support.js +60 -0
  44. package/components/combobox/demo/demo-support.min.js +55732 -0
  45. package/components/combobox/demo/design.html +53 -0
  46. package/components/combobox/demo/design.md +283 -0
  47. package/components/combobox/demo/getting-started.html +52 -0
  48. package/components/combobox/demo/getting-started.js +21 -0
  49. package/components/combobox/demo/getting-started.md +397 -0
  50. package/components/combobox/demo/getting-started.min.js +12 -0
  51. package/components/combobox/demo/index.html +16 -22
  52. package/components/combobox/demo/index.js +3 -2
  53. package/components/combobox/demo/index.md +298 -188
  54. package/components/combobox/demo/index.min.js +13 -17956
  55. package/components/combobox/demo/install.md +77 -0
  56. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +5 -11
  57. package/components/combobox/demo/keyboard-behavior.md +276 -0
  58. package/components/combobox/demo/readme.html +5 -11
  59. package/components/combobox/demo/readme.md +41 -66
  60. package/components/combobox/demo/registered.min.js +18095 -0
  61. package/components/combobox/demo/styles.css +974 -0
  62. package/components/combobox/demo/styles.min.css +1 -0
  63. package/components/combobox/demo/styles.scss +1 -0
  64. package/components/combobox/demo/swap-value.min.js +16 -0
  65. package/components/combobox/demo/voiceover.html +59 -0
  66. package/components/combobox/demo/voiceover.md +118 -0
  67. package/components/combobox/dist/auro-combobox.d.ts +35 -35
  68. package/components/combobox/dist/index.js +183 -46
  69. package/components/combobox/dist/registered.js +183 -46
  70. package/components/counter/README.md +37 -55
  71. package/components/counter/demo/api.md +745 -813
  72. package/components/counter/demo/api.min.js +182 -44
  73. package/components/counter/demo/index.md +28 -32
  74. package/components/counter/demo/index.min.js +182 -44
  75. package/components/counter/demo/keyboard-behavior.md +127 -0
  76. package/components/counter/demo/readme.md +37 -55
  77. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  78. package/components/counter/dist/auro-counter.d.ts +10 -10
  79. package/components/counter/dist/index.js +181 -43
  80. package/components/counter/dist/registered.js +181 -43
  81. package/components/datepicker/README.md +23 -51
  82. package/components/datepicker/demo/accessibility.html +50 -0
  83. package/components/datepicker/demo/accessibility.md +64 -0
  84. package/components/datepicker/demo/api.md +0 -1774
  85. package/components/datepicker/demo/api.min.js +2 -24475
  86. package/components/datepicker/demo/auro-datepicker.min.js +24613 -0
  87. package/components/datepicker/demo/customize.html +52 -0
  88. package/components/datepicker/demo/customize.md +723 -0
  89. package/components/datepicker/demo/demo-support.js +60 -0
  90. package/components/datepicker/demo/demo-support.min.js +55732 -0
  91. package/components/datepicker/demo/design.html +54 -0
  92. package/components/datepicker/demo/design.md +158 -0
  93. package/components/datepicker/demo/getting-started.html +52 -0
  94. package/components/datepicker/demo/getting-started.md +237 -0
  95. package/components/datepicker/demo/index.html +14 -35
  96. package/components/datepicker/demo/index.md +201 -152
  97. package/components/datepicker/demo/index.min.js +1 -24474
  98. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  99. package/components/datepicker/demo/readme.md +23 -51
  100. package/components/datepicker/demo/styles.min.css +1 -0
  101. package/components/datepicker/demo/styles.scss +1 -0
  102. package/components/datepicker/demo/voiceover.html +59 -0
  103. package/components/datepicker/demo/voiceover.md +98 -0
  104. package/components/datepicker/dist/index.js +194 -57
  105. package/components/datepicker/dist/registered.js +194 -57
  106. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  107. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  108. package/components/datepicker/dist/src/iconVersion.d.ts +2 -0
  109. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  110. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  111. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  112. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  113. package/components/dropdown/README.md +35 -53
  114. package/components/dropdown/demo/api.md +717 -773
  115. package/components/dropdown/demo/api.min.js +161 -23
  116. package/components/dropdown/demo/index.md +120 -130
  117. package/components/dropdown/demo/index.min.js +161 -23
  118. package/components/dropdown/demo/{keyboardBehavior.md → keyboard-behavior.md} +52 -57
  119. package/components/dropdown/demo/readme.md +35 -53
  120. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  121. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  122. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  123. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  124. package/components/dropdown/dist/index.js +160 -22
  125. package/components/dropdown/dist/registered.js +160 -22
  126. package/components/form/README.md +14 -34
  127. package/components/form/demo/api.md +156 -162
  128. package/components/form/demo/api.min.js +756 -208
  129. package/components/form/demo/index.md +27 -33
  130. package/components/form/demo/index.min.js +756 -208
  131. package/components/form/demo/keyboard-behavior.md +38 -0
  132. package/components/form/demo/readme.md +14 -34
  133. package/components/input/README.md +28 -53
  134. package/components/input/demo/accessibility.html +37 -0
  135. package/components/input/demo/accessibility.md +69 -0
  136. package/components/input/demo/api.html +17 -23
  137. package/components/input/demo/api.js +4 -23
  138. package/components/input/demo/api.md +67 -1359
  139. package/components/input/demo/api.min.js +1 -7453
  140. package/components/input/demo/auro-input.min.js +7362 -0
  141. package/components/input/demo/customize.html +53 -0
  142. package/components/input/demo/customize.js +25 -0
  143. package/components/input/demo/customize.md +1372 -0
  144. package/components/input/demo/customize.min.js +71 -0
  145. package/components/input/demo/demo-support.js +60 -0
  146. package/components/input/demo/demo-support.min.js +55732 -0
  147. package/components/input/demo/design.html +38 -0
  148. package/components/input/demo/design.md +224 -0
  149. package/components/input/demo/getting-started.html +52 -0
  150. package/components/input/demo/getting-started.js +8 -0
  151. package/components/input/demo/getting-started.md +312 -0
  152. package/components/input/demo/getting-started.min.js +9 -0
  153. package/components/input/demo/index.html +16 -23
  154. package/components/input/demo/index.js +0 -11
  155. package/components/input/demo/index.md +180 -154
  156. package/components/input/demo/index.min.js +1 -7373
  157. package/components/input/demo/keyboard-behavior.html +37 -0
  158. package/components/input/demo/readme.md +28 -53
  159. package/components/input/demo/styles.css +974 -0
  160. package/components/input/demo/styles.min.css +1 -0
  161. package/components/input/demo/styles.scss +1 -0
  162. package/components/input/demo/voiceover.html +37 -0
  163. package/components/input/demo/voiceover.md +70 -0
  164. package/components/input/dist/auro-input.d.ts +1 -1
  165. package/components/input/dist/base-input.d.ts +29 -30
  166. package/components/input/dist/iconVersion.d.ts +1 -1
  167. package/components/input/dist/index.js +10 -11
  168. package/components/input/dist/registered.js +10 -11
  169. package/components/menu/README.md +24 -42
  170. package/components/menu/demo/api.md +785 -829
  171. package/components/menu/demo/api.min.js +7 -7
  172. package/components/menu/demo/index.md +33 -35
  173. package/components/menu/demo/index.min.js +7 -7
  174. package/components/menu/demo/keyboard-behavior.md +18 -0
  175. package/components/menu/demo/readme.md +24 -42
  176. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  177. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  178. package/components/menu/dist/auro-menu.d.ts +4 -4
  179. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  180. package/components/menu/dist/index.js +6 -6
  181. package/components/menu/dist/registered.js +6 -6
  182. package/components/radio/README.md +22 -49
  183. package/components/radio/demo/accessibility.html +51 -0
  184. package/components/radio/demo/accessibility.md +44 -0
  185. package/components/radio/demo/api.html +13 -20
  186. package/components/radio/demo/api.md +44 -621
  187. package/components/radio/demo/api.min.js +1 -1
  188. package/components/radio/demo/customize.html +53 -0
  189. package/components/radio/demo/customize.md +368 -0
  190. package/components/radio/demo/demo-support.js +60 -0
  191. package/components/radio/demo/design.html +52 -0
  192. package/components/radio/demo/design.md +143 -0
  193. package/components/radio/demo/getting-started.html +54 -0
  194. package/components/radio/demo/getting-started.md +296 -0
  195. package/components/radio/demo/index.html +16 -19
  196. package/components/radio/demo/index.md +124 -63
  197. package/components/radio/demo/index.min.js +1 -1
  198. package/components/radio/demo/keyboard-behavior.html +51 -0
  199. package/components/radio/demo/keyboard-behavior.md +72 -0
  200. package/components/radio/demo/layout.md +30 -0
  201. package/components/radio/demo/readme.html +11 -17
  202. package/components/radio/demo/readme.md +22 -49
  203. package/components/radio/demo/styles.css +974 -0
  204. package/components/radio/demo/voiceover.html +51 -0
  205. package/components/radio/demo/voiceover.md +43 -0
  206. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  207. package/components/radio/dist/auro-radio.d.ts +8 -8
  208. package/components/radio/dist/index.js +1 -1
  209. package/components/radio/dist/registered.js +1 -1
  210. package/components/select/README.md +50 -68
  211. package/components/select/demo/accessibility.html +50 -0
  212. package/components/select/demo/accessibility.md +76 -0
  213. package/components/select/demo/api.html +5 -17
  214. package/components/select/demo/api.md +52 -2422
  215. package/components/select/demo/customize.html +52 -0
  216. package/components/select/demo/customize.js +11 -0
  217. package/components/select/demo/customize.md +1049 -0
  218. package/components/select/demo/customize.min.js +12 -0
  219. package/components/select/demo/demo-support.js +60 -0
  220. package/components/select/demo/demo-support.min.js +55732 -0
  221. package/components/select/demo/design.html +51 -0
  222. package/components/select/demo/design.md +391 -0
  223. package/components/select/demo/getting-started.html +52 -0
  224. package/components/select/demo/getting-started.js +26 -0
  225. package/components/select/demo/getting-started.md +412 -0
  226. package/components/select/demo/getting-started.min.js +56 -0
  227. package/components/select/demo/index.html +18 -35
  228. package/components/select/demo/index.js +5 -3
  229. package/components/select/demo/index.md +165 -345
  230. package/components/select/demo/index.min.js +6 -10484
  231. package/components/select/demo/install.md +95 -0
  232. package/components/select/demo/keyboard-behavior.html +8 -39
  233. package/components/select/demo/keyboard-behavior.md +249 -0
  234. package/components/select/demo/keyboardBehavior.html +5 -38
  235. package/components/select/demo/layout.html +51 -0
  236. package/components/select/demo/readme.html +5 -13
  237. package/components/select/demo/readme.md +50 -68
  238. package/components/select/demo/{api.min.js → registered.min.js} +179 -151
  239. package/components/select/demo/styles.min.css +1 -0
  240. package/components/select/demo/styles.scss +1 -0
  241. package/components/select/demo/voiceover.html +48 -0
  242. package/components/select/demo/voiceover.md +183 -0
  243. package/components/select/dist/auro-select.d.ts +11 -11
  244. package/components/select/dist/index.js +171 -33
  245. package/components/select/dist/registered.js +171 -33
  246. package/custom-elements.json +1491 -1494
  247. package/package.json +37 -30
  248. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  249. package/components/combobox/demo/keyboardBehavior.md +0 -281
  250. package/components/counter/demo/keyboardBehavior.md +0 -127
  251. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  252. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  253. package/components/form/demo/keyboardBehavior.md +0 -0
  254. package/components/input/demo/keyboardBehavior.md +0 -0
  255. package/components/menu/demo/keyboardBehavior.md +0 -0
  256. package/components/radio/demo/keyboardBehavior.md +0 -0
  257. package/components/select/demo/api.js +0 -39
  258. package/components/select/demo/keyboardBehavior.md +0 -245
  259. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  260. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  261. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  262. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  263. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  264. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  265. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  266. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  267. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  268. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  269. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  270. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  271. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  272. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  273. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  274. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  275. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  276. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  277. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  278. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  279. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  280. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  281. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
@@ -1,3 +1,5 @@
1
+ import './index.min.js';
2
+
1
3
  function resetStateExample() {
2
4
  const elem = document.querySelector('#resetStateExample');
3
5
 
@@ -6,2112 +8,6 @@ function resetStateExample() {
6
8
  });
7
9
  }
8
10
 
9
- /**
10
- * @license
11
- * Copyright 2019 Google LLC
12
- * SPDX-License-Identifier: BSD-3-Clause
13
- */
14
- const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)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$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$3("string"==typeof t?t:t+"",void 0,s$3),i$5=(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$3(o,t,s$3)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
15
-
16
- /**
17
- * @license
18
- * Copyright 2017 Google LLC
19
- * SPDX-License-Identifier: BSD-3-Clause
20
- */const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$1=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$2: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$4(t,s),b$1={attribute:true,type:String,converter:u$2,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.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$1){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$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(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$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$4(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$2(s));}else void 0!==s&&i.push(c$2(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$1(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$2).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$2;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$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a$2.reactiveElementVersions??=[]).push("2.1.2");
21
-
22
- /**
23
- * @license
24
- * Copyright 2017 Google LLC
25
- * SPDX-License-Identifier: BSD-3-Clause
26
- */
27
- const t$1=globalThis,i$3=t=>t,s$2=t$1.trustedTypes,e$2=s$2?s$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r=`<${n$1}>`,l$1=document,c=()=>l$1.createComment(""),a$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$1=Array.isArray,d=t=>u$1(t)||"function"==typeof t?.[Symbol.iterator],f="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$1.createTreeWalker(l$1,129);function V(t,i){if(!u$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$2?e$2.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=_:void 0!==u[1]?c=m:void 0!==u[2]?(y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p):void 0!==u[3]&&(c=p):c===p?">"===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:'"'===u[3]?$:g):c===$||c===g?c=p:c===_||c===m?c=v:(c=p,n=void 0);const x=c===p&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};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)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$2?s$2.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$1)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l$1.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$1(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$1).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$1,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$1(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(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$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$1.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.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(t)),i}k(t){u$1(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()),this.O(c()),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$3(t).nextSibling;i$3(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$1(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$1(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);}}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$1.litHtmlPolyfillSupport;B?.(S,k),(t$1.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(),t),t,void 0,s??{});}return h._$AI(t),h};
28
-
29
- /**
30
- * @license
31
- * Copyright 2017 Google LLC
32
- * SPDX-License-Identifier: BSD-3-Clause
33
- */const s$1=globalThis;let i$2 = 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$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.2");
34
-
35
- /**
36
- * @license
37
- * Copyright 2017 Google LLC
38
- * SPDX-License-Identifier: BSD-3-Clause
39
- */
40
- const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = 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)}};
41
-
42
- /**
43
- * @license
44
- * Copyright 2018 Google LLC
45
- * SPDX-License-Identifier: BSD-3-Clause
46
- */const e=e$1(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.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}});
47
-
48
- /**
49
- * @license
50
- * Copyright 2018 Google LLC
51
- * SPDX-License-Identifier: BSD-3-Clause
52
- */const o$1=o=>o??A;
53
-
54
- var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.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{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}:host(:focus-visible){outline:none !important}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem)}.cbxContainer:hover{cursor:pointer}.label{display:block;padding-top:var(--ds-size-50, 0.25rem)}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;left:0;top:3px;bottom:3px;z-index:1;pointer-events:none}`;
55
-
56
- var colorCss$2 = i$5`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .cbxContainer:hover,:host([checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .cbxContainer:hover,:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .cbxContainer:hover,:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .cbxContainer:hover,:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .cbxContainer:hover,:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .cbxContainer:hover,:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .cbxContainer:hover,:host([onDark]) .inputContainer:hover,:host([appearance=inverse]) .cbxContainer:hover,:host([appearance=inverse]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .cbxContainer:hover,:host([onDark]:not([checked])) .inputContainer:hover,:host([appearance=inverse]:not([checked])) .cbxContainer:hover,:host([appearance=inverse]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]),:host([appearance=inverse][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .cbxContainer:hover,:host([onDark][checked]) .inputContainer:hover,:host([appearance=inverse][checked]) .cbxContainer:hover,:host([appearance=inverse][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within),:host([appearance=inverse][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .cbxContainer:hover,:host([onDark][checked]:focus-within) .inputContainer:hover,:host([appearance=inverse][checked]:focus-within) .cbxContainer:hover,:host([appearance=inverse][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .cbxContainer:hover,:host([onDark][disabled]) .inputContainer:hover,:host([appearance=inverse][disabled]) .cbxContainer:hover,:host([appearance=inverse][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]),:host([appearance=inverse][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .cbxContainer:hover,:host([onDark][disabled][checked]) .inputContainer:hover,:host([appearance=inverse][disabled][checked]) .cbxContainer:hover,:host([appearance=inverse][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]),:host([appearance=inverse][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within),:host([appearance=inverse][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]),:host([appearance=inverse][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .cbxContainer:hover,:host([onDark][error][checked]) .inputContainer:hover,:host([appearance=inverse][error][checked]) .cbxContainer:hover,:host([appearance=inverse][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within),:host([appearance=inverse][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .cbxContainer:hover,:host([onDark][error][checked]:focus-within) .inputContainer:hover,:host([appearance=inverse][error][checked]:focus-within) .cbxContainer:hover,:host([appearance=inverse][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
57
-
58
- var tokensCss$1 = i$5`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
59
-
60
- var checkLg = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" 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/><path d=\"M5.321 12.514a.75.75 0 0 0-1.142.972l4.25 5a.75.75 0 0 0 1.141.001l10.25-12a.75.75 0 1 0-1.14-.975L9 16.844z\"/></svg>"};
61
-
62
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
63
- // See LICENSE in the project root for license information.
64
-
65
- // ---------------------------------------------------------------------
66
-
67
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
68
-
69
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
70
-
71
- /* eslint-disable jsdoc/require-param */
72
-
73
- /**
74
- * This will register a new custom element with the browser.
75
- * @param {String} name - The name of the custom element.
76
- * @param {Object} componentClass - The class to register as a custom element.
77
- * @returns {void}
78
- */
79
- registerComponent(name, componentClass) {
80
- if (!customElements.get(name)) {
81
- customElements.define(name, class extends componentClass {});
82
- }
83
- }
84
-
85
- /**
86
- * Finds and returns the closest HTML Element based on a selector.
87
- * @returns {void}
88
- */
89
- closestElement(
90
- selector, // selector like in .closest()
91
- base = this, // extra functionality to skip a parent
92
- __Closest = (el, found = el && el.closest(selector)) =>
93
- !el || el === document || el === window
94
- ? null // standard .closest() returns null for non-found selectors also
95
- : found
96
- ? found // found a selector INside this element
97
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
98
- ) {
99
- return __Closest(base);
100
- }
101
- /* eslint-enable jsdoc/require-param */
102
-
103
- /**
104
- * 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.
105
- * @param {Object} elem - The element to check.
106
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
107
- * @returns {void}
108
- */
109
- handleComponentTagRename(elem, tagName) {
110
- const tag = tagName.toLowerCase();
111
- const elemTag = elem.tagName.toLowerCase();
112
-
113
- if (elemTag !== tag) {
114
- elem.setAttribute(tag, true);
115
- }
116
- }
117
-
118
- /**
119
- * Validates if an element is a specific Auro component.
120
- * @param {Object} elem - The element to validate.
121
- * @param {String} tagName - The name of the Auro component to check against.
122
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
123
- */
124
- elementMatch(elem, tagName) {
125
- const tag = tagName.toLowerCase();
126
- const elemTag = elem.tagName.toLowerCase();
127
-
128
- return elemTag === tag || elem.hasAttribute(tag);
129
- }
130
-
131
- /**
132
- * Gets the text content of a named slot.
133
- * @returns {String}
134
- * @private
135
- */
136
- getSlotText(elem, name) {
137
- const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
138
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
139
- const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
140
-
141
- return text || null;
142
- }
143
- };
144
-
145
- // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
146
- // See LICENSE in the project root for license information.
147
-
148
-
149
- /* eslint-disable jsdoc/no-undefined-types -- @fires event names are not types */
150
- /**
151
- * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
152
- * @customElement auro-checkbox
153
- *
154
- * @csspart checkbox - apply css to a specific checkbox.
155
- * @csspart checkbox-input - apply css to a specific checkbox's input.
156
- * @csspart checkbox-label - apply css to a specific checkbox's label.
157
- *
158
- * @slot default - The default slot for the checkbox label.
159
- *
160
- * @fires change - (Deprecated) Notifies when checked value is changed.
161
- * @fires input - Notifies when when checked value is changed by user's interface.
162
- */
163
- /* eslint-enable jsdoc/no-undefined-types */
164
-
165
- // build the component class
166
- class AuroCheckbox extends i$2 {
167
- constructor() {
168
- super();
169
-
170
- this._initializeDefaults();
171
- }
172
-
173
- _initializeDefaults() {
174
- this.appearance = 'default';
175
- this.checked = false;
176
- this.disabled = false;
177
- this.error = false;
178
- this.onDark = false;
179
- this.touched = false;
180
- this.tabIndex = 0;
181
- this.ariaChecked = 'false';
182
- this.role = 'checkbox';
183
-
184
- /**
185
- * @private
186
- */
187
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
188
- }
189
-
190
- static get styles() {
191
- return [
192
- styleCss$2,
193
- colorCss$2,
194
- tokensCss$1
195
- ];
196
- }
197
-
198
- // function to define props used within the scope of this component
199
- static get properties() {
200
- return {
201
- ...super.properties,
202
-
203
- /**
204
- * Defines whether the component will be on lighter or darker backgrounds.
205
- * @type {'default' | 'inverse'}
206
- * @default 'default'
207
- */
208
- appearance: {
209
- type: String,
210
- reflect: true
211
- },
212
-
213
- /**
214
- * If set to true, the checkbox will be filled with a checkmark.
215
- */
216
- checked: {
217
- type: Boolean,
218
- reflect: true
219
- },
220
-
221
- /**
222
- * If set to true, the checkbox will not be clickable.
223
- */
224
- disabled: {
225
- type: Boolean,
226
- reflect: true
227
- },
228
-
229
- /**
230
- * If set to true, the checkbox will be displayed with an error state.
231
- */
232
- error: {
233
- type: Boolean,
234
- reflect: true
235
- },
236
-
237
- /**
238
- * The id global attribute defines an identifier (ID) which must be unique in the whole document.
239
- */
240
- id: {
241
- type: String,
242
- reflect: true
243
- },
244
-
245
- /**
246
- * The id for input node.
247
- * @private
248
- */
249
- inputId: {
250
- type: String,
251
- reflect: false,
252
- attribute: false
253
- },
254
-
255
- /**
256
- * Accepts any string and is used to identify related checkboxes when submitting form data.
257
- */
258
- name: { type: String },
259
-
260
- /**
261
- * DEPRECATED - use `appearance="inverse"` instead.
262
- */
263
- onDark: {
264
- type: Boolean,
265
- reflect: true
266
- },
267
-
268
- /**
269
- * Indicates whether the checkbox has been interacted with.
270
- * @private
271
- */
272
- touched: {
273
- type: Boolean,
274
- reflect: true,
275
- attribute: false
276
- },
277
-
278
- /**
279
- * Sets the element's input value. Must be unique within an auro-checkbox-group element.
280
- */
281
- value: {
282
- type: String,
283
- reflect: false
284
- },
285
-
286
- /**
287
- * The tabindex attribute for the checkbox.
288
- * @private
289
- */
290
- tabIndex: {
291
- type: Number,
292
- reflect: true,
293
- attribute: 'tabindex'
294
- },
295
-
296
- /**
297
- * The aria-checked attribute for the checkbox.
298
- * @private
299
- */
300
- ariaChecked: {
301
- type: String,
302
- reflect: true,
303
- attribute: 'aria-checked'
304
- },
305
-
306
- /**
307
- * The aria-disabled attribute for the checkbox.
308
- * @private
309
- */
310
- ariaDisabled: {
311
- type: String,
312
- reflect: true,
313
- attribute: 'aria-disabled'
314
- },
315
-
316
- /**
317
- * The ARIA role for the element. Must remain 'checkbox' for screen readers
318
- * to correctly identify this as a checkbox control.
319
- * @private
320
- */
321
- role: {
322
- type: String,
323
- reflect: true
324
- },
325
-
326
- };
327
- }
328
-
329
- /**
330
- * This will register this element with the browser.
331
- * @param {string} [name="auro-checkbox"] - The name of element that you want to register to.
332
- *
333
- * @example
334
- * AuroCheckbox.register("custom-checkbox") // this will register this element to <custom-checkbox/>
335
- *
336
- */
337
- static register(name = "auro-checkbox") {
338
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
339
- }
340
-
341
- /**
342
- * Handles the change event for the checkbox input.
343
- * Updates the checked state and dispatches a corresponding custom event.
344
- * This custom event is only for the purpose of supporting IE.
345
- * @private
346
- * @param {Event} event - The change event from the checkbox input.
347
- * @returns {void}
348
- */
349
- handleChange(event) {
350
- this.checked = event.target.checked;
351
- const customEvent = new CustomEvent(event.type, event);
352
-
353
- this.dispatchEvent(customEvent);
354
- }
355
-
356
- /**
357
- * Handles the input event for the checkbox input.
358
- * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
359
- * @private
360
- * @param {Event} event - The input event from the checkbox input.
361
- * @returns {void}
362
- */
363
- handleInput(event) {
364
- this.checked = event.target.checked;
365
-
366
- // Old event we need to deprecate
367
- this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
368
- bubbles: true,
369
- cancelable: false,
370
- composed: true,
371
- }));
372
- }
373
-
374
- /**
375
- * Function to support @focusin event.
376
- * @private
377
- * @returns {void}
378
- */
379
- handleFocusin() {
380
- this.touched = true;
381
- this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
382
- bubbles: true,
383
- cancelable: false,
384
- composed: true,
385
- }));
386
- }
387
-
388
- /**
389
- * Function to generate checkmark svg.
390
- * @private
391
- * @returns {HTMLElement}
392
- */
393
- generateIconHtml() {
394
- this.dom = new DOMParser().parseFromString(checkLg.svg, 'text/html');
395
- this.svg = this.dom.body.firstChild;
396
-
397
- this.svg.classList.add('svg--cbx');
398
-
399
- return this.svg;
400
- }
401
-
402
- /**
403
- * Resets component to initial state.
404
- * @returns {void}
405
- */
406
- reset() {
407
- this.checked = false;
408
- this.error = false;
409
- this.touched = false;
410
- }
411
-
412
- /**
413
- * Updates the aria-label based on slot content.
414
- * @private
415
- * @returns {void}
416
- */
417
- updateAriaLabel() {
418
- const slot = this.shadowRoot.querySelector('slot');
419
- const text = slot.assignedNodes().
420
- map((node) => node.textContent).
421
- join('').
422
- trim();
423
- if (text) {
424
- this.setAttribute('aria-label', text);
425
- }
426
- }
427
-
428
- firstUpdated() {
429
- // Add the tag name as an attribute if it is different than the component name
430
- this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
431
-
432
- this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
433
-
434
- this.addEventListener('click', (evt) => {
435
- // Only prevent default for real user events, not tests or programmatic calls
436
- if (evt.isTrusted) {
437
- evt.preventDefault();
438
- }
439
-
440
- if (!this.disabled) {
441
- this.shadowRoot.querySelector('input').click();
442
- this.handleFocusin();
443
- }
444
- });
445
-
446
- this.addEventListener('focusin', () => {
447
- this.handleFocusin();
448
- });
449
-
450
- this.addEventListener('focusout', () => {
451
- this.dispatchEvent(new CustomEvent('auroCheckbox-focusout', {
452
- bubbles: true,
453
- cancelable: false,
454
- composed: true,
455
- }));
456
- });
457
- }
458
-
459
- connectedCallback() {
460
- super.connectedCallback();
461
-
462
- this.handleKeyDown = this.handleKeyDown.bind(this);
463
- this.addEventListener('keydown', this.handleKeyDown);
464
- }
465
-
466
- disconnectedCallback() {
467
- super.disconnectedCallback();
468
-
469
- this.removeEventListener('keydown', this.handleKeyDown);
470
- }
471
-
472
- /**
473
- * Updates ARIA attributes when properties change.
474
- * @private
475
- * @param {Map} changedProperties - Map of changed properties.
476
- * @returns {void}
477
- */
478
- updated(changedProperties) {
479
- super.updated(changedProperties);
480
-
481
- if (changedProperties.has('checked')) {
482
- this.ariaChecked = this.checked ? 'true' : 'false';
483
- }
484
-
485
- if (changedProperties.has('disabled')) {
486
- this.ariaDisabled = this.disabled ? 'true' : undefined;
487
- }
488
- }
489
-
490
- /**
491
- * Handles keydown event to toggle the checkbox with Space key.
492
- * @private
493
- * @param {KeyboardEvent} event - The keydown event from the checkbox input.
494
- * @returns {void}
495
- */
496
- handleKeyDown(event) {
497
- if (event.key === ' ' && !this.disabled) {
498
- event.preventDefault();
499
-
500
- this.shadowRoot.querySelector('input').click();
501
- }
502
- }
503
-
504
- /**
505
- * @private
506
- * @returns {HTMLElement}
507
- */
508
- render() {
509
- const labelClasses = {
510
- 'label': true,
511
- 'label--cbx': true,
512
- 'errorBorder': this.error
513
- };
514
-
515
- return b`
516
- <div class="cbxContainer body-default" part="checkbox">
517
- <div class="inputContainer">
518
- <input
519
- class="util_displayHidden cbx--input"
520
- part="checkbox-input"
521
- @change="${this.handleChange}"
522
- @input="${this.handleInput}"
523
- ?disabled="${this.disabled}"
524
- ?checked="${this.checked}"
525
- id="${this.inputId}"
526
- name="${o$1(this.name)}"
527
- type="checkbox"
528
- .value="${this.value}"
529
- aria-hidden="true"
530
- tabindex="-1"
531
- />
532
- ${this.checked ? this.generateIconHtml() : undefined}
533
- </div>
534
-
535
- <span class="${e(labelClasses)}" part="checkbox-label">
536
- <slot @slotchange="${this.updateAriaLabel}"></slot>
537
- </span>
538
- </div>
539
- `;
540
- }
541
- }
542
-
543
- /**
544
- * @license
545
- * Copyright 2020 Google LLC
546
- * SPDX-License-Identifier: BSD-3-Clause
547
- */
548
- const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(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}),l=new Map,n=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(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.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(b);
549
-
550
- class DateFormatter {
551
-
552
- constructor() {
553
-
554
- /**
555
- * @description Parses a date string into its components.
556
- * @param {string} dateStr - Date string to parse.
557
- * @param {string} format - Date format to parse.
558
- * @returns {Object<key["month" | "day" | "year"]: number>|undefined}
559
- */
560
- this.parseDate = (dateStr, format = 'mm/dd/yyyy') => {
561
-
562
- // Guard Clause: Date string is defined
563
- if (!dateStr) {
564
- return undefined;
565
- }
566
-
567
- // Assume the separator is a "/" a defined in our code base
568
- const separator = '/';
569
-
570
- // Get the parts of the date and format
571
- const valueParts = dateStr.split(separator);
572
- const formatParts = format.split(separator);
573
-
574
- // Check if the value and format have the correct number of parts
575
- if (valueParts.length !== formatParts.length) {
576
- throw new Error('AuroDatepickerUtilities | parseDate: Date string and format length do not match');
577
- }
578
-
579
- // Holds the result to be returned
580
- const result = formatParts.reduce((acc, part, index) => {
581
- const value = valueParts[index];
582
-
583
- if ((/m/iu).test(part)) {
584
- acc.month = value;
585
- } else if ((/d/iu).test(part)) {
586
- acc.day = value;
587
- } else if ((/y/iu).test(part)) {
588
- acc.year = value;
589
- }
590
-
591
- return acc;
592
- }, {});
593
-
594
- // If we found all the parts, return the result
595
- if (result.month && result.year) {
596
- return result;
597
- }
598
-
599
- // Throw an error to let the dev know we were unable to parse the date string
600
- throw new Error('AuroDatepickerUtilities | parseDate: Unable to parse date string');
601
- };
602
-
603
- /**
604
- * Convert a date object to string format.
605
- * @param {Object} date - Date to convert to string.
606
- * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
607
- * @returns {String} Returns the date as a string.
608
- */
609
- this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
610
- year: "numeric",
611
- month: "2-digit",
612
- day: "2-digit",
613
- });
614
-
615
- /**
616
- * Converts a date string to a North American date format.
617
- * @param {String} dateStr - Date to validate.
618
- * @param {String} format - Date format to validate against.
619
- * @returns {Boolean}
620
- */
621
- this.toNorthAmericanFormat = (dateStr, format) => {
622
-
623
- if (format === 'mm/dd/yyyy') {
624
- return dateStr;
625
- }
626
-
627
- const parsedDate = this.parseDate(dateStr, format);
628
-
629
- if (!parsedDate) {
630
- throw new Error('AuroDatepickerUtilities | toNorthAmericanFormat: Unable to parse date string');
631
- }
632
-
633
- const { month, day, year } = parsedDate;
634
-
635
- const dateParts = [];
636
- if (month) {
637
- dateParts.push(month);
638
- }
639
-
640
- if (day) {
641
- dateParts.push(day);
642
- }
643
-
644
- if (year) {
645
- dateParts.push(year);
646
- }
647
-
648
- return dateParts.join('/');
649
- };
650
- }
651
- }
652
- const dateFormatter = new DateFormatter();
653
-
654
- // filepath: dateConstraints.mjs
655
- const DATE_UTIL_CONSTRAINTS = {
656
- maxDay: 31,
657
- maxMonth: 12,
658
- maxYear: 2400,
659
- minDay: 1,
660
- minMonth: 1,
661
- minYear: 1900,
662
- };
663
-
664
- class AuroDateUtilitiesBase {
665
-
666
- /**
667
- * @description The maximum day value allowed by the various utilities in this class.
668
- * @readonly
669
- * @type {Number}
670
- */
671
- get maxDay() {
672
- return DATE_UTIL_CONSTRAINTS.maxDay;
673
- }
674
-
675
- /**
676
- * @description The maximum month value allowed by the various utilities in this class.
677
- * @readonly
678
- * @type {Number}
679
- */
680
- get maxMonth() {
681
- return DATE_UTIL_CONSTRAINTS.maxMonth;
682
- }
683
-
684
- /**
685
- * @description The maximum year value allowed by the various utilities in this class.
686
- * @readonly
687
- * @type {Number}
688
- */
689
- get maxYear() {
690
- return DATE_UTIL_CONSTRAINTS.maxYear;
691
- }
692
-
693
- /**
694
- * @description The minimum day value allowed by the various utilities in this class.
695
- * @readonly
696
- * @type {Number}
697
- */
698
- get minDay() {
699
- return DATE_UTIL_CONSTRAINTS.minDay;
700
- }
701
-
702
- /**
703
- * @description The minimum month value allowed by the various utilities in this class.
704
- * @readonly
705
- * @type {Number}
706
- */
707
- get minMonth() {
708
- return DATE_UTIL_CONSTRAINTS.minMonth;
709
- }
710
-
711
- /**
712
- * @description The minimum year value allowed by the various utilities in this class.
713
- * @readonly
714
- * @type {Number}
715
- */
716
- get minYear() {
717
- return DATE_UTIL_CONSTRAINTS.minYear;
718
- }
719
- }
720
-
721
- /* eslint-disable no-magic-numbers */
722
-
723
- class AuroDateUtilities extends AuroDateUtilitiesBase {
724
-
725
- /**
726
- * Returns the current century.
727
- * @returns {String} The current century.
728
- */
729
- getCentury () {
730
- return String(new Date().getFullYear()).slice(0, 2);
731
- }
732
-
733
- /**
734
- * Returns a four digit year.
735
- * @param {String} year - The year to convert to four digits.
736
- * @returns {String} The four digit year.
737
- */
738
- getFourDigitYear (year) {
739
-
740
- const strYear = String(year).trim();
741
- return strYear.length <= 2 ? this.getCentury() + strYear : strYear;
742
- }
743
-
744
- constructor() {
745
-
746
- super();
747
-
748
- /**
749
- * Compares two dates to see if they match.
750
- * @param {Object} date1 - First date to compare.
751
- * @param {Object} date2 - Second date to compare.
752
- * @returns {Boolean} Returns true if the dates match.
753
- */
754
- this.datesMatch = (date1, date2) => new Date(date1).getTime() === new Date(date2).getTime();
755
-
756
- /**
757
- * Returns true if value passed in is a valid date.
758
- * @param {String} date - Date to validate.
759
- * @param {String} format - Date format to validate against.
760
- * @returns {Boolean}
761
- */
762
- this.validDateStr = (date, format) => {
763
-
764
- // The length we expect the date string to be
765
- const dateStrLength = format.length;
766
-
767
- // Guard Clause: Date and format are defined
768
- if (typeof date === "undefined" || typeof format === "undefined") {
769
- throw new Error('AuroDatepickerUtilities | validateDateStr: Date and format are required');
770
- }
771
-
772
- // Guard Clause: Date should be of type string
773
- if (typeof date !== "string") {
774
- throw new Error('AuroDatepickerUtilities | validateDateStr: Date must be a string');
775
- }
776
-
777
- // Guard Clause: Format should be of type string
778
- if (typeof format !== "string") {
779
- throw new Error('AuroDatepickerUtilities | validateDateStr: Format must be a string');
780
- }
781
-
782
- // Guard Clause: Length is what we expect it to be
783
- if (date.length !== dateStrLength) {
784
- return false;
785
- }
786
- // Get a formatted date string and parse it
787
- const dateParts = dateFormatter.parseDate(date, format);
788
-
789
- // Guard Clause: Date parse succeeded
790
- if (!dateParts) {
791
- return false;
792
- }
793
-
794
- // Create the expected date string based on the date parts
795
- const expectedDateStr = `${dateParts.month}/${dateParts.day || "01"}/${this.getFourDigitYear(dateParts.year)}`;
796
-
797
- // Generate a date object that we will extract a string date from to compare to the passed in date string
798
- const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
799
-
800
- // Get the date string of the date object we created from the string date
801
- const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
802
-
803
- // Guard Clause: Generated date matches date string input
804
- if (expectedDateStr !== actualDateStr) {
805
- return false;
806
- }
807
-
808
- // If we passed all other checks, we can assume the date is valid
809
- return true;
810
- };
811
-
812
- /**
813
- * Determines if a string date value matches the format provided.
814
- * @param {string} value = The date string value.
815
- * @param { string} format = The date format to match against.
816
- * @returns {boolean}
817
- */
818
- this.dateAndFormatMatch = (value, format) => {
819
-
820
- // Ensure we have both values we need to do the comparison
821
- if (!value || !format) {
822
- throw new Error('AuroFormValidation | dateFormatMatch: value and format are required');
823
- }
824
-
825
- // If the lengths are different, they cannot match
826
- if (value.length !== format.length) {
827
- return false;
828
- }
829
-
830
- // Get the parts of the date
831
- const dateParts = dateFormatter.parseDate(value, format);
832
-
833
- // Validator for day
834
- const dayValueIsValid = (day) => {
835
-
836
- // Guard clause: if there is no day in the dateParts, we can ignore this check.
837
- if (!dateParts.day) {
838
- return true;
839
- }
840
-
841
- // Guard clause: ensure day exists.
842
- if (!day) {
843
- return false;
844
- }
845
-
846
- // Convert day to number
847
- const numDay = Number.parseInt(day, 10);
848
-
849
- // Guard clause: ensure day is a valid integer
850
- if (Number.isNaN(numDay)) {
851
- throw new Error('AuroDatepickerUtilities | dayValueIsValid: Unable to parse day value integer');
852
- }
853
-
854
- // Guard clause: ensure day is within the valid range
855
- if (numDay < this.minDay || numDay > this.maxDay) {
856
- return false;
857
- }
858
-
859
- // Default return
860
- return true;
861
- };
862
-
863
- // Validator for month
864
- const monthValueIsValid = (month) => {
865
-
866
- // Guard clause: ensure month exists.
867
- if (!month) {
868
- return false;
869
- }
870
-
871
- // Convert month to number
872
- const numMonth = Number.parseInt(month, 10);
873
-
874
- // Guard clause: ensure month is a valid integer
875
- if (Number.isNaN(numMonth)) {
876
- throw new Error('AuroDatepickerUtilities | monthValueIsValid: Unable to parse month value integer');
877
- }
878
-
879
- // Guard clause: ensure month is within the valid range
880
- if (numMonth < this.minMonth || numMonth > this.maxMonth) {
881
- return false;
882
- }
883
-
884
- // Default return
885
- return true;
886
- };
887
-
888
- // Validator for year
889
- const yearIsValid = (_year) => {
890
-
891
- // Guard clause: ensure year exists.
892
- if (!_year) {
893
- return false;
894
- }
895
-
896
- // Get the full year
897
- const year = this.getFourDigitYear(_year);
898
-
899
- // Convert year to number
900
- const numYear = Number.parseInt(year, 10);
901
-
902
- // Guard clause: ensure year is a valid integer
903
- if (Number.isNaN(numYear)) {
904
- throw new Error('AuroDatepickerUtilities | yearValueIsValid: Unable to parse year value integer');
905
- }
906
-
907
- // Guard clause: ensure year is within the valid range
908
- if (numYear < this.minYear || numYear > this.maxYear) {
909
- return false;
910
- }
911
-
912
- // Default return
913
- return true;
914
- };
915
-
916
- // Self-contained checks for month, day, and year
917
- const checks = [
918
- monthValueIsValid(dateParts.month),
919
- dayValueIsValid(dateParts.day),
920
- yearIsValid(dateParts.year)
921
- ];
922
-
923
- // If any of the checks failed, the date format does not match and the result is invalid
924
- const isValid = checks.every((check) => check === true);
925
-
926
- // If the check is invalid, return false
927
- if (!isValid) {
928
- return false;
929
- }
930
-
931
- // Default case
932
- return true;
933
- };
934
- }
935
- }
936
-
937
- // Export a class instance
938
- const dateUtilities = new AuroDateUtilities();
939
-
940
- // Export the class instance methods individually
941
- const {
942
- datesMatch,
943
- validDateStr,
944
- dateAndFormatMatch,
945
- minDay,
946
- minMonth,
947
- minYear,
948
- maxDay,
949
- maxMonth,
950
- maxYear
951
- } = dateUtilities;
952
-
953
- const {
954
- toNorthAmericanFormat,
955
- parseDate,
956
- getDateAsString
957
- } = dateFormatter;
958
-
959
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
960
- // See LICENSE in the project root for license information.
961
-
962
-
963
- class AuroFormValidation {
964
-
965
- constructor() {
966
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
967
- }
968
-
969
- /**
970
- * Resets the element to its initial state.
971
- * @private
972
- * @param {object} elem - HTML element to reset.
973
- * @returns {void}
974
- */
975
- reset(elem) {
976
- elem.validity = undefined;
977
- elem.value = undefined;
978
- elem.touched = false;
979
-
980
- // Resets the second value of the datepicker in range state
981
- if (elem.valueEnd) {
982
- elem.valueEnd = undefined;
983
- }
984
-
985
- // Resets selected option of element
986
- if (elem.optionSelected) {
987
- elem.optionSelected = undefined;
988
- }
989
-
990
- // Runs validation to handle error attribute
991
- this.validate(elem);
992
- }
993
-
994
- /**
995
- * Validates the attributes of a given element based on predefined validation rules.
996
- *
997
- * @param {HTMLElement} elem - The element to be validated.
998
- * @returns {void}
999
- *
1000
- * @example
1001
- * // Assuming `inputElement` is a reference to an input element in the DOM
1002
- * validateElementAttributes(inputElement);
1003
- *
1004
- * The function checks the element's attributes against the validation rules defined for 'input' and 'counter' types.
1005
- * If a validation rule is violated, it sets the element's validity state and error message accordingly.
1006
- *
1007
- * Validation rules:
1008
- * - input:
1009
- * - length:
1010
- * - tooShort: Checks if the value length is less than the minimum length.
1011
- * - tooLong: Checks if the value length exceeds the maximum length.
1012
- * - pattern:
1013
- * - patternMismatch: Checks if the value does not match the specified pattern.
1014
- * - counter:
1015
- * - range:
1016
- * - rangeOverflow: Checks if the value exceeds the maximum value.
1017
- * - rangeUnderflow: Checks if the value is less than the minimum value.
1018
- */
1019
- validateElementAttributes(elem) {
1020
- const validationRules = {
1021
- input: {
1022
- length: [
1023
- {
1024
- check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
1025
- validity: 'tooShort',
1026
- message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
1027
- },
1028
- {
1029
- check: (e) => e.value?.length > e.maxLength,
1030
- validity: 'tooLong',
1031
- message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
1032
- }
1033
- ],
1034
- pattern: [
1035
- {
1036
- check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
1037
- validity: 'patternMismatch',
1038
- message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
1039
- }
1040
- ]
1041
- },
1042
- counter: {
1043
- range: [
1044
- {
1045
- check: (e) => e.max !== undefined && Number(e.max) < Number(e.value),
1046
- validity: 'rangeOverflow',
1047
- message: e => e.getAttribute('setCustomValidityRangeOverflow') || ''
1048
- },
1049
- {
1050
- check: (e) => e.min !== undefined && Number(e.min) > Number(e.value),
1051
- validity: 'rangeUnderflow',
1052
- message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
1053
- }
1054
- ]
1055
- },
1056
- combobox: {
1057
- filter: [
1058
- {
1059
- check: (e) => {
1060
-
1061
- // Guard Clause: If the behavior is not 'filter', skip this validation
1062
- if (e.behavior !== 'filter') return false;
1063
-
1064
- // Get the current input value
1065
- const currentInputValue = e.input.value;
1066
-
1067
- // Skip validation if the input has no value
1068
- if (!currentInputValue) return false;
1069
-
1070
- /**
1071
- * Let's check if the option selected and combobox value match.
1072
- */
1073
-
1074
- // Guard Clause: If there is no option selected fail the validation
1075
- if (!e.optionSelected) return true;
1076
-
1077
- // Guard Clause: If there is no value fail the validation
1078
- if (!e.value) return true;
1079
-
1080
- // Guard Clause: If the selected option's value doesn't match the input value fail the validation
1081
- if (e.optionSelected.value !== e.value) return true;
1082
-
1083
- /**
1084
- * Now let's make sure the user hasn't change the value in the input after selecting an option.
1085
- * This is to make sure there's no user confusion if they select an option but then change the value to something else.
1086
- */
1087
-
1088
- // Guard Clause: If the current input value doesn't match the option selected value fail the validation
1089
- if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
1090
-
1091
- // Guard Clause: If the current input value doesn't match the combobox value fail the validation
1092
- if (currentInputValue && currentInputValue !== e.value) return true;
1093
-
1094
- // If all the checks passed the validation passes
1095
- return false;
1096
- },
1097
- validity: 'valueMissing',
1098
- message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
1099
- }
1100
- ]
1101
- }
1102
- };
1103
-
1104
- let elementType;
1105
- if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1106
- elementType = 'input';
1107
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
1108
- elementType = 'counter';
1109
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
1110
- elementType = 'combobox';
1111
- }
1112
-
1113
- if (elementType) {
1114
- const rules = validationRules[elementType];
1115
-
1116
- if (rules) {
1117
- Object.values(rules).flat().forEach(rule => {
1118
- if (rule.check(elem)) {
1119
- elem.validity = rule.validity;
1120
- elem.errorMessage = rule.message(elem);
1121
- }
1122
- });
1123
- }
1124
- }
1125
- }
1126
-
1127
- /**
1128
- * Determines the validity state of the element based on the type attribute.
1129
- * @private
1130
- * @param {object} elem - HTML element to validate.
1131
- * @returns {void}
1132
- */
1133
- validateType(elem) {
1134
- if (elem.hasAttribute('type')) {
1135
- if (elem.type === 'email') {
1136
- const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
1137
-
1138
- if (!elem.value.match(emailRegex)) {
1139
- elem.validity = 'patternMismatch';
1140
- elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
1141
- return;
1142
- }
1143
- } else if (elem.type === 'credit-card') {
1144
- if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
1145
- elem.validity = 'tooShort';
1146
- elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
1147
- return;
1148
- }
1149
- } else if (elem.type === 'number') {
1150
- if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
1151
- elem.validity = 'rangeOverflow';
1152
- elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
1153
- return;
1154
- }
1155
-
1156
- if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
1157
- elem.validity = 'rangeUnderflow';
1158
- elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
1159
- return;
1160
- }
1161
- } else if (elem.type === 'date' && elem.value?.length > 0) {
1162
-
1163
- // Guard Clause: if the value is too short
1164
- if (elem.value?.length < elem.lengthForType) {
1165
-
1166
- elem.validity = 'tooShort';
1167
- elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
1168
- return;
1169
- }
1170
-
1171
- // Guard Clause: If the value is too long for the type
1172
- if (elem.value?.length > elem.lengthForType) {
1173
-
1174
- elem.validity = 'tooLong';
1175
- elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
1176
- return;
1177
- }
1178
-
1179
- // Validate that the date passed was the correct format
1180
- if (!dateAndFormatMatch(elem.value, elem.format)) {
1181
- elem.validity = 'patternMismatch';
1182
- elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || 'Invalid Date Format Entered';
1183
- return;
1184
- }
1185
-
1186
- // Validate that the date passed was a valid date
1187
- if (!validDateStr(elem.value, elem.format)) {
1188
- elem.validity = 'invalidDate';
1189
- elem.errorMessage = elem.setCustomValidityInvalidDate || elem.setCustomValidity || 'Invalid Date Entered';
1190
- return;
1191
- }
1192
-
1193
- // Perform the rest of the validation
1194
- const formattedValue = toNorthAmericanFormat(elem.value, elem.format);
1195
- const valueDate = new Date(formattedValue);
1196
-
1197
- // // Validate max date
1198
- if (elem.max?.length === elem.lengthForType) {
1199
-
1200
- const maxDate = new Date(toNorthAmericanFormat(elem.max, elem.format));
1201
-
1202
- if (valueDate > maxDate) {
1203
- elem.validity = 'rangeOverflow';
1204
- elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
1205
- return;
1206
- }
1207
- }
1208
-
1209
- // Validate min date
1210
- if (elem.min?.length === elem.lengthForType) {
1211
- const minDate = new Date(toNorthAmericanFormat(elem.min, elem.format));
1212
-
1213
- if (valueDate < minDate) {
1214
- elem.validity = 'rangeUnderflow';
1215
- elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
1216
- return;
1217
- }
1218
- }
1219
- }
1220
- }
1221
- }
1222
-
1223
- /**
1224
- * Determines the validity state of the element.
1225
- * @param {object} elem - HTML element to validate.
1226
- * @param {boolean} force - Boolean that forces validation to run.
1227
- * @returns {void}
1228
- */
1229
- validate(elem, force) {
1230
- this.getInputElements(elem);
1231
- this.getAuroInputs(elem);
1232
-
1233
- // Check if validation should run
1234
- let validationShouldRun =
1235
-
1236
- // If the validation was forced
1237
- force ||
1238
-
1239
- // If the validation should run on input
1240
- elem.validateOnInput ||
1241
-
1242
- // State-based checks
1243
- (
1244
- // Element is not currently focused
1245
- !elem.contains(document.activeElement) && // native input is not focused directly
1246
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
1247
-
1248
- // And element has been touched or is untouched but has a value
1249
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
1250
- );
1251
-
1252
- if (elem.hasAttribute('error')) {
1253
- elem.validity = 'customError';
1254
- elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
1255
- validationShouldRun = false;
1256
- } else if (validationShouldRun) {
1257
- elem.validity = 'valid';
1258
- elem.errorMessage = '';
1259
-
1260
- /**
1261
- * Only validate once we interact with the datepicker
1262
- * elem.value === undefined is the initial state pre-interaction.
1263
- *
1264
- * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
1265
- */
1266
-
1267
- let hasValue = false;
1268
-
1269
- // Check string for having a value
1270
- if (typeof elem.value === "string") {
1271
- hasValue = elem.value && elem.value.length > 0;
1272
- }
1273
-
1274
- if (typeof elem.value === "boolean") {
1275
- hasValue = elem.value || elem.value === false;
1276
- }
1277
-
1278
- if (typeof elem.value === "number") {
1279
- hasValue = !isNaN(elem.value) && elem.value !== null;
1280
- }
1281
-
1282
- // Check array value types for having a value
1283
- if (Array.isArray(elem.value)) {
1284
- hasValue = Boolean(
1285
- elem.value.length > 0 &&
1286
- elem.value.some((value) => typeof value === "string" && value.length > 0)
1287
- );
1288
- }
1289
-
1290
- // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
1291
- if (this.auroInputElements?.length === 2) {
1292
- if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
1293
- hasValue = false;
1294
- }
1295
- }
1296
-
1297
- const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
1298
-
1299
- if (isCombobox) {
1300
-
1301
- if (!elem.persistInput || elem.behavior === "filter") {
1302
- hasValue = elem.input.value?.length > 0;
1303
- }
1304
- }
1305
-
1306
- if (!hasValue && elem.required && (force || elem.touched)) {
1307
- elem.validity = 'valueMissing';
1308
- elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
1309
- } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1310
- this.validateType(elem);
1311
- this.validateElementAttributes(elem);
1312
- } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
1313
- this.validateElementAttributes(elem);
1314
- } else if (isCombobox) {
1315
- this.validateElementAttributes(elem);
1316
-
1317
- // Don't run extra validation for cases where the combobox is not being used as a filter
1318
- validationShouldRun = elem.behavior !== 'filter';
1319
- }
1320
- }
1321
-
1322
- if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing" && elem.validity !== "customError") {
1323
-
1324
- const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
1325
-
1326
- // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
1327
- if (!isCombobox || isCombobox && !elem.persistInput) {
1328
-
1329
- // run validation on all inputs since we're going to use them to set the validity of this component
1330
- this.auroInputElements.forEach(input => input.validate(force));
1331
-
1332
- // Reset element validity to the validity of the input
1333
- elem.validity = this.auroInputElements[0].validity;
1334
- elem.errorMessage = this.auroInputElements[0].errorMessage;
1335
- }
1336
-
1337
- // multiple input in one components (datepicker)
1338
- // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
1339
- if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
1340
- elem.validity = this.auroInputElements[1].validity;
1341
- elem.errorMessage = this.auroInputElements[1].errorMessage;
1342
- }
1343
- }
1344
-
1345
- if (validationShouldRun || elem.hasAttribute('error')) {
1346
- // Use the validity message override if it is declared
1347
- if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
1348
- elem.errorMessage = elem.ValidityMessageOverride;
1349
- }
1350
-
1351
- this.getErrorMessage(elem);
1352
- }
1353
-
1354
- elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1355
- bubbles: true,
1356
- composed: true,
1357
- detail: {
1358
- validity: elem.validity,
1359
- message: elem.errorMessage
1360
- }
1361
- }));
1362
- }
1363
-
1364
- /**
1365
- * Gets all the HTML5 `inputs` in the element shadow DOM.
1366
- * @private
1367
- * @param {object} elem - HTML element to validate.
1368
- * @returns {void}
1369
- */
1370
- getInputElements(elem) {
1371
- this.inputElements = elem.renderRoot.querySelectorAll('input');
1372
- }
1373
-
1374
- /**
1375
- * Gets all the `auro-inputs` in the element shadow DOM.
1376
- * @private
1377
- * @param {object} elem - HTML element to validate.
1378
- * @returns {void}
1379
- */
1380
- getAuroInputs(elem) {
1381
- this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]');
1382
- }
1383
-
1384
- /**
1385
- * Return appropriate error message.
1386
- * @private
1387
- * @param {object} elem - HTML element to validate.
1388
- * @returns {void}
1389
- */
1390
- getErrorMessage(elem) {
1391
- if (elem.validity !== 'valid') {
1392
- if (elem.setCustomValidity) {
1393
- elem.errorMessage = elem.setCustomValidity;
1394
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
1395
- const input = elem.renderRoot.querySelector('input');
1396
-
1397
- if (input.validationMessage.length > 0) {
1398
- elem.errorMessage = input.validationMessage;
1399
- }
1400
- } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
1401
- elem.errorMessage = elem.input?.inputElement?.validationMessage;
1402
- } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
1403
- const firstInput = this.inputElements[0];
1404
-
1405
- if (firstInput.validationMessage.length > 0) {
1406
- elem.errorMessage = firstInput.validationMessage;
1407
- } else if (this.inputElements?.length === 2) {
1408
- const secondInput = this.inputElements[1];
1409
-
1410
- if (secondInput.validationMessage.length > 0) {
1411
- elem.errorMessage = secondInput.validationMessage;
1412
- }
1413
- }
1414
- }
1415
- } else {
1416
- elem.errorMessage = '';
1417
- }
1418
- }
1419
- }
1420
-
1421
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1422
- // See LICENSE in the project root for license information.
1423
-
1424
-
1425
- class AuroDependencyVersioning {
1426
-
1427
- /**
1428
- * Generates a unique string to be used for child auro element naming.
1429
- * @private
1430
- * @param {string} baseName - Defines the first part of the unique element name.
1431
- * @param {string} version - Version of the component that will be appended to the baseName.
1432
- * @returns {string} - Unique string to be used for naming.
1433
- */
1434
- generateElementName(baseName, version) {
1435
- let result = baseName;
1436
-
1437
- result += '-';
1438
- result += version.replace(/[.]/g, '_');
1439
-
1440
- return result;
1441
- }
1442
-
1443
- /**
1444
- * Generates a unique string to be used for child auro element naming.
1445
- * @param {string} baseName - Defines the first part of the unique element name.
1446
- * @param {string} version - Version of the component that will be appended to the baseName.
1447
- * @returns {string} - Unique string to be used for naming.
1448
- */
1449
- generateTag(baseName, version, tagClass) {
1450
- const elementName = this.generateElementName(baseName, version);
1451
- const tag = i`${s(elementName)}`;
1452
-
1453
- if (!customElements.get(elementName)) {
1454
- customElements.define(elementName, class extends tagClass {});
1455
- }
1456
-
1457
- return tag;
1458
- }
1459
- }
1460
-
1461
- var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
1462
-
1463
- var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
1464
-
1465
- var colorCss = i$5`: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)}`;
1466
-
1467
- var styleCss = i$5`.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}`;
1468
-
1469
- var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
1470
-
1471
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1472
- // See LICENSE in the project root for license information.
1473
-
1474
- // ---------------------------------------------------------------------
1475
-
1476
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
1477
-
1478
- class AuroLibraryRuntimeUtils {
1479
-
1480
- /* eslint-disable jsdoc/require-param */
1481
-
1482
- /**
1483
- * This will register a new custom element with the browser.
1484
- * @param {String} name - The name of the custom element.
1485
- * @param {Object} componentClass - The class to register as a custom element.
1486
- * @returns {void}
1487
- */
1488
- registerComponent(name, componentClass) {
1489
- if (!customElements.get(name)) {
1490
- customElements.define(name, class extends componentClass {});
1491
- }
1492
- }
1493
-
1494
- /**
1495
- * Finds and returns the closest HTML Element based on a selector.
1496
- * @returns {void}
1497
- */
1498
- closestElement(
1499
- selector, // selector like in .closest()
1500
- base = this, // extra functionality to skip a parent
1501
- __Closest = (el, found = el && el.closest(selector)) =>
1502
- !el || el === document || el === window
1503
- ? null // standard .closest() returns null for non-found selectors also
1504
- : found
1505
- ? found // found a selector INside this element
1506
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
1507
- ) {
1508
- return __Closest(base);
1509
- }
1510
- /* eslint-enable jsdoc/require-param */
1511
-
1512
- /**
1513
- * 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.
1514
- * @param {Object} elem - The element to check.
1515
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
1516
- * @returns {void}
1517
- */
1518
- handleComponentTagRename(elem, tagName) {
1519
- const tag = tagName.toLowerCase();
1520
- const elemTag = elem.tagName.toLowerCase();
1521
-
1522
- if (elemTag !== tag) {
1523
- elem.setAttribute(tag, true);
1524
- }
1525
- }
1526
-
1527
- /**
1528
- * Validates if an element is a specific Auro component.
1529
- * @param {Object} elem - The element to validate.
1530
- * @param {String} tagName - The name of the Auro component to check against.
1531
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
1532
- */
1533
- elementMatch(elem, tagName) {
1534
- const tag = tagName.toLowerCase();
1535
- const elemTag = elem.tagName.toLowerCase();
1536
-
1537
- return elemTag === tag || elem.hasAttribute(tag);
1538
- }
1539
-
1540
- /**
1541
- * Gets the text content of a named slot.
1542
- * @returns {String}
1543
- * @private
1544
- */
1545
- getSlotText(elem, name) {
1546
- const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
1547
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
1548
- const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
1549
-
1550
- return text || null;
1551
- }
1552
- }
1553
-
1554
- // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1555
- // See LICENSE in the project root for license information.
1556
-
1557
-
1558
- /**
1559
- * Displays help text or error messages within form elements - Internal Use Only.
1560
- */
1561
- class AuroHelpText extends i$2 {
1562
-
1563
- constructor() {
1564
- super();
1565
-
1566
- this.error = false;
1567
- this.appearance = "default";
1568
- this.onDark = false;
1569
- this.hasTextContent = false;
1570
-
1571
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
1572
- }
1573
-
1574
- static get styles() {
1575
- return [
1576
- colorCss,
1577
- styleCss,
1578
- tokensCss
1579
- ];
1580
- }
1581
-
1582
- // function to define props used within the scope of this component
1583
- static get properties() {
1584
- return {
1585
-
1586
- /**
1587
- * Defines whether the component will be on lighter or darker backgrounds.
1588
- * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
1589
- * @default 'default'
1590
- */
1591
- appearance: {
1592
- type: String,
1593
- reflect: true
1594
- },
1595
-
1596
- /**
1597
- * @private
1598
- */
1599
- slotNodes: {
1600
- type: Boolean,
1601
- },
1602
-
1603
- /**
1604
- * @private
1605
- */
1606
- hasTextContent: {
1607
- type: Boolean,
1608
- },
1609
-
1610
- /**
1611
- * If declared, make font color red.
1612
- */
1613
- error: {
1614
- type: Boolean,
1615
- reflect: true,
1616
- },
1617
-
1618
- /**
1619
- * DEPRECATED - use `appearance` instead.
1620
- */
1621
- onDark: {
1622
- type: Boolean,
1623
- reflect: true
1624
- }
1625
- };
1626
- }
1627
-
1628
- /**
1629
- * This will register this element with the browser.
1630
- * @param {string} [name="auro-helptext"] - The name of element that you want to register to.
1631
- *
1632
- * @example
1633
- * AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
1634
- *
1635
- */
1636
- static register(name = "auro-helptext") {
1637
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
1638
- }
1639
-
1640
- updated() {
1641
- this.handleSlotChange();
1642
- }
1643
-
1644
- handleSlotChange(event) {
1645
- if (event) {
1646
- this.slotNodes = event.target.assignedNodes();
1647
- }
1648
-
1649
- this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
1650
- }
1651
-
1652
- /**
1653
- * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
1654
- *
1655
- * @param {NodeList|Array} nodes - The list of nodes to check for content.
1656
- * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
1657
- * @private
1658
- */
1659
- checkSlotsForContent(nodes) {
1660
- if (!nodes) {
1661
- return false;
1662
- }
1663
-
1664
- return nodes.some((node) => {
1665
- if (node.textContent.trim()) {
1666
- return true;
1667
- }
1668
-
1669
- if (!node.querySelector) {
1670
- return false;
1671
- }
1672
-
1673
- const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
1674
- if (!nestedSlot) {
1675
- return false;
1676
- }
1677
-
1678
- const nestedSlotNodes = nestedSlot.assignedNodes();
1679
- return this.checkSlotsForContent(nestedSlotNodes);
1680
- });
1681
- }
1682
-
1683
- // function that renders the HTML and CSS into the scope of the component
1684
- render() {
1685
- return b`
1686
- <div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
1687
- <slot @slotchange=${this.handleSlotChange}></slot>
1688
- </div>
1689
- `;
1690
- }
1691
- }
1692
-
1693
- var formkitVersion = '202605011845';
1694
-
1695
- // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1696
- // See LICENSE in the project root for license information.
1697
-
1698
-
1699
- /**
1700
- * The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
1701
- * @customElement auro-checkbox-group
1702
- *
1703
- * @slot legend - Allows for the legend to be overridden.
1704
- * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
1705
- * @slot helpText - Allows for the helper text to be overridden.
1706
- * @slot default - The default slot for the checkbox items.
1707
- * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
1708
- */
1709
-
1710
- class AuroCheckboxGroup extends i$2 {
1711
- constructor() {
1712
- super();
1713
-
1714
- this._initializeDefaults();
1715
- }
1716
-
1717
- _initializeDefaults() {
1718
- this.appearance = 'default';
1719
- this.validity = undefined;
1720
- this.disabled = undefined;
1721
- this.required = false;
1722
- this.horizontal = false;
1723
- this.onDark = false;
1724
-
1725
- /**
1726
- * Indicates whether the checkbox group is in a dirty state (has been interacted with).
1727
- * @type {boolean}
1728
- * @default false
1729
- * @private
1730
- */
1731
- this.touched = false;
1732
-
1733
- /**
1734
- * @private
1735
- */
1736
- this.value = undefined;
1737
-
1738
- /**
1739
- * @private
1740
- */
1741
- this.index = 0;
1742
-
1743
- /**
1744
- * @private
1745
- */
1746
- this.maxNumber = 3;
1747
-
1748
- /**
1749
- * @private
1750
- */
1751
- this.validation = new AuroFormValidation();
1752
-
1753
- /**
1754
- * @private
1755
- */
1756
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
1757
-
1758
- /**
1759
- * Generate unique names for dependency components.
1760
- */
1761
- const versioning = new AuroDependencyVersioning();
1762
-
1763
- /**
1764
- * @private
1765
- */
1766
- this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
1767
- }
1768
-
1769
- static get styles() {
1770
- return [
1771
- styleCss$1,
1772
- colorCss$1,
1773
- tokensCss$1
1774
- ];
1775
- }
1776
-
1777
- static get properties() {
1778
- return {
1779
- ...super.properties,
1780
-
1781
- /**
1782
- * Defines whether the component will be on lighter or darker backgrounds.
1783
- * @type {'default' | 'inverse'}
1784
- * @default 'default'
1785
- */
1786
- appearance: {
1787
- type: String,
1788
- reflect: true
1789
- },
1790
-
1791
- /**
1792
- * If set, disables the checkbox group.
1793
- */
1794
- disabled: {
1795
- type: Boolean,
1796
- reflect: true
1797
- },
1798
-
1799
- /**
1800
- * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
1801
- */
1802
- error: {
1803
- type: String,
1804
- reflect: true
1805
- },
1806
-
1807
- /**
1808
- * If set, checkboxes will be aligned horizontally.
1809
- */
1810
- horizontal: {
1811
- type: Boolean,
1812
- reflect: true
1813
- },
1814
-
1815
- /**
1816
- * If set, disables auto-validation on blur.
1817
- */
1818
- noValidate: {
1819
- type: Boolean,
1820
- reflect: true
1821
- },
1822
-
1823
- /**
1824
- * DEPRECATED - use `appearance="inverse"` instead.
1825
- */
1826
- onDark: {
1827
- type: Boolean,
1828
- reflect: true
1829
- },
1830
-
1831
- /**
1832
- * Populates the `required` attribute on the element. Used for client-side validation.
1833
- */
1834
- required: {
1835
- type: Boolean,
1836
- reflect: true
1837
- },
1838
-
1839
- /**
1840
- * Sets a custom help text message to display for all validityStates.
1841
- */
1842
- setCustomValidity: {
1843
- type: String
1844
- },
1845
-
1846
- /**
1847
- * Custom help text message to display when validity = `customError`.
1848
- */
1849
- setCustomValidityCustomError: {
1850
- type: String
1851
- },
1852
-
1853
- /**
1854
- * Custom help text message to display when validity = `valueMissing`.
1855
- */
1856
- setCustomValidityValueMissing: {
1857
- type: String
1858
- },
1859
-
1860
- /**
1861
- * Specifies the `validityState` this element is in.
1862
- */
1863
- validity: {
1864
- type: String,
1865
- reflect: true
1866
- }
1867
- };
1868
- }
1869
-
1870
- /**
1871
- * This will register this element with the browser.
1872
- * @param {string} [name="auro-checkbox-group"] - The name of the element that you want to register.
1873
- *
1874
- * @example
1875
- * AuroCheckboxGroup.register("custom-checkbox-group") // this will register this element to <custom-checkbox-group/>
1876
- *
1877
- */
1878
- static register(name = "auro-checkbox-group") {
1879
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckboxGroup);
1880
- }
1881
-
1882
- connectedCallback() {
1883
- super.connectedCallback();
1884
- this.handleItems();
1885
- }
1886
-
1887
- /**
1888
- * Helper method to handle checkbox value changing.
1889
- * @private
1890
- * @param {String} value - The value of the checkbox.
1891
- * @param {Boolean} selected - The checked state of the checkbox.
1892
- * @returns {void}
1893
- */
1894
- handleValueUpdate(value, selected) {
1895
- if (selected) {
1896
- // add if it isn't already in the value list
1897
- if (!this.value.includes(value)) {
1898
- this.value.push(value);
1899
- }
1900
- } else if (this.value.indexOf(value) > -1) { // eslint-disable-line no-magic-numbers
1901
- // remove if it is in the value list
1902
- const index = this.value.indexOf(value);
1903
-
1904
- this.value.splice(index, 1);
1905
- }
1906
-
1907
- this.dispatchEvent(new CustomEvent('input', {
1908
- bubbles: true,
1909
- cancelable: false,
1910
- composed: true,
1911
- }));
1912
-
1913
- this.validate(true);
1914
- }
1915
-
1916
- firstUpdated() {
1917
- // Add the tag name as an attribute if it is different than the component name
1918
- this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox-group');
1919
-
1920
- // must declare this function as a variable to correctly pass the reference to the removeEventListener
1921
- const checkFocusWithin = function(evt) {
1922
- if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
1923
- // if focus has left the group, cleanup and validate
1924
- document.auroCheckboxGroupActive.focusWithin = false;
1925
- window.removeEventListener('focusin', checkFocusWithin);
1926
- document.removeEventListener('click', checkFocusWithin);
1927
- // execute the validation
1928
- document.auroCheckboxGroupActive.validation.validate(document.auroCheckboxGroupActive);
1929
- }
1930
- };
1931
-
1932
- this.addEventListener('auroCheckbox-focusin', () => {
1933
- this.touched = true;
1934
-
1935
- if (!this.value) {
1936
- this.value = [];
1937
- }
1938
-
1939
- // handle click outside the group
1940
- if (!this.focusWithin) {
1941
- document.addEventListener('click', checkFocusWithin);
1942
- }
1943
-
1944
- this.focusWithin = true;
1945
- });
1946
-
1947
- this.addEventListener('auroCheckbox-focusout', () => {
1948
- document.auroCheckboxGroupActive = this;
1949
-
1950
- // Only add the focusWithin check event listener once as you move focus through the options
1951
- if (this.focusWithin) {
1952
- window.addEventListener('focusin', checkFocusWithin);
1953
- } else {
1954
- this.focusWithin = true;
1955
- }
1956
- });
1957
-
1958
- this.addEventListener('auroCheckbox-input', (evt) => {
1959
- this.handleValueUpdate(evt.target.value, evt.target.checked);
1960
- });
1961
- }
1962
-
1963
- /**
1964
- * Helper method that handles the state of preselected checkboxes.
1965
- * @private
1966
- * @returns {void}
1967
- */
1968
- handlePreselectedItems() {
1969
- let preSelectedValues = false;
1970
-
1971
- this.checkboxes.forEach((item) => {
1972
- if (item.hasAttribute('checked') && this.value === undefined) {
1973
- preSelectedValues = true;
1974
- }
1975
- });
1976
-
1977
- if (preSelectedValues) {
1978
- if (!this.value) {
1979
- this.value = [];
1980
- }
1981
-
1982
- this.checkboxes.forEach((item) => {
1983
- this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
1984
- });
1985
- }
1986
- }
1987
-
1988
- /**
1989
- * Helper method that handles the state of checkboxes.
1990
- * @private
1991
- * @returns {void}
1992
- */
1993
- handleItems() {
1994
- const groupTagName = this.tagName.toLowerCase();
1995
- const checkboxTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
1996
-
1997
- this.checkboxes = Array.from(this.querySelectorAll(checkboxTagName));
1998
-
1999
- this.handlePreselectedItems();
2000
-
2001
- this.validate();
2002
- }
2003
-
2004
- /**
2005
- * Resets component to initial state.
2006
- * @returns {void}
2007
- */
2008
- reset() {
2009
- this.checkboxes.forEach((checkbox) => {
2010
- checkbox.reset();
2011
- });
2012
-
2013
- this.validation.reset(this);
2014
- }
2015
-
2016
- /**
2017
- * LitElement lifecycle method. Called after the DOM has been updated.
2018
- * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
2019
- * @returns {void}
2020
- */
2021
- updated(changedProperties) {
2022
- if (changedProperties.has('disabled')) {
2023
- this.checkboxes.forEach((el) => {
2024
- if (this.disabled) {
2025
- el.setAttribute('disabled', true);
2026
- } else {
2027
- el.removeAttribute('disabled');
2028
- }
2029
- });
2030
- }
2031
-
2032
- if (changedProperties.has('validity')) {
2033
- this.checkboxes.forEach((el) => {
2034
- if (this.validity && this.validity !== 'valid') {
2035
- el.setAttribute('error', true);
2036
- } else {
2037
- el.removeAttribute('error');
2038
- }
2039
- });
2040
- }
2041
-
2042
- if (changedProperties.has('required')) {
2043
- if (this.required) {
2044
- this.setAttribute('aria-required', true);
2045
- } else {
2046
- this.removeAttribute('aria-required');
2047
- }
2048
- }
2049
-
2050
- if (changedProperties.has('onDark')) {
2051
- this.checkboxes.forEach((el) => {
2052
- el.onDark = this.onDark;
2053
- });
2054
- }
2055
-
2056
- if (changedProperties.has('appearance')) {
2057
- this.checkboxes.forEach((el) => {
2058
- el.appearance = this.appearance;
2059
- });
2060
- }
2061
-
2062
- if (changedProperties.has('error')) {
2063
- if (this.error) {
2064
- this.setAttribute('aria-invalid', true);
2065
- } else {
2066
- this.removeAttribute('aria-invalid');
2067
- }
2068
-
2069
- this.validate(true);
2070
- }
2071
- }
2072
-
2073
- /**
2074
- * Validates value.
2075
- * @param {boolean} [force=false] - Whether to force validation.
2076
- */
2077
- validate(force = false) {
2078
- this.validation.validate(this, force);
2079
- }
2080
-
2081
- render() {
2082
- const groupClasses = {
2083
- 'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
2084
- };
2085
-
2086
- return u`
2087
- <fieldset class="${e(groupClasses)}">
2088
- <legend>
2089
- <slot name="legend"></slot>
2090
- ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
2091
- </legend>
2092
- <slot @slotchange=${this.handleItems}></slot>
2093
- </fieldset>
2094
-
2095
- ${!this.validity || this.validity === undefined || this.validity === 'valid'
2096
- ? u`
2097
- <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
2098
- <slot name="helpText"></slot>
2099
- </${this.helpTextTag}>`
2100
- : u`
2101
- <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
2102
- ${this.errorMessage}
2103
- </${this.helpTextTag}>`
2104
- }
2105
- `;
2106
- }
2107
- }
2108
-
2109
- AuroCheckbox.register(); // registering to `auro-checkbox`
2110
- AuroCheckboxGroup.register(); // registering to `auro-checkbox-group`
2111
-
2112
- AuroCheckbox.register('custom-checkbox');
2113
- AuroCheckboxGroup.register('custom-checkbox-group');
2114
-
2115
11
  function initExamples(initCount) {
2116
12
  initCount = initCount || 0;
2117
13