@genexus/genexus-ide-ui 0.0.108 → 0.0.110

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 (265) hide show
  1. package/dist/cjs/ch-dropdown_2.cjs.entry.js +1 -1
  2. package/dist/cjs/ch-dropdown_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/ch-grid_8.cjs.entry.js +339 -321
  4. package/dist/cjs/ch-grid_8.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ch-icon_5.cjs.entry.js +3 -1
  6. package/dist/cjs/ch-icon_5.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ch-suggest_4.cjs.entry.js +1 -1
  8. package/dist/cjs/ch-suggest_4.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ch-tree-view_5.cjs.entry.js +41 -20
  10. package/dist/cjs/ch-tree-view_5.cjs.entry.js.map +1 -1
  11. package/dist/cjs/{common-103f62f6.js → common-2e355c7d.js} +31 -1
  12. package/dist/cjs/common-2e355c7d.js.map +1 -0
  13. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  14. package/dist/cjs/{gx-ide-container_2.cjs.entry.js → gx-ide-container_3.cjs.entry.js} +47 -4
  15. package/dist/cjs/gx-ide-container_3.cjs.entry.js.map +1 -0
  16. package/dist/cjs/gx-ide-create-kb-from-server.cjs.entry.js +2 -2
  17. package/dist/cjs/gx-ide-create-kb-from-server.cjs.entry.js.map +1 -1
  18. package/dist/cjs/gx-ide-edit-module-servers.cjs.entry.js +98 -0
  19. package/dist/cjs/gx-ide-edit-module-servers.cjs.entry.js.map +1 -0
  20. package/dist/cjs/gx-ide-empty-state.cjs.entry.js +70 -0
  21. package/dist/cjs/gx-ide-empty-state.cjs.entry.js.map +1 -0
  22. package/dist/cjs/gx-ide-import-from-design.cjs.entry.js +1 -1
  23. package/dist/cjs/gx-ide-kb-manager-import.cjs.entry.js +1 -1
  24. package/dist/cjs/gx-ide-kb-manager-import.cjs.entry.js.map +1 -1
  25. package/dist/cjs/gx-ide-manage-module-references.cjs.entry.js +311 -0
  26. package/dist/cjs/gx-ide-manage-module-references.cjs.entry.js.map +1 -0
  27. package/dist/cjs/gx-ide-new-environment.cjs.entry.js +1 -1
  28. package/dist/cjs/gx-ide-new-kb.cjs.entry.js +1 -1
  29. package/dist/cjs/gx-ide-share-kb.cjs.entry.js +1 -1
  30. package/dist/cjs/gx-ide-status-buttons.cjs.entry.js +76 -0
  31. package/dist/cjs/gx-ide-status-buttons.cjs.entry.js.map +1 -0
  32. package/dist/cjs/gx-ide-ww-images.cjs.entry.js +1 -1
  33. package/dist/cjs/gxg-buttons-container_2.cjs.entry.js +184 -0
  34. package/dist/cjs/gxg-buttons-container_2.cjs.entry.js.map +1 -0
  35. package/dist/cjs/{gx-ide-empty-state_2.cjs.entry.js → gxg-card_2.cjs.entry.js} +121 -63
  36. package/dist/cjs/gxg-card_2.cjs.entry.js.map +1 -0
  37. package/dist/cjs/gxg-combo-box_2.cjs.entry.js +1 -0
  38. package/dist/cjs/gxg-combo-box_2.cjs.entry.js.map +1 -1
  39. package/dist/cjs/gxg-ide-loader.cjs.entry.js +4 -15
  40. package/dist/cjs/gxg-ide-loader.cjs.entry.js.map +1 -1
  41. package/dist/cjs/gxg-tab_4.cjs.entry.js +1 -1
  42. package/dist/cjs/gxg-tab_4.cjs.entry.js.map +1 -1
  43. package/dist/cjs/loader.cjs.js +1 -1
  44. package/dist/collection/collection-manifest.json +2 -0
  45. package/dist/collection/common/common.js +21 -0
  46. package/dist/collection/common/common.js.map +1 -1
  47. package/dist/collection/components/_helpers/container/container.css +6 -0
  48. package/dist/collection/components/_helpers/container/container.js +40 -0
  49. package/dist/collection/components/_helpers/container/container.js.map +1 -1
  50. package/dist/collection/components/_helpers/list-selector/list-selector-item/list-selector-item.js +1 -1
  51. package/dist/collection/components/_helpers/list-selector/list-selector.js +1 -1
  52. package/dist/collection/components/_helpers/status-buttons/gx-ide-status-buttons.css +370 -29
  53. package/dist/collection/components/_helpers/status-buttons/gx-ide-status-buttons.js +4 -99
  54. package/dist/collection/components/_helpers/status-buttons/gx-ide-status-buttons.js.map +1 -1
  55. package/dist/collection/components/create-kb-from-server/create-kb-from-server.js +1 -1
  56. package/dist/collection/components/create-kb-from-server/create-kb-from-server.js.map +1 -1
  57. package/dist/collection/components/kb-manager-import/kb-manager-import.js +1 -1
  58. package/dist/collection/components/kb-manager-import/kb-manager-import.js.map +1 -1
  59. package/dist/collection/components/modules/edit-module-servers/edit-module-servers.css +560 -0
  60. package/dist/collection/components/modules/edit-module-servers/edit-module-servers.js +251 -0
  61. package/dist/collection/components/modules/edit-module-servers/edit-module-servers.js.map +1 -0
  62. package/dist/collection/components/modules/edit-module-servers/gx-ide-assets/edit-module-servers/langs/edit-module-servers.lang.en.json +11 -0
  63. package/dist/collection/components/modules/edit-module-servers/gx-ide-assets/edit-module-servers/langs/edit-module-servers.lang.ja.json +3 -0
  64. package/dist/collection/components/modules/edit-module-servers/gx-ide-assets/edit-module-servers/langs/edit-module-servers.lang.zh.json +3 -0
  65. package/dist/collection/components/modules/manage-module-references/gx-ide-assets/manage-module-references/langs/manage-module-references.lang.en.json +35 -0
  66. package/dist/collection/components/modules/manage-module-references/gx-ide-assets/manage-module-references/langs/manage-module-references.lang.ja.json +3 -0
  67. package/dist/collection/components/modules/manage-module-references/gx-ide-assets/manage-module-references/langs/manage-module-references.lang.zh.json +3 -0
  68. package/dist/collection/components/modules/manage-module-references/manage-module-references.css +744 -0
  69. package/dist/collection/components/modules/manage-module-references/manage-module-references.js +501 -0
  70. package/dist/collection/components/modules/manage-module-references/manage-module-references.js.map +1 -0
  71. package/dist/collection/components/modules/types.js +2 -0
  72. package/dist/collection/components/modules/types.js.map +1 -0
  73. package/dist/collection/pages/assets/common.js +7 -0
  74. package/dist/components/buttons-container.js +8 -3
  75. package/dist/components/buttons-container.js.map +1 -1
  76. package/dist/components/card.js.map +1 -1
  77. package/dist/components/ch-grid-column2.js +4 -1
  78. package/dist/components/ch-grid-column2.js.map +1 -1
  79. package/dist/components/ch-grid2.js +342 -322
  80. package/dist/components/ch-grid2.js.map +1 -1
  81. package/dist/components/combo-box.js +1 -0
  82. package/dist/components/combo-box.js.map +1 -1
  83. package/dist/components/common.js +30 -1
  84. package/dist/components/common.js.map +1 -1
  85. package/dist/components/container.js +7 -1
  86. package/dist/components/container.js.map +1 -1
  87. package/dist/components/dropdown.js +1 -1
  88. package/dist/components/dropdown.js.map +1 -1
  89. package/dist/components/gx-ide-create-kb-from-server.js +1 -1
  90. package/dist/components/gx-ide-create-kb-from-server.js.map +1 -1
  91. package/dist/components/gx-ide-edit-module-servers.d.ts +11 -0
  92. package/dist/components/gx-ide-edit-module-servers.js +186 -0
  93. package/dist/components/gx-ide-edit-module-servers.js.map +1 -0
  94. package/dist/components/gx-ide-kb-manager-import.js +1 -1
  95. package/dist/components/gx-ide-kb-manager-import.js.map +1 -1
  96. package/dist/components/gx-ide-manage-module-references.d.ts +11 -0
  97. package/dist/components/gx-ide-manage-module-references.js +515 -0
  98. package/dist/components/gx-ide-manage-module-references.js.map +1 -0
  99. package/dist/components/gx-ide-status-buttons2.js +5 -15
  100. package/dist/components/gx-ide-status-buttons2.js.map +1 -1
  101. package/dist/components/gxg-top-state-bar2.js +17 -8
  102. package/dist/components/gxg-top-state-bar2.js.map +1 -1
  103. package/dist/components/icon2.js +3 -1
  104. package/dist/components/icon2.js.map +1 -1
  105. package/dist/components/ide-loader.js +6 -15
  106. package/dist/components/ide-loader.js.map +1 -1
  107. package/dist/components/suggest.js +1 -1
  108. package/dist/components/suggest.js.map +1 -1
  109. package/dist/components/tabs.js +1 -1
  110. package/dist/components/tabs.js.map +1 -1
  111. package/dist/components/tree-view-item.js +8 -2
  112. package/dist/components/tree-view-item.js.map +1 -1
  113. package/dist/components/tree-view2.js +32 -15
  114. package/dist/components/tree-view2.js.map +1 -1
  115. package/dist/esm/ch-dropdown_2.entry.js +1 -1
  116. package/dist/esm/ch-dropdown_2.entry.js.map +1 -1
  117. package/dist/esm/ch-grid_8.entry.js +339 -321
  118. package/dist/esm/ch-grid_8.entry.js.map +1 -1
  119. package/dist/esm/ch-icon_5.entry.js +3 -1
  120. package/dist/esm/ch-icon_5.entry.js.map +1 -1
  121. package/dist/esm/ch-suggest_4.entry.js +1 -1
  122. package/dist/esm/ch-suggest_4.entry.js.map +1 -1
  123. package/dist/esm/ch-tree-view_5.entry.js +41 -20
  124. package/dist/esm/ch-tree-view_5.entry.js.map +1 -1
  125. package/dist/esm/{common-f2983db2.js → common-aaad5759.js} +31 -2
  126. package/dist/esm/common-aaad5759.js.map +1 -0
  127. package/dist/esm/genexus-ide-ui.js +1 -1
  128. package/dist/esm/{gx-ide-container_2.entry.js → gx-ide-container_3.entry.js} +47 -5
  129. package/dist/esm/gx-ide-container_3.entry.js.map +1 -0
  130. package/dist/esm/gx-ide-create-kb-from-server.entry.js +2 -2
  131. package/dist/esm/gx-ide-create-kb-from-server.entry.js.map +1 -1
  132. package/dist/esm/gx-ide-edit-module-servers.entry.js +94 -0
  133. package/dist/esm/gx-ide-edit-module-servers.entry.js.map +1 -0
  134. package/dist/esm/gx-ide-empty-state.entry.js +66 -0
  135. package/dist/esm/gx-ide-empty-state.entry.js.map +1 -0
  136. package/dist/esm/gx-ide-import-from-design.entry.js +1 -1
  137. package/dist/esm/gx-ide-kb-manager-import.entry.js +1 -1
  138. package/dist/esm/gx-ide-kb-manager-import.entry.js.map +1 -1
  139. package/dist/esm/gx-ide-manage-module-references.entry.js +307 -0
  140. package/dist/esm/gx-ide-manage-module-references.entry.js.map +1 -0
  141. package/dist/esm/gx-ide-new-environment.entry.js +1 -1
  142. package/dist/esm/gx-ide-new-kb.entry.js +1 -1
  143. package/dist/esm/gx-ide-share-kb.entry.js +1 -1
  144. package/dist/esm/gx-ide-status-buttons.entry.js +72 -0
  145. package/dist/esm/gx-ide-status-buttons.entry.js.map +1 -0
  146. package/dist/esm/gx-ide-ww-images.entry.js +1 -1
  147. package/dist/esm/gxg-buttons-container_2.entry.js +179 -0
  148. package/dist/esm/gxg-buttons-container_2.entry.js.map +1 -0
  149. package/dist/esm/{gx-ide-empty-state_2.entry.js → gxg-card_2.entry.js} +122 -64
  150. package/dist/{cjs/gx-ide-empty-state_2.cjs.entry.js.map → esm/gxg-card_2.entry.js.map} +1 -1
  151. package/dist/esm/gxg-combo-box_2.entry.js +1 -0
  152. package/dist/esm/gxg-combo-box_2.entry.js.map +1 -1
  153. package/dist/esm/gxg-ide-loader.entry.js +4 -15
  154. package/dist/esm/gxg-ide-loader.entry.js.map +1 -1
  155. package/dist/esm/gxg-tab_4.entry.js +1 -1
  156. package/dist/esm/gxg-tab_4.entry.js.map +1 -1
  157. package/dist/esm/loader.js +1 -1
  158. package/dist/genexus-ide-ui/genexus-ide-ui.css +9 -6
  159. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  160. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
  161. package/dist/genexus-ide-ui/gx-ide-assets/edit-module-servers/langs/edit-module-servers.lang.en.json +11 -0
  162. package/dist/genexus-ide-ui/gx-ide-assets/edit-module-servers/langs/edit-module-servers.lang.ja.json +3 -0
  163. package/dist/genexus-ide-ui/gx-ide-assets/edit-module-servers/langs/edit-module-servers.lang.zh.json +3 -0
  164. package/dist/genexus-ide-ui/gx-ide-assets/manage-module-references/langs/manage-module-references.lang.en.json +35 -0
  165. package/dist/genexus-ide-ui/gx-ide-assets/manage-module-references/langs/manage-module-references.lang.ja.json +3 -0
  166. package/dist/genexus-ide-ui/gx-ide-assets/manage-module-references/langs/manage-module-references.lang.zh.json +3 -0
  167. package/dist/genexus-ide-ui/{p-b7bc3c0c.entry.js → p-00704c36.entry.js} +6 -6
  168. package/dist/genexus-ide-ui/{p-b7bc3c0c.entry.js.map → p-00704c36.entry.js.map} +1 -1
  169. package/dist/genexus-ide-ui/{p-2c1f414f.entry.js → p-0c0c3f1d.entry.js} +53 -53
  170. package/dist/genexus-ide-ui/{p-2c1f414f.entry.js.map → p-0c0c3f1d.entry.js.map} +1 -1
  171. package/dist/genexus-ide-ui/{p-b571e9c0.entry.js → p-0df39b62.entry.js} +5 -2
  172. package/dist/genexus-ide-ui/{p-b571e9c0.entry.js.map → p-0df39b62.entry.js.map} +1 -1
  173. package/dist/genexus-ide-ui/{p-419b2877.entry.js → p-1cb2d0df.entry.js} +80 -47
  174. package/dist/genexus-ide-ui/p-1cb2d0df.entry.js.map +1 -0
  175. package/dist/genexus-ide-ui/p-350f49ac.js +101 -0
  176. package/dist/genexus-ide-ui/p-350f49ac.js.map +1 -0
  177. package/dist/genexus-ide-ui/{p-ca7233a5.entry.js → p-39337325.entry.js} +81 -10
  178. package/dist/genexus-ide-ui/p-39337325.entry.js.map +1 -0
  179. package/dist/genexus-ide-ui/{p-001e085a.entry.js → p-51e86542.entry.js} +2 -2
  180. package/dist/genexus-ide-ui/p-5ca7da19.entry.js +94 -0
  181. package/dist/genexus-ide-ui/p-5ca7da19.entry.js.map +1 -0
  182. package/dist/genexus-ide-ui/p-5fe20f47.entry.js +211 -0
  183. package/dist/genexus-ide-ui/p-5fe20f47.entry.js.map +1 -0
  184. package/dist/genexus-ide-ui/{p-d14b5546.entry.js → p-6f5b13a7.entry.js} +4 -2
  185. package/dist/genexus-ide-ui/{p-d14b5546.entry.js.map → p-6f5b13a7.entry.js.map} +1 -1
  186. package/dist/genexus-ide-ui/p-713ad05d.entry.js +441 -0
  187. package/dist/genexus-ide-ui/p-713ad05d.entry.js.map +1 -0
  188. package/dist/genexus-ide-ui/{p-94015503.entry.js → p-786e5448.entry.js} +374 -380
  189. package/dist/genexus-ide-ui/p-786e5448.entry.js.map +1 -0
  190. package/dist/genexus-ide-ui/{p-40121554.entry.js → p-9f9fda93.entry.js} +172 -120
  191. package/dist/genexus-ide-ui/p-9f9fda93.entry.js.map +1 -0
  192. package/dist/genexus-ide-ui/{p-afce38d4.entry.js → p-b2099890.entry.js} +2 -2
  193. package/dist/genexus-ide-ui/{p-513ec2ad.entry.js → p-b4e526d6.entry.js} +2 -2
  194. package/dist/genexus-ide-ui/p-b7d0697f.entry.js +138 -0
  195. package/dist/genexus-ide-ui/p-b7d0697f.entry.js.map +1 -0
  196. package/dist/genexus-ide-ui/{p-ee9f4e20.entry.js → p-bc04fcaa.entry.js} +7 -15
  197. package/dist/genexus-ide-ui/p-bc04fcaa.entry.js.map +1 -0
  198. package/dist/genexus-ide-ui/{p-8e8bb528.entry.js → p-c14b6b77.entry.js} +2 -2
  199. package/dist/genexus-ide-ui/{p-8e8bb528.entry.js.map → p-c14b6b77.entry.js.map} +1 -1
  200. package/dist/genexus-ide-ui/{p-5a5d3e19.entry.js → p-c9cceb40.entry.js} +1 -4
  201. package/dist/genexus-ide-ui/p-c9cceb40.entry.js.map +1 -0
  202. package/dist/genexus-ide-ui/{p-2c733995.entry.js → p-d5903356.entry.js} +2 -2
  203. package/dist/genexus-ide-ui/{p-e9e4482b.entry.js → p-decf86d4.entry.js} +114 -127
  204. package/dist/genexus-ide-ui/p-decf86d4.entry.js.map +1 -0
  205. package/dist/genexus-ide-ui/{p-05102700.entry.js → p-df72101e.entry.js} +2 -2
  206. package/dist/genexus-ide-ui/{p-045a084f.entry.js → p-f37ec5b8.entry.js} +2 -1
  207. package/dist/genexus-ide-ui/p-f37ec5b8.entry.js.map +1 -0
  208. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/dropdown/dropdown.css +28 -28
  209. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/tree-view-item/tree-view-item.css +0 -2
  210. package/dist/node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.css +11 -0
  211. package/dist/node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.css +3 -0
  212. package/dist/node_modules/@genexus/gemini/dist/collection/components/suggest/styles.css +1 -0
  213. package/dist/node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.css +1 -0
  214. package/dist/node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css +51 -62
  215. package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css +37 -54
  216. package/dist/types/common/common.d.ts +2 -0
  217. package/dist/types/components/_helpers/container/container.d.ts +8 -0
  218. package/dist/types/components/_helpers/status-buttons/gx-ide-status-buttons.d.ts +0 -20
  219. package/dist/types/components/modules/edit-module-servers/edit-module-servers.d.ts +60 -0
  220. package/dist/types/components/modules/manage-module-references/manage-module-references.d.ts +110 -0
  221. package/dist/types/components/modules/types.d.ts +41 -0
  222. package/dist/types/components.d.ts +226 -80
  223. package/package.json +3 -3
  224. package/dist/cjs/common-103f62f6.js.map +0 -1
  225. package/dist/cjs/gx-ide-container_2.cjs.entry.js.map +0 -1
  226. package/dist/cjs/gx-ide-status-buttons_2.cjs.entry.js +0 -187
  227. package/dist/cjs/gx-ide-status-buttons_2.cjs.entry.js.map +0 -1
  228. package/dist/cjs/gxg-buttons-container.cjs.entry.js +0 -65
  229. package/dist/cjs/gxg-buttons-container.cjs.entry.js.map +0 -1
  230. package/dist/cjs/gxg-title-editable.cjs.entry.js +0 -128
  231. package/dist/cjs/gxg-title-editable.cjs.entry.js.map +0 -1
  232. package/dist/cjs/gxg-title.cjs.entry.js +0 -47
  233. package/dist/cjs/gxg-title.cjs.entry.js.map +0 -1
  234. package/dist/esm/common-f2983db2.js.map +0 -1
  235. package/dist/esm/gx-ide-container_2.entry.js.map +0 -1
  236. package/dist/esm/gx-ide-empty-state_2.entry.js.map +0 -1
  237. package/dist/esm/gx-ide-status-buttons_2.entry.js +0 -182
  238. package/dist/esm/gx-ide-status-buttons_2.entry.js.map +0 -1
  239. package/dist/esm/gxg-buttons-container.entry.js +0 -61
  240. package/dist/esm/gxg-buttons-container.entry.js.map +0 -1
  241. package/dist/esm/gxg-title-editable.entry.js +0 -124
  242. package/dist/esm/gxg-title-editable.entry.js.map +0 -1
  243. package/dist/esm/gxg-title.entry.js +0 -43
  244. package/dist/esm/gxg-title.entry.js.map +0 -1
  245. package/dist/genexus-ide-ui/p-045a084f.entry.js.map +0 -1
  246. package/dist/genexus-ide-ui/p-40121554.entry.js.map +0 -1
  247. package/dist/genexus-ide-ui/p-419b2877.entry.js.map +0 -1
  248. package/dist/genexus-ide-ui/p-5a5d3e19.entry.js.map +0 -1
  249. package/dist/genexus-ide-ui/p-67406b36.entry.js +0 -71
  250. package/dist/genexus-ide-ui/p-67406b36.entry.js.map +0 -1
  251. package/dist/genexus-ide-ui/p-67ea84e8.js +0 -74
  252. package/dist/genexus-ide-ui/p-67ea84e8.js.map +0 -1
  253. package/dist/genexus-ide-ui/p-94015503.entry.js.map +0 -1
  254. package/dist/genexus-ide-ui/p-ca7233a5.entry.js.map +0 -1
  255. package/dist/genexus-ide-ui/p-cf5c3c10.entry.js +0 -270
  256. package/dist/genexus-ide-ui/p-cf5c3c10.entry.js.map +0 -1
  257. package/dist/genexus-ide-ui/p-d50b5b9a.entry.js +0 -67
  258. package/dist/genexus-ide-ui/p-d50b5b9a.entry.js.map +0 -1
  259. package/dist/genexus-ide-ui/p-e9e4482b.entry.js.map +0 -1
  260. package/dist/genexus-ide-ui/p-ee9f4e20.entry.js.map +0 -1
  261. /package/dist/genexus-ide-ui/{p-001e085a.entry.js.map → p-51e86542.entry.js.map} +0 -0
  262. /package/dist/genexus-ide-ui/{p-afce38d4.entry.js.map → p-b2099890.entry.js.map} +0 -0
  263. /package/dist/genexus-ide-ui/{p-513ec2ad.entry.js.map → p-b4e526d6.entry.js.map} +0 -0
  264. /package/dist/genexus-ide-ui/{p-2c733995.entry.js.map → p-d5903356.entry.js.map} +0 -0
  265. /package/dist/genexus-ide-ui/{p-05102700.entry.js.map → p-df72101e.entry.js.map} +0 -0
