xv-webcomponents 0.1.43 → 0.1.46

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 (311) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +129 -129
  3. package/dist/cjs/app-globals-V2Kpy_OQ.js +8 -0
  4. package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
  5. package/dist/cjs/index-BE3kw7I4.js +36 -0
  6. package/dist/cjs/index-BE3kw7I4.js.map +1 -0
  7. package/dist/cjs/index-MLh9SbX2.js +1917 -0
  8. package/dist/cjs/index-MLh9SbX2.js.map +1 -0
  9. package/dist/cjs/index.cjs.js +10 -0
  10. package/dist/cjs/index.cjs.js.map +1 -0
  11. package/dist/cjs/loader.cjs.js +16 -0
  12. package/dist/cjs/loader.cjs.js.map +1 -0
  13. package/dist/cjs/xv-accordion-v2_34.cjs.entry.js +3542 -0
  14. package/dist/cjs/xv-accordion-v2_34.cjs.entry.js.map +1 -0
  15. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +20 -0
  16. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js.map +1 -0
  17. package/dist/cjs/xv-breadcrumbs-v2.entry.cjs.js.map +1 -0
  18. package/dist/cjs/xv-webcomponents.cjs.js +28 -0
  19. package/dist/cjs/xv-webcomponents.cjs.js.map +1 -0
  20. package/dist/collection/assets/fonts/fontawesome5/fa-brands-400.svg +3717 -0
  21. package/dist/collection/assets/fonts/fontawesome5/fa-duotone-900.svg +15326 -0
  22. package/dist/collection/assets/fonts/fontawesome5/fa-light-300.svg +12420 -0
  23. package/dist/collection/assets/fonts/fontawesome5/fa-regular-400.svg +11323 -0
  24. package/dist/collection/assets/fonts/fontawesome5/fa-solid-900.svg +9653 -0
  25. package/dist/collection/collection-manifest.json +46 -0
  26. package/dist/collection/components/xv-accordion/xv-accordion.css +98 -0
  27. package/dist/collection/components/xv-accordion/xv-accordion.js +163 -0
  28. package/dist/collection/components/xv-accordion/xv-accordion.js.map +1 -0
  29. package/dist/collection/components/xv-accordion-item/xv-accordion-item.css +163 -0
  30. package/dist/collection/components/xv-accordion-item/xv-accordion-item.js +132 -0
  31. package/dist/collection/components/xv-accordion-item/xv-accordion-item.js.map +1 -0
  32. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css +98 -0
  33. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js +19 -0
  34. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js.map +1 -0
  35. package/dist/collection/components/xv-button/xv-button-v2.css +268 -0
  36. package/dist/collection/components/xv-button/xv-button.js +229 -0
  37. package/dist/collection/components/xv-button/xv-button.js.map +1 -0
  38. package/dist/collection/components/xv-card/xv-card.css +158 -0
  39. package/dist/collection/components/xv-card/xv-card.js +122 -0
  40. package/dist/collection/components/xv-card/xv-card.js.map +1 -0
  41. package/dist/collection/components/xv-checkbox/xv-checkbox.css +233 -0
  42. package/dist/collection/components/xv-checkbox/xv-checkbox.js +402 -0
  43. package/dist/collection/components/xv-checkbox/xv-checkbox.js.map +1 -0
  44. package/dist/collection/components/xv-data-table/_vars.js +3 -0
  45. package/dist/collection/components/xv-data-table/_vars.js.map +1 -0
  46. package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css +185 -0
  47. package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js +206 -0
  48. package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js.map +1 -0
  49. package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.css +102 -0
  50. package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js +101 -0
  51. package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js.map +1 -0
  52. package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.css +168 -0
  53. package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js +360 -0
  54. package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js.map +1 -0
  55. package/dist/collection/components/xv-data-table/xv-data-table.css +214 -0
  56. package/dist/collection/components/xv-data-table/xv-data-table.js +133 -0
  57. package/dist/collection/components/xv-data-table/xv-data-table.js.map +1 -0
  58. package/dist/collection/components/xv-dropdown/_vars.js +2 -0
  59. package/dist/collection/components/xv-dropdown/_vars.js.map +1 -0
  60. package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css +109 -0
  61. package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +153 -0
  62. package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js.map +1 -0
  63. package/dist/collection/components/xv-dropdown/xv-dropdown.css +327 -0
  64. package/dist/collection/components/xv-dropdown/xv-dropdown.js +443 -0
  65. package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -0
  66. package/dist/collection/components/xv-file-uploader/_vars.js +6 -0
  67. package/dist/collection/components/xv-file-uploader/_vars.js.map +1 -0
  68. package/dist/collection/components/xv-file-uploader/xv-file-uploader.css +233 -0
  69. package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +514 -0
  70. package/dist/collection/components/xv-file-uploader/xv-file-uploader.js.map +1 -0
  71. package/dist/collection/components/xv-footer/xv-footer.css +325 -0
  72. package/dist/collection/components/xv-footer/xv-footer.js +37 -0
  73. package/dist/collection/components/xv-footer/xv-footer.js.map +1 -0
  74. package/dist/collection/components/xv-header/xv-header.css +22682 -0
  75. package/dist/collection/components/xv-header/xv-header.js +54 -0
  76. package/dist/collection/components/xv-header/xv-header.js.map +1 -0
  77. package/dist/collection/components/xv-link/xv-link.css +162 -0
  78. package/dist/collection/components/xv-link/xv-link.js +132 -0
  79. package/dist/collection/components/xv-link/xv-link.js.map +1 -0
  80. package/dist/collection/components/xv-loader/xv-loader.css +160 -0
  81. package/dist/collection/components/xv-loader/xv-loader.js +106 -0
  82. package/dist/collection/components/xv-loader/xv-loader.js.map +1 -0
  83. package/dist/collection/components/xv-login-modal/xv-login-modal.css +22670 -0
  84. package/dist/collection/components/xv-login-modal/xv-login-modal.js +146 -0
  85. package/dist/collection/components/xv-login-modal/xv-login-modal.js.map +1 -0
  86. package/dist/collection/components/xv-modal/xv-modal.css +210 -0
  87. package/dist/collection/components/xv-modal/xv-modal.js +245 -0
  88. package/dist/collection/components/xv-modal/xv-modal.js.map +1 -0
  89. package/dist/collection/components/xv-notification/_vars.js +8 -0
  90. package/dist/collection/components/xv-notification/_vars.js.map +1 -0
  91. package/dist/collection/components/xv-notification/xv-notification.css +208 -0
  92. package/dist/collection/components/xv-notification/xv-notification.js +118 -0
  93. package/dist/collection/components/xv-notification/xv-notification.js.map +1 -0
  94. package/dist/collection/components/xv-number-input/xv-number-input.css +223 -0
  95. package/dist/collection/components/xv-number-input/xv-number-input.js +373 -0
  96. package/dist/collection/components/xv-number-input/xv-number-input.js.map +1 -0
  97. package/dist/collection/components/xv-overflow-menu/_vars.js +6 -0
  98. package/dist/collection/components/xv-overflow-menu/_vars.js.map +1 -0
  99. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css +140 -0
  100. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +137 -0
  101. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js.map +1 -0
  102. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css +200 -0
  103. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +202 -0
  104. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js.map +1 -0
  105. package/dist/{xv-webcomponents/_vars-IZ3lIQzL.js → collection/components/xv-progress-indicator/_vars.js} +3 -7
  106. package/dist/collection/components/xv-progress-indicator/_vars.js.map +1 -0
  107. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.css +191 -0
  108. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +54 -0
  109. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js.map +1 -0
  110. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.css +140 -0
  111. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +157 -0
  112. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js.map +1 -0
  113. package/dist/collection/components/xv-table/_vars.js +3 -0
  114. package/dist/collection/components/xv-table/_vars.js.map +1 -0
  115. package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css +188 -0
  116. package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +160 -0
  117. package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js.map +1 -0
  118. package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.css +153 -0
  119. package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +76 -0
  120. package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js.map +1 -0
  121. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css +134 -0
  122. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +333 -0
  123. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js.map +1 -0
  124. package/dist/collection/components/xv-table/xv-table.css +232 -0
  125. package/dist/collection/components/xv-table/xv-table.js +159 -0
  126. package/dist/collection/components/xv-table/xv-table.js.map +1 -0
  127. package/dist/collection/components/xv-tabs/_vars.js +11 -0
  128. package/dist/collection/components/xv-tabs/_vars.js.map +1 -0
  129. package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css +105 -0
  130. package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +106 -0
  131. package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js.map +1 -0
  132. package/dist/collection/components/xv-tabs/xv-tabs.css +228 -0
  133. package/dist/collection/components/xv-tabs/xv-tabs.js +221 -0
  134. package/dist/collection/components/xv-tabs/xv-tabs.js.map +1 -0
  135. package/dist/collection/components/xv-tag/xv-tag.css +192 -0
  136. package/dist/collection/components/xv-tag/xv-tag.js +158 -0
  137. package/dist/collection/components/xv-tag/xv-tag.js.map +1 -0
  138. package/dist/collection/components/xv-text-input/xv-text-input.css +242 -0
  139. package/dist/collection/components/xv-text-input/xv-text-input.js +343 -0
  140. package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -0
  141. package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.css +190 -0
  142. package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +201 -0
  143. package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js.map +1 -0
  144. package/dist/collection/components/xv-tooltip/xv-tooltip.css +107 -0
  145. package/dist/collection/components/xv-tooltip/xv-tooltip.js +162 -0
  146. package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +1 -0
  147. package/dist/collection/index.js +11 -0
  148. package/dist/collection/index.js.map +1 -0
  149. package/dist/collection/scss/xv/images/xv-sprite.svg +1 -0
  150. package/dist/collection/scss/xv/sprite/images/xv-sprite.svg +1 -0
  151. package/dist/collection/types/enum.js +15 -0
  152. package/dist/collection/types/enum.js.map +1 -0
  153. package/dist/{xv-webcomponents/utils-1tk8kwKx.js → collection/utils/utils.js} +7 -11
  154. package/dist/collection/utils/utils.js.map +1 -0
  155. package/dist/esm/app-globals-DQuL1Twl.js +6 -0
  156. package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
  157. package/dist/esm/index-DLYJiP99.js +1907 -0
  158. package/dist/esm/index-DLYJiP99.js.map +1 -0
  159. package/dist/esm/index-NvoCloOY.js +31 -0
  160. package/dist/esm/index-NvoCloOY.js.map +1 -0
  161. package/dist/esm/index.js +4 -0
  162. package/dist/esm/index.js.map +1 -0
  163. package/dist/esm/loader.js +14 -0
  164. package/dist/esm/loader.js.map +1 -0
  165. package/dist/esm/xv-accordion-v2_34.entry.js +3507 -0
  166. package/dist/esm/xv-accordion-v2_34.entry.js.map +1 -0
  167. package/dist/esm/xv-breadcrumbs-v2.entry.js +18 -0
  168. package/dist/esm/xv-breadcrumbs-v2.entry.js.map +1 -0
  169. package/dist/esm/xv-webcomponents.js +24 -0
  170. package/dist/esm/xv-webcomponents.js.map +1 -0
  171. package/dist/index.cjs.js +1 -0
  172. package/dist/index.js +1 -0
  173. package/dist/types/components/xv-button/xv-button.d.ts +21 -12
  174. package/dist/types/components/xv-data-table/_vars.d.ts +11 -0
  175. package/dist/types/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.d.ts +15 -0
  176. package/dist/types/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.d.ts +9 -0
  177. package/dist/types/components/xv-data-table/xv-data-table-row/xv-data-table-row.d.ts +25 -0
  178. package/dist/types/components/xv-data-table/xv-data-table.d.ts +10 -0
  179. package/dist/types/components/xv-dropdown/xv-dropdown.d.ts +1 -0
  180. package/dist/types/components/xv-file-uploader/_vars.d.ts +4 -0
  181. package/dist/types/components/xv-file-uploader/xv-file-uploader.d.ts +39 -0
  182. package/dist/types/components/xv-header/xv-header.d.ts +0 -2
  183. package/dist/types/components/xv-modal/xv-modal.d.ts +4 -0
  184. package/dist/types/components/xv-number-input/xv-number-input.d.ts +26 -0
  185. package/dist/types/components/xv-table/_vars.d.ts +1 -5
  186. package/dist/types/components/xv-table/xv-table-cell/xv-table-cell.d.ts +2 -1
  187. package/dist/types/components/xv-text-input/xv-text-input.d.ts +11 -11
  188. package/dist/types/components/xv-toggle-tip/xv-toggle-tip.d.ts +19 -0
  189. package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +12 -8
  190. package/dist/types/components.d.ts +537 -105
  191. package/dist/types/stencil-public-runtime.d.ts +1 -1
  192. package/dist/types/types/enum.d.ts +5 -0
  193. package/dist/xv-webcomponents/index.esm.js +1 -13
  194. package/dist/xv-webcomponents/index.esm.js.map +1 -1
  195. package/dist/xv-webcomponents/loader.esm.js.map +1 -1
  196. package/dist/xv-webcomponents/p-851c4716.entry.js +2 -0
  197. package/dist/xv-webcomponents/p-851c4716.entry.js.map +1 -0
  198. package/dist/xv-webcomponents/p-DLYJiP99.js +3 -0
  199. package/dist/xv-webcomponents/p-DLYJiP99.js.map +1 -0
  200. package/dist/xv-webcomponents/p-DQuL1Twl.js +2 -0
  201. package/dist/xv-webcomponents/p-DQuL1Twl.js.map +1 -0
  202. package/dist/xv-webcomponents/p-NvoCloOY.js +2 -0
  203. package/dist/xv-webcomponents/p-NvoCloOY.js.map +1 -0
  204. package/dist/xv-webcomponents/p-d96c1b6a.entry.js +2 -0
  205. package/dist/xv-webcomponents/p-d96c1b6a.entry.js.map +1 -0
  206. package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.esm.js.map +1 -1
  207. package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -49
  208. package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
  209. package/loader/cdn.js +1 -0
  210. package/loader/index.cjs.js +1 -0
  211. package/loader/index.d.ts +24 -0
  212. package/loader/index.es2017.js +1 -0
  213. package/loader/index.js +2 -0
  214. package/package.json +53 -53
  215. package/dist/types/components/xv-text-input/_vars.d.ts +0 -5
  216. package/dist/types/components/xv-user-menu/interfaces/MenuItem.d.ts +0 -0
  217. package/dist/types/components/xv-user-menu/xv-user-menu.d.ts +0 -41
  218. package/dist/xv-webcomponents/_vars-FbbDWn6g.js +0 -13
  219. package/dist/xv-webcomponents/_vars-FbbDWn6g.js.map +0 -1
  220. package/dist/xv-webcomponents/_vars-IZ3lIQzL.js.map +0 -1
  221. package/dist/xv-webcomponents/enum-DTBL51oP.js +0 -13
  222. package/dist/xv-webcomponents/enum-DTBL51oP.js.map +0 -1
  223. package/dist/xv-webcomponents/index-rZAC0WRb.js +0 -4238
  224. package/dist/xv-webcomponents/index-rZAC0WRb.js.map +0 -1
  225. package/dist/xv-webcomponents/utils-1tk8kwKx.js.map +0 -1
  226. package/dist/xv-webcomponents/xv-accordion-v2-item.entry.esm.js.map +0 -1
  227. package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js +0 -36
  228. package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js.map +0 -1
  229. package/dist/xv-webcomponents/xv-accordion-v2.entry.esm.js.map +0 -1
  230. package/dist/xv-webcomponents/xv-accordion-v2.entry.js +0 -41
  231. package/dist/xv-webcomponents/xv-accordion-v2.entry.js.map +0 -1
  232. package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js +0 -18
  233. package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js.map +0 -1
  234. package/dist/xv-webcomponents/xv-button-v2.entry.esm.js.map +0 -1
  235. package/dist/xv-webcomponents/xv-button-v2.entry.js +0 -35
  236. package/dist/xv-webcomponents/xv-button-v2.entry.js.map +0 -1
  237. package/dist/xv-webcomponents/xv-card-v2.entry.esm.js.map +0 -1
  238. package/dist/xv-webcomponents/xv-card-v2.entry.js +0 -19
  239. package/dist/xv-webcomponents/xv-card-v2.entry.js.map +0 -1
  240. package/dist/xv-webcomponents/xv-checkbox-v2.entry.esm.js.map +0 -1
  241. package/dist/xv-webcomponents/xv-checkbox-v2.entry.js +0 -106
  242. package/dist/xv-webcomponents/xv-checkbox-v2.entry.js.map +0 -1
  243. package/dist/xv-webcomponents/xv-dropdown-v2-item.entry.esm.js.map +0 -1
  244. package/dist/xv-webcomponents/xv-dropdown-v2-item.entry.js +0 -36
  245. package/dist/xv-webcomponents/xv-dropdown-v2-item.entry.js.map +0 -1
  246. package/dist/xv-webcomponents/xv-dropdown-v2.entry.esm.js.map +0 -1
  247. package/dist/xv-webcomponents/xv-dropdown-v2.entry.js +0 -136
  248. package/dist/xv-webcomponents/xv-dropdown-v2.entry.js.map +0 -1
  249. package/dist/xv-webcomponents/xv-footer.entry.esm.js.map +0 -1
  250. package/dist/xv-webcomponents/xv-footer.entry.js +0 -30
  251. package/dist/xv-webcomponents/xv-footer.entry.js.map +0 -1
  252. package/dist/xv-webcomponents/xv-header.entry.esm.js.map +0 -1
  253. package/dist/xv-webcomponents/xv-header.entry.js +0 -81
  254. package/dist/xv-webcomponents/xv-header.entry.js.map +0 -1
  255. package/dist/xv-webcomponents/xv-link-v2.entry.esm.js.map +0 -1
  256. package/dist/xv-webcomponents/xv-link-v2.entry.js +0 -27
  257. package/dist/xv-webcomponents/xv-link-v2.entry.js.map +0 -1
  258. package/dist/xv-webcomponents/xv-loader-v2.entry.esm.js.map +0 -1
  259. package/dist/xv-webcomponents/xv-loader-v2.entry.js +0 -33
  260. package/dist/xv-webcomponents/xv-loader-v2.entry.js.map +0 -1
  261. package/dist/xv-webcomponents/xv-login-modal.entry.esm.js.map +0 -1
  262. package/dist/xv-webcomponents/xv-login-modal.entry.js +0 -89
  263. package/dist/xv-webcomponents/xv-login-modal.entry.js.map +0 -1
  264. package/dist/xv-webcomponents/xv-modal-v2.entry.esm.js.map +0 -1
  265. package/dist/xv-webcomponents/xv-modal-v2.entry.js +0 -78
  266. package/dist/xv-webcomponents/xv-modal-v2.entry.js.map +0 -1
  267. package/dist/xv-webcomponents/xv-notification-v2.entry.esm.js.map +0 -1
  268. package/dist/xv-webcomponents/xv-notification-v2.entry.js +0 -50
  269. package/dist/xv-webcomponents/xv-notification-v2.entry.js.map +0 -1
  270. package/dist/xv-webcomponents/xv-overflow-menu-v2-item.entry.esm.js.map +0 -1
  271. package/dist/xv-webcomponents/xv-overflow-menu-v2-item.entry.js +0 -32
  272. package/dist/xv-webcomponents/xv-overflow-menu-v2-item.entry.js.map +0 -1
  273. package/dist/xv-webcomponents/xv-overflow-menu-v2.entry.esm.js.map +0 -1
  274. package/dist/xv-webcomponents/xv-overflow-menu-v2.entry.js +0 -74
  275. package/dist/xv-webcomponents/xv-overflow-menu-v2.entry.js.map +0 -1
  276. package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.esm.js.map +0 -1
  277. package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js +0 -21
  278. package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js.map +0 -1
  279. package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.esm.js.map +0 -1
  280. package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js +0 -75
  281. package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js.map +0 -1
  282. package/dist/xv-webcomponents/xv-tab-v2.entry.esm.js.map +0 -1
  283. package/dist/xv-webcomponents/xv-tab-v2.entry.js +0 -21
  284. package/dist/xv-webcomponents/xv-tab-v2.entry.js.map +0 -1
  285. package/dist/xv-webcomponents/xv-table-v2-cell.entry.esm.js.map +0 -1
  286. package/dist/xv-webcomponents/xv-table-v2-cell.entry.js +0 -41
  287. package/dist/xv-webcomponents/xv-table-v2-cell.entry.js.map +0 -1
  288. package/dist/xv-webcomponents/xv-table-v2-expand.entry.esm.js.map +0 -1
  289. package/dist/xv-webcomponents/xv-table-v2-expand.entry.js +0 -29
  290. package/dist/xv-webcomponents/xv-table-v2-expand.entry.js.map +0 -1
  291. package/dist/xv-webcomponents/xv-table-v2-row.entry.esm.js.map +0 -1
  292. package/dist/xv-webcomponents/xv-table-v2-row.entry.js +0 -66
  293. package/dist/xv-webcomponents/xv-table-v2-row.entry.js.map +0 -1
  294. package/dist/xv-webcomponents/xv-table-v2.entry.esm.js.map +0 -1
  295. package/dist/xv-webcomponents/xv-table-v2.entry.js +0 -53
  296. package/dist/xv-webcomponents/xv-table-v2.entry.js.map +0 -1
  297. package/dist/xv-webcomponents/xv-tabs-v2.entry.esm.js.map +0 -1
  298. package/dist/xv-webcomponents/xv-tabs-v2.entry.js +0 -109
  299. package/dist/xv-webcomponents/xv-tabs-v2.entry.js.map +0 -1
  300. package/dist/xv-webcomponents/xv-tag-v2.entry.esm.js.map +0 -1
  301. package/dist/xv-webcomponents/xv-tag-v2.entry.js +0 -29
  302. package/dist/xv-webcomponents/xv-tag-v2.entry.js.map +0 -1
  303. package/dist/xv-webcomponents/xv-text-input-v2.entry.esm.js.map +0 -1
  304. package/dist/xv-webcomponents/xv-text-input-v2.entry.js +0 -65
  305. package/dist/xv-webcomponents/xv-text-input-v2.entry.js.map +0 -1
  306. package/dist/xv-webcomponents/xv-tooltip-v2.entry.esm.js.map +0 -1
  307. package/dist/xv-webcomponents/xv-tooltip-v2.entry.js +0 -24
  308. package/dist/xv-webcomponents/xv-tooltip-v2.entry.js.map +0 -1
  309. package/dist/xv-webcomponents/xv-user-menu.entry.esm.js.map +0 -1
  310. package/dist/xv-webcomponents/xv-user-menu.entry.js +0 -43
  311. package/dist/xv-webcomponents/xv-user-menu.entry.js.map +0 -1
@@ -1 +0,0 @@
1
- {"file":"xv-progress-indicator-v2.entry.esm.js","mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,i8BAAi8B;;MCUn9B,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAC7C;;;;AAIG;AACK,QAAA,IAAA,CAAA,OAAO,GAAsB,iBAAiB,CAAC,OAAO;AAC9D;;;;AAIG;AACK,QAAA,IAAA,CAAA,IAAI,GAAa,QAAQ,CAAC,EAAE;AA+CrC;;IA3CC,gBAAgB,GAAA;AACd,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ;AAC9B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB;AAC5C,QAAA,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU;AAExC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE;QAElC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;;AAC7B,YAAA,MAAM,iBAAiB,GAAG,KAAK,GAAG,eAAe;AACjD,YAAA,IAAI,MAA4B;YAChC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,iBAAiB,IAAI,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CACtE,GAAG,GAAG;AAEP,YAAA,IAAI,aAAa,IAAI,GAAG,EAAE;AACxB,gBAAA,MAAM,GAAG,oBAAoB,CAAC,IAAI;;AAC7B,iBAAA,IAAI,aAAa,GAAG,CAAC,EAAE;AAC5B,gBAAA,MAAM,GAAG,oBAAoB,CAAC,WAAW;;iBACpC;AACL,gBAAA,MAAM,GAAG,oBAAoB,CAAC,UAAU;;;AAIzC,YAAA,IAAoB,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC;;YAGpD,MAAM,IAAI,GAAG,CAAC,EAAA,GAAA,IAAoB,aAApB,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAkB,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAAC,OAAO,CAAgB;AACrF,YAAA,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,aAAa,GAAG;AAClD,SAAC,CAAC;;;IAIJ,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,EAAA,EACpF,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;","names":[],"sources":["src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator-v2&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx"],"sourcesContent":["$prefix: xv-progress-indicator-v2;\r\n\r\n:host {\r\n --progress-indicator-icon-size: 22px;\r\n --progress-indicator-font-size: var(--fz-md, 14px);\r\n\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n overflow-x: auto;\r\n}\r\n\r\n:host([variant=\"horizontal\"]) {\r\n ::slotted(#{$prefix}-item) {\r\n flex-direction: row;\r\n column-gap: var(--gap-xs, 8px);\r\n justify-content: flex-start;\r\n padding-left: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n }\r\n}\r\n\r\n:host([size=\"xs\"]) {\r\n --progress-indicator-icon-size: 14px;\r\n --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"sm\"]) {\r\n --progress-indicator-icon-size: 16px;\r\n --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"md\"]) {\r\n --progress-indicator-icon-size: 22px;\r\n --progress-indicator-font-size: var(--fz-md, 14px);\r\n}\r\n:host([size=\"lg\"]) {\r\n --progress-indicator-icon-size: 24px;\r\n --progress-indicator-font-size: var(--fz-lg, 18px);\r\n}\r\n:host([size=\"xl\"]) {\r\n --progress-indicator-icon-size: 32px;\r\n --progress-indicator-font-size: var(--fz-xl, 20px);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\nimport { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { forEach } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-v2',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n /**\r\n * Current progress\r\n * from 0 to 100\r\n */\r\n @Prop({ reflect: true }) progress: number = 0;\r\n /**\r\n * Progress variant\r\n * enum PROGRESS_VARIANTS\r\n * possible option `horizontal`\r\n */\r\n @Prop() variant: PROGRESS_VARIANTS = PROGRESS_VARIANTS.DEFAULT;\r\n /**\r\n * Size of progress\r\n * enum SIZE_VAR\r\n * possible options `XS | SM | MD | LG | XL`\r\n */\r\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n forEach(items, (item, index) => {\r\n const itemProgressStart = index * progressPerItem;\r\n let status: PROGRESS_ITEM_STATUS;\r\n const localProgress = Math.min(\r\n Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1\r\n ) * 100;\r\n\r\n if (localProgress >= 100) {\r\n status = PROGRESS_ITEM_STATUS.DONE;\r\n } else if (localProgress > 0) {\r\n status = PROGRESS_ITEM_STATUS.IN_PROGRESS;\r\n } else {\r\n status = PROGRESS_ITEM_STATUS.NO_STARTED;\r\n }\r\n\r\n // Set item current status\r\n (item as HTMLElement).setAttribute('status', status);\r\n\r\n // Update progress line\r\n const line = (item as HTMLElement)?.shadowRoot?.querySelector('.line') as HTMLElement;\r\n if (line) line.style.width = `${localProgress}%`;\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host variant={this.variant} size={this.size} class={{ 'xv-progress-indicator': true }}>\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-tab-v2.entry.esm.js","sources":["src/components/xv-tabs/xv-tab/xv-tab.scss?tag=xv-tab-v2&encapsulation=shadow","src/components/xv-tabs/xv-tab/xv-tab.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n\r\n:host([loading]) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../../types/enum';\r\n\r\n@Component({\r\n tag: 'xv-tab-v2',\r\n styleUrl: 'xv-tab.scss',\r\n shadow: true,\r\n})\r\nexport class XvTab {\r\n @Prop({ reflect: true }) label: string;\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n @Prop({ reflect: true }) loading: boolean = false;\r\n @Prop() name?: number | string;\r\n\r\n render() {\r\n return (\r\n <Host disabled={this.disabled} name={this.name}>\r\n {this.loading ? <xv-loader-v2 size={SIZE_VAR.LG} /> : <slot />}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,+GAA+G;;MCQnH,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAUlD;IAPC,MAAM,GAAA;QACJ,QACA,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC3C,EAAA,IAAI,CAAC,OAAO,GAAG,CAAc,CAAA,cAAA,EAAA,EAAA,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAA,CAAI,GAAG,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACzD;;;;;;;"}
@@ -1,21 +0,0 @@
1
- import { r as registerInstance, h, d as Host } from './index-rZAC0WRb.js';
2
- import { S as SIZE_VAR } from './enum-DTBL51oP.js';
3
-
4
- const xvTabCss = ":host{display:block}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:200px}";
5
-
6
- const XvTab = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.disabled = false;
10
- this.loading = false;
11
- }
12
- render() {
13
- return (h(Host, { key: 'ab5626ca8b1b80041239573393b4a7c0b67fed1f', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
14
- }
15
- };
16
- XvTab.style = xvTabCss;
17
-
18
- export { XvTab as xv_tab_v2 };
19
- //# sourceMappingURL=xv-tab-v2.entry.esm.js.map
20
-
21
- //# sourceMappingURL=xv-tab-v2.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"xv-tab-v2.entry.esm.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+GAA+G;;MCQnH,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAUlD;IAPC,MAAM,GAAA;QACJ,QACA,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAC3C,EAAA,IAAI,CAAC,OAAO,GAAG,CAAc,CAAA,cAAA,EAAA,EAAA,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAA,CAAI,GAAG,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACzD;;;;;;;","names":[],"sources":["src/components/xv-tabs/xv-tab/xv-tab.scss?tag=xv-tab-v2&encapsulation=shadow","src/components/xv-tabs/xv-tab/xv-tab.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n\r\n:host([loading]) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 200px;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../../types/enum';\r\n\r\n@Component({\r\n tag: 'xv-tab-v2',\r\n styleUrl: 'xv-tab.scss',\r\n shadow: true,\r\n})\r\nexport class XvTab {\r\n @Prop({ reflect: true }) label: string;\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n @Prop({ reflect: true }) loading: boolean = false;\r\n @Prop() name?: number | string;\r\n\r\n render() {\r\n return (\r\n <Host disabled={this.disabled} name={this.name}>\r\n {this.loading ? <xv-loader-v2 size={SIZE_VAR.LG} /> : <slot />}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-table-v2-cell.entry.esm.js","sources":["src/components/xv-table/xv-table-cell/xv-table-cell.scss?tag=xv-table-v2-cell&encapsulation=shadow","src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"sourcesContent":[":host {\r\n white-space: nowrap;\r\n\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n padding: var(--xv-table-padding-y) var(--xv-table-padding-x);\r\n color: var(--text-primary, #333);\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 1.2;\r\n letter-spacing: 0.16px;\r\n transition: .25s ease-in-out background-color;\r\n}\r\n\r\n:host([multiline]) {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n white-space: initial;\r\n padding-bottom: 1px; // overflow some symbols on bottom\r\n padding-top: 0;\r\n line-height: 1.2;\r\n}\r\n\r\n// region Cell Align\r\n:host([align=\"left\"]) {\r\n text-align: left;\r\n}\r\n:host([align=\"right\"]) {\r\n text-align: right;\r\n}\r\n:host([align=\"center\"]) {\r\n text-align: center;\r\n}\r\n// endregion\r\n\r\n// region Sorting styles\r\n:host([sort]) {\r\n position: relative;\r\n cursor: pointer;\r\n user-select: none;\r\n &:before, &:after {\r\n font-size: 12px;\r\n line-height: 10px;\r\n display: inline-flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n right: 8px;\r\n pointer-events: none;\r\n transition: 350ms ease-in-out opacity;\r\n opacity: 0;\r\n }\r\n\r\n &:before {\r\n content: \"▲\";\r\n top: 50%;\r\n transform: translateY(calc(-50% - 5px));\r\n }\r\n\r\n &::after {\r\n content: \"▼\";\r\n top: 50%;\r\n transform: translateY(calc(-50% + 5px));\r\n }\r\n}\r\n:host([sort]:hover) {\r\n background-color: var(--layer-accent-hover-01, #E3E3E3);\r\n &::before, &::after {\r\n opacity: 1;\r\n }\r\n}\r\n:host([sort=\"asc\"]) {\r\n background-color: var(--layer-accent-active-01, #D1D1D1);\r\n &::before {\r\n opacity: 1;\r\n }\r\n\r\n &::after {\r\n display: none;\r\n }\r\n}\r\n:host([sort=\"desc\"]) {\r\n background-color: var(--layer-accent-active-01, #D1D1D1);\r\n &::before {\r\n display: none;\r\n }\r\n\r\n &::after {\r\n opacity: 1;\r\n }\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { XV_SORT_DIR, XVTableSortDto } from '../_vars';\r\nimport { forEach, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-cell',\r\n styleUrl: 'xv-table-cell.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableCell {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true }) multiline?: boolean;\r\n @Prop({ reflect: true, mutable: true }) name?: string;\r\n @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\r\n @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\r\n @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XVTableSortDto>;\r\n\r\n @Listen('click')\r\n handleSort() {\r\n if (this.sort === undefined) return;\r\n let sort: XV_SORT_DIR | '' = this.sort;\r\n if (this.sort === '') sort = XV_SORT_DIR.NONE;\r\n\r\n this.sort = sort === XV_SORT_DIR.NONE ?\r\n XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?\r\n XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;\r\n\r\n forEach(this.el.parentElement.children, (cell) => {\r\n if (cell !== this.el && cell.hasAttribute('sort')) {\r\n cell.setAttribute('sort', 'none');\r\n }\r\n });\r\n\r\n if (!this.name) this.name = uidGenerator();\r\n this.sortChange.emit({ name: this.name, value: this.sort });\r\n };\r\n\r\n render() {\r\n return (\r\n <Host><slot /></Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,+/CAA+/C;;MCSzgD,WAAW,GAAA,MAAA;;;;;IAStB,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE;AAC7B,QAAA,IAAI,IAAI,GAAqB,IAAI,CAAC,IAAI;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AAAE,YAAA,IAAI,GAAG,WAAW,CAAC,IAAI;QAE7C,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,WAAW,CAAC,IAAI;YACnC,WAAW,CAAC,GAAG,GAAG,IAAI,KAAK,WAAW,CAAC,GAAG;YACxC,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAEvC,QAAA,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAI;AAC/C,YAAA,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;;AAErC,SAAC,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE;AAC1C,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO;;;;;;;;"}
@@ -1,41 +0,0 @@
1
- import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
2
- import { b as XV_SORT_DIR } from './_vars-FbbDWn6g.js';
3
- import { a as forEach, u as uidGenerator } from './utils-1tk8kwKx.js';
4
-
5
- const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([multiline]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:initial;padding-bottom:1px;padding-top:0;line-height:1.2}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
6
-
7
- const XvTableCell = class {
8
- constructor(hostRef) {
9
- registerInstance(this, hostRef);
10
- this.sortChange = createEvent(this, "sortChange", 7);
11
- }
12
- handleSort() {
13
- if (this.sort === undefined)
14
- return;
15
- let sort = this.sort;
16
- if (this.sort === '')
17
- sort = XV_SORT_DIR.NONE;
18
- this.sort = sort === XV_SORT_DIR.NONE ?
19
- XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
20
- XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
21
- forEach(this.el.parentElement.children, (cell) => {
22
- if (cell !== this.el && cell.hasAttribute('sort')) {
23
- cell.setAttribute('sort', 'none');
24
- }
25
- });
26
- if (!this.name)
27
- this.name = uidGenerator();
28
- this.sortChange.emit({ name: this.name, value: this.sort });
29
- }
30
- ;
31
- render() {
32
- return (h(Host, { key: '3b51796954b9cab437fb8ae086c821ea2b89924a' }, h("slot", { key: '8e51e4891bc18dfd86e51ad0de0fadd2dd2b150e' })));
33
- }
34
- get el() { return getElement(this); }
35
- };
36
- XvTableCell.style = xvTableCellCss;
37
-
38
- export { XvTableCell as xv_table_v2_cell };
39
- //# sourceMappingURL=xv-table-v2-cell.entry.esm.js.map
40
-
41
- //# sourceMappingURL=xv-table-v2-cell.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"xv-table-v2-cell.entry.esm.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,+/CAA+/C;;MCSzgD,WAAW,GAAA,MAAA;;;;;IAStB,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE;AAC7B,QAAA,IAAI,IAAI,GAAqB,IAAI,CAAC,IAAI;AACtC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AAAE,YAAA,IAAI,GAAG,WAAW,CAAC,IAAI;QAE7C,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,WAAW,CAAC,IAAI;YACnC,WAAW,CAAC,GAAG,GAAG,IAAI,KAAK,WAAW,CAAC,GAAG;YACxC,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAEvC,QAAA,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAI;AAC/C,YAAA,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;;AAErC,SAAC,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE;AAC1C,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO;;;;;;;;","names":[],"sources":["src/components/xv-table/xv-table-cell/xv-table-cell.scss?tag=xv-table-v2-cell&encapsulation=shadow","src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"sourcesContent":[":host {\r\n white-space: nowrap;\r\n\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n padding: var(--xv-table-padding-y) var(--xv-table-padding-x);\r\n color: var(--text-primary, #333);\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 1.2;\r\n letter-spacing: 0.16px;\r\n transition: .25s ease-in-out background-color;\r\n}\r\n\r\n:host([multiline]) {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n white-space: initial;\r\n padding-bottom: 1px; // overflow some symbols on bottom\r\n padding-top: 0;\r\n line-height: 1.2;\r\n}\r\n\r\n// region Cell Align\r\n:host([align=\"left\"]) {\r\n text-align: left;\r\n}\r\n:host([align=\"right\"]) {\r\n text-align: right;\r\n}\r\n:host([align=\"center\"]) {\r\n text-align: center;\r\n}\r\n// endregion\r\n\r\n// region Sorting styles\r\n:host([sort]) {\r\n position: relative;\r\n cursor: pointer;\r\n user-select: none;\r\n &:before, &:after {\r\n font-size: 12px;\r\n line-height: 10px;\r\n display: inline-flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n right: 8px;\r\n pointer-events: none;\r\n transition: 350ms ease-in-out opacity;\r\n opacity: 0;\r\n }\r\n\r\n &:before {\r\n content: \"▲\";\r\n top: 50%;\r\n transform: translateY(calc(-50% - 5px));\r\n }\r\n\r\n &::after {\r\n content: \"▼\";\r\n top: 50%;\r\n transform: translateY(calc(-50% + 5px));\r\n }\r\n}\r\n:host([sort]:hover) {\r\n background-color: var(--layer-accent-hover-01, #E3E3E3);\r\n &::before, &::after {\r\n opacity: 1;\r\n }\r\n}\r\n:host([sort=\"asc\"]) {\r\n background-color: var(--layer-accent-active-01, #D1D1D1);\r\n &::before {\r\n opacity: 1;\r\n }\r\n\r\n &::after {\r\n display: none;\r\n }\r\n}\r\n:host([sort=\"desc\"]) {\r\n background-color: var(--layer-accent-active-01, #D1D1D1);\r\n &::before {\r\n display: none;\r\n }\r\n\r\n &::after {\r\n opacity: 1;\r\n }\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { XV_SORT_DIR, XVTableSortDto } from '../_vars';\r\nimport { forEach, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-cell',\r\n styleUrl: 'xv-table-cell.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableCell {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true }) multiline?: boolean;\r\n @Prop({ reflect: true, mutable: true }) name?: string;\r\n @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\r\n @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\r\n @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XVTableSortDto>;\r\n\r\n @Listen('click')\r\n handleSort() {\r\n if (this.sort === undefined) return;\r\n let sort: XV_SORT_DIR | '' = this.sort;\r\n if (this.sort === '') sort = XV_SORT_DIR.NONE;\r\n\r\n this.sort = sort === XV_SORT_DIR.NONE ?\r\n XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?\r\n XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;\r\n\r\n forEach(this.el.parentElement.children, (cell) => {\r\n if (cell !== this.el && cell.hasAttribute('sort')) {\r\n cell.setAttribute('sort', 'none');\r\n }\r\n });\r\n\r\n if (!this.name) this.name = uidGenerator();\r\n this.sortChange.emit({ name: this.name, value: this.sort });\r\n };\r\n\r\n render() {\r\n return (\r\n <Host><slot /></Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-table-v2-expand.entry.esm.js","sources":["src/components/xv-table/xv-table-expand/xv-table-expand.scss?tag=xv-table-v2-expand&encapsulation=shadow","src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n transition: .25s ease-in-out background-color;\r\n\r\n .expand-btn {\r\n z-index: 9;\r\n position: absolute;\r\n left: max(10px, var(--xv-table-padding-x));\r\n top: max(2px, calc(var(--xv-table-padding-y) + 2px));\r\n background-color: transparent;\r\n cursor: pointer;\r\n outline: none;\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n display: block;\r\n width: 8.5px;\r\n height: 8.5px;\r\n border-top: none;\r\n border-left: none;\r\n border-right: 2px solid var(--icon-primary, #333);\r\n border-bottom: 2px solid var(--icon-primary, #333);\r\n transform: rotate(45deg);\r\n transform-origin: center center;\r\n transition: .2s ease-in-out transform;\r\n &:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n }\r\n &.open {\r\n transform: rotate(-135deg);\r\n }\r\n }\r\n\r\n .expandableContent {\r\n overflow: hidden;\r\n margin: 0;\r\n padding: 0;\r\n max-height: 0;\r\n transition: 250ms ease max-height;\r\n &.open {\r\n max-height: 600px;\r\n }\r\n }\r\n\r\n ::slotted([slot=\"expandable\"]) {\r\n display: grid;\r\n align-items: center;\r\n }\r\n\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted([slot=\"expandable\"]) {\r\n padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n }\r\n\r\n ::slotted([disabled]) {\r\n pointer-events: none;\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n user-select: none;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\nimport { XV_EXPANDABLE_KEY } from '../_vars';\r\nimport { setAttr } from '../../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-expand',\r\n styleUrl: 'xv-table-expand.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableExpand {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n private handleExpand = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={{ 'expand-btn': true, open: this.open }}\r\n disabled={this.disabled}\r\n onClick={this.handleExpand}\r\n />\r\n <slot name={XV_EXPANDABLE_KEY} />\r\n\r\n <div class={{ expandableContent: true, open: this.open }}><slot /></div>\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidLoad() {\r\n setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,4nCAA4nC;;MCSxoC,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO0C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACxB,SAAC;AAoBF;IAlBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,iBAAiB,EAAI,CAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAAE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAM,CACnE;;IAIX,gBAAgB,GAAA;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;;;;;;;;"}
@@ -1,29 +0,0 @@
1
- import { r as registerInstance, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
2
- import { X as XV_EXPANDABLE_KEY } from './_vars-FbbDWn6g.js';
3
- import { s as setAttr } from './utils-1tk8kwKx.js';
4
-
5
- const xvTableExpandCss = ":host{display:block;position:relative;transition:0.25s ease-in-out background-color}:host .expand-btn{z-index:9;position:absolute;left:max(10px, var(--xv-table-padding-x));top:max(2px, var(--xv-table-padding-y) + 2px);background-color:transparent;cursor:pointer;outline:none;margin:0;padding:0;box-sizing:border-box;display:block;width:8.5px;height:8.5px;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform}:host .expand-btn:disabled{cursor:not-allowed;opacity:0.5}:host .expand-btn.open{transform:rotate(-135deg)}:host .expandableContent{overflow:hidden;margin:0;padding:0;max-height:0;transition:250ms ease max-height}:host .expandableContent.open{max-height:600px}:host ::slotted([slot=expandable]){display:grid;align-items:center}:host ::slotted(xv-table-v2-row),:host ::slotted([slot=expandable]){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host ::slotted([disabled]){pointer-events:none;opacity:0.4;cursor:not-allowed;user-select:none}";
6
-
7
- const XvTableExpand = class {
8
- constructor(hostRef) {
9
- registerInstance(this, hostRef);
10
- this.open = false;
11
- this.disabled = false;
12
- this.handleExpand = () => {
13
- this.open = !this.open;
14
- };
15
- }
16
- render() {
17
- return (h(Host, { key: '5748c96eacb85192d08c2aa8fcf235d404d79221' }, h("button", { key: 'da8dfde6a041cc0e6f69e3b3cd8974731e583d1d', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '7f8c9de9e8d6562b34f10844cc5f90f17ce301bc', name: XV_EXPANDABLE_KEY }), h("div", { key: '0742764a8badfb38c7ea2fffca5c601904b62353', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'f8156b47f9feeb64005aef91b606ebb4a66072fb' }))));
18
- }
19
- componentDidLoad() {
20
- setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
21
- }
22
- get el() { return getElement(this); }
23
- };
24
- XvTableExpand.style = xvTableExpandCss;
25
-
26
- export { XvTableExpand as xv_table_v2_expand };
27
- //# sourceMappingURL=xv-table-v2-expand.entry.esm.js.map
28
-
29
- //# sourceMappingURL=xv-table-v2-expand.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"xv-table-v2-expand.entry.esm.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,4nCAA4nC;;MCSxoC,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAO0C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACxB,SAAC;AAoBF;IAlBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,iBAAiB,EAAI,CAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAAE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAM,CACnE;;IAIX,gBAAgB,GAAA;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;;;;;;;;","names":[],"sources":["src/components/xv-table/xv-table-expand/xv-table-expand.scss?tag=xv-table-v2-expand&encapsulation=shadow","src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n transition: .25s ease-in-out background-color;\r\n\r\n .expand-btn {\r\n z-index: 9;\r\n position: absolute;\r\n left: max(10px, var(--xv-table-padding-x));\r\n top: max(2px, calc(var(--xv-table-padding-y) + 2px));\r\n background-color: transparent;\r\n cursor: pointer;\r\n outline: none;\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n display: block;\r\n width: 8.5px;\r\n height: 8.5px;\r\n border-top: none;\r\n border-left: none;\r\n border-right: 2px solid var(--icon-primary, #333);\r\n border-bottom: 2px solid var(--icon-primary, #333);\r\n transform: rotate(45deg);\r\n transform-origin: center center;\r\n transition: .2s ease-in-out transform;\r\n &:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n }\r\n &.open {\r\n transform: rotate(-135deg);\r\n }\r\n }\r\n\r\n .expandableContent {\r\n overflow: hidden;\r\n margin: 0;\r\n padding: 0;\r\n max-height: 0;\r\n transition: 250ms ease max-height;\r\n &.open {\r\n max-height: 600px;\r\n }\r\n }\r\n\r\n ::slotted([slot=\"expandable\"]) {\r\n display: grid;\r\n align-items: center;\r\n }\r\n\r\n ::slotted(#{$tag-name}-row),\r\n ::slotted([slot=\"expandable\"]) {\r\n padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n }\r\n\r\n ::slotted([disabled]) {\r\n pointer-events: none;\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n user-select: none;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\nimport { XV_EXPANDABLE_KEY } from '../_vars';\r\nimport { setAttr } from '../../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-expand',\r\n styleUrl: 'xv-table-expand.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableExpand {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n private handleExpand = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={{ 'expand-btn': true, open: this.open }}\r\n disabled={this.disabled}\r\n onClick={this.handleExpand}\r\n />\r\n <slot name={XV_EXPANDABLE_KEY} />\r\n\r\n <div class={{ expandableContent: true, open: this.open }}><slot /></div>\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidLoad() {\r\n setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-table-v2-row.entry.esm.js","sources":["src/components/xv-table/xv-table-row/xv-table-row.scss?tag=xv-table-v2-row&encapsulation=shadow","src/components/xv-table/xv-table-row/xv-table-row.tsx"],"sourcesContent":[":host {\r\n display: grid;\r\n grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n border-bottom: 1px solid #E3E3E3;\r\n border-right: 1px solid #E3E3E3;\r\n border-left: 1px solid #E3E3E3;\r\n min-height: var(--xv-table-min-height);\r\n align-items: center;\r\n align-content: center;\r\n transition: .25s ease-in-out background-color;\r\n .cell-control {\r\n min-height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n:host([variant]) {\r\n grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n}\r\n\r\n:host([hover]:not([header]):hover) {\r\n background-color: var(--layer-hover-01, #E9E9E9);\r\n}\r\n:host([checked]) {\r\n background-color: var(--layer-selected-01, #E3E3E3);\r\n}\r\n:host([checked]:hover) {\r\n background-color: var(--layer-selected-hover-01, #DADADA);\r\n}\r\n\r\n:host([header]) {\r\n background-color: var(--layer-accent-01, #F7F7F7);\r\n box-shadow: 0 0 0 1px #E3E3E3 inset;\r\n border-bottom: none;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\r\nimport { setAttr, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-row',\r\n styleUrl: 'xv-table-row.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableRow {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\r\n @Event({ eventName: 'checkedChange' }) checkedChange: EventEmitter<SelectRowDto>;\r\n @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\r\n @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\r\n @Prop({ reflect: true }) value?: SelectRowDto['value'];\r\n @Prop({ reflect: true, mutable: true }) hover?: boolean;\r\n @Prop({ reflect: true }) readonly?: boolean;\r\n @Prop({ reflect: true }) required?: boolean;\r\n @Prop({ reflect: true }) disabled?: boolean;\r\n @Prop({ reflect: true }) header?: boolean;\r\n @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\r\n\r\n @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\r\n\r\n @Watch('checked')\r\n checkedChangeHandle() {\r\n if (!this.name) this.name = uidGenerator();\r\n this.checkedChange.emit({\r\n name: this.name,\r\n value: this.value,\r\n checked: this.checked,\r\n partial: this.partial,\r\n header: this.header,\r\n expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n });\r\n }\r\n\r\n private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\r\n if (!checked && this.partial) this.partial = checked;\r\n\r\n if (!this.name) this.name = uidGenerator();\r\n this.selectRow.emit({\r\n name: this.name,\r\n value: this.value,\r\n checked: checked,\r\n partial: this.partial,\r\n header: this.header,\r\n expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n });\r\n };\r\n\r\n private setInitialAttrs() {\r\n if (this.variant || !this.hover) {\r\n const tableEl = this.el.closest(XV_TABLE_TAG);\r\n if (!this.hover) {\r\n this.hover = tableEl.hasAttribute('hover');\r\n }\r\n if (this.variant) {\r\n setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.variant !== undefined && (\r\n <xv-table-v2-cell class=\"cell-control\">\r\n {this.variant === 'checkbox' && (\r\n <xv-checkbox-v2\r\n name={this.name}\r\n partial={this.partial}\r\n checked={this.checked || this.partial}\r\n disabled={this.disabled}\r\n required={this.required}\r\n readonly={this.readonly}\r\n onEventChange={this.checkHandle}\r\n />\r\n )}\r\n {this.variant === 'radio' && (\r\n <input\r\n type=\"radio\"\r\n name={this.name}\r\n checked={this.checked || this.partial}\r\n disabled={this.disabled}\r\n required={this.required}\r\n readonly={this.readonly}\r\n />\r\n )}\r\n </xv-table-v2-cell>\r\n )}\r\n\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n\r\n componentWillLoad() {\r\n this.setInitialAttrs();\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
@@ -1,66 +0,0 @@
1
- import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
2
- import { X as XV_EXPANDABLE_KEY, a as XV_TABLE_TAG } from './_vars-FbbDWn6g.js';
3
- import { u as uidGenerator, s as setAttr } from './utils-1tk8kwKx.js';
4
-
5
- const xvTableRowCss = ":host{display:grid;grid-template-columns:var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));border-bottom:1px solid #E3E3E3;border-right:1px solid #E3E3E3;border-left:1px solid #E3E3E3;min-height:var(--xv-table-min-height);align-items:center;align-content:center;transition:0.25s ease-in-out background-color}:host .cell-control{min-height:20px;display:flex;align-items:center;justify-content:center}:host([variant]){grid-template-columns:minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)))}:host([hover]:not([header]):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host([checked]:hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host([header]){background-color:var(--layer-accent-01, #F7F7F7);box-shadow:0 0 0 1px #E3E3E3 inset;border-bottom:none}";
6
-
7
- const XvTableRow = class {
8
- constructor(hostRef) {
9
- registerInstance(this, hostRef);
10
- this.checkedChange = createEvent(this, "checkedChange", 7);
11
- this.selectRow = createEvent(this, "selectRow", 7);
12
- this.checkHandle = ({ detail: checked }) => {
13
- if (!checked && this.partial)
14
- this.partial = checked;
15
- if (!this.name)
16
- this.name = uidGenerator();
17
- this.selectRow.emit({
18
- name: this.name,
19
- value: this.value,
20
- checked: checked,
21
- partial: this.partial,
22
- header: this.header,
23
- expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
24
- });
25
- };
26
- }
27
- checkedChangeHandle() {
28
- if (!this.name)
29
- this.name = uidGenerator();
30
- this.checkedChange.emit({
31
- name: this.name,
32
- value: this.value,
33
- checked: this.checked,
34
- partial: this.partial,
35
- header: this.header,
36
- expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
37
- });
38
- }
39
- setInitialAttrs() {
40
- if (this.variant || !this.hover) {
41
- const tableEl = this.el.closest(XV_TABLE_TAG);
42
- if (!this.hover) {
43
- this.hover = tableEl.hasAttribute('hover');
44
- }
45
- if (this.variant) {
46
- setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
47
- }
48
- }
49
- }
50
- render() {
51
- return (h(Host, { key: 'ab205cfccf9f9b4a468b68e50fa8f0e7449460cb' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: 'ff9994f4fda7f7aee4f0f2bad78539e0ef964812', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'b79936b69449328baec1403c9ef7769eb3d1b6a5', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: 'd1826b08cf52e17e145cf31701492aecc848281d', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '09cb29d10905b365a7510efa1f88496b3e03ed02' })));
52
- }
53
- componentWillLoad() {
54
- this.setInitialAttrs();
55
- }
56
- get el() { return getElement(this); }
57
- static get watchers() { return {
58
- "checked": ["checkedChangeHandle"]
59
- }; }
60
- };
61
- XvTableRow.style = xvTableRowCss;
62
-
63
- export { XvTableRow as xv_table_v2_row };
64
- //# sourceMappingURL=xv-table-v2-row.entry.esm.js.map
65
-
66
- //# sourceMappingURL=xv-table-v2-row.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"xv-table-v2-row.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-table/xv-table-row/xv-table-row.scss?tag=xv-table-v2-row&encapsulation=shadow","src/components/xv-table/xv-table-row/xv-table-row.tsx"],"sourcesContent":[":host {\r\n display: grid;\r\n grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n border-bottom: 1px solid #E3E3E3;\r\n border-right: 1px solid #E3E3E3;\r\n border-left: 1px solid #E3E3E3;\r\n min-height: var(--xv-table-min-height);\r\n align-items: center;\r\n align-content: center;\r\n transition: .25s ease-in-out background-color;\r\n .cell-control {\r\n min-height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n:host([variant]) {\r\n grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));\r\n}\r\n\r\n:host([hover]:not([header]):hover) {\r\n background-color: var(--layer-hover-01, #E9E9E9);\r\n}\r\n:host([checked]) {\r\n background-color: var(--layer-selected-01, #E3E3E3);\r\n}\r\n:host([checked]:hover) {\r\n background-color: var(--layer-selected-hover-01, #DADADA);\r\n}\r\n\r\n:host([header]) {\r\n background-color: var(--layer-accent-01, #F7F7F7);\r\n box-shadow: 0 0 0 1px #E3E3E3 inset;\r\n border-bottom: none;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\r\nimport { setAttr, uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-table-v2-row',\r\n styleUrl: 'xv-table-row.scss',\r\n shadow: true,\r\n})\r\nexport class XvTableRow {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\r\n @Event({ eventName: 'checkedChange' }) checkedChange: EventEmitter<SelectRowDto>;\r\n @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\r\n @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\r\n @Prop({ reflect: true }) value?: SelectRowDto['value'];\r\n @Prop({ reflect: true, mutable: true }) hover?: boolean;\r\n @Prop({ reflect: true }) readonly?: boolean;\r\n @Prop({ reflect: true }) required?: boolean;\r\n @Prop({ reflect: true }) disabled?: boolean;\r\n @Prop({ reflect: true }) header?: boolean;\r\n @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\r\n\r\n @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\r\n\r\n @Watch('checked')\r\n checkedChangeHandle() {\r\n if (!this.name) this.name = uidGenerator();\r\n this.checkedChange.emit({\r\n name: this.name,\r\n value: this.value,\r\n checked: this.checked,\r\n partial: this.partial,\r\n header: this.header,\r\n expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n });\r\n }\r\n\r\n private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\r\n if (!checked && this.partial) this.partial = checked;\r\n\r\n if (!this.name) this.name = uidGenerator();\r\n this.selectRow.emit({\r\n name: this.name,\r\n value: this.value,\r\n checked: checked,\r\n partial: this.partial,\r\n header: this.header,\r\n expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\r\n });\r\n };\r\n\r\n private setInitialAttrs() {\r\n if (this.variant || !this.hover) {\r\n const tableEl = this.el.closest(XV_TABLE_TAG);\r\n if (!this.hover) {\r\n this.hover = tableEl.hasAttribute('hover');\r\n }\r\n if (this.variant) {\r\n setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.variant !== undefined && (\r\n <xv-table-v2-cell class=\"cell-control\">\r\n {this.variant === 'checkbox' && (\r\n <xv-checkbox-v2\r\n name={this.name}\r\n partial={this.partial}\r\n checked={this.checked || this.partial}\r\n disabled={this.disabled}\r\n required={this.required}\r\n readonly={this.readonly}\r\n onEventChange={this.checkHandle}\r\n />\r\n )}\r\n {this.variant === 'radio' && (\r\n <input\r\n type=\"radio\"\r\n name={this.name}\r\n checked={this.checked || this.partial}\r\n disabled={this.disabled}\r\n required={this.required}\r\n readonly={this.readonly}\r\n />\r\n )}\r\n </xv-table-v2-cell>\r\n )}\r\n\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n\r\n componentWillLoad() {\r\n this.setInitialAttrs();\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-table-v2.entry.esm.js","sources":["src/components/xv-table/xv-table.scss?tag=xv-table-v2&encapsulation=shadow","src/components/xv-table/xv-table.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n --xv-table-min-height: 51.11px;\r\n --xv-table-padding-x: 16px;\r\n --xv-table-padding-y: 15px;\r\n --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));\r\n\r\n display: block;\r\n .batch-actions {\r\n user-select: none;\r\n pointer-events: none;\r\n position: absolute;\r\n left: 0;\r\n bottom: 100%;\r\n width: 0;\r\n min-height: 48px;\r\n overflow: hidden;\r\n border-radius: 3px 3px 0 0;\r\n background-color: var(--interactive-01, #273435);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n column-gap: var(--spacing-04);\r\n flex-wrap: nowrap;\r\n box-sizing: border-box;\r\n transition: 250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;\r\n\r\n color: var(--text-on-color, #fff);\r\n\r\n &_content {\r\n display: block;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n &_count {\r\n margin: 0;\r\n white-space: nowrap;\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: var(--fz-md, 14px);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: var(--fz-lg, 18px);\r\n letter-spacing: 0.16px;\r\n }\r\n }\r\n\r\n .xv-table {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n &_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n overflow-x: auto;\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--layer-accent-03) transparent;\r\n ::slotted(*) {\r\n min-width: 1000px;\r\n }\r\n }\r\n ::slotted([checked]) {\r\n background-color: var(--layer-selected-01, #E3E3E3);\r\n }\r\n ::slotted([checked]:not([header]):hover) {\r\n background-color: var(--layer-selected-hover-01, #DADADA);\r\n }\r\n\r\n ::slotted(#{$tag-name}-row[disabled]) {\r\n pointer-events: none;\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n user-select: none;\r\n }\r\n\r\n ::slotted([slot=\"footer\"]:hover),\r\n ::slotted([slot=\"footer\"]) {\r\n background-color: var(--layer-accent-02, #E3E3E3);\r\n }\r\n\r\n &_loading {\r\n z-index: 10;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: var(--xv-table-min-height, 51.11px);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n }\r\n\r\n .xv-table-title,\r\n ::slotted([slot=\"title\"]) {\r\n color: var(--text-primary, #333)!important;\r\n font-size: var(--fz-xl, 21px)!important;\r\n margin-top: var(--spacing-05, 16px)!important;\r\n margin-bottom: var(--spacing-06, 24px)!important;\r\n font-family: var(--ff-heading, \"Gill Sans\");\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: normal;\r\n }\r\n}\r\n\r\n:host([hover]) {\r\n .xv-table {\r\n ::slotted(:hover:not([header])) {\r\n background-color: var(--layer-hover-01, #E9E9E9);\r\n }\r\n }\r\n}\r\n\r\n:host(.batchVisible) {\r\n .batch-actions {\r\n pointer-events: initial;\r\n user-select: initial;\r\n width: 100%;\r\n padding-inline: var(--xv-table-padding-x);\r\n }\r\n}\r\n\r\n:host([expandable]) {\r\n ::slotted(#{$tag-name}-row) {\r\n padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n }\r\n}\r\n\r\n:host([variant-checkbox]) {\r\n ::slotted([slot=\"footer\"]:not([variant])) {\r\n padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 57.97px);\r\n }\r\n}\r\n\r\n// region Size Vars\r\n:host([size=\"xs\"]) {\r\n --xv-table-padding-y: 7px;\r\n --xv-table-min-height: 35.1px;\r\n}\r\n:host([size=\"sm\"]) {\r\n --xv-table-padding-y: 10px;\r\n --xv-table-min-height: 41.11px;\r\n}\r\n:host([size=\"lg\"]) {\r\n --xv-table-padding-y: 21px;\r\n --xv-table-min-height: 63.09px;\r\n}\r\n:host([size=\"xl\"]) {\r\n --xv-table-padding-y: 31px;\r\n --xv-table-min-height: 78.77px;\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, State, Listen, Fragment, Watch } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { SelectRowDto } from './_vars';\r\n\r\n@Component({\r\n tag: 'xv-table-v2',\r\n styleUrl: 'xv-table.scss',\r\n shadow: true,\r\n})\r\nexport class XvTable {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true }) size?: SIZE_VAR;\r\n @Prop({ reflect: true }) hover?: boolean;\r\n @Prop({ reflect: true }) loading?: boolean;\r\n @Prop({ reflect: true, attribute: 'colsSize' }) colsSize?: (string | null)[];\r\n @State() selected: Map<string, SelectRowDto> = new Map();\r\n @State() selectedCount: number = 0;\r\n\r\n @Listen('checkedChange')\r\n handleCheckedChange({ detail }: CustomEvent<SelectRowDto>) {\r\n if (detail.header || detail.expandable) return;\r\n if (detail.checked) {\r\n this.selected.set(detail.name, detail);\r\n } else {\r\n this.selected.delete(detail.name);\r\n }\r\n\r\n this.selectedCount = this.selected.size;\r\n }\r\n\r\n @Watch('colsSize')\r\n private setColsSizeTemplate() {\r\n if (!this.colsSize || !this.colsSize?.length) return;\r\n\r\n this.el.style.setProperty(\r\n '--xv-table-cols-template',\r\n this.colsSize\r\n .map((v) => {\r\n if (!v) return 'minmax(0, 1fr)';\r\n if (v === 'auto') return 'minmax(0, auto)';\r\n return `calc(${v} - ${50 / this.colsSize.length}px)`;\r\n })\r\n .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))',\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={{ batchVisible: !!this.selectedCount }}>\r\n <slot name=\"title\">\r\n {!!this.el.title && <h2 class=\"xv-table-title\">{this.el.title}</h2>}\r\n </slot>\r\n\r\n <slot name=\"toolbar\" />\r\n\r\n <div class=\"xv-table\">\r\n <div class=\"batch-actions\">\r\n <Fragment>\r\n <div class=\"batch-actions_content\">\r\n <slot name=\"batch\" />\r\n </div>\r\n <p class=\"batch-actions_count\">\r\n {!!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`}\r\n </p>\r\n </Fragment>\r\n </div>\r\n\r\n <div class=\"xv-table_wrapper\">\r\n <slot />\r\n\r\n <slot name=\"footer\" />\r\n </div>\r\n\r\n {!!this.loading && (\r\n <div class=\"xv-table_loading\">\r\n <xv-loader-v2 size={SIZE_VAR.LG} />\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n componentWillLoad() {\r\n this.setColsSizeTemplate();\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
@@ -1,53 +0,0 @@
1
- import { r as registerInstance, h, d as Host, F as Fragment, e as getElement } from './index-rZAC0WRb.js';
2
- import { S as SIZE_VAR } from './enum-DTBL51oP.js';
3
-
4
- const xvTableCss = ":host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table_wrapper{display:flex;flex-direction:column;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .xv-table_wrapper ::slotted(*){min-width:1000px}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){pointer-events:none;opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}";
5
-
6
- const XvTable = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.selected = new Map();
10
- this.selectedCount = 0;
11
- }
12
- handleCheckedChange({ detail }) {
13
- if (detail.header || detail.expandable)
14
- return;
15
- if (detail.checked) {
16
- this.selected.set(detail.name, detail);
17
- }
18
- else {
19
- this.selected.delete(detail.name);
20
- }
21
- this.selectedCount = this.selected.size;
22
- }
23
- setColsSizeTemplate() {
24
- var _a;
25
- if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
26
- return;
27
- this.el.style.setProperty('--xv-table-cols-template', this.colsSize
28
- .map((v) => {
29
- if (!v)
30
- return 'minmax(0, 1fr)';
31
- if (v === 'auto')
32
- return 'minmax(0, auto)';
33
- return `calc(${v} - ${50 / this.colsSize.length}px)`;
34
- })
35
- .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
36
- }
37
- render() {
38
- return (h(Host, { key: 'ded26282229fc649b97e1dad8477c126db4f5252', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '4b9363a86f3f9ca70dac18d626e35dd4e18cdf42', name: "title" }, !!this.el.title && h("h2", { key: '200d896aa49713d4e91a5731f70800793b2221d1', class: "xv-table-title" }, this.el.title)), h("slot", { key: '826e0be7b4888df6a230681c1721e3286ea1e1bc', name: "toolbar" }), h("div", { key: 'be6602b79e2ecbff1bfeb3e32e3ce3bc8ad09884', class: "xv-table" }, h("div", { key: '285299cc4b985fab3e6af4f0b0e497057ca7ff8c', class: "batch-actions" }, h(Fragment, { key: '581d27ee589290cc99511a77cc9db13471346d12' }, h("div", { key: 'f30f483266952a3397bace47c5612fc2b18c9498', class: "batch-actions_content" }, h("slot", { key: 'd998f2f69d9c3590c41a7ea451014c98b715c426', name: "batch" })), h("p", { key: 'ccf80d7318bd7aa88d4e8686baa720e6ac96a252', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'a37e270d3fb63e30be07177582844e462f6e6d16', class: "xv-table_wrapper" }, h("slot", { key: 'cb64636af34961f6c9dab919eb4a83e30e2e19df' }), h("slot", { key: '1a6a0e7a3d8abeefc1de319cde2ad47545c0413d', name: "footer" })), !!this.loading && (h("div", { key: '3a17bfec878f53278ede3d8150821d90779ddf44', class: "xv-table_loading" }, h("xv-loader-v2", { key: 'a187734b679af1fc937cec803bd194b8d470f290', size: SIZE_VAR.LG }))))));
39
- }
40
- componentWillLoad() {
41
- this.setColsSizeTemplate();
42
- }
43
- get el() { return getElement(this); }
44
- static get watchers() { return {
45
- "colsSize": ["setColsSizeTemplate"]
46
- }; }
47
- };
48
- XvTable.style = xvTableCss;
49
-
50
- export { XvTable as xv_table_v2 };
51
- //# sourceMappingURL=xv-table-v2.entry.esm.js.map
52
-
53
- //# sourceMappingURL=xv-table-v2.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"xv-table-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-table/xv-table.scss?tag=xv-table-v2&encapsulation=shadow","src/components/xv-table/xv-table.tsx"],"sourcesContent":["$tag-name: xv-table-v2;\r\n\r\n:host {\r\n --xv-table-min-height: 51.11px;\r\n --xv-table-padding-x: 16px;\r\n --xv-table-padding-y: 15px;\r\n --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));\r\n\r\n display: block;\r\n .batch-actions {\r\n user-select: none;\r\n pointer-events: none;\r\n position: absolute;\r\n left: 0;\r\n bottom: 100%;\r\n width: 0;\r\n min-height: 48px;\r\n overflow: hidden;\r\n border-radius: 3px 3px 0 0;\r\n background-color: var(--interactive-01, #273435);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n column-gap: var(--spacing-04);\r\n flex-wrap: nowrap;\r\n box-sizing: border-box;\r\n transition: 250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;\r\n\r\n color: var(--text-on-color, #fff);\r\n\r\n &_content {\r\n display: block;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n &_count {\r\n margin: 0;\r\n white-space: nowrap;\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: var(--fz-md, 14px);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: var(--fz-lg, 18px);\r\n letter-spacing: 0.16px;\r\n }\r\n }\r\n\r\n .xv-table {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n &_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n overflow-x: auto;\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--layer-accent-03) transparent;\r\n ::slotted(*) {\r\n min-width: 1000px;\r\n }\r\n }\r\n ::slotted([checked]) {\r\n background-color: var(--layer-selected-01, #E3E3E3);\r\n }\r\n ::slotted([checked]:not([header]):hover) {\r\n background-color: var(--layer-selected-hover-01, #DADADA);\r\n }\r\n\r\n ::slotted(#{$tag-name}-row[disabled]) {\r\n pointer-events: none;\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n user-select: none;\r\n }\r\n\r\n ::slotted([slot=\"footer\"]:hover),\r\n ::slotted([slot=\"footer\"]) {\r\n background-color: var(--layer-accent-02, #E3E3E3);\r\n }\r\n\r\n &_loading {\r\n z-index: 10;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: var(--xv-table-min-height, 51.11px);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n }\r\n\r\n .xv-table-title,\r\n ::slotted([slot=\"title\"]) {\r\n color: var(--text-primary, #333)!important;\r\n font-size: var(--fz-xl, 21px)!important;\r\n margin-top: var(--spacing-05, 16px)!important;\r\n margin-bottom: var(--spacing-06, 24px)!important;\r\n font-family: var(--ff-heading, \"Gill Sans\");\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: normal;\r\n }\r\n}\r\n\r\n:host([hover]) {\r\n .xv-table {\r\n ::slotted(:hover:not([header])) {\r\n background-color: var(--layer-hover-01, #E9E9E9);\r\n }\r\n }\r\n}\r\n\r\n:host(.batchVisible) {\r\n .batch-actions {\r\n pointer-events: initial;\r\n user-select: initial;\r\n width: 100%;\r\n padding-inline: var(--xv-table-padding-x);\r\n }\r\n}\r\n\r\n:host([expandable]) {\r\n ::slotted(#{$tag-name}-row) {\r\n padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 10px);\r\n }\r\n}\r\n\r\n:host([variant-checkbox]) {\r\n ::slotted([slot=\"footer\"]:not([variant])) {\r\n padding-inline-start: calc((max(10px, var(--xv-table-padding-x)) * 2) + 57.97px);\r\n }\r\n}\r\n\r\n// region Size Vars\r\n:host([size=\"xs\"]) {\r\n --xv-table-padding-y: 7px;\r\n --xv-table-min-height: 35.1px;\r\n}\r\n:host([size=\"sm\"]) {\r\n --xv-table-padding-y: 10px;\r\n --xv-table-min-height: 41.11px;\r\n}\r\n:host([size=\"lg\"]) {\r\n --xv-table-padding-y: 21px;\r\n --xv-table-min-height: 63.09px;\r\n}\r\n:host([size=\"xl\"]) {\r\n --xv-table-padding-y: 31px;\r\n --xv-table-min-height: 78.77px;\r\n}\r\n// endregion\r\n","import { Component, Host, h, Element, Prop, State, Listen, Fragment, Watch } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\nimport { SelectRowDto } from './_vars';\r\n\r\n@Component({\r\n tag: 'xv-table-v2',\r\n styleUrl: 'xv-table.scss',\r\n shadow: true,\r\n})\r\nexport class XvTable {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: true }) size?: SIZE_VAR;\r\n @Prop({ reflect: true }) hover?: boolean;\r\n @Prop({ reflect: true }) loading?: boolean;\r\n @Prop({ reflect: true, attribute: 'colsSize' }) colsSize?: (string | null)[];\r\n @State() selected: Map<string, SelectRowDto> = new Map();\r\n @State() selectedCount: number = 0;\r\n\r\n @Listen('checkedChange')\r\n handleCheckedChange({ detail }: CustomEvent<SelectRowDto>) {\r\n if (detail.header || detail.expandable) return;\r\n if (detail.checked) {\r\n this.selected.set(detail.name, detail);\r\n } else {\r\n this.selected.delete(detail.name);\r\n }\r\n\r\n this.selectedCount = this.selected.size;\r\n }\r\n\r\n @Watch('colsSize')\r\n private setColsSizeTemplate() {\r\n if (!this.colsSize || !this.colsSize?.length) return;\r\n\r\n this.el.style.setProperty(\r\n '--xv-table-cols-template',\r\n this.colsSize\r\n .map((v) => {\r\n if (!v) return 'minmax(0, 1fr)';\r\n if (v === 'auto') return 'minmax(0, auto)';\r\n return `calc(${v} - ${50 / this.colsSize.length}px)`;\r\n })\r\n .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))',\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={{ batchVisible: !!this.selectedCount }}>\r\n <slot name=\"title\">\r\n {!!this.el.title && <h2 class=\"xv-table-title\">{this.el.title}</h2>}\r\n </slot>\r\n\r\n <slot name=\"toolbar\" />\r\n\r\n <div class=\"xv-table\">\r\n <div class=\"batch-actions\">\r\n <Fragment>\r\n <div class=\"batch-actions_content\">\r\n <slot name=\"batch\" />\r\n </div>\r\n <p class=\"batch-actions_count\">\r\n {!!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`}\r\n </p>\r\n </Fragment>\r\n </div>\r\n\r\n <div class=\"xv-table_wrapper\">\r\n <slot />\r\n\r\n <slot name=\"footer\" />\r\n </div>\r\n\r\n {!!this.loading && (\r\n <div class=\"xv-table_loading\">\r\n <xv-loader-v2 size={SIZE_VAR.LG} />\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n componentWillLoad() {\r\n this.setColsSizeTemplate();\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-tabs-v2.entry.esm.js","sources":["src/components/xv-tabs/_vars.ts","src/components/xv-tabs/xv-tabs.scss?tag=xv-tabs-v2&encapsulation=shadow","src/components/xv-tabs/xv-tabs.tsx"],"sourcesContent":["export enum TAB_TAGS {\r\n TABS = 'xv-tabs-v2',\r\n TAB = 'xv-tab-v2'\r\n}\r\n\r\nexport enum TABS_VATIANT {\r\n DEFAULT = '',\r\n // other variants will be here\r\n}\r\n","$tab-tag: xv-tab-v2;\r\n$tab-text-active-color: var(--text-primary, #333);\r\n$tab-text-color: var(--text-secondary, #515151);\r\n$tab-border-active-color: var(--interactive-01, #273435);\r\n$tab-border-color: var(--border-border-subtle-01, #D1D1D1);\r\n\r\n:host(.xv-tabs) {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .tab-headers {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: nowrap;\r\n &_container {\r\n display: flex;\r\n flex: 1 1 auto;\r\n white-space: nowrap;\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n &::-webkit-scrollbar {\r\n display: none;\r\n }\r\n }\r\n\r\n &_tab {\r\n background: none;\r\n padding: 11px var(--gap-md, 16px);\r\n cursor: pointer;\r\n font: inherit;\r\n transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;\r\n position: relative;\r\n border: 2px solid transparent;\r\n border-bottom-color: $tab-border-color;\r\n background-blend-mode: multiply;\r\n color: $tab-text-color;\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: var(--fz-md, 14px);\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n height: 40px;\r\n white-space: nowrap;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n transition: background-color 0.3s ease, width 0.3s ease;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n width: 0;\r\n height: 2px;\r\n background-color: $tab-border-active-color;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n border: 2px solid $tab-border-color;\r\n }\r\n\r\n &:hover {\r\n border-bottom-color: var(--border-strong-01, #8B8B8B);\r\n }\r\n\r\n &.active {\r\n color: $tab-text-active-color;\r\n font-weight: 700;\r\n &:after {\r\n width: 100%;\r\n }\r\n\r\n &:focus {\r\n border-color: $tab-border-active-color;\r\n }\r\n }\r\n\r\n &:disabled {\r\n color: var(--text-on-color-disabled, #8B8B8B);\r\n border-bottom-color: var(--border-disabled, #D1D1D1);\r\n cursor: not-allowed;\r\n &:after {\r\n background-color: var(--border-disabled, #D1D1D1);\r\n }\r\n }\r\n }\r\n\r\n &_btn {\r\n outline: none;\r\n width: 40px;\r\n height: 40px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n position: relative;\r\n transition: 0.25s ease-in-out opacity;\r\n\r\n &:before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n border: solid currentColor;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 5px;\r\n transform: translate(-50%, -50%) rotate(45deg);\r\n }\r\n\r\n &:active {\r\n opacity: 0.3;\r\n }\r\n\r\n &.prev:before {\r\n transform: translate(-50%, -50%) rotate(135deg);\r\n }\r\n &.next:before {\r\n transform: translate(-50%, -50%) rotate(-45deg);\r\n }\r\n }\r\n }\r\n\r\n .tab-content-wrapper {\r\n position: relative;\r\n overflow: hidden;\r\n padding: var(--gap-md, 16px) 0;\r\n }\r\n\r\n ::slotted(#{$tab-tag}) {\r\n position: absolute;\r\n opacity: 0;\r\n max-height: 0;\r\n transition: max-height 0.5s ease;\r\n width: 100%;\r\n pointer-events: none;\r\n }\r\n\r\n ::slotted(#{$tab-tag}.active) {\r\n position: relative;\r\n opacity: 1;\r\n overflow-y: auto;\r\n pointer-events: auto;\r\n max-height: 1000px;\r\n }\r\n\r\n .xv-tabs_empty {\r\n display: block;\r\n text-align: center;\r\n margin: 20px auto;\r\n font-size: var(--fz-xl);\r\n color: var(--text-primary);\r\n }\r\n}\r\n\r\n:host([loading]) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 300px;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\r\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n tag: 'xv-tabs-v2',\r\n styleUrl: 'xv-tabs.scss',\r\n shadow: true,\r\n})\r\nexport class XvTabs {\r\n @Element() el: HTMLElement;\r\n /**\r\n * Index of active tab\r\n */\r\n @Prop({ reflect: true, mutable: true }) active: number | string = 0;\r\n /**\r\n * Emit event to outside\r\n */\r\n @Event() activeChange: EventEmitter<number | string>;\r\n /**\r\n * Show loader\r\n */\r\n @Prop({ reflect: true }) loading?: boolean;\r\n /**\r\n * Variant of tabs from TABS_VATIANT enum\r\n */\r\n @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\r\n /**\r\n * Message when have no tabs\r\n */\r\n @Prop() emptyMessage?: string;\r\n /**\r\n * local variable for tab labels collection\r\n */\r\n @State() tabElements: HTMLElement[] = [];\r\n /**\r\n * Is show arrows for scroll\r\n */\r\n @State() showArrows: boolean = false;\r\n\r\n @Listen('resize', { target: 'window' })\r\n updateArrowVisibility() {\r\n const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\r\n if (!container) return;\r\n\r\n this.showArrows = container.scrollWidth > container.clientWidth;\r\n }\r\n\r\n private collectTabs = () => {\r\n if (!this.tabElements.length) {\r\n this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\r\n this.tabElements.forEach((tab) => {\r\n if (tab.hasAttribute('name') && !this.active) {\r\n this.active = tab.getAttribute('name');\r\n }\r\n })\r\n\r\n setTimeout(() => this.updateArrowVisibility(), 100);\r\n }\r\n }\r\n\r\n private updateTabClasses() {\r\n this.tabElements.forEach((tab, i) => {\r\n tab.classList.toggle(\r\n 'active',\r\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n );\r\n });\r\n }\r\n\r\n private handleTabClick(active: string | number) {\r\n if (active === this.active) return;\r\n\r\n this.active = active;\r\n this.activeChange.emit(Number(this.active) || this.active);\r\n this.scrollToActiveTab();\r\n }\r\n\r\n private scrollToActiveTab() {\r\n if (!this.showArrows) return;\r\n\r\n // wait next JS tik\r\n setTimeout(() => {\r\n this.el.shadowRoot\r\n .querySelector('.tab-headers_tab.active')\r\n .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n });\r\n }\r\n\r\n private setTab(count: number = 1) {\r\n const currentIdx = this.tabElements.findIndex(\r\n (tab, i) =>\r\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n );\r\n const nextIdx = currentIdx + count;\r\n\r\n if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\r\n\r\n const nextTab = this.tabElements[nextIdx];\r\n\r\n if (!nextTab || nextTab.hasAttribute('disabled')) return;\r\n\r\n this.active = nextTab.getAttribute('name') || `${nextIdx}`;\r\n this.scrollToActiveTab();\r\n }\r\n\r\n render() {\r\n if (this.loading) {\r\n return (\r\n <Host class=\"xv-tabs\" variant={this.variant}>\r\n <xv-loader-v2 size={SIZE_VAR.XL} />\r\n </Host>\r\n )\r\n }\r\n\r\n return (\r\n <Host class=\"xv-tabs\" variant={this.variant}>\r\n <div class=\"tab-headers\" role=\"tablist\">\r\n <button\r\n hidden={!this.showArrows || !this.tabElements?.length}\r\n aria-label=\"Previous\"\r\n class=\"tab-headers_btn prev\"\r\n onClick={() => this.setTab(-1)}\r\n />\r\n <div class=\"tab-headers_container\">\r\n {this.tabElements?.length ? this.tabElements.map((tab, index) => (\r\n <button\r\n role=\"tab\"\r\n disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\r\n class={{\r\n 'tab-headers_tab': true,\r\n active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\r\n }}\r\n onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\r\n >\r\n {tab.getAttribute('label') || `Tab ${index + 1}`}\r\n </button>\r\n )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\r\n </div>\r\n <button\r\n aria-label=\"Next\"\r\n hidden={!this.showArrows || !this.tabElements?.length}\r\n class=\"tab-headers_btn next\"\r\n onClick={() => this.setTab(1)}\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"tab-content-wrapper\"\r\n role=\"tabpanel\"\r\n tabindex={-1}\r\n >\r\n <slot onSlotchange={this.collectTabs} />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n this.updateTabClasses();\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
@@ -1,109 +0,0 @@
1
- import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
2
- import { S as SIZE_VAR } from './enum-DTBL51oP.js';
3
-
4
- var TAB_TAGS;
5
- (function (TAB_TAGS) {
6
- TAB_TAGS["TABS"] = "xv-tabs-v2";
7
- TAB_TAGS["TAB"] = "xv-tab-v2";
8
- })(TAB_TAGS || (TAB_TAGS = {}));
9
- var TABS_VATIANT;
10
- (function (TABS_VATIANT) {
11
- TABS_VATIANT["DEFAULT"] = "";
12
- // other variants will be here
13
- })(TABS_VATIANT || (TABS_VATIANT = {}));
14
-
15
- const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{position:relative;display:flex;flex-wrap:nowrap}:host(.xv-tabs) .tab-headers_container{display:flex;flex:1 1 auto;white-space:nowrap;overflow-x:auto;scroll-behavior:smooth}:host(.xv-tabs) .tab-headers_container::-webkit-scrollbar{display:none}:host(.xv-tabs) .tab-headers_tab{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers_tab:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers_tab:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers_tab.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers_tab.active:after{width:100%}:host(.xv-tabs) .tab-headers_tab.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers_tab:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-headers_btn{outline:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;transition:0.25s ease-in-out opacity}:host(.xv-tabs) .tab-headers_btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:translate(-50%, -50%) rotate(45deg)}:host(.xv-tabs) .tab-headers_btn:active{opacity:0.3}:host(.xv-tabs) .tab-headers_btn.prev:before{transform:translate(-50%, -50%) rotate(135deg)}:host(.xv-tabs) .tab-headers_btn.next:before{transform:translate(-50%, -50%) rotate(-45deg)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}:host(.xv-tabs) .xv-tabs_empty{display:block;text-align:center;margin:20px auto;font-size:var(--fz-xl);color:var(--text-primary)}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:300px}";
16
-
17
- const XvTabs = class {
18
- constructor(hostRef) {
19
- registerInstance(this, hostRef);
20
- this.activeChange = createEvent(this, "activeChange", 7);
21
- /**
22
- * Index of active tab
23
- */
24
- this.active = 0;
25
- /**
26
- * Variant of tabs from TABS_VATIANT enum
27
- */
28
- this.variant = TABS_VATIANT.DEFAULT;
29
- /**
30
- * local variable for tab labels collection
31
- */
32
- this.tabElements = [];
33
- /**
34
- * Is show arrows for scroll
35
- */
36
- this.showArrows = false;
37
- this.collectTabs = () => {
38
- if (!this.tabElements.length) {
39
- this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
40
- this.tabElements.forEach((tab) => {
41
- if (tab.hasAttribute('name') && !this.active) {
42
- this.active = tab.getAttribute('name');
43
- }
44
- });
45
- setTimeout(() => this.updateArrowVisibility(), 100);
46
- }
47
- };
48
- }
49
- updateArrowVisibility() {
50
- var _a;
51
- const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-headers_container');
52
- if (!container)
53
- return;
54
- this.showArrows = container.scrollWidth > container.clientWidth;
55
- }
56
- updateTabClasses() {
57
- this.tabElements.forEach((tab, i) => {
58
- tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
59
- });
60
- }
61
- handleTabClick(active) {
62
- if (active === this.active)
63
- return;
64
- this.active = active;
65
- this.activeChange.emit(Number(this.active) || this.active);
66
- this.scrollToActiveTab();
67
- }
68
- scrollToActiveTab() {
69
- if (!this.showArrows)
70
- return;
71
- // wait next JS tik
72
- setTimeout(() => {
73
- this.el.shadowRoot
74
- .querySelector('.tab-headers_tab.active')
75
- .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
76
- });
77
- }
78
- setTab(count = 1) {
79
- const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
80
- const nextIdx = currentIdx + count;
81
- if (nextIdx < 0 || nextIdx >= this.tabElements.length)
82
- return;
83
- const nextTab = this.tabElements[nextIdx];
84
- if (!nextTab || nextTab.hasAttribute('disabled'))
85
- return;
86
- this.active = nextTab.getAttribute('name') || `${nextIdx}`;
87
- this.scrollToActiveTab();
88
- }
89
- render() {
90
- var _a, _b, _c;
91
- if (this.loading) {
92
- return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
93
- }
94
- return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), h("div", { class: "tab-headers_container" }, ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
95
- 'tab-headers_tab': true,
96
- active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
97
- }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage)), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
98
- }
99
- componentDidRender() {
100
- this.updateTabClasses();
101
- }
102
- get el() { return getElement(this); }
103
- };
104
- XvTabs.style = xvTabsCss;
105
-
106
- export { XvTabs as xv_tabs_v2 };
107
- //# sourceMappingURL=xv-tabs-v2.entry.esm.js.map
108
-
109
- //# sourceMappingURL=xv-tabs-v2.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"xv-tabs-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-tabs/_vars.ts","src/components/xv-tabs/xv-tabs.scss?tag=xv-tabs-v2&encapsulation=shadow","src/components/xv-tabs/xv-tabs.tsx"],"sourcesContent":["export enum TAB_TAGS {\r\n TABS = 'xv-tabs-v2',\r\n TAB = 'xv-tab-v2'\r\n}\r\n\r\nexport enum TABS_VATIANT {\r\n DEFAULT = '',\r\n // other variants will be here\r\n}\r\n","$tab-tag: xv-tab-v2;\r\n$tab-text-active-color: var(--text-primary, #333);\r\n$tab-text-color: var(--text-secondary, #515151);\r\n$tab-border-active-color: var(--interactive-01, #273435);\r\n$tab-border-color: var(--border-border-subtle-01, #D1D1D1);\r\n\r\n:host(.xv-tabs) {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .tab-headers {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: nowrap;\r\n &_container {\r\n display: flex;\r\n flex: 1 1 auto;\r\n white-space: nowrap;\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n &::-webkit-scrollbar {\r\n display: none;\r\n }\r\n }\r\n\r\n &_tab {\r\n background: none;\r\n padding: 11px var(--gap-md, 16px);\r\n cursor: pointer;\r\n font: inherit;\r\n transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;\r\n position: relative;\r\n border: 2px solid transparent;\r\n border-bottom-color: $tab-border-color;\r\n background-blend-mode: multiply;\r\n color: $tab-text-color;\r\n font-family: var(--ff-body, Tahoma);\r\n font-size: var(--fz-md, 14px);\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n height: 40px;\r\n white-space: nowrap;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n transition: background-color 0.3s ease, width 0.3s ease;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n width: 0;\r\n height: 2px;\r\n background-color: $tab-border-active-color;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n border: 2px solid $tab-border-color;\r\n }\r\n\r\n &:hover {\r\n border-bottom-color: var(--border-strong-01, #8B8B8B);\r\n }\r\n\r\n &.active {\r\n color: $tab-text-active-color;\r\n font-weight: 700;\r\n &:after {\r\n width: 100%;\r\n }\r\n\r\n &:focus {\r\n border-color: $tab-border-active-color;\r\n }\r\n }\r\n\r\n &:disabled {\r\n color: var(--text-on-color-disabled, #8B8B8B);\r\n border-bottom-color: var(--border-disabled, #D1D1D1);\r\n cursor: not-allowed;\r\n &:after {\r\n background-color: var(--border-disabled, #D1D1D1);\r\n }\r\n }\r\n }\r\n\r\n &_btn {\r\n outline: none;\r\n width: 40px;\r\n height: 40px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n position: relative;\r\n transition: 0.25s ease-in-out opacity;\r\n\r\n &:before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n border: solid currentColor;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 5px;\r\n transform: translate(-50%, -50%) rotate(45deg);\r\n }\r\n\r\n &:active {\r\n opacity: 0.3;\r\n }\r\n\r\n &.prev:before {\r\n transform: translate(-50%, -50%) rotate(135deg);\r\n }\r\n &.next:before {\r\n transform: translate(-50%, -50%) rotate(-45deg);\r\n }\r\n }\r\n }\r\n\r\n .tab-content-wrapper {\r\n position: relative;\r\n overflow: hidden;\r\n padding: var(--gap-md, 16px) 0;\r\n }\r\n\r\n ::slotted(#{$tab-tag}) {\r\n position: absolute;\r\n opacity: 0;\r\n max-height: 0;\r\n transition: max-height 0.5s ease;\r\n width: 100%;\r\n pointer-events: none;\r\n }\r\n\r\n ::slotted(#{$tab-tag}.active) {\r\n position: relative;\r\n opacity: 1;\r\n overflow-y: auto;\r\n pointer-events: auto;\r\n max-height: 1000px;\r\n }\r\n\r\n .xv-tabs_empty {\r\n display: block;\r\n text-align: center;\r\n margin: 20px auto;\r\n font-size: var(--fz-xl);\r\n color: var(--text-primary);\r\n }\r\n}\r\n\r\n:host([loading]) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 300px;\r\n}\r\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\r\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n tag: 'xv-tabs-v2',\r\n styleUrl: 'xv-tabs.scss',\r\n shadow: true,\r\n})\r\nexport class XvTabs {\r\n @Element() el: HTMLElement;\r\n /**\r\n * Index of active tab\r\n */\r\n @Prop({ reflect: true, mutable: true }) active: number | string = 0;\r\n /**\r\n * Emit event to outside\r\n */\r\n @Event() activeChange: EventEmitter<number | string>;\r\n /**\r\n * Show loader\r\n */\r\n @Prop({ reflect: true }) loading?: boolean;\r\n /**\r\n * Variant of tabs from TABS_VATIANT enum\r\n */\r\n @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\r\n /**\r\n * Message when have no tabs\r\n */\r\n @Prop() emptyMessage?: string;\r\n /**\r\n * local variable for tab labels collection\r\n */\r\n @State() tabElements: HTMLElement[] = [];\r\n /**\r\n * Is show arrows for scroll\r\n */\r\n @State() showArrows: boolean = false;\r\n\r\n @Listen('resize', { target: 'window' })\r\n updateArrowVisibility() {\r\n const container = this.el.shadowRoot?.querySelector('.tab-headers_container') as HTMLElement | null;\r\n if (!container) return;\r\n\r\n this.showArrows = container.scrollWidth > container.clientWidth;\r\n }\r\n\r\n private collectTabs = () => {\r\n if (!this.tabElements.length) {\r\n this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\r\n this.tabElements.forEach((tab) => {\r\n if (tab.hasAttribute('name') && !this.active) {\r\n this.active = tab.getAttribute('name');\r\n }\r\n })\r\n\r\n setTimeout(() => this.updateArrowVisibility(), 100);\r\n }\r\n }\r\n\r\n private updateTabClasses() {\r\n this.tabElements.forEach((tab, i) => {\r\n tab.classList.toggle(\r\n 'active',\r\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n );\r\n });\r\n }\r\n\r\n private handleTabClick(active: string | number) {\r\n if (active === this.active) return;\r\n\r\n this.active = active;\r\n this.activeChange.emit(Number(this.active) || this.active);\r\n this.scrollToActiveTab();\r\n }\r\n\r\n private scrollToActiveTab() {\r\n if (!this.showArrows) return;\r\n\r\n // wait next JS tik\r\n setTimeout(() => {\r\n this.el.shadowRoot\r\n .querySelector('.tab-headers_tab.active')\r\n .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n });\r\n }\r\n\r\n private setTab(count: number = 1) {\r\n const currentIdx = this.tabElements.findIndex(\r\n (tab, i) =>\r\n (tab.getAttribute('name') || `${i}`) === `${this.active}`\r\n );\r\n const nextIdx = currentIdx + count;\r\n\r\n if (nextIdx < 0 || nextIdx >= this.tabElements.length) return;\r\n\r\n const nextTab = this.tabElements[nextIdx];\r\n\r\n if (!nextTab || nextTab.hasAttribute('disabled')) return;\r\n\r\n this.active = nextTab.getAttribute('name') || `${nextIdx}`;\r\n this.scrollToActiveTab();\r\n }\r\n\r\n render() {\r\n if (this.loading) {\r\n return (\r\n <Host class=\"xv-tabs\" variant={this.variant}>\r\n <xv-loader-v2 size={SIZE_VAR.XL} />\r\n </Host>\r\n )\r\n }\r\n\r\n return (\r\n <Host class=\"xv-tabs\" variant={this.variant}>\r\n <div class=\"tab-headers\" role=\"tablist\">\r\n <button\r\n hidden={!this.showArrows || !this.tabElements?.length}\r\n aria-label=\"Previous\"\r\n class=\"tab-headers_btn prev\"\r\n onClick={() => this.setTab(-1)}\r\n />\r\n <div class=\"tab-headers_container\">\r\n {this.tabElements?.length ? this.tabElements.map((tab, index) => (\r\n <button\r\n role=\"tab\"\r\n disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\r\n class={{\r\n 'tab-headers_tab': true,\r\n active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\r\n }}\r\n onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\r\n >\r\n {tab.getAttribute('label') || `Tab ${index + 1}`}\r\n </button>\r\n )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\r\n </div>\r\n <button\r\n aria-label=\"Next\"\r\n hidden={!this.showArrows || !this.tabElements?.length}\r\n class=\"tab-headers_btn next\"\r\n onClick={() => this.setTab(1)}\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"tab-content-wrapper\"\r\n role=\"tabpanel\"\r\n tabindex={-1}\r\n >\r\n <slot onSlotchange={this.collectTabs} />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n this.updateTabClasses();\r\n }\r\n}\r\n"],"version":3}
@@ -1 +0,0 @@
1
- {"version":3,"file":"xv-tag-v2.entry.esm.js","sources":["src/components/xv-tag/xv-tag.scss?tag=xv-tag-v2&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag-v2',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,+gDAA+gD;;MCOnhD,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAC/B,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAE,CAAA,EAAA,GAAW,EAAE;AACf,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAwBnC;AArBC,IAAA,YAAY,CAAC,CAAe,EAAA;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;;IAGzB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EACjD,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAE/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,SAAS,KACb,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,cAAc,EAAU,CAAA,CAC9E,CACI;;;;;;;"}