@genexus/genexus-ide-ui 0.0.11 → 0.0.13

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 (270) hide show
  1. package/dist/cjs/ch-grid-action-refresh_6.cjs.entry.js +359 -0
  2. package/dist/cjs/ch-grid-rowset-legend_2.cjs.entry.js +51 -0
  3. package/dist/cjs/{ch-grid_9.cjs.entry.js → ch-grid_7.cjs.entry.js} +130 -332
  4. package/dist/cjs/ch-suggest-list-item.cjs.entry.js +11 -16
  5. package/dist/cjs/ch-suggest-list.cjs.entry.js +10 -10
  6. package/dist/cjs/ch-suggest.cjs.entry.js +51 -47
  7. package/dist/cjs/form-validation-87e3749d.js +68 -0
  8. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  9. package/dist/cjs/{gxg-combo-box_8.cjs.entry.js → gx-ide-container_10.cjs.entry.js} +334 -231
  10. package/dist/cjs/gx-ide-entity-selector.cjs.entry.js +1 -1
  11. package/dist/cjs/gx-ide-new-environment.cjs.entry.js +118 -0
  12. package/dist/cjs/gx-ide-new-kb.cjs.entry.js +42 -93
  13. package/dist/cjs/gx-ide-template.cjs.entry.js +11 -12
  14. package/dist/cjs/gxg-breadcrumb.cjs.entry.js +0 -1
  15. package/dist/cjs/gxg-button-group.cjs.entry.js +1 -1
  16. package/dist/cjs/gxg-button.cjs.entry.js +2 -2
  17. package/dist/cjs/gxg-container.cjs.entry.js +215 -0
  18. package/dist/cjs/gxg-date-picker.cjs.entry.js +1 -1
  19. package/dist/cjs/gxg-drop-down.cjs.entry.js +1 -1
  20. package/dist/cjs/gxg-form-checkbox.cjs.entry.js +3 -1
  21. package/dist/cjs/gxg-form-radio-group.cjs.entry.js +76 -36
  22. package/dist/cjs/gxg-form-text.cjs.entry.js +17 -5
  23. package/dist/cjs/gxg-form-textarea.cjs.entry.js +1 -1
  24. package/dist/cjs/gxg-list-box.cjs.entry.js +3 -2
  25. package/dist/cjs/gxg-menu-item.cjs.entry.js +59 -12
  26. package/dist/cjs/gxg-menu-list.cjs.entry.js +28 -0
  27. package/dist/cjs/gxg-menu.cjs.entry.js +228 -12
  28. package/dist/cjs/gxg-option.cjs.entry.js +1 -1
  29. package/dist/cjs/gxg-paginator.cjs.entry.js +1 -1
  30. package/dist/cjs/gxg-select.cjs.entry.js +1 -1
  31. package/dist/cjs/gxg-suggest.cjs.entry.js +26 -3
  32. package/dist/cjs/gxg-test.cjs.entry.js +36 -10
  33. package/dist/cjs/gxg-text.cjs.entry.js +23 -11
  34. package/dist/cjs/gxg-title.cjs.entry.js +11 -7
  35. package/dist/cjs/gxg-tree-item.cjs.entry.js +30 -43
  36. package/dist/cjs/gxg-tree.cjs.entry.js +0 -4
  37. package/dist/cjs/loader.cjs.js +1 -1
  38. package/dist/cjs/{repositionScroll-e3ae1947.js → reposition-scroll-accee84c.js} +3 -15
  39. package/dist/cjs/types-e04c9098.js +12 -0
  40. package/dist/collection/collection-manifest.json +6 -1
  41. package/dist/collection/common/common.js +6 -6
  42. package/dist/collection/common/form-validation.js +17 -0
  43. package/dist/collection/common/interfaces.js +3 -1
  44. package/dist/collection/components/_template/gx-ide-assets/template/langs/template.lang.en.json +1 -1
  45. package/dist/collection/components/_template/template.css +90 -6
  46. package/dist/collection/components/_template/template.js +26 -23
  47. package/dist/{node_modules/@genexus/gemini/dist/collection/components/suggest/gxg-suggest.css → collection/components/container/container.css} +118 -120
  48. package/dist/collection/components/container/container.js +535 -0
  49. package/dist/collection/components/entity-selector/entity-selector.css +1 -1
  50. package/dist/collection/components/new-environment/gx-ide-assets/new-environment/langs/new-environment.lang.en.json +26 -0
  51. package/dist/collection/components/new-environment/gx-ide-assets/new-environment/langs/new-environment.lang.ja.json +3 -0
  52. package/dist/collection/components/new-environment/gx-ide-assets/new-environment/langs/new-environment.lang.zh.json +3 -0
  53. package/dist/collection/components/new-environment/new-environment.css +219 -0
  54. package/dist/collection/components/new-environment/new-environment.js +355 -0
  55. package/dist/collection/components/new-kb/gx-ide-assets/new-kb/langs/new-kb.lang.en.json +1 -0
  56. package/dist/collection/components/new-kb/new-kb.css +100 -8
  57. package/dist/collection/components/new-kb/new-kb.js +96 -92
  58. package/dist/collection/components/top-bar/top-bar.css +17 -0
  59. package/dist/collection/components/top-bar/top-bar.js +62 -0
  60. package/dist/collection/pages/assets/common.js +28 -8
  61. package/dist/components/button-group.js +1 -1
  62. package/dist/components/button.js +2 -2
  63. package/dist/components/ch-grid-rowset-legend.js +1 -32
  64. package/dist/components/ch-grid-rowset-legend2.js +34 -0
  65. package/dist/components/ch-grid2.js +1 -1
  66. package/dist/components/ch-suggest-list-item.js +15 -18
  67. package/dist/components/ch-suggest-list.js +10 -10
  68. package/dist/components/ch-suggest.js +58 -48
  69. package/dist/components/combo-box-item.js +6 -1
  70. package/dist/components/combo-box.js +72 -11
  71. package/dist/components/container.js +83 -156
  72. package/dist/components/form-checkbox.js +4 -2
  73. package/dist/components/form-radio-group.js +244 -0
  74. package/dist/components/form-radio.js +13 -22
  75. package/dist/components/form-text.js +20 -6
  76. package/dist/components/form-validation.js +64 -0
  77. package/dist/components/gx-ide-container.d.ts +11 -0
  78. package/dist/components/gx-ide-container.js +6 -0
  79. package/dist/components/gx-ide-entity-selector.js +1 -1
  80. package/dist/components/gx-ide-new-environment.d.ts +11 -0
  81. package/dist/components/gx-ide-new-environment.js +258 -0
  82. package/dist/components/gx-ide-new-kb.js +63 -101
  83. package/dist/components/gx-ide-template.js +67 -14
  84. package/dist/components/gx-ide-top-bar.d.ts +11 -0
  85. package/dist/components/gx-ide-top-bar.js +6 -0
  86. package/dist/components/gxg-breadcrumb.js +0 -1
  87. package/dist/components/gxg-container.js +251 -1
  88. package/dist/components/gxg-date-picker.js +1 -1
  89. package/dist/components/gxg-drop-down.js +1 -1
  90. package/dist/components/gxg-form-checkbox-group.js +6 -0
  91. package/dist/components/gxg-form-checkbox-group2.js +109 -0
  92. package/dist/components/gxg-form-radio-group.js +1 -202
  93. package/dist/components/gxg-form-textarea.js +1 -1
  94. package/dist/components/gxg-grid.js +1 -44
  95. package/dist/components/gxg-grid2.js +46 -0
  96. package/dist/components/gxg-list-box.js +2 -2
  97. package/dist/components/gxg-menu-item.js +64 -15
  98. package/dist/components/gxg-menu-list.js +50 -0
  99. package/dist/components/gxg-menu.js +233 -14
  100. package/dist/components/gxg-option.js +1 -1
  101. package/dist/components/gxg-paginator.js +1 -1
  102. package/dist/components/gxg-select.js +1 -1
  103. package/dist/components/gxg-suggest.js +32 -4
  104. package/dist/components/gxg-test.js +110 -16
  105. package/dist/components/gxg-text.js +27 -12
  106. package/dist/components/gxg-tree-item2.js +31 -43
  107. package/dist/components/gxg-tree2.js +0 -4
  108. package/dist/components/index.d.ts +3 -0
  109. package/dist/components/index.js +5 -0
  110. package/dist/{esm/repositionScroll-9d3ee138.js → components/reposition-scroll.js} +2 -13
  111. package/dist/components/tab-button.js +1 -1
  112. package/dist/components/tab.js +17 -2
  113. package/dist/components/title.js +13 -8
  114. package/dist/components/top-bar.js +74 -0
  115. package/dist/components/types.js +10 -0
  116. package/dist/esm/ch-grid-action-refresh_6.entry.js +350 -0
  117. package/dist/esm/ch-grid-rowset-legend_2.entry.js +46 -0
  118. package/dist/esm/{ch-grid_9.entry.js → ch-grid_7.entry.js} +125 -325
  119. package/dist/esm/ch-suggest-list-item.entry.js +11 -16
  120. package/dist/esm/ch-suggest-list.entry.js +10 -10
  121. package/dist/esm/ch-suggest.entry.js +51 -47
  122. package/dist/esm/form-validation-a6686ca1.js +64 -0
  123. package/dist/esm/genexus-ide-ui.js +1 -1
  124. package/dist/esm/{gxg-combo-box_8.entry.js → gx-ide-container_10.entry.js} +325 -224
  125. package/dist/esm/gx-ide-entity-selector.entry.js +1 -1
  126. package/dist/esm/gx-ide-new-environment.entry.js +114 -0
  127. package/dist/esm/gx-ide-new-kb.entry.js +42 -93
  128. package/dist/esm/gx-ide-template.entry.js +11 -12
  129. package/dist/esm/gxg-breadcrumb.entry.js +0 -1
  130. package/dist/esm/gxg-button-group.entry.js +1 -1
  131. package/dist/esm/gxg-button.entry.js +2 -2
  132. package/dist/esm/gxg-container.entry.js +211 -0
  133. package/dist/esm/gxg-date-picker.entry.js +1 -1
  134. package/dist/esm/gxg-drop-down.entry.js +1 -1
  135. package/dist/esm/gxg-form-checkbox.entry.js +4 -2
  136. package/dist/esm/gxg-form-radio-group.entry.js +77 -37
  137. package/dist/esm/gxg-form-text.entry.js +17 -5
  138. package/dist/esm/gxg-form-textarea.entry.js +1 -1
  139. package/dist/esm/gxg-list-box.entry.js +3 -2
  140. package/dist/esm/gxg-menu-item.entry.js +60 -13
  141. package/dist/esm/gxg-menu-list.entry.js +24 -0
  142. package/dist/esm/gxg-menu.entry.js +228 -12
  143. package/dist/esm/gxg-option.entry.js +1 -1
  144. package/dist/esm/gxg-paginator.entry.js +1 -1
  145. package/dist/esm/gxg-select.entry.js +1 -1
  146. package/dist/esm/gxg-suggest.entry.js +26 -3
  147. package/dist/esm/gxg-test.entry.js +36 -10
  148. package/dist/esm/gxg-text.entry.js +23 -11
  149. package/dist/esm/gxg-title.entry.js +11 -7
  150. package/dist/esm/gxg-tree-item.entry.js +30 -43
  151. package/dist/esm/gxg-tree.entry.js +0 -4
  152. package/dist/esm/loader.js +1 -1
  153. package/dist/{components/repositionScroll.js → esm/reposition-scroll-3478b46f.js} +2 -13
  154. package/dist/esm/types-02481dff.js +10 -0
  155. package/dist/genexus-ide-ui/genexus-ide-ui.css +2 -2
  156. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  157. package/dist/genexus-ide-ui/gx-ide-assets/new-environment/langs/new-environment.lang.en.json +26 -0
  158. package/dist/genexus-ide-ui/gx-ide-assets/new-environment/langs/new-environment.lang.ja.json +3 -0
  159. package/dist/genexus-ide-ui/gx-ide-assets/new-environment/langs/new-environment.lang.zh.json +3 -0
  160. package/dist/genexus-ide-ui/gx-ide-assets/new-kb/langs/new-kb.lang.en.json +1 -0
  161. package/dist/genexus-ide-ui/gx-ide-assets/template/langs/template.lang.en.json +1 -1
  162. package/dist/genexus-ide-ui/{p-7e7af90d.entry.js → p-01e9d3aa.entry.js} +1 -1
  163. package/dist/genexus-ide-ui/p-05ad8cad.js +1 -0
  164. package/dist/genexus-ide-ui/p-0a8bd33f.entry.js +1 -0
  165. package/dist/genexus-ide-ui/p-0a954e0f.entry.js +1 -0
  166. package/dist/genexus-ide-ui/{p-9292edf8.entry.js → p-18936375.entry.js} +1 -1
  167. package/dist/genexus-ide-ui/p-203ea363.entry.js +1 -0
  168. package/dist/genexus-ide-ui/p-20a45778.entry.js +1 -0
  169. package/dist/genexus-ide-ui/{p-fed1d2ba.entry.js → p-23d4b295.entry.js} +1 -1
  170. package/dist/genexus-ide-ui/p-408bdfc6.entry.js +1 -0
  171. package/dist/genexus-ide-ui/p-4198315e.entry.js +1 -0
  172. package/dist/genexus-ide-ui/{p-944e787a.entry.js → p-41e8442b.entry.js} +1 -1
  173. package/dist/genexus-ide-ui/p-4d572963.entry.js +1 -0
  174. package/dist/genexus-ide-ui/p-4e78d56d.entry.js +1 -0
  175. package/dist/genexus-ide-ui/p-5463844e.entry.js +1 -0
  176. package/dist/genexus-ide-ui/p-6a84b339.js +1 -0
  177. package/dist/genexus-ide-ui/p-6bee904e.entry.js +1 -0
  178. package/dist/genexus-ide-ui/{p-1cedf0b2.entry.js → p-7137b4cf.entry.js} +1 -1
  179. package/dist/genexus-ide-ui/p-75961324.entry.js +1 -0
  180. package/dist/genexus-ide-ui/p-7a5e0988.entry.js +1 -0
  181. package/dist/genexus-ide-ui/p-7c2068c2.entry.js +1 -0
  182. package/dist/genexus-ide-ui/{p-c0360787.entry.js → p-7fa78be9.entry.js} +1 -1
  183. package/dist/genexus-ide-ui/p-89d0ef14.entry.js +1 -0
  184. package/dist/genexus-ide-ui/p-925cb9fe.js +1 -0
  185. package/dist/genexus-ide-ui/p-9e32e006.entry.js +1 -0
  186. package/dist/genexus-ide-ui/{p-8eb472e6.entry.js → p-a985b448.entry.js} +1 -1
  187. package/dist/genexus-ide-ui/p-ad9fe469.entry.js +1 -0
  188. package/dist/genexus-ide-ui/p-ae1871e4.entry.js +1 -0
  189. package/dist/genexus-ide-ui/{p-8ae0846e.entry.js → p-af0ac52d.entry.js} +1 -1
  190. package/dist/genexus-ide-ui/p-b3727324.entry.js +1 -0
  191. package/dist/genexus-ide-ui/p-b4e4fc69.entry.js +1 -0
  192. package/dist/genexus-ide-ui/p-c670dcba.entry.js +1 -0
  193. package/dist/genexus-ide-ui/p-e377e5be.entry.js +1 -0
  194. package/dist/genexus-ide-ui/p-eb8e9655.entry.js +1 -0
  195. package/dist/genexus-ide-ui/p-ecedca13.entry.js +1 -0
  196. package/dist/genexus-ide-ui/p-f5aa333b.entry.js +1 -0
  197. package/dist/genexus-ide-ui/{p-01795e05.entry.js → p-f6536bbc.entry.js} +1 -1
  198. package/dist/genexus-ide-ui/{p-f739d5dc.entry.js → p-ff877c22.entry.js} +1 -1
  199. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/suggest/ch-suggest.css +28 -6
  200. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/suggest/suggest-list/ch-suggest-list.css +6 -0
  201. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/suggest/suggest-list-item/ch-suggest-list-item.css +13 -0
  202. package/dist/node_modules/@genexus/gemini/dist/collection/components/button/button.css +1 -1
  203. package/dist/node_modules/@genexus/gemini/dist/collection/components/date-picker/date-picker.css +1 -1
  204. package/dist/node_modules/@genexus/gemini/dist/collection/components/drop-down/drop-down.css +1 -1
  205. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.css +14 -1
  206. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-checkbox-group/gxg-form-checkbox-group.css +336 -0
  207. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-option/option.css +1 -1
  208. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-radio/form-radio.css +2 -2
  209. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-radio-group/form-radio-group.css +2 -2
  210. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-select/select.css +1 -1
  211. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-text/form-text.css +1 -1
  212. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-textarea/form-textarea.css +1 -1
  213. package/dist/node_modules/@genexus/gemini/dist/collection/components/grid/gxg-grid.css +344 -10
  214. package/dist/node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.css +1 -1
  215. package/dist/node_modules/@genexus/gemini/dist/collection/components/menu/menu.css +31 -23
  216. package/dist/node_modules/@genexus/gemini/dist/collection/components/menu-item/menu-item.css +35 -11
  217. package/dist/node_modules/@genexus/gemini/dist/collection/components/menu-list/menu-list.css +340 -0
  218. package/dist/node_modules/@genexus/gemini/dist/collection/components/paginator/gxg-paginator.css +1 -1
  219. package/dist/node_modules/@genexus/gemini/dist/collection/components/suggest/styles.css +617 -0
  220. package/dist/node_modules/@genexus/gemini/dist/collection/components/tab/tab.css +10 -0
  221. package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-button/tab-button.css +1 -1
  222. package/dist/node_modules/@genexus/gemini/dist/collection/components/text/text.css +35 -9
  223. package/dist/node_modules/@genexus/gemini/dist/collection/components/title/title.css +27 -0
  224. package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-item/gxg-tree-item.css +1 -1
  225. package/dist/types/common/common.d.ts +4 -4
  226. package/dist/types/common/form-validation.d.ts +2 -0
  227. package/dist/types/common/interfaces.d.ts +0 -3
  228. package/dist/types/common/types.d.ts +10 -18
  229. package/dist/types/components/_template/template.d.ts +5 -5
  230. package/dist/types/components/container/container.d.ts +117 -0
  231. package/dist/types/components/new-environment/new-environment.d.ts +91 -0
  232. package/dist/types/components/new-kb/new-kb.d.ts +43 -38
  233. package/dist/types/components/top-bar/top-bar.d.ts +14 -0
  234. package/dist/types/components.d.ts +357 -43
  235. package/package.json +5 -2
  236. package/dist/cjs/ch-grid-column-resize_2.cjs.entry.js +0 -94
  237. package/dist/cjs/ch-grid-rowset-legend.cjs.entry.js +0 -23
  238. package/dist/cjs/ch-grid-settings_2.cjs.entry.js +0 -62
  239. package/dist/cjs/gxg-grid.cjs.entry.js +0 -34
  240. package/dist/cjs/helpers-00cb4402.js +0 -12
  241. package/dist/esm/ch-grid-column-resize_2.entry.js +0 -89
  242. package/dist/esm/ch-grid-rowset-legend.entry.js +0 -19
  243. package/dist/esm/ch-grid-settings_2.entry.js +0 -57
  244. package/dist/esm/gxg-grid.entry.js +0 -30
  245. package/dist/esm/helpers-78ca0d8a.js +0 -10
  246. package/dist/genexus-ide-ui/p-161b5c92.entry.js +0 -1
  247. package/dist/genexus-ide-ui/p-18c86754.entry.js +0 -1
  248. package/dist/genexus-ide-ui/p-215a6957.entry.js +0 -1
  249. package/dist/genexus-ide-ui/p-26000a72.entry.js +0 -1
  250. package/dist/genexus-ide-ui/p-26b1d9c2.entry.js +0 -1
  251. package/dist/genexus-ide-ui/p-3182ba74.entry.js +0 -1
  252. package/dist/genexus-ide-ui/p-3c6099ff.entry.js +0 -1
  253. package/dist/genexus-ide-ui/p-421bd2fb.entry.js +0 -1
  254. package/dist/genexus-ide-ui/p-783b8e55.entry.js +0 -1
  255. package/dist/genexus-ide-ui/p-7b79281c.entry.js +0 -1
  256. package/dist/genexus-ide-ui/p-7dead490.entry.js +0 -1
  257. package/dist/genexus-ide-ui/p-847aca21.entry.js +0 -1
  258. package/dist/genexus-ide-ui/p-84a47196.entry.js +0 -1
  259. package/dist/genexus-ide-ui/p-8f89e354.entry.js +0 -1
  260. package/dist/genexus-ide-ui/p-a04ce551.entry.js +0 -1
  261. package/dist/genexus-ide-ui/p-ad1b71a0.js +0 -1
  262. package/dist/genexus-ide-ui/p-b7a03c38.js +0 -1
  263. package/dist/genexus-ide-ui/p-b7c204b2.entry.js +0 -1
  264. package/dist/genexus-ide-ui/p-c3c9f7a2.entry.js +0 -1
  265. package/dist/genexus-ide-ui/p-c714cf27.entry.js +0 -1
  266. package/dist/genexus-ide-ui/p-d5cf33f2.entry.js +0 -1
  267. package/dist/genexus-ide-ui/p-da94ba10.entry.js +0 -1
  268. package/dist/genexus-ide-ui/p-de120e4b.entry.js +0 -1
  269. package/dist/genexus-ide-ui/p-e82e2182.entry.js +0 -1
  270. package/dist/genexus-ide-ui/p-e9d84bbe.entry.js +0 -1