package/dist/components/gx-ide-status-buttons2.js CHANGED
@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './list-selector-item.js';
6
6
  import { d as defineCustomElement$2 } from './icon2.js';
7
7
  import { d as defineCustomElement$1 } from './title.js';
8
8
 
9
- const gxIdeStatusButtonsCss = ":host{display:block;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item.not-zero{font-weight:var(--mer-font__weight--semi-bold)}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs)}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .active-indicator{background-color:var(--mer-icon__primary);border-color:var(--mer-icon__primary)}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-border]){border:none}:host([no-border-top]){border-top:none}:host([no-border-end]){border-inline-end:none}:host([no-border-bottom]){border-bottom:none}:host([no-border-start]){border-inline-start:none}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
9
+ const gxIdeStatusButtonsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:block;border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row;background-color:var(--mer-color__elevation--01)}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs);text-transform:capitalize}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xxs);height:var(--mer-spacing--xxs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item.error.not-zero .active-indicator{background-color:var(--mer-border-color__error);border-color:var(--mer-border-color__error)}gx-ide-list-selector-item.warning.not-zero .active-indicator{background-color:var(--mer-border-color__warning);border-color:var(--mer-border-color__warning)}gx-ide-list-selector-item.success.not-zero .active-indicator{background-color:var(--mer-border-color__success);border-color:var(--mer-border-color__success)}gx-ide-list-selector-item.message.not-zero .active-indicator{background-color:var(--mer-border-color__primary);border-color:var(--mer-border-color__primary)}gx-ide-list-selector-item input:after{display:none}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .label__wrapper:before{display:block}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}gx-ide-list-selector-item .label__wrapper{position:relative}gx-ide-list-selector-item .label__wrapper:before{content:\"\";width:4px;height:7px;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-color:var(--gxg-checkbox-indicator-color);border-style:solid;position:absolute;left:auto;top:12px;right:14px;display:none}gx-ide-list-selector-item .label__wrapper:after{content:\"\";width:var(--gxg-checkbox-size);height:var(--gxg-checkbox-size);border:1px solid var(--gxg-checkbox-border-color);border-radius:var(--gxg-checkbox-border-radius)}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__wrapper:before{top:10px}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
10
10
 
11
11
  const GxIdeStatusButtons = /*@__PURE__*/ proxyCustomElement(class GxIdeStatusButtons extends HTMLElement {
12
12
  constructor() {
@@ -49,12 +49,7 @@ const GxIdeStatusButtons = /*@__PURE__*/ proxyCustomElement(class GxIdeStatusBut
49
49
  this.hideMessage = false;
50
50
  this.minimal = false;
51
51
  this.compact = false;
52
- this.noBorder = false;
53
52
  this.noInnerBorders = false;
54
- this.noBorderTop = false;
55
- this.noBorderEnd = false;
56
- this.noBorderBottom = false;
57
- this.noBorderStart = false;
58
53
  this.iconsSize = "small";
59
54
  }
60
55
  // 6.COMPONENT LIFECYCLE METHODS //
@@ -64,13 +59,13 @@ const GxIdeStatusButtons = /*@__PURE__*/ proxyCustomElement(class GxIdeStatusBut
64
59
  }
65
60
  // 10.RENDER() FUNCTION //
66
61
  render() {
67
- return (h(Host, null, h("gx-ide-list-selector", { type: "multi-selection", listName: "status-buttons", noListBorder: true, ellipsis: true, iconsSize: this.iconsSize, onSelectionChanged: this.selectionChangedHandler }, !this.hideError ? (h("gx-ide-list-selector-item", { itemId: "errors", itemValue: this.evaluateLabel("errors"), icon: "gx-test/result-exception", iconColor: this.errors === 0 ? "disabled" : "auto", class: { "error": true, "not-zero": this.errors !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
62
+ return (h(Host, null, h("gx-ide-list-selector", { type: "multi-selection", listName: "status-buttons", noListBorder: true, ellipsis: true, iconsSize: this.iconsSize, onSelectionChanged: this.selectionChangedHandler }, !this.hideError ? (h("gx-ide-list-selector-item", { itemId: "errors", itemValue: this.evaluateLabel("errors"), icon: "gx-test/result-exception", iconColor: this.errors === 0 ? "disabled" : "mercury-on-surface", class: { "error": true, "not-zero": this.errors !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
68
63
  "active-indicator": true
69
- } }))) : null, !this.hideWarning ? (h("gx-ide-list-selector-item", { itemId: "warnings", itemValue: this.evaluateLabel("warnings"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "auto", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
64
+ } }))) : null, !this.hideWarning ? (h("gx-ide-list-selector-item", { itemId: "warnings", itemValue: this.evaluateLabel("warnings"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "mercury-on-surface", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
70
65
  "active-indicator": true
71
- } }))) : null, !this.hideSuccess ? (h("gx-ide-list-selector-item", { itemId: "successes", itemValue: this.evaluateLabel("successes"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
66
+ } }))) : null, !this.hideSuccess ? (h("gx-ide-list-selector-item", { itemId: "successes", itemValue: this.evaluateLabel("successes"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "mercury-on-surface", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
72
67
  "active-indicator": true
73
- } }))) : null, !this.hideMessage ? (h("gx-ide-list-selector-item", { itemId: "messages", itemValue: this.evaluateLabel("messages"), icon: "gx-test/screenshot-viewer", iconColor: this.messages === 0 ? "disabled" : "auto", class: { "message": true, "not-zero": this.messages !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
68
+ } }))) : null, !this.hideMessage ? (h("gx-ide-list-selector-item", { itemId: "messages", itemValue: this.evaluateLabel("messages"), icon: "gx-test/screenshot-viewer", iconColor: this.messages === 0 ? "disabled" : "mercury-on-surface", class: { "message": true, "not-zero": this.messages !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
74
69
  "active-indicator": true
75
70
  } }))) : null)));
76
71
  }
@@ -89,12 +84,7 @@ const GxIdeStatusButtons = /*@__PURE__*/ proxyCustomElement(class GxIdeStatusBut
89
84
  "hideMessage": [4, "hide-message"],
90
85
  "minimal": [4],
91
86
  "compact": [516],
92
- "noBorder": [516, "no-border"],
93
87
  "noInnerBorders": [516, "no-inner-borders"],
94
- "noBorderTop": [516, "no-border-top"],
95
- "noBorderEnd": [516, "no-border-end"],
96
- "noBorderBottom": [516, "no-border-bottom"],
97
- "noBorderStart": [516, "no-border-start"],
98
88
  "iconsSize": [32]
99
89
  }]);
100
90
  function defineCustomElement() {
package/dist/components/gx-ide-status-buttons2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-status-buttons2.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,89DAA89D;;MCsB/+D,kBAAkB;;;;;;;;;QAyIrB,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;aAC1B;SACF,CAAC;QAEM,kBAAa,GAAG,CACtB,IAAsD;YAEtD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO,GAAG,MAAM,EAAE,CAAC;aACpB;iBAAM;gBACL,MAAM,QAAQ,GAAY,MAAM,KAAK,CAAC,CAAC;gBACvC,OAAO,QAAQ;sBACX,GAAG,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAAE;sBACtD,GAAG,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;aAC1D;SACF,CAAC;QAEM,4BAAuB,GAAG,CAAC,CAAgC;YACjE,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACtC,CAAC;sBAvIiC,KAAK;sBAKN,CAAC;yBAKG,KAAK;wBAKP,CAAC;2BAKG,KAAK;yBAKR,CAAC;2BAKE,KAAK;wBAKT,CAAC;2BAKG,KAAK;uBAKT,KAAK;uBAKY,KAAK;wBAKJ,KAAK;8BAKC,KAAK;2BAKR,KAAK;2BAKL,KAAK;8BAKF,KAAK;6BAKN,KAAK;yBAQrC,OAAO;;;IAalC,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;IAmCD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,4BACE,IAAI,EAAC,iBAAiB,EACtB,QAAQ,EAAC,gBAAgB,EACzB,YAAY,QACZ,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,kBAAkB,EAAE,IAAI,CAAC,uBAAuB,IAE/C,CAAC,IAAI,CAAC,SAAS,IACd,iCACE,MAAM,EAAC,QAAQ,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EACvC,IAAI,EAAC,0BAA0B,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EAClD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,EACvD,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EACzC,IAAI,EAAC,wBAAwB,EAC7B,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EACpD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,EAC3D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,WAAW,EAClB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAC1C,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EACrD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,EAC5D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EACzC,IAAI,EAAC,2BAA2B,EAChC,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EACpD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,EAC3D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,CACa,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx"],"sourcesContent":[":host {\n display: block;\n border: 1px solid var(--gx-ide-container-border-color);\n border-radius: var(--ds-form-control-border-radius);\n --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n display: flex;\n flex-direction: row;\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n border-block-start: none !important; //reset\n\n &.not-zero {\n font-weight: var(--mer-font__weight--semi-bold);\n }\n\n &:not(:last-child) {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n flex: 1;\n text-align: center;\n\n .label {\n &__wrapper {\n display: inline-flex;\n width: auto;\n min-height: 0;\n }\n &__description {\n color: var(--status-buttons-label-color);\n margin-inline-start: var(--mer-spacing--xxs);\n }\n }\n\n /*active indicator*/\n .active-indicator {\n display: inline-block;\n width: var(--mer-spacing--xs);\n height: var(--mer-spacing--xs);\n border: 1px solid var(--mer-border-color__dim);\n border-radius: calc(var(--mer-spacing--xs) / 2);\n background-color: var(--mer-border-color__dim);\n }\n input:checked {\n + .label {\n --status-buttons-label-color: var(--mer-text__on-surface);\n background-color: inherit;\n\n .active-indicator {\n background-color: var(--mer-icon__primary);\n border-color: var(--mer-icon__primary);\n }\n }\n }\n\n /*hover*/\n &:hover {\n input:checked + .label {\n background-color: var(--ds-item-background-color--hover) !important;\n }\n }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n gx-ide-list-selector-item {\n font-size: var(--mer-font__size--xxs);\n }\n .label__wrapper {\n gap: var(--mer-spacing--xxs);\n padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n }\n .label__universal-slot {\n margin-inline-end: var(--mer-spacing--xxxs);\n }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-border]) {\n border: none;\n}\n:host([no-border-top]) {\n border-top: none;\n}\n:host([no-border-end]) {\n border-inline-end: none;\n}\n:host([no-border-bottom]) {\n border-bottom: none;\n}\n:host([no-border-start]) {\n border-inline-start: none;\n}\n:host([no-inner-borders]) {\n gx-ide-list-selector-item {\n border-inline-end: none;\n }\n}\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n tag: \"gx-ide-status-buttons\",\n styleUrl: \"gx-ide-status-buttons.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n // 1.OWN PROPERTIES | WATCH'S //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n\n /**\n * Whether or not the buttons are active\n */\n @Prop() readonly active: boolean = false;\n\n /**\n * The errors amount\n */\n @Prop() readonly errors: number = 0;\n\n /**\n * Hide the errors button\n */\n @Prop() readonly hideError: boolean = false;\n\n /**\n * The warnings amount\n */\n @Prop() readonly warnings: number = 0;\n\n /**\n * Hide the warnings button\n */\n @Prop() readonly hideWarning: boolean = false;\n\n /**\n * The successes amount\n */\n @Prop() readonly successes: number = 0;\n\n /**\n * Hide the successes button\n */\n @Prop() readonly hideSuccess: boolean = false;\n\n /**\n * The messages amount\n */\n @Prop() readonly messages: number = 0;\n\n /**\n * Hide the messages button\n */\n @Prop() readonly hideMessage: boolean = false;\n\n /**\n * Display only the number\n */\n @Prop() readonly minimal: boolean = false;\n\n /**\n * If present will make the component look smaller.\n */\n @Prop({ reflect: true }) readonly compact: boolean = false;\n\n /**\n * No border all around\n */\n @Prop({ reflect: true }) readonly noBorder: boolean = false;\n\n /**\n * No inner borders\n */\n @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n /**\n * No border on the top\n */\n @Prop({ reflect: true }) readonly noBorderTop: boolean = false;\n\n /**\n * No border on the end\n */\n @Prop({ reflect: true }) readonly noBorderEnd: boolean = false;\n\n /**\n * No border on the bottom\n */\n @Prop({ reflect: true }) readonly noBorderBottom: boolean = false;\n\n /**\n * No border on the start\n */\n @Prop({ reflect: true }) readonly noBorderStart: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeStatusButtonsElement;\n\n // 3.STATE() VARIABLES //\n\n @State() iconsSize: Size = \"small\";\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n // 5.EVENTS (EMIT) //\n\n /**\n * Emits the actual selection\n */\n @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateIconsSize();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateIconsSize = () => {\n if (this.compact) {\n this.iconsSize = \"small\";\n }\n };\n\n private evaluateLabel = (\n type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n ): string => {\n const amount = this[type];\n if (this.minimal) {\n return `${amount}`;\n } else {\n const singular: boolean = amount === 1;\n return singular\n ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n }\n };\n\n private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n e.stopPropagation();\n this.selectionChanged.emit(e.detail);\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <gx-ide-list-selector\n type=\"multi-selection\"\n listName=\"status-buttons\"\n noListBorder\n ellipsis\n iconsSize={this.iconsSize}\n onSelectionChanged={this.selectionChangedHandler}\n >\n {!this.hideError ? (\n <gx-ide-list-selector-item\n itemId=\"errors\"\n itemValue={this.evaluateLabel(\"errors\")}\n icon=\"gx-test/result-exception\"\n iconColor={this.errors === 0 ? \"disabled\" : \"auto\"}\n class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideWarning ? (\n <gx-ide-list-selector-item\n itemId=\"warnings\"\n itemValue={this.evaluateLabel(\"warnings\")}\n icon=\"gx-test/result-warning\"\n iconColor={this.warnings === 0 ? \"disabled\" : \"auto\"}\n class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideSuccess ? (\n <gx-ide-list-selector-item\n itemId=\"successes\"\n itemValue={this.evaluateLabel(\"successes\")}\n icon=\"gx-test/result-ok\"\n iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideMessage ? (\n <gx-ide-list-selector-item\n itemId=\"messages\"\n itemValue={this.evaluateLabel(\"messages\")}\n icon=\"gx-test/screenshot-viewer\"\n iconColor={this.messages === 0 ? \"disabled\" : \"auto\"}\n class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n </gx-ide-list-selector>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"gx-ide-status-buttons2.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,i1VAAi1V;;MCsBl2V,kBAAkB;;;;;;;;;QAgHrB,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;aAC1B;SACF,CAAC;QAEM,kBAAa,GAAG,CACtB,IAAsD;YAEtD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO,GAAG,MAAM,EAAE,CAAC;aACpB;iBAAM;gBACL,MAAM,QAAQ,GAAY,MAAM,KAAK,CAAC,CAAC;gBACvC,OAAO,QAAQ;sBACX,GAAG,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAAE;sBACtD,GAAG,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;aAC1D;SACF,CAAC;QAEM,4BAAuB,GAAG,CAAC,CAAgC;YACjE,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACtC,CAAC;sBA9GiC,KAAK;sBAKN,CAAC;yBAKG,KAAK;wBAKP,CAAC;2BAKG,KAAK;yBAKR,CAAC;2BAKE,KAAK;wBAKT,CAAC;2BAKG,KAAK;uBAKT,KAAK;uBAKY,KAAK;8BAKE,KAAK;yBAQtC,OAAO;;;IAalC,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;IAmCD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,4BACE,IAAI,EAAC,iBAAiB,EACtB,QAAQ,EAAC,gBAAgB,EACzB,YAAY,QACZ,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,kBAAkB,EAAE,IAAI,CAAC,uBAAuB,IAE/C,CAAC,IAAI,CAAC,SAAS,IACd,iCACE,MAAM,EAAC,QAAQ,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EACvC,IAAI,EAAC,0BAA0B,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,oBAAoB,EAChE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,EACvD,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EACzC,IAAI,EAAC,wBAAwB,EAC7B,SAAS,EACP,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,UAAU,GAAG,oBAAoB,EAEzD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,EAC3D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,WAAW,EAClB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAC1C,IAAI,EAAC,mBAAmB,EACxB,SAAS,EACP,IAAI,CAAC,SAAS,KAAK,CAAC,GAAG,UAAU,GAAG,oBAAoB,EAE1D,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,EAC5D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EACzC,IAAI,EAAC,2BAA2B,EAChC,SAAS,EACP,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,UAAU,GAAG,oBAAoB,EAEzD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,EAC3D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,CACa,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n display: block;\n border-radius: var(--ds-form-control-border-radius);\n --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n display: flex;\n flex-direction: row;\n background-color: var(--mer-color__elevation--01);\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n border-block-start: none !important; //reset\n\n &:not(:last-child) {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n flex: 1;\n text-align: center;\n\n .label {\n &__wrapper {\n display: inline-flex;\n width: auto;\n min-height: 0;\n }\n &__description {\n color: var(--status-buttons-label-color);\n margin-inline-start: var(--mer-spacing--xxs);\n text-transform: capitalize;\n }\n }\n\n /*active indicator*/\n .active-indicator {\n display: inline-block;\n width: var(--mer-spacing--xxs);\n height: var(--mer-spacing--xxs);\n border: 1px solid var(--mer-border-color__dim);\n border-radius: calc(var(--mer-spacing--xs) / 2);\n background-color: var(--mer-border-color__dim);\n }\n\n /*States*/\n &.error.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__error);\n border-color: var(--mer-border-color__error);\n }\n }\n &.warning.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__warning);\n border-color: var(--mer-border-color__warning);\n }\n }\n &.success.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__success);\n border-color: var(--mer-border-color__success);\n }\n }\n &.message.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__primary);\n border-color: var(--mer-border-color__primary);\n }\n }\n\n input {\n &:after {\n display: none;\n }\n }\n input:checked {\n + .label {\n --status-buttons-label-color: var(--mer-text__on-surface);\n background-color: inherit;\n\n .label__wrapper {\n &:before {\n display: block;\n }\n }\n }\n }\n\n /*hover*/\n &:hover {\n input:checked + .label {\n background-color: var(--ds-item-background-color--hover) !important;\n }\n }\n\n .label__wrapper {\n position: relative;\n &:before {\n content: \"\";\n width: 4px;\n height: 7px;\n border-width: 0 2px 2px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n border-color: var(--gxg-checkbox-indicator-color);\n border-style: solid;\n position: absolute;\n left: auto;\n top: 12px;\n right: 14px;\n display: none;\n }\n &:after {\n content: \"\";\n width: var(--gxg-checkbox-size);\n height: var(--gxg-checkbox-size);\n border: 1px solid var(--gxg-checkbox-border-color);\n border-radius: var(--gxg-checkbox-border-radius);\n }\n }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n gx-ide-list-selector-item {\n font-size: var(--mer-font__size--xxs);\n }\n .label__wrapper {\n gap: var(--mer-spacing--xxs);\n padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n &:before {\n top: 10px;\n }\n }\n .label__universal-slot {\n margin-inline-end: var(--mer-spacing--xxxs);\n }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-inner-borders]) {\n gx-ide-list-selector-item {\n border-inline-end: none;\n }\n}\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n tag: \"gx-ide-status-buttons\",\n styleUrl: \"gx-ide-status-buttons.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n // 1.OWN PROPERTIES | WATCH'S //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n\n /**\n * Whether or not the buttons are active\n */\n @Prop() readonly active: boolean = false;\n\n /**\n * The errors amount\n */\n @Prop() readonly errors: number = 0;\n\n /**\n * Hide the errors button\n */\n @Prop() readonly hideError: boolean = false;\n\n /**\n * The warnings amount\n */\n @Prop() readonly warnings: number = 0;\n\n /**\n * Hide the warnings button\n */\n @Prop() readonly hideWarning: boolean = false;\n\n /**\n * The successes amount\n */\n @Prop() readonly successes: number = 0;\n\n /**\n * Hide the successes button\n */\n @Prop() readonly hideSuccess: boolean = false;\n\n /**\n * The messages amount\n */\n @Prop() readonly messages: number = 0;\n\n /**\n * Hide the messages button\n */\n @Prop() readonly hideMessage: boolean = false;\n\n /**\n * Display only the number\n */\n @Prop() readonly minimal: boolean = false;\n\n /**\n * If present will make the component look smaller.\n */\n @Prop({ reflect: true }) readonly compact: boolean = false;\n\n /**\n * No inner borders\n */\n @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeStatusButtonsElement;\n\n // 3.STATE() VARIABLES //\n\n @State() iconsSize: Size = \"small\";\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n // 5.EVENTS (EMIT) //\n\n /**\n * Emits the actual selection\n */\n @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateIconsSize();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateIconsSize = () => {\n if (this.compact) {\n this.iconsSize = \"small\";\n }\n };\n\n private evaluateLabel = (\n type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n ): string => {\n const amount = this[type];\n if (this.minimal) {\n return `${amount}`;\n } else {\n const singular: boolean = amount === 1;\n return singular\n ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n }\n };\n\n private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n e.stopPropagation();\n this.selectionChanged.emit(e.detail);\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <gx-ide-list-selector\n type=\"multi-selection\"\n listName=\"status-buttons\"\n noListBorder\n ellipsis\n iconsSize={this.iconsSize}\n onSelectionChanged={this.selectionChangedHandler}\n >\n {!this.hideError ? (\n <gx-ide-list-selector-item\n itemId=\"errors\"\n itemValue={this.evaluateLabel(\"errors\")}\n icon=\"gx-test/result-exception\"\n iconColor={this.errors === 0 ? \"disabled\" : \"mercury-on-surface\"}\n class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideWarning ? (\n <gx-ide-list-selector-item\n itemId=\"warnings\"\n itemValue={this.evaluateLabel(\"warnings\")}\n icon=\"gx-test/result-warning\"\n iconColor={\n this.warnings === 0 ? \"disabled\" : \"mercury-on-surface\"\n }\n class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideSuccess ? (\n <gx-ide-list-selector-item\n itemId=\"successes\"\n itemValue={this.evaluateLabel(\"successes\")}\n icon=\"gx-test/result-ok\"\n iconColor={\n this.successes === 0 ? \"disabled\" : \"mercury-on-surface\"\n }\n class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideMessage ? (\n <gx-ide-list-selector-item\n itemId=\"messages\"\n itemValue={this.evaluateLabel(\"messages\")}\n icon=\"gx-test/screenshot-viewer\"\n iconColor={\n this.messages === 0 ? \"disabled\" : \"mercury-on-surface\"\n }\n class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n </gx-ide-list-selector>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/gxg-top-state-bar2.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
2
2
  import { d as defineCustomElement$2 } from './icon.js';
3
3
  import { d as defineCustomElement$1 } from './icon2.js';
4
4
 
5
- const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;opacity:0;transition:150ms opacity;}.top-state-bar:before{content:\"\";width:100%;height:100%;position:absolute;background-color:var(--mer-color__elevation--04);z-index:-1}.top-state-bar:after{content:\"\";left:var(--mer-border__width--sm);top:var(--mer-border__width--sm);width:calc(100% - var(--mer-border__width--sm) * 2);height:calc(100% - var(--mer-border__width--sm) * 2);position:absolute;background-color:var(--mer-color__surface);z-index:0;border-radius:var(--mer-border__width--lg)}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__wrapper{flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--xs);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__caption{color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04)}.top-state-bar__close-wrapper{cursor:pointer;border-inline-start:1px solid var(--mer-color__elevation--04);display:flex;align-items:center;transition:200ms background-color}.top-state-bar__close-wrapper:hover .top-state-bar__close{opacity:0.75}.top-state-bar__close-wrapper:active .top-state-bar__close{opacity:0.5}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--accent .top-state-bar__caption{color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--success .top-state-bar__caption{color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--warning .top-state-bar__caption{color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--error .top-state-bar__caption{color:var(--mer-color__message-red--100)}.top-state-bar--in-progress:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .top-state-bar__close-wrapper{border-inline-start-color:#3fa89b;-webkit-animation:inProgressBorderColor 1s linear infinite;animation:inProgressBorderColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{color:#3fa89b}.top-state-bar--visible{opacity:1}@-webkit-keyframes inProgressBorderColor{0%{border-inline-start-color:#3fa89b}100%{border-inline-start-color:#5ba7ff}}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar{position:relative}:host([no-border]) .top-state-bar:before,:host([no-border]) .top-state-bar:after{display:none}:host([no-border]) .top-state-bar__close-wrapper{border-inline-start:none}";
5
+ const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows;overflow:hidden;--ds-icon-size-box--small:var(--mer-font__size--xxs);--ds-icon-size--small:100%}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__outer-wrapper{position:relative;flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__outer-wrapper::after,.top-state-bar__outer-wrapper::before{border-radius:var(--mer-border__width--lg)}.top-state-bar__outer-wrapper::before{content:\"\";width:100%;height:100%;left:0;top:0;position:absolute;background-color:var(--mer-border-color__dim);z-index:0}.top-state-bar__outer-wrapper::after{content:\"\";left:var(--mer-border__width--sm);top:var(--mer-border__width--sm);width:calc(100% - var(--mer-border__width--sm) * 2);height:calc(100% - var(--mer-border__width--sm) * 2);position:absolute;background-color:var(--mer-color__surface);z-index:1}.top-state-bar__inner-wrapper{flex:1;display:flex;flex-direction:row;justify-content:space-between;gap:var(--mer-spacing--xs);position:relative;z-index:2}.top-state-bar__caption{color:var(--mer-text__on-surface);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04);position:relative;z-index:2}.top-state-bar__close{cursor:pointer;transition:200ms background-color}.top-state-bar__inner-wrapper,.top-state-bar__progress-wrapper,.top-state-bar__close{opacity:0;transition:150ms opacity}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--in-progress .top-state-bar__outer-wrapper:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--visible .top-state-bar__inner-wrapper,.top-state-bar--visible .top-state-bar__progress-wrapper,.top-state-bar--visible .top-state-bar__close{opacity:1}.top-state-bar--visible .top-state-bar__close:hover{opacity:0.75}.top-state-bar--visible .top-state-bar__close:active{opacity:0.5}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar__outer-wrapper:before{display:none}";
6
6
 
7
7
  const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar extends HTMLElement {
8
8
  constructor() {
@@ -33,6 +33,15 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
33
33
  this.closeButtonHandler = () => {
34
34
  this.active = false;
35
35
  };
36
+ this.closeKeyDownHandler = (e) => {
37
+ if (e.key === "Enter") {
38
+ this.active = false;
39
+ }
40
+ };
41
+ this.closeClickHandler = () => {
42
+ this.closeButtonHandler();
43
+ this.closedCallback();
44
+ };
36
45
  super();
37
46
  this.__registerHost();
38
47
  this.__attachShadow();
@@ -46,7 +55,7 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
46
55
  this.withClose = undefined;
47
56
  this.autoClose = false;
48
57
  this.noBorder = false;
49
- this.closedCallback = false;
58
+ this.closedCallback = () => { };
50
59
  }
51
60
  get el() { return this; }
52
61
  watchActiveHandler(active) {
@@ -93,13 +102,13 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
93
102
  [`top-state-bar--${this.stateType}`]: true,
94
103
  "top-state-bar--with-close": this.withClose,
95
104
  "top-state-bar--visible": this.topStateBarVisible
96
- } }, h("div", { class: "top-state-bar__wrapper" }, !this.minimal ? (h("label", { id: "label", class: {
105
+ } }, h("div", { class: "top-state-bar__outer-wrapper" }, !this.minimal ? (h("div", { class: "top-state-bar__inner-wrapper" }, h("label", { id: "label", class: {
97
106
  "top-state-bar__caption": true
98
- }, part: "label" }, this.caption)) : null, h("div", { class: {
99
- "top-state-bar__progress-wrapper": true
100
- }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))), this.withClose && !this.minimal ? (h("div", { class: "top-state-bar__close-wrapper", onClick: this.closeButtonHandler }, h("gxg-icon", { class: {
107
+ }, part: "label" }, this.caption), this.withClose && !this.minimal ? (h("gxg-icon", { class: {
101
108
  "top-state-bar__close": true
102
- }, role: "button", "aria-label": "close", type: "gemini-tools/close", color: "mercury-primary", tabIndex: 0 }))) : null)));
109
+ }, onClick: this.closeClickHandler, onKeyDown: this.closeKeyDownHandler, role: "button", "aria-label": "close", type: "gemini-tools/close", color: "mercury-on-surface", tabIndex: this.visible ? 0 : -1, size: "small" })) : null)) : null, h("div", { class: {
110
+ "top-state-bar__progress-wrapper": true
111
+ }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))))));
103
112
  }
104
113
  static get watchers() { return {
105
114
  "active": ["watchActiveHandler"],
@@ -116,7 +125,7 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
116
125
  "withClose": [4, "with-close"],
117
126
  "autoClose": [4, "auto-close"],
118
127
  "noBorder": [516, "no-border"],
119
- "closedCallback": [516, "closed-callback"],
128
+ "closedCallback": [16],
120
129
  "topStateBarVisible": [32],
121
130
  "visible": [32]
122
131
  }, undefined, {
package/dist/components/gxg-top-state-bar2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gxg-top-state-bar2.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n --top-bar-progress: 0%;\n display: grid;\n grid-template-rows: 0fr;\n transition: 200ms grid-template-rows;\n}\n:host > * {\n overflow: hidden;\n}\n\n:host(.visible) {\n grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n position: relative;\n border-radius: var(--mer-border__width--lg);\n list-style: var(--mer-font__size--xxs);\n display: flex;\n opacity: 0;\n transition: 150ms opacity;\n /*states*/\n}\n.top-state-bar:before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--mer-color__elevation--04);\n z-index: -1;\n}\n.top-state-bar:after {\n content: \"\";\n left: var(--mer-border__width--sm);\n top: var(--mer-border__width--sm);\n width: calc(100% - var(--mer-border__width--sm) * 2);\n height: calc(100% - var(--mer-border__width--sm) * 2);\n position: absolute;\n background-color: var(--mer-color__surface);\n z-index: 0;\n border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar > * {\n position: relative;\n z-index: 1;\n}\n.top-state-bar__wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--xs);\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__caption {\n color: var(--mer-text__on-message);\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--mer-font__size--xxs);\n line-height: var(--mer-font__size--xxs);\n font-weight: var(--mer-font__weight--regular);\n display: flex;\n align-items: baseline;\n font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n height: var(--mer-spacing--xxs);\n background-color: var(--mer-color__elevation--04);\n}\n.top-state-bar__close-wrapper {\n cursor: pointer;\n border-inline-start: 1px solid var(--mer-color__elevation--04);\n display: flex;\n align-items: center;\n transition: 200ms background-color;\n}\n.top-state-bar__close-wrapper:hover .top-state-bar__close {\n opacity: 0.75;\n}\n.top-state-bar__close-wrapper:active .top-state-bar__close {\n opacity: 0.5;\n}\n.top-state-bar--accent .progress-bar {\n background-color: var(--mer-accent__primary);\n}\n.top-state-bar--accent .top-state-bar__caption {\n color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--success .top-state-bar__caption {\n color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--warning .top-state-bar__caption {\n color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--error .top-state-bar__caption {\n color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress:before {\n height: 0;\n width: 120%;\n padding-top: 60%;\n padding-bottom: 60%;\n background: linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .top-state-bar__close-wrapper {\n border-inline-start-color: #3fa89b;\n -webkit-animation: inProgressBorderColor 1s linear infinite;\n animation: inProgressBorderColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n content: \"\";\n position: absolute;\n z-index: 0;\n width: 300%;\n height: 100%;\n left: 0;\n background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n animation-name: inProgressBar;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n color: #3fa89b;\n}\n.top-state-bar--visible {\n opacity: 1;\n}\n\n/*in progress animation*/\n@-webkit-keyframes inProgressBorderColor {\n 0% {\n border-inline-start-color: #3fa89b;\n }\n 100% {\n border-inline-start-color: #5ba7ff;\n }\n}\n@-webkit-keyframes inProgressBackgroundColor {\n 0% {\n transform: translate(-50%, -50%) rotate(0);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(1turn);\n }\n}\n@-webkit-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n@-moz-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: 200%;\n }\n}\n@keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n.progress-bar {\n display: block;\n transition: all 200ms;\n width: var(--top-bar-progress);\n border-radius: calc(var(--mer-spacing--xxs) / 2);\n height: 100%;\n}\n\n:host([no-border]) .top-state-bar {\n position: relative;\n}\n:host([no-border]) .top-state-bar:before, :host([no-border]) .top-state-bar:after {\n display: none;\n}\n:host([no-border]) .top-state-bar__close-wrapper {\n border-inline-start: none;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n constructor() {\n this.topStateBarVisible = false;\n this.visible = false;\n this.caption = undefined;\n this.minimal = false;\n this.active = false;\n this.stateType = \"in-progress\";\n this.progress = undefined;\n this.withClose = undefined;\n this.autoClose = false;\n this.noBorder = false;\n this.closedCallback = false;\n }\n /*\n INDEX:\n 1.OWN PROPERTIES\n 2.REFERENCE TO ELEMENTS\n 3.STATE() VARIABLES\n 4.PUBLIC PROPERTY API | WATCH'S\n 5.EVENTS (EMIT)\n 6.COMPONENT LIFECYCLE METHODS\n 7.LISTENERS\n 8.PUBLIC METHODS API\n 9.LOCAL METHODS\n 10.RENDER() FUNCTION\n */\n // 1.OWN PROPERTIES //\n // 2. REFERENCE TO ELEMENTS //\n el;\n watchActiveHandler(active) {\n if (active) {\n this.visible = true;\n setTimeout(() => {\n this.topStateBarVisible = true;\n }, 300);\n }\n else {\n this.topStateBarVisible = false;\n setTimeout(() => {\n this.visible = false;\n }, 300);\n }\n }\n watchStateTypeHandler() {\n this.evaluateWithAction();\n }\n watchProgressHandler(progress) {\n if (progress => 0 && progress <= 100) {\n this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n }\n if (progress === 100 && this.autoClose) {\n setTimeout(() => {\n this.active = false;\n }, 200);\n }\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE EVENTS //\n componentWillLoad() {\n this.evaluateWithAction();\n this.evaluateInitialProgress();\n if (this.active) {\n this.visible = true;\n this.topStateBarVisible = true;\n }\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n evaluateInitialProgress = () => {\n if (this.progress === undefined &&\n (this.stateType === \"error\" ||\n this.stateType === \"warning\" ||\n this.stateType === \"success\")) {\n this.progress = 100;\n }\n else if (this.progress === undefined &&\n this.stateType === \"in-progress\") {\n this.progress = 0;\n }\n this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n };\n evaluateWithAction = () => {\n if (this.withClose === undefined &&\n (this.stateType === \"error\" ||\n this.stateType === \"warning\" ||\n this.stateType === \"success\")) {\n this.withClose = true;\n }\n };\n closeButtonHandler = () => {\n this.active = false;\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n \"top-state-bar\": true,\n [`top-state-bar--${this.stateType}`]: true,\n \"top-state-bar--with-close\": this.withClose,\n \"top-state-bar--visible\": this.topStateBarVisible\n } }, h(\"div\", { class: \"top-state-bar__wrapper\" }, !this.minimal ? (h(\"label\", { id: \"label\", class: {\n \"top-state-bar__caption\": true\n }, part: \"label\" }, this.caption)) : null, h(\"div\", { class: {\n \"top-state-bar__progress-wrapper\": true\n }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))), this.withClose && !this.minimal ? (h(\"div\", { class: \"top-state-bar__close-wrapper\", onClick: this.closeButtonHandler }, h(\"gxg-icon\", { class: {\n \"top-state-bar__close\": true\n }, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-primary\", tabIndex: 0 }))) : null)));\n }\n static get is() { return \"gxg-top-state-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"minimal\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will only display the bar (no title, no close button)\"\n },\n \"attribute\": \"minimal\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"active\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar active state. If false it will be hidden\"\n },\n \"attribute\": \"active\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"stateType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"topStateBarType\",\n \"resolved\": \"\\\"accent\\\" | \\\"error\\\" | \\\"in-progress\\\" | \\\"success\\\" | \\\"warning\\\"\",\n \"references\": {\n \"topStateBarType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"state-type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"in-progress\\\"\"\n },\n \"progress\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The progress bar progress\"\n },\n \"attribute\": \"progress\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"withClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will display a close action button\"\n },\n \"attribute\": \"with-close\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"autoClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It true, it will auto-close when the progress is 100\"\n },\n \"attribute\": \"auto-close\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"noBorder\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It removes the border (actually is box shadow)\"\n },\n \"attribute\": \"no-border\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"closedCallback\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"A callback that gets called when the top-state-bar is closed\"\n },\n \"attribute\": \"closed-callback\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get states() {\n return {\n \"topStateBarVisible\": {},\n \"visible\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"watchActiveHandler\"\n }, {\n \"propName\": \"stateType\",\n \"methodName\": \"watchStateTypeHandler\"\n }, {\n \"propName\": \"progress\",\n \"methodName\": \"watchProgressHandler\"\n }];\n }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}
1
+ {"file":"gxg-top-state-bar2.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n --top-bar-progress: 0%;\n display: grid;\n grid-template-rows: 0fr;\n transition: 200ms grid-template-rows;\n overflow: hidden;\n --ds-icon-size-box--small: var(--mer-font__size--xxs);\n --ds-icon-size--small: 100%;\n}\n:host > * {\n overflow: hidden;\n}\n\n:host(.visible) {\n grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n border-radius: var(--mer-border__width--lg);\n list-style: var(--mer-font__size--xxs);\n display: flex;\n /*states*/\n}\n.top-state-bar > * {\n position: relative;\n z-index: 1;\n}\n.top-state-bar__outer-wrapper {\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__outer-wrapper::after, .top-state-bar__outer-wrapper::before {\n border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar__outer-wrapper::before {\n content: \"\";\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n position: absolute;\n background-color: var(--mer-border-color__dim);\n z-index: 0;\n}\n.top-state-bar__outer-wrapper::after {\n content: \"\";\n left: var(--mer-border__width--sm);\n top: var(--mer-border__width--sm);\n width: calc(100% - var(--mer-border__width--sm) * 2);\n height: calc(100% - var(--mer-border__width--sm) * 2);\n position: absolute;\n background-color: var(--mer-color__surface);\n z-index: 1;\n}\n.top-state-bar__inner-wrapper {\n flex: 1;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--mer-spacing--xs);\n position: relative;\n z-index: 2;\n}\n.top-state-bar__caption {\n color: var(--mer-text__on-surface);\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--mer-font__size--xxs);\n line-height: var(--mer-font__size--xxs);\n font-weight: var(--mer-font__weight--regular);\n display: flex;\n align-items: baseline;\n font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n height: var(--mer-spacing--xxs);\n background-color: var(--mer-color__elevation--04);\n position: relative;\n z-index: 2;\n}\n.top-state-bar__close {\n cursor: pointer;\n transition: 200ms background-color;\n}\n.top-state-bar__inner-wrapper, .top-state-bar__progress-wrapper, .top-state-bar__close {\n opacity: 0;\n transition: 150ms opacity;\n}\n.top-state-bar--accent .progress-bar {\n background-color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress .top-state-bar__outer-wrapper:before {\n height: 0;\n width: 120%;\n padding-top: 60%;\n padding-bottom: 60%;\n background: linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 100%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n content: \"\";\n position: absolute;\n z-index: 0;\n width: 300%;\n height: 100%;\n left: 0;\n background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n animation-name: inProgressBar;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n.top-state-bar--visible .top-state-bar__inner-wrapper,\n.top-state-bar--visible .top-state-bar__progress-wrapper,\n.top-state-bar--visible .top-state-bar__close {\n opacity: 1;\n}\n.top-state-bar--visible .top-state-bar__close:hover {\n opacity: 0.75;\n}\n.top-state-bar--visible .top-state-bar__close:active {\n opacity: 0.5;\n}\n\n/*in progress animation*/\n@-webkit-keyframes inProgressBackgroundColor {\n 0% {\n transform: translate(-50%, -50%) rotate(0);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(1turn);\n }\n}\n@-webkit-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n@-moz-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: 200%;\n }\n}\n@keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n.progress-bar {\n display: block;\n transition: all 200ms;\n width: var(--top-bar-progress);\n border-radius: calc(var(--mer-spacing--xxs) / 2);\n height: 100%;\n}\n\n:host([no-border]) .top-state-bar__outer-wrapper:before {\n display: none;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n constructor() {\n this.topStateBarVisible = false;\n this.visible = false;\n this.caption = undefined;\n this.minimal = false;\n this.active = false;\n this.stateType = \"in-progress\";\n this.progress = undefined;\n this.withClose = undefined;\n this.autoClose = false;\n this.noBorder = false;\n this.closedCallback = () => { };\n }\n // 1.OWN PROPERTIES //\n // 2. REFERENCE TO ELEMENTS //\n el;\n watchActiveHandler(active) {\n if (active) {\n this.visible = true;\n setTimeout(() => {\n this.topStateBarVisible = true;\n }, 300);\n }\n else {\n this.topStateBarVisible = false;\n setTimeout(() => {\n this.visible = false;\n }, 300);\n }\n }\n watchStateTypeHandler() {\n this.evaluateWithAction();\n }\n watchProgressHandler(progress) {\n if (progress => 0 && progress <= 100) {\n this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n }\n if (progress === 100 && this.autoClose) {\n setTimeout(() => {\n this.active = false;\n }, 200);\n }\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE EVENTS //\n componentWillLoad() {\n this.evaluateWithAction();\n this.evaluateInitialProgress();\n if (this.active) {\n this.visible = true;\n this.topStateBarVisible = true;\n }\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n evaluateInitialProgress = () => {\n if (this.progress === undefined &&\n (this.stateType === \"error\" ||\n this.stateType === \"warning\" ||\n this.stateType === \"success\")) {\n this.progress = 100;\n }\n else if (this.progress === undefined &&\n this.stateType === \"in-progress\") {\n this.progress = 0;\n }\n this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n };\n evaluateWithAction = () => {\n if (this.withClose === undefined &&\n (this.stateType === \"error\" ||\n this.stateType === \"warning\" ||\n this.stateType === \"success\")) {\n this.withClose = true;\n }\n };\n closeButtonHandler = () => {\n this.active = false;\n };\n closeKeyDownHandler = (e) => {\n if (e.key === \"Enter\") {\n this.active = false;\n }\n };\n closeClickHandler = () => {\n this.closeButtonHandler();\n this.closedCallback();\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n \"top-state-bar\": true,\n [`top-state-bar--${this.stateType}`]: true,\n \"top-state-bar--with-close\": this.withClose,\n \"top-state-bar--visible\": this.topStateBarVisible\n } }, h(\"div\", { class: \"top-state-bar__outer-wrapper\" }, !this.minimal ? (h(\"div\", { class: \"top-state-bar__inner-wrapper\" }, h(\"label\", { id: \"label\", class: {\n \"top-state-bar__caption\": true\n }, part: \"label\" }, this.caption), this.withClose && !this.minimal ? (h(\"gxg-icon\", { class: {\n \"top-state-bar__close\": true\n }, onClick: this.closeClickHandler, onKeyDown: this.closeKeyDownHandler, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-on-surface\", tabIndex: this.visible ? 0 : -1, size: \"small\" })) : null)) : null, h(\"div\", { class: {\n \"top-state-bar__progress-wrapper\": true\n }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))))));\n }\n static get is() { return \"gxg-top-state-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"minimal\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will only display the bar (no title, no close button)\"\n },\n \"attribute\": \"minimal\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"active\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar active state. If false it will be hidden\"\n },\n \"attribute\": \"active\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"stateType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"topStateBarType\",\n \"resolved\": \"\\\"accent\\\" | \\\"error\\\" | \\\"in-progress\\\" | \\\"success\\\" | \\\"warning\\\"\",\n \"references\": {\n \"topStateBarType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"state-type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"in-progress\\\"\"\n },\n \"progress\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The progress bar progress\"\n },\n \"attribute\": \"progress\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"withClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will display a close action button\"\n },\n \"attribute\": \"with-close\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"autoClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It true, it will auto-close when the progress is 100\"\n },\n \"attribute\": \"auto-close\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"noBorder\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It removes the border (actually is box shadow)\"\n },\n \"attribute\": \"no-border\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"closedCallback\": {\n \"type\": \"unknown\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"() => void\",\n \"resolved\": \"() => void\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"A callback that gets called when the top-state-bar is closed\"\n },\n \"defaultValue\": \"() => {}\"\n }\n };\n }\n static get states() {\n return {\n \"topStateBarVisible\": {},\n \"visible\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"watchActiveHandler\"\n }, {\n \"propName\": \"stateType\",\n \"methodName\": \"watchStateTypeHandler\"\n }, {\n \"propName\": \"progress\",\n \"methodName\": \"watchProgressHandler\"\n }];\n }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}
package/dist/components/icon2.js CHANGED
@@ -23,7 +23,9 @@ const COLOR_MAPPINGS = {
23
23
  "mercury-primary": "mer-icon__primary",
24
24
  "mercury-on-primary": "mer-text__on-primary",
25
25
  "mercury-text-on-message": "mer-text__on-message",
26
- "mercury-neutral": "mer-icon__neutral"
26
+ "mercury-neutral": "mer-icon__neutral",
27
+ "mercury-on-surface": "mer-icon__on-surface",
28
+ "mercury-primary-disabled": "mer-icon__primary--disabled"
27
29
  };
28
30
  const GxgIcon = /*@__PURE__*/ proxyCustomElement(class GxgIcon extends HTMLElement {
29
31
  constructor() {
package/dist/components/icon2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"icon2.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,i/TAAi/T;;ACCjgU;;;AAGA,MAAM,cAAc,GAAG;IACnB,WAAW,EAAE,oBAAoB;IACjC,QAAQ,EAAE,wBAAwB;IAClC,UAAU,EAAE,mBAAmB;IAC/B,KAAK,EAAE,sBAAsB;IAC7B,QAAQ,EAAE,kBAAkB;IAC5B,YAAY,EAAE,qBAAqB;IACnC,aAAa,EAAE,sBAAsB;IACrC,iBAAiB,EAAE,uBAAuB;IAC1C,gBAAgB,EAAE,sBAAsB;IACxC,eAAe,EAAE,qBAAqB;IACtC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,mBAAmB;IAC5B,iBAAiB,EAAE,mBAAmB;IACtC,oBAAoB,EAAE,sBAAsB;IAC5C,yBAAyB,EAAE,sBAAsB;IACjD,iBAAiB,EAAE,mBAAmB;CACzC,CAAC;MACW,OAAO;IAChB;;;;QACI,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACzB;;;;;IAKD,UAAU;QACN,OAAO,YAAY,CAAC,iBAAiB,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;KACzD;IACD,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,OAAO,8BAA8B,CAAC;SACzC;aACI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAC5B,OAAO,4BAA4B,CAAC;SACvC;KACJ;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAC7C,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC5C,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE;gBACvB,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACjE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;aACjC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;KAC5F;IACD,gBAAgB,CAAC,KAAK;;QAElB,OAAO,+BAA+B,KAAK,IAAI,CAAC;KACnD;IAaD,WAAW,UAAU,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/icon/icon.css?tag=gxg-icon&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/icon/icon.js"],"sourcesContent":["/*********************************\nICON\n*********************************/\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=checkbox],\n[type=radio] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=search] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n display: none;\n}\n\n:root {\n --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n display: inline-block;\n line-height: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(.icon-size--regular) {\n height: var(--ds-icon-size-box--regular);\n width: var(--ds-icon-size-box--regular);\n}\n\n:host(.icon-size--small) {\n height: var(--ds-icon-size-box--small);\n width: var(--ds-icon-size-box--small);\n}","import { Host, getAssetPath, h } from \"@stencil/core\";\n/*********************************\nCONSTANTS\n*********************************/\nconst COLOR_MAPPINGS = {\n alwaysblack: \"color-always-black\",\n disabled: \"color-primary-disabled\",\n ondisabled: \"color-on-disabled\",\n error: \"ds-alert-color--dark\",\n negative: \"color-on-primary\",\n onbackground: \"color-on-background\",\n indeterminate: \"color-primary-active\",\n \"primary-enabled\": \"color-primary-enabled\",\n \"primary-active\": \"color-primary-active\",\n \"primary-hover\": \"color-primary-hover\",\n success: \"ds-success-color--dark\",\n warning: \"ds-warning-color--dark\",\n mercury: \"mer-icon__primary\",\n \"mercury-primary\": \"mer-icon__primary\",\n \"mercury-on-primary\": \"mer-text__on-primary\",\n \"mercury-text-on-message\": \"mer-text__on-message\",\n \"mercury-neutral\": \"mer-icon__neutral\"\n};\nexport class GxgIcon {\n constructor() {\n this.color = undefined;\n this.size = \"regular\";\n this.type = undefined;\n }\n element;\n /*********************************\n METHODS\n *********************************/\n getSrcPath() {\n return getAssetPath(`./icon-assets/${this.type}.svg`);\n }\n iconSize() {\n if (this.size === \"regular\") {\n return \"var(--ds-icon-size--regular)\";\n }\n else if (this.size === \"small\") {\n return \"var(--ds-icon-size--small)\";\n }\n }\n render() {\n return (h(Host, { class: {\n \"icon-size--regular\": this.size === \"regular\",\n \"icon-size--small\": this.size === \"small\"\n } }, h(\"ch-icon\", { style: {\n \"--icon-color\": this.mapColorToCssVar(COLOR_MAPPINGS[this.color]),\n \"--icon-size\": this.iconSize()\n }, \"auto-color\": this.color === \"auto\", src: this.getSrcPath(), part: \"ch-icon\" })));\n }\n mapColorToCssVar(color) {\n //return `var(--color-on-background)`;\n return `var(--gxg-icon-color, var(--${color}))`;\n }\n static get is() { return \"gxg-icon\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"icon.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"icon.css\"]\n };\n }\n static get assetsDirs() { return [\"icon-assets\"]; }\n static get properties() {\n return {\n \"color\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Color\",\n \"resolved\": \"\\\"alwaysblack\\\" | \\\"auto\\\" | \\\"disabled\\\" | \\\"error\\\" | \\\"indeterminate\\\" | \\\"mercury\\\" | \\\"mercury-neutral\\\" | \\\"mercury-on-primary\\\" | \\\"mercury-primary\\\" | \\\"mercury-text-on-message\\\" | \\\"negative\\\" | \\\"onbackground\\\" | \\\"ondisabled\\\" | \\\"primary-active\\\" | \\\"primary-enabled\\\" | \\\"primary-hover\\\" | \\\"success\\\" | \\\"warning\\\"\",\n \"references\": {\n \"Color\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Color\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The color of the icon.\"\n },\n \"attribute\": \"color\",\n \"reflect\": false\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Size\",\n \"resolved\": \"\\\"regular\\\" | \\\"small\\\"\",\n \"references\": {\n \"Size\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Size\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the icon. Possible values: regular, small.\"\n },\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"regular\\\"\"\n },\n \"type\": {\n \"type\": \"any\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of icon.\"\n },\n \"attribute\": \"type\",\n \"reflect\": false\n }\n };\n }\n static get elementRef() { return \"element\"; }\n}\n//# sourceMappingURL=icon.js.map\n"],"version":3}
1
+ {"file":"icon2.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,i/TAAi/T;;ACCjgU;;;AAGA,MAAM,cAAc,GAAG;IACnB,WAAW,EAAE,oBAAoB;IACjC,QAAQ,EAAE,wBAAwB;IAClC,UAAU,EAAE,mBAAmB;IAC/B,KAAK,EAAE,sBAAsB;IAC7B,QAAQ,EAAE,kBAAkB;IAC5B,YAAY,EAAE,qBAAqB;IACnC,aAAa,EAAE,sBAAsB;IACrC,iBAAiB,EAAE,uBAAuB;IAC1C,gBAAgB,EAAE,sBAAsB;IACxC,eAAe,EAAE,qBAAqB;IACtC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,mBAAmB;IAC5B,iBAAiB,EAAE,mBAAmB;IACtC,oBAAoB,EAAE,sBAAsB;IAC5C,yBAAyB,EAAE,sBAAsB;IACjD,iBAAiB,EAAE,mBAAmB;IACtC,oBAAoB,EAAE,sBAAsB;IAC5C,0BAA0B,EAAE,6BAA6B;CAC5D,CAAC;MACW,OAAO;IAChB;;;;QACI,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACzB;;;;;IAKD,UAAU;QACN,OAAO,YAAY,CAAC,iBAAiB,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;KACzD;IACD,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,OAAO,8BAA8B,CAAC;SACzC;aACI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAC5B,OAAO,4BAA4B,CAAC;SACvC;KACJ;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAC7C,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC5C,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE;gBACvB,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACjE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;aACjC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;KAC5F;IACD,gBAAgB,CAAC,KAAK;;QAElB,OAAO,+BAA+B,KAAK,IAAI,CAAC;KACnD;IAaD,WAAW,UAAU,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/icon/icon.css?tag=gxg-icon&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/icon/icon.js"],"sourcesContent":["/*********************************\nICON\n*********************************/\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=checkbox],\n[type=radio] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=search] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n display: none;\n}\n\n:root {\n --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n display: inline-block;\n line-height: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(.icon-size--regular) {\n height: var(--ds-icon-size-box--regular);\n width: var(--ds-icon-size-box--regular);\n}\n\n:host(.icon-size--small) {\n height: var(--ds-icon-size-box--small);\n width: var(--ds-icon-size-box--small);\n}","import { Host, getAssetPath, h } from \"@stencil/core\";\n/*********************************\nCONSTANTS\n*********************************/\nconst COLOR_MAPPINGS = {\n alwaysblack: \"color-always-black\",\n disabled: \"color-primary-disabled\",\n ondisabled: \"color-on-disabled\",\n error: \"ds-alert-color--dark\",\n negative: \"color-on-primary\",\n onbackground: \"color-on-background\",\n indeterminate: \"color-primary-active\",\n \"primary-enabled\": \"color-primary-enabled\",\n \"primary-active\": \"color-primary-active\",\n \"primary-hover\": \"color-primary-hover\",\n success: \"ds-success-color--dark\",\n warning: \"ds-warning-color--dark\",\n mercury: \"mer-icon__primary\",\n \"mercury-primary\": \"mer-icon__primary\",\n \"mercury-on-primary\": \"mer-text__on-primary\",\n \"mercury-text-on-message\": \"mer-text__on-message\",\n \"mercury-neutral\": \"mer-icon__neutral\",\n \"mercury-on-surface\": \"mer-icon__on-surface\",\n \"mercury-primary-disabled\": \"mer-icon__primary--disabled\"\n};\nexport class GxgIcon {\n constructor() {\n this.color = undefined;\n this.size = \"regular\";\n this.type = undefined;\n }\n element;\n /*********************************\n METHODS\n *********************************/\n getSrcPath() {\n return getAssetPath(`./icon-assets/${this.type}.svg`);\n }\n iconSize() {\n if (this.size === \"regular\") {\n return \"var(--ds-icon-size--regular)\";\n }\n else if (this.size === \"small\") {\n return \"var(--ds-icon-size--small)\";\n }\n }\n render() {\n return (h(Host, { class: {\n \"icon-size--regular\": this.size === \"regular\",\n \"icon-size--small\": this.size === \"small\"\n } }, h(\"ch-icon\", { style: {\n \"--icon-color\": this.mapColorToCssVar(COLOR_MAPPINGS[this.color]),\n \"--icon-size\": this.iconSize()\n }, \"auto-color\": this.color === \"auto\", src: this.getSrcPath(), part: \"ch-icon\" })));\n }\n mapColorToCssVar(color) {\n //return `var(--color-on-background)`;\n return `var(--gxg-icon-color, var(--${color}))`;\n }\n static get is() { return \"gxg-icon\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"icon.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"icon.css\"]\n };\n }\n static get assetsDirs() { return [\"icon-assets\"]; }\n static get properties() {\n return {\n \"color\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Color\",\n \"resolved\": \"\\\"alwaysblack\\\" | \\\"auto\\\" | \\\"disabled\\\" | \\\"error\\\" | \\\"indeterminate\\\" | \\\"mercury\\\" | \\\"mercury-neutral\\\" | \\\"mercury-on-primary\\\" | \\\"mercury-on-surface\\\" | \\\"mercury-primary\\\" | \\\"mercury-primary-disabled\\\" | \\\"mercury-text-on-message\\\" | \\\"negative\\\" | \\\"onbackground\\\" | \\\"ondisabled\\\" | \\\"primary-active\\\" | \\\"primary-enabled\\\" | \\\"primary-hover\\\" | \\\"success\\\" | \\\"warning\\\"\",\n \"references\": {\n \"Color\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Color\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The color of the icon.\"\n },\n \"attribute\": \"color\",\n \"reflect\": false\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Size\",\n \"resolved\": \"\\\"regular\\\" | \\\"small\\\"\",\n \"references\": {\n \"Size\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Size\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the icon. Possible values: regular, small.\"\n },\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"regular\\\"\"\n },\n \"type\": {\n \"type\": \"any\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of icon.\"\n },\n \"attribute\": \"type\",\n \"reflect\": false\n }\n };\n }\n static get elementRef() { return \"element\"; }\n}\n//# sourceMappingURL=icon.js.map\n"],"version":3}
package/dist/components/ide-loader.js CHANGED
@@ -7,23 +7,10 @@ import { d as defineCustomElement$3 } from './icon2.js';
7
7
  import { d as defineCustomElement$2 } from './text.js';
8
8
  import { d as defineCustomElement$1 } from './title.js';
9
9
 
10
- const ideLoaderCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--ds-background-color-disabled) !important;color:var(--ds-color--disabled) !important;border-color:var(--ds-border-color-disabled) !important;cursor:default !important}:host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader__wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-top:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:var(--gxg-ide-loader-spinner__width);height:var(--gxg-ide-loader-spinner__width);flex-shrink:0}.loader__content-wrapper{display:flex;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--gxg-ide-loader-content-wrapper__gap);max-width:var(--gxg-ide-loader-content-wrapper__max-width)}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{from{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}to{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}";
10
+ const ideLoaderCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--ds-background-color-disabled) !important;color:var(--ds-color--disabled) !important;border-color:var(--ds-border-color-disabled) !important;cursor:default !important}:host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader__wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-top:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:var(--gxg-ide-loader-spinner__width);height:var(--gxg-ide-loader-spinner__width);flex-shrink:0}.loader__content-wrapper{display:flex;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--gxg-ide-loader-content-wrapper__gap);max-width:var(--gxg-ide-loader-content-wrapper__max-width)}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{from{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}to{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}:host([display-border]) .loader__wrapper{border:1px solid var(--mer-color__elevation--02)}";
11
11
 
12
12
  const IdeLoader = /*@__PURE__*/ proxyCustomElement(class IdeLoader extends HTMLElement {
13
13
  constructor() {
14
- /*
15
- INDEX:
16
- 1.OWN PROPERTIES
17
- 2.REFERENCE TO ELEMENTS
18
- 3.STATE() VARIABLES
19
- 4.PUBLIC PROPERTY API | WATCH'S
20
- 5.EVENTS (EMIT)
21
- 6.COMPONENT LIFECYCLE EVENTS
22
- 7.LISTENERS
23
- 8.PUBLIC METHODS API
24
- 9.LOCAL METHODS
25
- 10.RENDER() FUNCTION
26
- */
27
14
  // 1.OWN PROPERTIES //
28
15
  /**
29
16
  * The transition speed for displaying/hiding the ch-window
@@ -63,6 +50,8 @@ const IdeLoader = /*@__PURE__*/ proxyCustomElement(class IdeLoader extends HTMLE
63
50
  this.cancelCallback = undefined;
64
51
  this.show = false;
65
52
  this.abortTime = 5000;
53
+ this.displayBorder = false;
54
+ this.borderRadius = "0";
66
55
  this.container = undefined;
67
56
  }
68
57
  showHandler(show) {
@@ -94,7 +83,7 @@ const IdeLoader = /*@__PURE__*/ proxyCustomElement(class IdeLoader extends HTMLE
94
83
  return (h(Host, null, h("ch-window", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false, style: { "--show-transition": `${this.showTransition}ms` } }, h("div", { class: {
95
84
  [`loader__wrapper`]: true,
96
85
  "loader__wrapper--visible": this.showWrapper
97
- }, part: "loader-wrapper" }, h("div", { class: "loader__spinner" }), h("div", { class: {
86
+ }, style: { borderRadius: this.borderRadius }, part: "loader-wrapper" }, h("div", { class: "loader__spinner" }), h("div", { class: {
98
87
  "loader__content-wrapper": true,
99
88
  "loader__content-wrapper--hidden": !this.description && !this.loaderTitle && !this.cancelLabel
100
89
  } }, this.renderTitle(), this.renderDescription(), this.renderCancelButton())))));
@@ -110,6 +99,8 @@ const IdeLoader = /*@__PURE__*/ proxyCustomElement(class IdeLoader extends HTMLE
110
99
  "cancelCallback": [16],
111
100
  "show": [4],
112
101
  "abortTime": [2, "abort-time"],
102
+ "displayBorder": [516, "display-border"],
103
+ "borderRadius": [513, "border-radius"],
113
104
  "container": [16],
114
105
  "showWindow": [32],
115
106
  "showWrapper": [32]