@@ -1,9 +1,187 @@
1
- import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
1
+ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4f0a5746.js';
2
2
  import { f as formMessageLogic } from './form-73d85602.js';
3
- import { K as KeyboardKeys, r as repositionScroll } from './repositionScroll-9d3ee138.js';
3
+ import { r as repositionScroll } from './reposition-scroll-3478b46f.js';
4
+ import { K as KeyboardKeys } from './types-02481dff.js';
4
5
  import { e as exportParts } from './export-parts-7f208d57.js';
5
6
  import { s as state } from './store-75f5d491.js';
6
- import { c as commonClassesNames } from './classesNames-6cd8fadb.js';
7
+ import { c as commonClassesNames, f as formClasses } from './classesNames-6cd8fadb.js';
8
+
9
+ const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}:host([full-height]){height:100%}:host([full-height]) .container{height:100%;display:flex;flex-direction:column}:host([full-height]) .content{flex-grow:1}fieldset{padding:0;margin-inline-start:0;margin-inline-end:0;border:none}.heading,.content,.footer{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:flex;flex-direction:column;gap:var(--gxg-container-elements-spacing);overflow-x:auto;}.content::-webkit-scrollbar{width:6px;height:6px}.content::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.content::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.content::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.content .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}.content--no-padding{padding:0}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
10
+
11
+ const GxIdeContainer = class {
12
+ constructor(hostRef) {
13
+ registerInstance(this, hostRef);
14
+ this.headingClasses = () => {
15
+ return {
16
+ "heading": true,
17
+ "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
18
+ [`heading--justify-${this.headingJustify}`]: true,
19
+ ["heading--no-padding"]: this.noHeadingPadding
20
+ };
21
+ };
22
+ this.contentClasses = () => {
23
+ return {
24
+ "content": true,
25
+ "content--no-padding": this.noContentPadding,
26
+ "content--no-gap": this.noContentGap,
27
+ [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
28
+ [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
29
+ };
30
+ };
31
+ this.footer = () => {
32
+ return this.hasFooterSlot ? (h("footer", { class: {
33
+ "footer": true,
34
+ "footer--no-border": this.hasOnlyFooter || !this.hasSlottedContent,
35
+ [`footer--justify-${this.footerJustify}`]: true,
36
+ [`footer--justify-${this.footerJustify}`]: true,
37
+ ["footer--no-padding"]: this.noFooterPadding
38
+ } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
39
+ };
40
+ this.fieldset = false;
41
+ this.containerTitle = undefined;
42
+ this.displayBorder = false;
43
+ this.displayBorderTop = false;
44
+ this.displayBorderEnd = false;
45
+ this.displayBorderBottom = false;
46
+ this.displayBorderStart = false;
47
+ this.sectionsPadding = "m";
48
+ this.fullHeight = false;
49
+ this.titleAlignment = "center";
50
+ this.noHeadingBorder = false;
51
+ this.noHeadingPadding = false;
52
+ this.headingJustify = "center";
53
+ this.noContentPadding = false;
54
+ this.noContentGap = false;
55
+ this.alignItems = undefined;
56
+ this.justifyContent = undefined;
57
+ this.noFooterPadding = false;
58
+ this.footerJustify = "end";
59
+ this.noBorderFooter = false;
60
+ this.hasHeaderSlot = false;
61
+ this.hasSlottedContent = false;
62
+ this.hasFooterSlot = false;
63
+ this.hasOnlyHeading = false;
64
+ this.hasOnlyFooter = false;
65
+ }
66
+ // 4.PUBLIC PROPERTY API /
67
+ // 5.EVENTS (EMIT) //
68
+ // 6.COMPONENT LIFECYCLE EVENTS //
69
+ componentWillLoad() {
70
+ this.evaluateSlots();
71
+ this.evaluateFullHeight();
72
+ }
73
+ // 7.LISTENERS //
74
+ // 8.PUBLIC METHODS API //
75
+ // 9.LOCAL METHODS //
76
+ evaluateSlots() {
77
+ // header
78
+ const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
79
+ if (headerSlot.length) {
80
+ this.hasHeaderSlot = true;
81
+ }
82
+ // content
83
+ const slottedContent = this.el.querySelectorAll(":scope > :not([slot])");
84
+ if (slottedContent.length) {
85
+ this.hasSlottedContent = true;
86
+ }
87
+ // footer
88
+ const footerStartSlot = this.el.querySelectorAll(':scope > [slot="footer-start"]');
89
+ const footerEndSlot = this.el.querySelectorAll(':scope > [slot="footer-end"]');
90
+ if (footerStartSlot.length || footerEndSlot.length) {
91
+ this.hasFooterSlot = true;
92
+ }
93
+ }
94
+ evaluateFullHeight() {
95
+ if (this.fullHeight && this.fieldset) {
96
+ /* If full-height, fieldset has to be false*/
97
+ this.fieldset = false;
98
+ }
99
+ }
100
+ evaluateSections() {
101
+ if (!this.hasSlottedContent && !this.hasFooterSlot) {
102
+ this.hasOnlyHeading = true;
103
+ }
104
+ if (!this.hasSlottedContent && !this.containerTitle) {
105
+ this.hasOnlyFooter = true;
106
+ }
107
+ }
108
+ // 10.RENDER() FUNCTION //
109
+ render() {
110
+ this.evaluateSections();
111
+ let result;
112
+ if (this.fieldset) {
113
+ result = [
114
+ h("fieldset", null, this.containerTitle || this.hasHeaderSlot ? (h("legend", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
115
+ this.footer()
116
+ ];
117
+ }
118
+ else {
119
+ result = [
120
+ this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
121
+ this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null,
122
+ this.footer()
123
+ ];
124
+ }
125
+ return (h(Host, null, h("div", { class: {
126
+ "container": true,
127
+ [`container--padding-${this.sectionsPadding}`]: true,
128
+ "container--display-border": this.displayBorder,
129
+ "container--display-border-top": this.displayBorderTop,
130
+ "container--display-border-end": this.displayBorderEnd,
131
+ "container--display-border-bottom": this.displayBorderBottom,
132
+ "container--display-border-start": this.displayBorderStart
133
+ } }, result)));
134
+ }
135
+ get el() { return getElement(this); }
136
+ };
137
+ GxIdeContainer.style = containerCss;
138
+
139
+ const topBarCss = ":host{display:block;box-sizing:border-box}.wrapper{display:flex;justify-content:space-between;padding:var(--spacing-comp-01) var(--spacing-comp-02);transition:background-color var(--gx-ide-timing-super-fast-ms);background-color:var(--gray-01)}gxg-title::part(title){color:var(--color-on-secondary);transition:color var(--gx-ide-timing-super-fast-ms)}";
140
+
141
+ const GxIdeTopBar = class {
142
+ constructor(hostRef) {
143
+ registerInstance(this, hostRef);
144
+ this.topBarTitle = undefined;
145
+ }
146
+ // 5.EVENTS (EMIT) //
147
+ // 6.METHODS //
148
+ componentWillLoad() {
149
+ this.evaluateSlots();
150
+ }
151
+ // 7.LISTENERS //
152
+ // 8.PUBLIC METHODS API //
153
+ // 9.LOCAL METHODS //
154
+ evaluateSlots() {
155
+ // header
156
+ const menuSlot = this.el.querySelectorAll('[slot="menu"]');
157
+ if (menuSlot.length) {
158
+ this._hasMenuSlot = true;
159
+ }
160
+ }
161
+ // 10.RENDER() FUNCTION //
162
+ render() {
163
+ return (h(Host, null, h("div", { class: "wrapper", part: "wrapper" }, h("div", { class: "wrapper__left", part: "wrapper-left" }, h("gxg-title", { type: "title-04", exportparts: "title: gxg-title" }, this.topBarTitle)), h("div", { class: "wrapper__right", part: "wrapper-right" }, this._hasMenuSlot ? (h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-vertical" }, h("slot", { name: "menu" }))) : null))));
164
+ }
165
+ get el() { return getElement(this); }
166
+ };
167
+ GxIdeTopBar.style = topBarCss;
168
+
169
+ function mutationObserverRemoved(target, ref) {
170
+ const observer = new MutationObserver((mutationsList, observer) => {
171
+ for (const mutation of mutationsList) {
172
+ if (mutation.type === "childList") {
173
+ const removedNodesArray = Array.from(mutation.removedNodes);
174
+ for (const removedNode of removedNodesArray) {
175
+ if (removedNode.nodeType === Node.ELEMENT_NODE) {
176
+ ref.removedItem = removedNode;
177
+ }
178
+ }
179
+ }
180
+ }
181
+ });
182
+ observer.observe(target, { childList: true });
183
+ return observer; // Return the observer instance if needed
184
+ }
7
185
 
8
186
  const comboBoxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
9
187
 
@@ -82,6 +260,10 @@ const GxgComboBox = class {
82
260
  *
83
261
  */
84
262
  this.validationStatus = "indeterminate";
263
+ /**
264
+ * If true, it will position the cursor at the end when the input is focused.
265
+ */
266
+ this.cursorEnd = false;
85
267
  this.userTyped = false;
86
268
  this.formMessageLogic = formMessageLogic;
87
269
  this.inputTextValue = "";
@@ -100,6 +282,9 @@ const GxgComboBox = class {
100
282
  const exportPartsResult = exportParts(part, this.parts);
101
283
  exportPartsResult.length && (this.exportparts = exportPartsResult);
102
284
  };
285
+ this.mutationRemoveObserver = () => {
286
+ this._mo = mutationObserverRemoved(this.el, this);
287
+ };
103
288
  /*********************************
104
289
  HANDLERS
105
290
  *********************************/
@@ -187,10 +372,10 @@ const GxgComboBox = class {
187
372
  this.myObserver.unobserve(document.body);
188
373
  document.removeEventListener("click", this.detectClickOutsideCombo, true);
189
374
  document.removeEventListener("scroll", this.detectMouseScroll, true);
375
+ this._mo.disconnect();
190
376
  };
191
377
  this.setup = () => {
192
378
  this.setIndexes();
193
- this.onValueChanged(this.value);
194
379
  this.setInitialValue();
195
380
  };
196
381
  this.setIndexes = () => {
@@ -286,10 +471,30 @@ const GxgComboBox = class {
286
471
  return value;
287
472
  };
288
473
  this.setInitialValue = () => {
289
- if (this.strict && this.disableFilter && !this.value) {
290
- const enabledItems = this.getEnabledItems();
291
- if (enabledItems.length) {
292
- this.value = enabledItems[0].value;
474
+ const firstItem = this.getEnabledItems()[0];
475
+ if (!this.value || this.removedItem !== undefined) {
476
+ if (firstItem) {
477
+ this.value = firstItem.value;
478
+ this.text = firstItem.innerText;
479
+ }
480
+ else {
481
+ if (this.strict) {
482
+ this.value = undefined;
483
+ }
484
+ }
485
+ }
486
+ else {
487
+ const item = this.getItemByValue(this.value);
488
+ if (item) {
489
+ this.text = item.innerText;
490
+ }
491
+ else {
492
+ if (this.strict) {
493
+ this.value = undefined;
494
+ }
495
+ else {
496
+ this.text = this.value.toString();
497
+ }
293
498
  }
294
499
  }
295
500
  };
@@ -353,6 +558,7 @@ const GxgComboBox = class {
353
558
  componentWillLoad() {
354
559
  this.setup();
355
560
  this.attachExportParts();
561
+ this.mutationRemoveObserver();
356
562
  }
357
563
  componentDidLoad() {
358
564
  this.resizeObserver();
@@ -383,6 +589,9 @@ const GxgComboBox = class {
383
589
  }
384
590
  return false;
385
591
  }
592
+ async selectInputText() {
593
+ this.inputText.selectInputText();
594
+ }
386
595
  /*********************************
387
596
  LISTEN
388
597
  *********************************/
@@ -390,8 +599,9 @@ const GxgComboBox = class {
390
599
  this.value = event.detail.value;
391
600
  this.inputText.focus();
392
601
  }
393
- itemDidLoadHandler() {
394
- this.setup();
602
+ itemDidLoadHandler(itemLoaded) {
603
+ this.setIndexes();
604
+ this.setInitialValue();
395
605
  }
396
606
  keyDownComboItemHandler(event) {
397
607
  event.stopPropagation();
@@ -458,6 +668,13 @@ const GxgComboBox = class {
458
668
  selectedItemHandler(newItem) {
459
669
  newItem && (newItem.selected = true);
460
670
  }
671
+ removedItemHandler(removedItem) {
672
+ const value = removedItem.value;
673
+ if (value === this.value) {
674
+ /*The removed item was the one selected on the combo. Re-evaluation of new value is needed*/
675
+ this.setup();
676
+ }
677
+ }
461
678
  setIcon(icon) {
462
679
  if (icon) {
463
680
  this.inputTextIcon = icon;
@@ -535,7 +752,7 @@ const GxgComboBox = class {
535
752
  large: state.large,
536
753
  }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
537
754
  "main-container": true,
538
- }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
755
+ }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
539
756
  "items-container": true,
540
757
  "items-container--show": this.listIsOpen,
541
758
  "items-container--no-match": this.noMatch,
@@ -549,7 +766,8 @@ const GxgComboBox = class {
549
766
  "disabled": ["disabledHandler"],
550
767
  "value": ["onValueChanged"],
551
768
  "listIsOpen": ["listIsOpenHandler"],
552
- "selectedItem": ["selectedItemHandler"]
769
+ "selectedItem": ["selectedItemHandler"],
770
+ "removedItem": ["removedItemHandler"]
553
771
  }; }
554
772
  };
555
773
  GxgComboBox.style = comboBoxCss;
@@ -604,7 +822,12 @@ const GxgComboBoxItem = class {
604
822
  this.disabled ? (this.iconColor = "ondisabled") : (this.iconColor = "auto");
605
823
  }
606
824
  componentDidLoad() {
607
- this.itemDidLoad.emit();
825
+ this.itemDidLoad.emit({
826
+ el: this.el,
827
+ index: this.index,
828
+ value: this.value,
829
+ icon: this.icon,
830
+ });
608
831
  }
609
832
  iconColorHandler() {
610
833
  if (this.disabled) {
@@ -628,221 +851,94 @@ const GxgComboBoxItem = class {
628
851
  };
629
852
  GxgComboBoxItem.style = comboBoxItemCss;
630
853
 
631
- const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}fieldset{padding:0;margin-inline-start:0;margin-inline-end:0;border:none}.heading,.content,.footer{padding:var(--gxg-container--padding)}:host(.gxg-container--padding-s){--gxg-container--padding:var(--spacing-comp-02)}:host(.gxg-container--padding-m){--gxg-container--padding:var(--spacing-comp-03)}:host(.gxg-container--padding-l){--gxg-container--padding:var(--spacing-comp-04)}:host(.gxg-container--display-border){border:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-top){border-top:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-end){border-inline-end:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-bottom){border-bottom:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-start){border-inline-start:1px solid var(--gxg-border-color--regular)}.heading{display:flex;width:100%;box-sizing:border-box;border-bottom:1px solid var(--gxg-border-color--regular)}.heading--justify-start{justify-content:start}.heading--justify-center{justify-content:center}.heading--justify-end{justify-content:end}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:flex;flex-direction:column;gap:var(--gxg-container-elements-spacing)}.content--no-padding{padding:0}.content--no-gap{gap:0}.footer{display:flex;border-top:1px solid var(--gxg-border-color--regular);gap:var(--gxg-container-elements-spacing)}.footer--justify-start{justify-content:start}.footer--justify-center{justify-content:center}.footer--justify-end{justify-content:end}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
854
+ const gxgFormCheckboxGroupCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block}.checkboxes-wrapper{display:flex;flex-direction:column;gap:var(--gxg-form-control-gap--vertical)}.checkboxes-wrapper--row{flex-direction:row;gap:var(--gxg-form-control-gap--horizontal)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}";
632
855
 
633
- const GxgContainer = class {
856
+ const GxgFormCheckboxGroup = class {
634
857
  constructor(hostRef) {
635
858
  registerInstance(this, hostRef);
636
- /*
637
- INDEX:
638
- 1.OWN PROPERTIES
639
- 2.REFERENCE TO ELEMENTS
640
- 3.STATE() VARIABLES
641
- 4.PUBLIC PROPERTY API
642
- 5.EVENTS (EMMIT)
643
- 6.COMPONENT LIFECYCLE EVENTS
644
- 7.LISTENERS
645
- 8.PUBLIC METHODS API
646
- 9.LOCAL METHODS
647
- 10.RENDER() FUNCTION
648
-
649
- Code organization suggested by StencilJs:
650
- https://stenciljs.com/docs/style-guide#code-organization
651
- */
652
- /** ******************************
653
- * 1.OWN PROPERTIES
654
- ********************************/
655
- /*GENERAL*/
656
- /**
657
- * Makes this component content act as a fieldset
658
- */
659
- this.fieldset = false;
660
- /**
661
- * Dsiplays a border all around the container
662
- */
663
- this.displayBorder = false;
664
- /**
665
- * Removes the component border on the top
666
- */
667
- this.displayBorderTop = false;
668
- /**
669
- * Removes the component border on the end
670
- */
671
- this.displayBorderEnd = false;
672
- /**
673
- * Removes the component border on the bottom
674
- */
675
- this.displayBorderBottom = false;
676
- /**
677
- * Removes the component border on the start
678
- */
679
- this.displayBorderStart = false;
680
- /**
681
- * The container general padding (applies to .heading, .content, and .footer)
682
- */
683
- this.sectionsPadding = "m";
684
- /*HEADING*/
685
- /**
686
- * Removes the border bottom from the heading
687
- */
688
- this.noHeadingBorder = false;
689
- /**
690
- * Removes the padding from the heading
691
- */
692
- this.noHeadingPadding = false;
693
- /**
694
- * The heading justification
695
- */
696
- this.headingJustify = "center";
697
- /*CONTENT*/
859
+ this.groupValuesChanged = createEvent(this, "groupValuesChanged", 7);
698
860
  /**
699
- * Removes the padding from the content
861
+ * The presence of this attribute makes all the checkboxes disabled
700
862
  */
701
- this.noContentPadding = false;
702
- /**
703
- * Removes the gap from the content
704
- */
705
- this.noContentGap = false;
706
- /*FOOTER*/
707
- /**
708
- * Removes the padding from the footer
709
- */
710
- this.noFooterPadding = false;
711
- /**
712
- * The footer justification
713
- */
714
- this.footerJustify = "end";
715
- /**
716
- * Removes the border top from the footer
717
- */
718
- this.noBorderFooter = false;
719
- /** *****************************
720
- * 3.STATE() VARIABLES
721
- ********************************/
722
- /**
723
- * A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)
724
- */
725
- this.hasSlottedContent = false;
726
- /**
727
- * A boolean variable indicating if the component has or not any content for the 'footer' slot
728
- */
729
- this.hasFooterSlot = false;
730
- /**
731
- * A boolean variable indicating that the container only has the heading section
732
- */
733
- this.hasOnlyHeading = false;
863
+ this.disabled = false;
734
864
  /**
735
- * A boolean variable indicating that the container only has the footer section
865
+ * The validation status
736
866
  */
737
- this.hasOnlyFooter = false;
738
- this.headingClasses = () => {
739
- return {
740
- heading: true,
741
- "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
742
- [`heading--justify-${this.headingJustify}`]: true,
743
- ["heading--no-padding"]: this.noHeadingPadding,
744
- };
867
+ this.validationStatus = "indeterminate";
868
+ this.getCheckboxesInfo = () => {
869
+ const checkboxesArray = [];
870
+ const checkboxes = this.el.querySelectorAll("gxg-form-checkbox");
871
+ checkboxes.forEach((checkbox) => {
872
+ checkboxesArray.push({
873
+ id: checkbox.checkboxId,
874
+ value: checkbox.checked,
875
+ disabled: checkbox.disabled,
876
+ });
877
+ });
878
+ return checkboxesArray;
745
879
  };
746
- this.contentClasses = () => {
747
- return {
748
- content: true,
749
- "content--no-padding": this.noContentPadding,
750
- "content--no-gap": this.noContentGap,
751
- };
880
+ this.disableGroup = () => {
881
+ const allCheckboxes = this.el.querySelectorAll("gxg-form-checkbox");
882
+ allCheckboxes.forEach((checkbox) => {
883
+ checkbox.disabled = true;
884
+ });
752
885
  };
753
- this.footer = () => {
754
- return this.hasFooterSlot ? (h("footer", { class: {
755
- footer: true,
756
- "footer--no-border": this.noHeadingBorder ||
757
- this.hasOnlyFooter ||
758
- !this.hasSlottedContent,
759
- [`footer--justify-${this.footerJustify}`]: true,
760
- [`footer--justify-${this.footerJustify}`]: true,
761
- ["footer--no-padding"]: this.noFooterPadding,
762
- } }, h("slot", { name: "footer" }))) : null;
886
+ this.enableGroup = () => {
887
+ const allCheckboxes = this.el.querySelectorAll("gxg-form-checkbox");
888
+ allCheckboxes.forEach((checkbox) => {
889
+ checkbox.disabled = false;
890
+ });
763
891
  };
764
892
  }
765
- /** *****************************
766
- 4.PUBLIC PROPERTY API
767
- ********************************/
768
- /** *****************************
769
- * 5.EVENTS (EMMIT)
770
- ********************************/
771
- /** *****************************
772
- * 6.COMPONENT LIFECYCLE EVENTS
773
- ********************************/
774
- componentWillLoad() {
775
- this.evaluateSlots();
776
- }
777
- /** *****************************
778
- * 7.LISTENERS
779
- ********************************/
780
- /** *****************************
781
- * 8.PUBLIC METHODS API
782
- ********************************/
783
- /** *****************************
784
- * 9.LOCAL METHODS
785
- ********************************/
786
- evaluateSlots() {
787
- //content
788
- const slottedContent = this.el.querySelectorAll(":not([slot])");
789
- if (slottedContent.length) {
790
- this.hasSlottedContent = true;
893
+ watchDisabledHandler(disabled) {
894
+ if (disabled) {
895
+ this.disableGroup();
791
896
  }
792
- //footer
793
- const footerSlot = this.el.querySelectorAll('[slot="footer"]');
794
- if (footerSlot.length) {
795
- this.hasFooterSlot = true;
897
+ else {
898
+ this.enableGroup();
796
899
  }
797
900
  }
798
- evaluateSections() {
799
- if (!this.hasSlottedContent && !this.hasFooterSlot) {
800
- this.hasOnlyHeading = true;
901
+ /**
902
+ * Returns CheckboxesGroupValues = CheckboxInfo[];
903
+ */
904
+ async getValues() {
905
+ return this.getCheckboxesInfo();
906
+ }
907
+ componentWillLoad() {
908
+ if (this.disabled) {
909
+ this.disableGroup();
801
910
  }
802
- if (!this.hasSlottedContent && !this.containerTitle) {
803
- this.hasOnlyFooter = true;
911
+ }
912
+ changeHandler(event) {
913
+ if (!event.detail.disabled) {
914
+ //If it was changed because it is disabled, do not emit
915
+ const checkboxesGroupInfo = this.getCheckboxesInfo();
916
+ this.groupValuesChanged.emit(checkboxesGroupInfo);
804
917
  }
805
918
  }
806
- /** *****************************
807
- * 10.RENDER() FUNCTION
808
- ********************************/
809
919
  render() {
810
- this.evaluateSections();
811
- let result;
812
- if (this.fieldset) {
813
- result = [
814
- h("fieldset", null, this.containerTitle ? (h("legend", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
815
- this.footer(),
816
- ];
817
- }
818
- else {
819
- result = [
820
- this.containerTitle ? (h("header", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null,
821
- this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null,
822
- this.footer(),
823
- ];
824
- }
825
- return (h(Host, { class: {
826
- "gxg-container": true,
827
- [`gxg-container--padding-${this.sectionsPadding}`]: true,
828
- "gxg-container--display-border": this.displayBorder,
829
- "gxg-container--display-border-top": this.displayBorderTop,
830
- "gxg-container--display-border-end": this.displayBorderEnd,
831
- "gxg-container--display-border-bottom": this.displayBorderBottom,
832
- "gxg-container--display-border-start": this.displayBorderStart,
833
- } }, result));
920
+ return (h(Host, null, h("div", { class: {
921
+ "checkboxes-wrapper": true,
922
+ "checkboxes-wrapper--row": this.row,
923
+ [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
924
+ [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
925
+ [formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
926
+ [formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
927
+ } }, h("slot", null)), formMessageLogic(this)));
834
928
  }
835
929
  get el() { return getElement(this); }
930
+ static get watchers() { return {
931
+ "disabled": ["watchDisabledHandler"]
932
+ }; }
836
933
  };
837
- GxgContainer.style = containerCss;
934
+ GxgFormCheckboxGroup.style = gxgFormCheckboxGroupCss;
838
935
 
839
- const formRadioCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:inline-block;cursor:pointer;}:host input:focus+.radiobtn{box-shadow:0px 0px 0px 1px var(--color-primary-active)}:host .label{display:flex;align-items:center;position:relative;cursor:pointer;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}:host .label input{position:absolute;opacity:0;cursor:pointer}:host .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:transparent}:host .label:hover input~.checkmark{background-color:transparent}:host .label input:checked~.checkmark{background-color:#2196f3}:host .checkmark:after{content:\"\";position:absolute;display:none}:host .label input:checked~.checkmark:after{display:block}:host .label .checkmark:after{left:10px;top:6px;width:7px;height:12px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host .radiobtn{display:inline-block;height:var(--spacing-comp-04);width:var(--spacing-comp-04);background-color:transparent;border-radius:50%;border-color:var(--gray-04);border-style:var(--border-style-regular);border-width:var(--border-width-sm);position:relative;margin-inline-end:var(--spacing-comp-02);flex-shrink:0;box-shadow:0px 0px 0px 1px transparent;box-sizing:border-box}:host .radiobtn--error{border-color:var(--color-error-dark) !important;background:var(--color-error-light) !important}:host .radiobtn--error:after{background-color:var(--color-error-dark) !important}:host input:focus+.radiobtn--error{box-shadow:0px 0px 0px 1px var(--color-error-dark)}:host .label:hover input~.radiobtn{background-color:transparent}:host .label input[checked]~.radiobtn{background-color:transparent;border-color:var(--color-primary-active)}:host .radiobtn:after{content:\"\";position:absolute;display:block;width:8px;height:8px;transition-property:all;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .label input[checked]~.radiobtn:after{display:block;transform:translateY(-50%) translateX(-50%);width:8px;height:8px}:host .label .radiobtn:after{height:0;width:0;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);border-radius:50%;background:var(--color-primary-active)}:host([disabled]){pointer-events:none}:host([disabled]) .radiobtn,:host([disabled]) .label input[checked]~.radiobtn{border-color:var(--gxg-border-color--disabled)}:host([disabled]) .radiobtn:after{background-color:var(--gxg-border-color--disabled)}";
936
+ const formRadioCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:inline-block;cursor:pointer;}:host input:focus+.radiobtn{box-shadow:0px 0px 0px 1px var(--color-primary-active)}:host .label{display:flex;align-items:center;position:relative;cursor:pointer;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}:host .label input{position:absolute;opacity:0;cursor:pointer}:host .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:transparent}:host .label:hover input~.checkmark{background-color:transparent}:host .label input:checked~.checkmark{background-color:#2196f3}:host .checkmark:after{content:\"\";position:absolute;display:none}:host .label input:checked~.checkmark:after{display:block}:host .label .checkmark:after{left:10px;top:6px;width:7px;height:12px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host .radiobtn{display:inline-block;height:var(--spacing-comp-04);width:var(--spacing-comp-04);background-color:transparent;border-radius:50%;border-color:var(--gray-04);border-style:var(--border-style-regular);border-width:var(--border-width-sm);position:relative;margin-inline-end:var(--spacing-comp-02);flex-shrink:0;box-shadow:0px 0px 0px 1px transparent;box-sizing:border-box}:host .radiobtn--error{border-color:var(--color-error-dark) !important;background:var(--color-error-light) !important}:host .radiobtn--error:after{background-color:var(--color-error-dark) !important}:host input:focus+.radiobtn--error{box-shadow:0px 0px 0px 1px var(--color-error-dark)}:host .label:hover input~.radiobtn{background-color:transparent}:host .label input[checked]~.radiobtn{background-color:transparent;border-color:var(--color-primary-active)}:host .radiobtn:after{content:\"\";position:absolute;display:block;width:8px;height:8px;transition-property:all;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .label input.checked~.radiobtn:after{display:block;transform:translateY(-50%) translateX(-50%);width:8px;height:8px}:host .label .radiobtn:after{height:0;width:0;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);border-radius:50%;background:var(--color-primary-active)}:host([disabled]){pointer-events:none}:host([disabled]) .radiobtn,:host([disabled]) .label input.checked~.radiobtn{border-color:var(--gxg-border-color--disabled)}:host([disabled]) .radiobtn:after{background-color:var(--gxg-border-color--disabled)}";
840
937
 
841
938
  const GxgFormRadio = class {
842
939
  constructor(hostRef) {
843
940
  registerInstance(this, hostRef);
844
- this.change = createEvent(this, "change", 7);
845
- this.radioClicked = createEvent(this, "radioClicked", 7);
941
+ this.radioChecked = createEvent(this, "radioChecked", 7);
846
942
  this.keyPressed = createEvent(this, "keyPressed", 7);
847
943
  /**
848
944
  * Styles the radio-button with error attributes
@@ -857,29 +953,21 @@ const GxgFormRadio = class {
857
953
  */
858
954
  this.disabled = false;
859
955
  this.clickedHandler = () => {
860
- this.radioClicked.emit();
956
+ this.checked = true;
861
957
  };
862
958
  }
863
959
  /*********************************
864
960
  METHODS
865
961
  *********************************/
866
962
  componentDidLoad() {
867
- if (this.checked) {
868
- this.radioInput.setAttribute("checked", "checked");
869
- }
870
- if (this.disabled && this.checked) {
871
- this.radioInput.removeAttribute("checked");
872
- this.checked = false;
873
- }
963
+ this.radioInput.addEventListener("change", (e) => {
964
+ console.log("changed", e);
965
+ });
874
966
  }
875
- watchHandler(newValue) {
876
- if (newValue === false) {
877
- this.radioInput.removeAttribute("checked");
878
- }
879
- if (newValue === true) {
880
- this.radioInput.setAttribute("checked", "checked");
881
- this.change.emit({
882
- id: this.RadioId,
967
+ checkedHandler(newValue) {
968
+ if (newValue) {
969
+ this.radioChecked.emit({
970
+ id: this.radioId,
883
971
  value: this.value,
884
972
  });
885
973
  }
@@ -888,17 +976,17 @@ const GxgFormRadio = class {
888
976
  this.keyPressed.emit(event.key);
889
977
  }
890
978
  render() {
891
- return (h(Host, { onClick: this.clickedHandler, class: { "gxg-form-radio--disabled": this.disabled } }, h("gxg-label", { noMargin: true, class: "label", disabled: this.disabled }, h("input", { ref: (el) => (this.radioInput = el), type: "radio", name: this.name, id: this.RadioId, value: this.value, disabled: this.disabled, onKeyDown: this.handlerOnKeyDown.bind(this) }), h("span", { class: { radiobtn: true, "radiobtn--error": this.error } }), this.label)));
979
+ return (h(Host, { class: { "gxg-form-radio--disabled": this.disabled } }, h("gxg-label", { noMargin: true, class: "label", disabled: this.disabled, onClick: this.clickedHandler }, h("input", { ref: (el) => (this.radioInput = el), type: "radio", name: this.name, value: this.value, disabled: this.disabled, onKeyDown: this.handlerOnKeyDown.bind(this), checked: this.checked, class: { checked: this.checked && !this.disabled } }), h("span", { class: { radiobtn: true, "radiobtn--error": this.error } }), this.label)));
892
980
  }
893
981
  static get delegatesFocus() { return true; }
894
982
  get el() { return getElement(this); }
895
983
  static get watchers() { return {
896
- "checked": ["watchHandler"]
984
+ "checked": ["checkedHandler"]
897
985
  }; }
898
986
  };
899
987
  GxgFormRadio.style = formRadioCss;
900
988
 
901
- const tabCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{height:100%;display:block}:host .container{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}:host(.large) .container{font-size:var(--font-size-lg)}";
989
+ const tabCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{height:100%;display:block}:host .container{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}.container--flex{display:flex}.container--flex.flex-column{flex-direction:column}.container--flex.flex-row{flex-direction:row}:host(.large) .container{font-size:var(--font-size-lg)}";
902
990
 
903
991
  const GxgTab = class {
904
992
  constructor(hostRef) {
@@ -907,6 +995,14 @@ const GxgTab = class {
907
995
  * The presence of this attribute removes the tab .container padding
908
996
  */
909
997
  this.noPadding = false;
998
+ /**
999
+ * The presence of this attribute makes the container display flex
1000
+ */
1001
+ this.flexContainer = false;
1002
+ /**
1003
+ * The container flex-direction, if container is flex.
1004
+ */
1005
+ this.flexDirection = "column";
910
1006
  /**
911
1007
  * The selected tab
912
1008
  */
@@ -918,7 +1014,12 @@ const GxgTab = class {
918
1014
  "not-selected": !this.isSelected,
919
1015
  "no-padding": this.noPadding,
920
1016
  large: state.large,
921
- } }, h("div", { class: "container" }, h("slot", null))));
1017
+ } }, h("div", { class: {
1018
+ container: true,
1019
+ "container--flex": this.flexContainer,
1020
+ "flex-column": this.flexDirection === "column",
1021
+ "flex-row": this.flexDirection === "row",
1022
+ }, part: "container" }, h("slot", null))));
922
1023
  }
923
1024
  get el() { return getElement(this); }
924
1025
  };
@@ -1142,7 +1243,7 @@ const GxgTabBar = class {
1142
1243
  };
1143
1244
  GxgTabBar.style = tabBarCss;
1144
1245
 
1145
- const tabButtonCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block;align-self:center !important;line-height:0}:host .tab-button{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-primary);text-transform:uppercase;color:var(--color-on-background);letter-spacing:var(--letter-spacing-regular);padding-top:0;padding-right:var(--spacing-comp-05);padding-bottom:0;padding-left:var(--spacing-comp-05);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;border:0;width:100%;min-height:var(--spacing-comp-06);position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;transition:box-shadow 0.2s ease-in-out;background:transparent;transition-property:box-shadow;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:focus{outline-style:solid;outline-color:var(--color-primary-enabled);outline-width:var(--border-width-md);outline-offset:-2px}:host .tab-button:after{content:\"\";width:100%;height:var(--spacing-comp-01);left:0;bottom:0;position:absolute;background-color:transparent;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:hover{cursor:pointer}:host .tab-button:hover:focus{outline-color:var(--color-primary-hover)}:host .tab-button:hover:after{background-color:var(--color-primary-hover)}:host .tab-button:active:after{background-color:var(--color-primary-active)}:host .tab-button[disabled]{color:var(--color-primary-disabled);pointer-events:none}:host .tab-button[disabled]:after{background-color:var(--gxg-border-color--disabled)}:host .tab-button--selected:after{background-color:var(--color-primary-active)}:host .tab-button--text-icon gxg-icon{margin-right:var(--spacing-comp-02)}:host .tab-button__text{display:inline-block}:host([slot=tab-menu]) .tab-button{padding-left:0;padding-right:0}:host(.menu-button){width:100%;box-sizing:border-box;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.menu-button) .tab-button{padding:0 var(--spacing-comp-04)}:host(.menu-button) .tab-button:after{display:none}:host(.menu-button:hover){background:var(--color-secondary)}:host(.large) .tab-button{font-size:var(--font-size-lg)}";
1246
+ const tabButtonCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block;align-self:center !important;line-height:0}:host .tab-button{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-primary);text-transform:uppercase;color:var(--color-on-background);letter-spacing:var(--letter-spacing-regular);padding-top:0;padding-right:var(--spacing-comp-05);padding-bottom:0;padding-left:var(--spacing-comp-05);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;border:0;width:100%;min-height:var(--spacing-comp-06);position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;transition:box-shadow 0.2s ease-in-out;background:transparent;transition-property:box-shadow;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host .tab-button:after{content:\"\";width:100%;height:var(--spacing-comp-01);left:0;bottom:0;position:absolute;background-color:transparent;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:hover{cursor:pointer}:host .tab-button:hover:focus{outline-color:var(--color-primary-hover)}:host .tab-button:hover:after{background-color:var(--color-primary-hover)}:host .tab-button:active:after{background-color:var(--color-primary-active)}:host .tab-button[disabled]{color:var(--color-primary-disabled);pointer-events:none}:host .tab-button[disabled]:after{background-color:var(--gxg-border-color--disabled)}:host .tab-button--selected:after{background-color:var(--color-primary-active)}:host .tab-button--text-icon gxg-icon{margin-right:var(--spacing-comp-02)}:host .tab-button__text{display:inline-block}:host([slot=tab-menu]) .tab-button{padding-left:0;padding-right:0}:host(.menu-button){width:100%;box-sizing:border-box;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.menu-button) .tab-button{padding:0 var(--spacing-comp-04)}:host(.menu-button) .tab-button:after{display:none}:host(.menu-button:hover){background:var(--color-secondary)}:host(.large) .tab-button{font-size:var(--font-size-lg)}";
1146
1247
 
1147
1248
  const GxgTabButton = class {
1148
1249
  constructor(hostRef) {
@@ -1299,4 +1400,4 @@ const GxgTabs = class {
1299
1400
  };
1300
1401
  GxgTabs.style = tabsCss;
1301
1402
 
1302
- export { GxgComboBox as gxg_combo_box, GxgComboBoxItem as gxg_combo_box_item, GxgContainer as gxg_container, GxgFormRadio as gxg_form_radio, GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };
1403
+ export { GxIdeContainer as gx_ide_container, GxIdeTopBar as gx_ide_top_bar, GxgComboBox as gxg_combo_box, GxgComboBoxItem as gxg_combo_box_item, GxgFormCheckboxGroup as gxg_form_checkbox_group, GxgFormRadio as gxg_form_radio, GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };