bromcom-ui 2.8.0-rc.3 → 2.8.0-rc.4

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 (247) hide show
  1. package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
  2. package/dist/bromcom-ui/p-0bcc14f8.entry.js +5 -0
  3. package/dist/bromcom-ui/p-0cb89561.entry.js +5 -0
  4. package/dist/bromcom-ui/p-136aeeea.entry.js +5 -0
  5. package/dist/bromcom-ui/p-1ca72216.entry.js +5 -0
  6. package/dist/bromcom-ui/p-1cd1623f.entry.js +5 -0
  7. package/dist/bromcom-ui/p-21636df0.entry.js +5 -0
  8. package/dist/bromcom-ui/p-21ac8544.entry.js +5 -0
  9. package/dist/bromcom-ui/{p-ef8b37a2.js → p-2d7300b3.js} +1 -1
  10. package/dist/bromcom-ui/p-352b9ae6.entry.js +5 -0
  11. package/dist/bromcom-ui/p-3a75047e.entry.js +5 -0
  12. package/dist/bromcom-ui/p-3b31b8c4.entry.js +5 -0
  13. package/dist/bromcom-ui/p-3beac7a6.entry.js +5 -0
  14. package/dist/bromcom-ui/{p-3f7625ff.js → p-4167e51c.js} +1 -1
  15. package/dist/bromcom-ui/p-43c5f3c3.entry.js +5 -0
  16. package/dist/bromcom-ui/p-4a172a33.entry.js +5 -0
  17. package/dist/bromcom-ui/{p-eb945ceb.js → p-4a4562f5.js} +1 -1
  18. package/dist/bromcom-ui/p-4b23f132.entry.js +5 -0
  19. package/dist/bromcom-ui/p-4cc4f6cd.entry.js +5 -0
  20. package/dist/bromcom-ui/p-56a9ce0a.js +5 -0
  21. package/dist/bromcom-ui/{p-c34638dc.js → p-56bb19ef.js} +1 -1
  22. package/dist/bromcom-ui/p-597be152.entry.js +5 -0
  23. package/dist/bromcom-ui/p-59ee0928.js +5 -0
  24. package/dist/bromcom-ui/p-5c6f941e.entry.js +5 -0
  25. package/dist/bromcom-ui/p-5ff9d4f6.entry.js +5 -0
  26. package/dist/bromcom-ui/p-64c7173a.entry.js +5 -0
  27. package/dist/bromcom-ui/p-65ab8436.entry.js +5 -0
  28. package/dist/bromcom-ui/p-66a9de7c.entry.js +5 -0
  29. package/dist/bromcom-ui/p-6708a234.entry.js +5 -0
  30. package/dist/bromcom-ui/{p-e01fb694.entry.js → p-6808ca09.entry.js} +1 -1
  31. package/dist/bromcom-ui/p-6b1bbd46.entry.js +5 -0
  32. package/dist/bromcom-ui/p-6cc1927f.entry.js +5 -0
  33. package/dist/bromcom-ui/p-71930900.js +5 -0
  34. package/dist/bromcom-ui/p-7c510c8f.entry.js +5 -0
  35. package/dist/bromcom-ui/p-7d0fb564.entry.js +5 -0
  36. package/dist/bromcom-ui/p-7f5409c2.entry.js +5 -0
  37. package/dist/bromcom-ui/p-81cfc9bf.entry.js +5 -0
  38. package/dist/bromcom-ui/p-87cc3b5a.js +5 -0
  39. package/dist/bromcom-ui/{p-9ae9706d.entry.js → p-88f62d13.entry.js} +1 -1
  40. package/dist/bromcom-ui/p-8dbcd26b.entry.js +5 -0
  41. package/dist/bromcom-ui/p-9c970a65.entry.js +5 -0
  42. package/dist/bromcom-ui/p-9e41c7f1.entry.js +5 -0
  43. package/dist/bromcom-ui/p-a46f0626.entry.js +5 -0
  44. package/dist/bromcom-ui/p-a4c5cbd8.entry.js +5 -0
  45. package/dist/bromcom-ui/p-ab830de6.entry.js +5 -0
  46. package/dist/bromcom-ui/p-ab8bc270.entry.js +5 -0
  47. package/dist/bromcom-ui/p-ae1107ad.js +5 -0
  48. package/dist/bromcom-ui/p-b81a4068.entry.js +5 -0
  49. package/dist/bromcom-ui/p-b8d849a2.entry.js +5 -0
  50. package/dist/bromcom-ui/p-c3dcd469.entry.js +5 -0
  51. package/dist/bromcom-ui/p-c793cfcd.entry.js +5 -0
  52. package/dist/bromcom-ui/p-c7f33aa3.entry.js +5 -0
  53. package/dist/bromcom-ui/p-cd1cd1e5.entry.js +5 -0
  54. package/dist/bromcom-ui/p-d723d8e8.entry.js +5 -0
  55. package/dist/bromcom-ui/p-dbeb843a.entry.js +5 -0
  56. package/dist/bromcom-ui/p-dc584fdd.entry.js +5 -0
  57. package/dist/bromcom-ui/p-ddb38da3.entry.js +5 -0
  58. package/dist/bromcom-ui/p-e099ae93.entry.js +5 -0
  59. package/dist/bromcom-ui/p-e23bb883.entry.js +5 -0
  60. package/dist/bromcom-ui/p-e4bff61b.entry.js +5 -0
  61. package/dist/bromcom-ui/p-ebc810e1.entry.js +5 -0
  62. package/dist/bromcom-ui/p-f75d23b0.entry.js +5 -0
  63. package/dist/bromcom-ui/p-f75f481a.entry.js +5 -0
  64. package/dist/bromcom-ui/p-fe684e3c.entry.js +10 -0
  65. package/dist/cjs/bcm-accordion.cjs.entry.js +2 -1
  66. package/dist/cjs/bcm-alert.cjs.entry.js +2 -1
  67. package/dist/cjs/bcm-attendance.cjs.entry.js +2 -1
  68. package/dist/cjs/bcm-avatar_2.cjs.entry.js +5 -4
  69. package/dist/cjs/bcm-breadcrumb.cjs.entry.js +2 -1
  70. package/dist/cjs/bcm-button-group.cjs.entry.js +2 -1
  71. package/dist/cjs/bcm-button.cjs.entry.js +385 -0
  72. package/dist/cjs/bcm-card.cjs.entry.js +3 -2
  73. package/dist/cjs/bcm-checkbox-group.cjs.entry.js +18 -17
  74. package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +2 -1
  75. package/dist/cjs/bcm-checkbox_2.cjs.entry.js +3 -2
  76. package/dist/cjs/bcm-chip.cjs.entry.js +3 -2
  77. package/dist/cjs/bcm-collapse.cjs.entry.js +2 -1
  78. package/dist/cjs/bcm-color-input.cjs.entry.js +5 -4
  79. package/dist/cjs/{bcm-button_13.cjs.entry.js → bcm-colorful_2.cjs.entry.js} +138 -3897
  80. package/dist/cjs/bcm-date-picker.cjs.entry.js +2 -1
  81. package/dist/cjs/bcm-datetime-picker.cjs.entry.js +2 -1
  82. package/dist/cjs/bcm-default.cjs.entry.js +2 -1
  83. package/dist/cjs/bcm-drawer.cjs.entry.js +5 -4
  84. package/dist/cjs/bcm-dropdown.cjs.entry.js +3 -2
  85. package/dist/cjs/bcm-expansion-panel.cjs.entry.js +3 -2
  86. package/dist/cjs/bcm-form-2.cjs.entry.js +2 -1
  87. package/dist/cjs/bcm-form.cjs.entry.js +487 -0
  88. package/dist/cjs/bcm-icon.cjs.entry.js +41 -0
  89. package/dist/cjs/bcm-input-custom.cjs.entry.js +2 -1
  90. package/dist/cjs/bcm-input.cjs.entry.js +369 -0
  91. package/dist/cjs/bcm-item.cjs.entry.js +3 -2
  92. package/dist/cjs/bcm-items.cjs.entry.js +2 -1
  93. package/dist/cjs/bcm-label_2.cjs.entry.js +149 -0
  94. package/dist/cjs/bcm-list.cjs.entry.js +1793 -0
  95. package/dist/cjs/bcm-menu.cjs.entry.js +6 -5
  96. package/dist/cjs/bcm-modal.cjs.entry.js +2 -1
  97. package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +3 -2
  98. package/dist/cjs/bcm-popconfirm.cjs.entry.js +2 -1
  99. package/dist/cjs/bcm-popover.cjs.entry.js +6 -5
  100. package/dist/cjs/bcm-progress.cjs.entry.js +3 -2
  101. package/dist/cjs/bcm-radio-group.cjs.entry.js +5 -4
  102. package/dist/cjs/bcm-radio.cjs.entry.js +5 -4
  103. package/dist/cjs/bcm-range.cjs.entry.js +2 -1
  104. package/dist/cjs/bcm-search.cjs.entry.js +259 -0
  105. package/dist/cjs/bcm-skeleton.cjs.entry.js +2 -1
  106. package/dist/cjs/bcm-step.cjs.entry.js +102 -0
  107. package/dist/cjs/bcm-stepper.cjs.entry.js +247 -0
  108. package/dist/cjs/bcm-switch.cjs.entry.js +2 -1
  109. package/dist/cjs/bcm-tab-group.cjs.entry.js +5 -4
  110. package/dist/cjs/bcm-tab-item-header.cjs.entry.js +5 -4
  111. package/dist/cjs/bcm-tab-item.cjs.entry.js +5 -4
  112. package/dist/cjs/bcm-tag.cjs.entry.js +3 -2
  113. package/dist/cjs/bcm-text.cjs.entry.js +63 -0
  114. package/dist/cjs/bcm-textarea.cjs.entry.js +3 -2
  115. package/dist/cjs/bcm-time-picker.cjs.entry.js +2 -1
  116. package/dist/cjs/bcm-toast.cjs.entry.js +2 -1
  117. package/dist/cjs/bromcom-ui.cjs.js +1 -1
  118. package/dist/cjs/{color-helper-ff22257f.js → color-helper-09aa652d.js} +8 -8
  119. package/dist/cjs/{generate-7b71e00a.js → colors-7cc2aee2.js} +0 -297
  120. package/dist/cjs/generate-44bb438e.js +305 -0
  121. package/dist/cjs/{input-template-98c29bbb.js → input-template-6b354df9.js} +1 -1
  122. package/dist/cjs/{json-parse-decarator-79e20ff3.js → json-parse-decarator-22ab54f7.js} +1 -1
  123. package/dist/cjs/loader.cjs.js +1 -1
  124. package/dist/cjs/{number-helper-9869878b.js → number-helper-72b20785.js} +1 -1
  125. package/dist/cjs/old-bcm-popover-box.cjs.entry.js +3 -2
  126. package/dist/cjs/old-bcm-popover.cjs.entry.js +2 -1
  127. package/dist/cjs/stepper-states-6892694b.js +85 -0
  128. package/dist/cjs/{tooltip-helper-27421198.js → tooltip-helper-6d6407d1.js} +4 -4
  129. package/dist/cjs/{validators-261e5c81.js → validators-cce37534.js} +1 -1
  130. package/dist/collection/components/molecules/popover/popover.js +1 -1
  131. package/dist/collection/components/molecules/tooltip/tooltip.js +1 -1
  132. package/dist/components/bcm-popover.js +1 -1
  133. package/dist/components/generate.js +1 -1
  134. package/dist/components/tooltip.js +1 -1
  135. package/dist/esm/bcm-accordion.entry.js +2 -1
  136. package/dist/esm/bcm-alert.entry.js +2 -1
  137. package/dist/esm/bcm-attendance.entry.js +2 -1
  138. package/dist/esm/bcm-avatar_2.entry.js +5 -4
  139. package/dist/esm/bcm-breadcrumb.entry.js +2 -1
  140. package/dist/esm/bcm-button-group.entry.js +2 -1
  141. package/dist/esm/bcm-button.entry.js +381 -0
  142. package/dist/esm/bcm-card.entry.js +3 -2
  143. package/dist/esm/bcm-checkbox-group.entry.js +8 -7
  144. package/dist/esm/bcm-checkbox-lite_9.entry.js +2 -1
  145. package/dist/esm/bcm-checkbox_2.entry.js +3 -2
  146. package/dist/esm/bcm-chip.entry.js +3 -2
  147. package/dist/esm/bcm-collapse.entry.js +2 -1
  148. package/dist/esm/bcm-color-input.entry.js +5 -4
  149. package/dist/esm/{bcm-button_13.entry.js → bcm-colorful_2.entry.js} +134 -3882
  150. package/dist/esm/bcm-date-picker.entry.js +2 -1
  151. package/dist/esm/bcm-datetime-picker.entry.js +2 -1
  152. package/dist/esm/bcm-default.entry.js +2 -1
  153. package/dist/esm/bcm-drawer.entry.js +5 -4
  154. package/dist/esm/bcm-dropdown.entry.js +3 -2
  155. package/dist/esm/bcm-expansion-panel.entry.js +3 -2
  156. package/dist/esm/bcm-form-2.entry.js +2 -1
  157. package/dist/esm/bcm-form.entry.js +483 -0
  158. package/dist/esm/bcm-icon.entry.js +37 -0
  159. package/dist/esm/bcm-input-custom.entry.js +2 -1
  160. package/dist/esm/bcm-input.entry.js +365 -0
  161. package/dist/esm/bcm-item.entry.js +3 -2
  162. package/dist/esm/bcm-items.entry.js +2 -1
  163. package/dist/esm/bcm-label_2.entry.js +144 -0
  164. package/dist/esm/bcm-list.entry.js +1789 -0
  165. package/dist/esm/bcm-menu.entry.js +6 -5
  166. package/dist/esm/bcm-modal.entry.js +2 -1
  167. package/dist/esm/bcm-popconfirm-box.entry.js +3 -2
  168. package/dist/esm/bcm-popconfirm.entry.js +2 -1
  169. package/dist/esm/bcm-popover.entry.js +6 -5
  170. package/dist/esm/bcm-progress.entry.js +3 -2
  171. package/dist/esm/bcm-radio-group.entry.js +5 -4
  172. package/dist/esm/bcm-radio.entry.js +5 -4
  173. package/dist/esm/bcm-range.entry.js +2 -1
  174. package/dist/esm/bcm-search.entry.js +255 -0
  175. package/dist/esm/bcm-skeleton.entry.js +2 -1
  176. package/dist/esm/bcm-step.entry.js +98 -0
  177. package/dist/esm/bcm-stepper.entry.js +243 -0
  178. package/dist/esm/bcm-switch.entry.js +2 -1
  179. package/dist/esm/bcm-tab-group.entry.js +5 -4
  180. package/dist/esm/bcm-tab-item-header.entry.js +5 -4
  181. package/dist/esm/bcm-tab-item.entry.js +5 -4
  182. package/dist/esm/bcm-tag.entry.js +3 -2
  183. package/dist/esm/bcm-text.entry.js +59 -0
  184. package/dist/esm/bcm-textarea.entry.js +3 -2
  185. package/dist/esm/bcm-time-picker.entry.js +2 -1
  186. package/dist/esm/bcm-toast.entry.js +2 -1
  187. package/dist/esm/bromcom-ui.js +1 -1
  188. package/dist/esm/{color-helper-362cd7b6.js → color-helper-2b6697b6.js} +1 -1
  189. package/dist/esm/{generate-6c5030c9.js → colors-39b87f63.js} +1 -296
  190. package/dist/esm/generate-42365155.js +302 -0
  191. package/dist/esm/{input-template-21cb9810.js → input-template-c035bb51.js} +1 -1
  192. package/dist/esm/{json-parse-decarator-b3d10607.js → json-parse-decarator-bfc50c70.js} +1 -1
  193. package/dist/esm/loader.js +1 -1
  194. package/dist/esm/{number-helper-0ab0676b.js → number-helper-6a09d08c.js} +1 -1
  195. package/dist/esm/old-bcm-popover-box.entry.js +3 -2
  196. package/dist/esm/old-bcm-popover.entry.js +2 -1
  197. package/dist/esm/stepper-states-a0b074ca.js +83 -0
  198. package/dist/esm/{tooltip-helper-6b6cee19.js → tooltip-helper-f4f3e26c.js} +4 -4
  199. package/dist/esm/{validators-87201c22.js → validators-e2f24be7.js} +1 -1
  200. package/dist/types/components/molecules/popover/popover.d.ts +1 -1
  201. package/dist/types/components/molecules/tooltip/tooltip.d.ts +1 -1
  202. package/package.json +1 -1
  203. package/dist/bromcom-ui/p-01e2c310.entry.js +0 -5
  204. package/dist/bromcom-ui/p-025fa461.entry.js +0 -5
  205. package/dist/bromcom-ui/p-02d89883.entry.js +0 -5
  206. package/dist/bromcom-ui/p-090ed544.entry.js +0 -5
  207. package/dist/bromcom-ui/p-09733614.entry.js +0 -5
  208. package/dist/bromcom-ui/p-0f07e69b.js +0 -5
  209. package/dist/bromcom-ui/p-23f4991b.entry.js +0 -5
  210. package/dist/bromcom-ui/p-323973e5.entry.js +0 -5
  211. package/dist/bromcom-ui/p-37194223.entry.js +0 -5
  212. package/dist/bromcom-ui/p-479f0bd5.entry.js +0 -5
  213. package/dist/bromcom-ui/p-4836d1cd.entry.js +0 -5
  214. package/dist/bromcom-ui/p-59e2af89.entry.js +0 -5
  215. package/dist/bromcom-ui/p-5a68e6e7.entry.js +0 -5
  216. package/dist/bromcom-ui/p-65ab887f.entry.js +0 -5
  217. package/dist/bromcom-ui/p-677195de.entry.js +0 -5
  218. package/dist/bromcom-ui/p-6c78072c.entry.js +0 -5
  219. package/dist/bromcom-ui/p-6cb33e93.entry.js +0 -5
  220. package/dist/bromcom-ui/p-6d0e6802.entry.js +0 -5
  221. package/dist/bromcom-ui/p-6d4f10e3.entry.js +0 -5
  222. package/dist/bromcom-ui/p-71663e53.entry.js +0 -5
  223. package/dist/bromcom-ui/p-761f7e8c.entry.js +0 -5
  224. package/dist/bromcom-ui/p-762aeb4a.entry.js +0 -5
  225. package/dist/bromcom-ui/p-7b0bfeb2.entry.js +0 -5
  226. package/dist/bromcom-ui/p-84919c9d.entry.js +0 -5
  227. package/dist/bromcom-ui/p-8811d071.entry.js +0 -5
  228. package/dist/bromcom-ui/p-911776d7.entry.js +0 -5
  229. package/dist/bromcom-ui/p-92f6ca0f.entry.js +0 -5
  230. package/dist/bromcom-ui/p-9763ed2d.js +0 -5
  231. package/dist/bromcom-ui/p-a051b68c.entry.js +0 -5
  232. package/dist/bromcom-ui/p-a0807939.js +0 -5
  233. package/dist/bromcom-ui/p-accf5f6c.entry.js +0 -11
  234. package/dist/bromcom-ui/p-afac7571.entry.js +0 -5
  235. package/dist/bromcom-ui/p-b280f61e.entry.js +0 -5
  236. package/dist/bromcom-ui/p-b295dc77.entry.js +0 -5
  237. package/dist/bromcom-ui/p-bf383f52.entry.js +0 -5
  238. package/dist/bromcom-ui/p-c08cee8b.entry.js +0 -5
  239. package/dist/bromcom-ui/p-c7dc70b8.entry.js +0 -5
  240. package/dist/bromcom-ui/p-c865c604.entry.js +0 -5
  241. package/dist/bromcom-ui/p-cc67f4a8.entry.js +0 -5
  242. package/dist/bromcom-ui/p-d353ce68.entry.js +0 -5
  243. package/dist/bromcom-ui/p-d3dd1bcb.entry.js +0 -5
  244. package/dist/bromcom-ui/p-d3ff6b31.entry.js +0 -5
  245. package/dist/bromcom-ui/p-d9668e00.entry.js +0 -5
  246. package/dist/bromcom-ui/p-e320352d.entry.js +0 -5
  247. package/dist/bromcom-ui/p-fa3291a8.entry.js +0 -5
@@ -6,393 +6,21 @@
6
6
 
7
7
  Object.defineProperty(exports, '__esModule', { value: true });
8
8
 
9
- const index$1 = require('./index-7e2a5376.js');
10
- const generate = require('./generate-7b71e00a.js');
11
- const bcm = require('./bcm-634604e3.js');
12
- const index$2 = require('./index-a2b50e51.js');
13
- const index = require('./index-56628fe5.js');
14
- const slotTemplate = require('./slot-template-7a07f865.js');
15
- const colorHelper = require('./color-helper-ff22257f.js');
16
- const isLoadDecorator = require('./is-load-decorator-faac117d.js');
9
+ const index = require('./index-7e2a5376.js');
17
10
  const _commonjsHelpers = require('./_commonjsHelpers-bd20f4c0.js');
18
- const stringHelper = require('./string-helper-71b10c53.js');
19
- const utils = require('./utils-fc077139.js');
20
- const numberHelper = require('./number-helper-9869878b.js');
21
- const validators = require('./validators-261e5c81.js');
22
- const captionTemplate = require('./caption-template-de4a0064.js');
23
- const inputTemplate = require('./input-template-98c29bbb.js');
24
- const labelTemplate = require('./label-template-098a30a4.js');
11
+ const bcm = require('./bcm-634604e3.js');
25
12
  require('./element-dragger-a8562f82.js');
13
+ require('./string-helper-71b10c53.js');
14
+ const utils = require('./utils-fc077139.js');
26
15
  const floatingUi = require('./floating-ui-c23acc6c.js');
16
+ require('./color-helper-09aa652d.js');
27
17
  require('./datetime-helper-eaf4fadb.js');
28
- const jsonParseDecarator = require('./json-parse-decarator-79e20ff3.js');
29
- const popoverPlacement = require('./popover-placement-69d37a5f.js');
30
- require('./types-cc4adee7.js');
31
- require('./types-6eb7e028.js');
32
- const tooltipHelper = require('./tooltip-helper-27421198.js');
18
+ const generate = require('./generate-44bb438e.js');
19
+ require('./number-helper-72b20785.js');
20
+ require('./validators-cce37534.js');
21
+ const isLoadDecorator = require('./is-load-decorator-faac117d.js');
33
22
  require('./colors-56282b00.js');
34
-
35
- const variantOptions = {
36
- save: {
37
- text: 'Save',
38
- color: 'emerald',
39
- icon: 'far fa-save',
40
- iconPosition: 'prefix',
41
- },
42
- ok: {
43
- text: 'Ok',
44
- color: 'emerald',
45
- icon: 'far fa-check',
46
- iconPosition: 'prefix',
47
- },
48
- new: {
49
- text: 'New',
50
- color: 'emerald',
51
- icon: 'far fa-plus',
52
- iconPosition: 'prefix',
53
- },
54
- add: {
55
- text: 'Add',
56
- color: 'emerald',
57
- icon: 'far fa-plus',
58
- iconPosition: 'prefix',
59
- },
60
- create: {
61
- text: 'Create',
62
- color: 'emerald',
63
- icon: 'far fa-plus',
64
- iconPosition: 'prefix',
65
- },
66
- prev: {
67
- text: 'Prev',
68
- color: '',
69
- icon: 'far fa-arrow-left',
70
- iconPosition: 'prefix',
71
- },
72
- next: {
73
- text: 'Next',
74
- color: '',
75
- icon: 'far fa-arrow-right',
76
- iconPosition: 'suffix',
77
- },
78
- apply: {
79
- text: 'Apply',
80
- color: '',
81
- icon: 'far fa-check-circle',
82
- iconPosition: 'prefix',
83
- },
84
- submit: {
85
- text: 'Submit',
86
- color: '',
87
- icon: 'far fa-save',
88
- iconPosition: 'prefix',
89
- },
90
- send: {
91
- text: 'Send',
92
- color: 'emerald',
93
- icon: 'far fa-paper-plane',
94
- iconPosition: 'prefix',
95
- },
96
- delete: {
97
- text: 'Delete',
98
- color: 'red',
99
- icon: 'far fa-trash',
100
- iconPosition: 'prefix',
101
- },
102
- cancel: {
103
- text: 'Cancel',
104
- color: 'red',
105
- icon: 'far fa-times',
106
- iconPosition: 'prefix',
107
- },
108
- decline: {
109
- text: 'Decline',
110
- color: 'red',
111
- icon: 'far fa-ban',
112
- iconPosition: 'prefix',
113
- },
114
- close: {
115
- text: 'Close',
116
- color: 'red',
117
- icon: 'far fa-times-circle',
118
- iconPosition: 'prefix',
119
- },
120
- archive: {
121
- text: 'Archive',
122
- color: 'red',
123
- icon: 'far fa-folder-open',
124
- iconPosition: 'prefix',
125
- },
126
- remove: {
127
- text: 'Remove',
128
- color: 'red',
129
- icon: 'far fa-minus-circle',
130
- iconPosition: 'prefix',
131
- },
132
- edit: {
133
- text: 'Edit',
134
- color: '',
135
- icon: 'far fa-edit',
136
- iconPosition: 'prefix',
137
- },
138
- export: {
139
- text: 'Export',
140
- color: '',
141
- icon: 'far fa-sign-out',
142
- iconPosition: 'prefix',
143
- },
144
- import: {
145
- text: 'Import',
146
- color: '',
147
- icon: 'far fa-sign-in',
148
- iconPosition: 'prefix',
149
- },
150
- filter: {
151
- text: 'Filter',
152
- color: '',
153
- icon: 'far fa-filter',
154
- iconPosition: 'prefix',
155
- },
156
- update: {
157
- text: 'Update',
158
- color: '',
159
- icon: 'far fa-sync',
160
- iconPosition: 'prefix',
161
- },
162
- reset: {
163
- text: "Reset",
164
- color: "",
165
- icon: 'far fa-sync',
166
- iconPosition: "prefix",
167
- },
168
- download: {
169
- text: 'Download',
170
- color: '',
171
- icon: 'far fa-download',
172
- iconPosition: 'prefix',
173
- },
174
- };
175
- var VariantProps;
176
- (function (VariantProps) {
177
- VariantProps["save"] = "save";
178
- VariantProps["submit"] = "submit";
179
- VariantProps["ok"] = "ok";
180
- VariantProps["new"] = "new";
181
- VariantProps["add"] = "add";
182
- VariantProps["create"] = "create";
183
- VariantProps["apply"] = "apply";
184
- VariantProps["prev"] = "prev";
185
- VariantProps["next"] = "next";
186
- VariantProps["send"] = "send";
187
- VariantProps["delete"] = "delete";
188
- VariantProps["cancel"] = "cancel";
189
- VariantProps["decline"] = "decline";
190
- VariantProps["close"] = "close";
191
- VariantProps["archive"] = "archive";
192
- VariantProps["remove"] = "remove";
193
- VariantProps["edit"] = "edit";
194
- VariantProps["export"] = "export";
195
- VariantProps["import"] = "import";
196
- VariantProps["filter"] = "filter";
197
- VariantProps["update"] = "update";
198
- VariantProps["reset"] = "Reset";
199
- VariantProps["download"] = "download";
200
- })(VariantProps || (VariantProps = {}));
201
-
202
- const { state: state$3 } = index.createStore({
203
- value: new Map(),
204
- setData: {},
205
- removeData: {}
206
- });
207
- const setValue$3 = (val) => {
208
- const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
209
- icon: variantOptions[val.variant].icon,
210
- value: variantOptions[val.variant].text,
211
- iconPosition: bcm.Bcm.IconPosition[variantOptions[val.variant].iconPosition],
212
- variantColor: variantOptions[val.variant].color
213
- }));
214
- state$3.value.set(data.id, data);
215
- };
216
- const removeValue$2 = (_id) => {
217
- state$3.value.delete(_id);
218
- };
219
- const getValue$3 = (id) => generate.snq(() => state$3.value.get(id), {});
220
- const buttonState = {
221
- setValue: setValue$3,
222
- removeValue: removeValue$2,
223
- getValue: getValue$3
224
- };
225
-
226
- const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
227
- const ButtonTagType = (href) ? bcm.Bcm.HtmlElementType.a : bcm.Bcm.HtmlElementType.button;
228
- return (index$1.h(ButtonTagType, Object.assign({ id: id }, (type == bcm.Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
229
- index$1.h("span", { hidden: true },
230
- index$1.h("slot", null)),
231
- loading && index$1.h("span", { class: "bcm-button__container-loading" },
232
- " ",
233
- index$1.h("span", { class: "bcm-button__container-icon" },
234
- index$1.h("i", { class: "far fa-spinner-third fa-spin" }),
235
- " ")),
236
- icon && index$1.h("span", { class: `${iconPosition} bcm-button__container-icon` },
237
- index$1.h("i", { class: `${icon}` })),
238
- !isIconOnly && (index$1.h(slotTemplate.SlotTemplate, { className: "bcm-button__container-text", value: value })),
239
- index$1.h("slot", { name: "suffix" })));
240
- };
241
-
242
- const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
243
-
244
- var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
245
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
246
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
247
- r = Reflect.decorate(decorators, target, key, desc);
248
- else
249
- for (var i = decorators.length - 1; i >= 0; i--)
250
- if (d = decorators[i])
251
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
252
- return c > 3 && r && Object.defineProperty(target, key, r), r;
253
- };
254
- const BcmButton = class {
255
- constructor(hostRef) {
256
- index$1.registerInstance(this, hostRef);
257
- this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
258
- this._id = generate.Generate.UID();
259
- this.hidden = false;
260
- this.type = bcm.Bcm.ButtonType.button;
261
- this.size = bcm.Bcm.Size.medium;
262
- this.disabled = false;
263
- this.kind = bcm.Bcm.Kind.solid;
264
- this.outline = false;
265
- this.icon = undefined;
266
- this.href = undefined;
267
- this.target = undefined;
268
- this.value = undefined;
269
- this.loading = false;
270
- this.variant = undefined;
271
- this.dataDismiss = false;
272
- this.fullWidth = false;
273
- this.iconPosition = bcm.Bcm.IconPosition.prefix;
274
- this.color = undefined;
275
- this.checked = false;
276
- }
277
- handleOnClick(e) {
278
- if (this.disabled) {
279
- e.preventDefault();
280
- e.stopPropagation();
281
- return false;
282
- }
283
- }
284
- componentWillRender() {
285
- const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
286
- buttonState.setValue({
287
- id: this._id,
288
- size,
289
- type,
290
- kind,
291
- icon,
292
- iconPosition,
293
- disabled,
294
- outline,
295
- href,
296
- target,
297
- loading,
298
- variant,
299
- fullWidth,
300
- hidden,
301
- value,
302
- isIconOnly: !!(this.isHaveChildNodes() && this.icon),
303
- });
304
- }
305
- getStateData() {
306
- return buttonState.getValue(this._id);
307
- }
308
- isHaveChildNodes() {
309
- const childNodes = Array.from(this.el.childNodes);
310
- return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
311
- }
312
- setColor(color = this.color) {
313
- if (!color)
314
- return;
315
- const { kind } = this;
316
- const prefix = `--bcm-button-${kind}`;
317
- if (kind === 'solid') {
318
- return {
319
- [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor('white'),
320
- [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor('white'),
321
- [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor('white'),
322
- [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor('white'),
323
- [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('white'),
324
- [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
325
- [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
326
- [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
327
- [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
328
- [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
329
- [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
330
- [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
331
- [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
332
- [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
333
- [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('slate-400')
334
- };
335
- }
336
- else if (kind == 'link') {
337
- return {
338
- [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
339
- [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
340
- [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-800'),
341
- [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-700'),
342
- [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
343
- [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor('transparent'),
344
- [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
345
- [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
346
- [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
347
- [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('transparent'),
348
- [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor('transparent'),
349
- [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
350
- [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
351
- [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
352
- [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('transparent')
353
- };
354
- }
355
- else if (kind == 'ghost') {
356
- return {
357
- [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-600'),
358
- [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
359
- [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
360
- [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-600'),
361
- [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-300'),
362
- [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-100'),
363
- [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-200'),
364
- [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-400'),
365
- [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-300'),
366
- [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-50'),
367
- [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-300'),
368
- [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-400'),
369
- [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
370
- [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-500'),
371
- [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor(color + '-200'),
372
- };
373
- }
374
- return;
375
- }
376
- render() {
377
- const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
378
- const classPrefix = 'bcm-button';
379
- let componentClass = index$2.classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
380
- 'full-width': fullWidth,
381
- 'checked': this.checked,
382
- 'disabled': disabled,
383
- });
384
- const hostClasses = index$2.classnames(`${classPrefix}`, {
385
- hidden,
386
- 'full-width': fullWidth,
387
- });
388
- return (index$1.h(index$1.Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, index$1.h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
389
- }
390
- get el() { return index$1.getElement(this); }
391
- };
392
- __decorate$b([
393
- isLoadDecorator.IsLoad()
394
- ], BcmButton.prototype, "el", void 0);
395
- BcmButton.style = buttonCss;
23
+ require('./colors-7cc2aee2.js');
396
24
 
397
25
  /*
398
26
  object-assign
@@ -18120,8 +17748,8 @@ const colorfulCss = "@import url(\"https://fonts.googleapis.com/css?family=Robot
18120
17748
 
18121
17749
  const BcmColorful = class {
18122
17750
  constructor(hostRef) {
18123
- index$1.registerInstance(this, hostRef);
18124
- this.bcmChange = index$1.createEvent(this, "bcmChange", 7);
17751
+ index.registerInstance(this, hostRef);
17752
+ this.bcmChange = index.createEvent(this, "bcmChange", 7);
18125
17753
  this.color = "#3b82f6";
18126
17754
  }
18127
17755
  handleChange(e) {
@@ -18134,57 +17762,11 @@ const BcmColorful = class {
18134
17762
  onChange: lodash.debounce(this.handleChange.bind(this), 150),
18135
17763
  }), this.el);
18136
17764
  }
18137
- get el() { return index$1.getElement(this); }
17765
+ get el() { return index.getElement(this); }
18138
17766
  };
18139
17767
  BcmColorful.style = colorfulCss;
18140
17768
 
18141
- // /**
18142
- // *
18143
- // * @param type
18144
- // */
18145
- // export const required = (value:any) => {
18146
- // if ( value || value != null ) {
18147
- // return true
18148
- // } else {
18149
- // return true
18150
- // }
18151
- // }
18152
- class rules {
18153
- constructor() { }
18154
- response(status, message) {
18155
- return Object.assign(Object.assign({ valid: status }, (message && { message })), (!status && { type: 'error' }));
18156
- }
18157
- required(value, componentValidation) {
18158
- let validation = this.response(true);
18159
- if (value == '' || value == "" || value == undefined || value == null || value === false) {
18160
- validation = this.response(false, 'This field is required.');
18161
- }
18162
- if (componentValidation) {
18163
- if (!componentValidation.valid) {
18164
- validation = this.response(false, componentValidation.errorText);
18165
- }
18166
- if (value instanceof Object) {
18167
- if (value.isValid) {
18168
- if (value.isValid == false)
18169
- validation = this.response(false, 'This field is required.');
18170
- }
18171
- }
18172
- }
18173
- return validation;
18174
- }
18175
- selfValidation(input) {
18176
- let validation = this.response(true);
18177
- if (input.captionError != null || input.captionType == 'error') {
18178
- validation = this.response(false, input.captionError);
18179
- }
18180
- return validation;
18181
- }
18182
- }
18183
- const validate = new rules;
18184
-
18185
- const formCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block;margin-bottom:8px}:host(.hidden){display:none}";
18186
-
18187
- var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
17769
+ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
18188
17770
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
18189
17771
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
18190
17772
  r = Reflect.decorate(decorators, target, key, desc);
@@ -18194,3506 +17776,165 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
18194
17776
  r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
18195
17777
  return c > 3 && r && Object.defineProperty(target, key, r), r;
18196
17778
  };
18197
- const BcmForm = class {
17779
+ const BcmLinked = class {
18198
17780
  constructor(hostRef) {
18199
- index$1.registerInstance(this, hostRef);
18200
- this.bcmForm = index$1.createEvent(this, "bcm-form", 7);
18201
- this.formData = {};
18202
- this.inputs = [];
18203
- this.duplicateInput = [];
18204
- this.isValid = true;
18205
- this.returnCaption = [];
18206
- this.Bromcom = {
18207
- errors: {
18208
- targetFormNotExist: 'target form is not exist --> ',
18209
- },
18210
- inputComponents: {
18211
- // Birbirinin aynısı
18212
- INPUT: 'input',
18213
- TEXTAREA: 'textarea',
18214
- //çok benzer
18215
- SWITCH: 'switch',
18216
- CHECKBOX: 'checkbox',
18217
- RADIO_GROUP: 'radio-group',
18218
- CHECKBOX_GROUP: 'checkbox-group',
18219
- RANGE: 'range',
18220
- // sadece value fırlatıyor
18221
- FORM: 'form',
18222
- FORM_GROUP: 'form-group',
18223
- // *En vakit alacak => içinde select, autocomplete, listbox, treeview özellikleri var
18224
- LIST: 'list',
18225
- //
18226
- COLORPICKER: 'colorpicker',
18227
- // picker aslında tek komponent hepsi datetimepicker
18228
- DATE_PICKER: 'date-picker',
18229
- TIME_PICKER: 'time-picker',
18230
- DATETIME_PICKER: 'datetime-picker',
18231
- // silinecek komponentler
18232
- SELECT: 'select',
18233
- LISTBOX: 'listbox'
18234
- },
18235
- helpers: {
18236
- randomId: function () {
18237
- return Math.random().toString(16).slice(2, -1);
18238
- },
18239
- },
18240
- };
18241
- this._id = (Math.random() * 4).toString(16).replace('.', '');
18242
- this.hidden = false;
18243
- this.validation = false;
18244
- this.name = "";
18245
- this.value = undefined;
18246
- this.autocomplete = false;
18247
- }
18248
- handleSubmit() {
18249
- // if (lowercase(e.target.nodeName) === 'bcm-button') {
18250
- // if (e.target.type === 'submit') {
18251
- // this.submitFunction()
18252
- // }
18253
- // }
17781
+ index.registerInstance(this, hostRef);
17782
+ this.bcmOpen = index.createEvent(this, "bcm-open", 7);
17783
+ this._id = generate.Generate.UID();
17784
+ this.placement = bcm.Bcm$1.Placement["bottom-start"];
17785
+ this.trigger = bcm.Bcm$1.TriggerType.click;
17786
+ this.targetId = "";
17787
+ this.height = undefined;
17788
+ this.maxHeight = undefined;
17789
+ this.minHeight = "50px";
17790
+ this.isOpen = false;
18254
17791
  }
18255
- async submitFunction() {
18256
- this.formData = {};
18257
- this.inputs = [];
18258
- this.selector = this.el;
18259
- await this.getInputs();
18260
- await utils.delay(10);
18261
- const usrFrmData = await this.userFormData();
18262
- var formData = { isValid: true, formData: usrFrmData };
18263
- if (this.name) {
18264
- formData = Object.assign(Object.assign({}, formData), { formName: this.name });
18265
- }
18266
- if (this.isValid) {
18267
- this.bcmForm.emit(formData);
18268
- return formData;
17792
+ target() {
17793
+ const target = document.querySelectorAll(`[id="${this.targetId}"]`);
17794
+ if (target.length > 0) {
17795
+ target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
17796
+ return target[0];
18269
17797
  }
18270
17798
  else {
18271
- this.returnCaption = { isValid: false, 'message': 'Please fill in all inputs', 'errorDetails': this.returnCaption, formData: usrFrmData };
18272
- if (this.name) {
18273
- this.returnCaption = Object.assign(Object.assign({}, this.returnCaption), { formName: this.name });
18274
- }
18275
- this.bcmForm.emit(this.returnCaption);
18276
- return this.returnCaption;
17799
+ // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
17800
+ this.el.remove();
17801
+ return null;
18277
17802
  }
18278
17803
  }
18279
- async submit() {
18280
- return Promise.resolve(this.submitFunction());
17804
+ dismissEvent() {
17805
+ document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
18281
17806
  }
18282
- async set(data) {
18283
- var _a;
18284
- const validate = this.validation;
18285
- this.validation = false;
18286
- // debugger
18287
- this.selector = this.el;
18288
- await this.getInputs();
18289
- if (data && ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
18290
- for (const key of Object.keys(data)) {
18291
- const item = this.inputs.find(item => item.name === key);
18292
- if (item) {
18293
- try {
18294
- await item.set(data[key]);
18295
- }
18296
- catch (error) {
18297
- console.log(item.nodeName, "set", error);
18298
- }
18299
- }
18300
- }
18301
- }
18302
- this.validation = validate;
17807
+ checkDataDismiss(e) {
17808
+ generate.Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
18303
17809
  }
18304
- async get() {
18305
- var _a;
18306
- let formData = {};
18307
- this.selector = this.el;
18308
- const inputsCache = this.inputs;
18309
- await this.getInputs();
18310
- ((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.inputs.forEach(async (item) => {
18311
- try {
18312
- const value = await item.get();
18313
- formData = Object.assign(Object.assign({}, formData), { [item.name]: value });
18314
- }
18315
- catch (error) {
18316
- console.log(`${item.nodeName} get error`);
18317
- }
17810
+ hideChildLinked() {
17811
+ this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
17812
+ var _a;
17813
+ (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
18318
17814
  });
18319
- this.inputs = inputsCache;
18320
- await utils.delay(10);
18321
- return Promise.resolve(formData);
18322
17815
  }
18323
- async setClear() {
18324
- this.formData = {};
18325
- this.inputs = [];
18326
- this.selector = this.el;
18327
- let clear = [];
18328
- await this.getInputs();
18329
- this.inputs.forEach(async (item) => {
18330
- try {
18331
- clear.push(await item.setClear());
17816
+ calculatePosition() {
17817
+ const el = this.el;
17818
+ if (el && this.target()) {
17819
+ if (this.isOpen) {
17820
+ floatingUi.FloatingUI({
17821
+ ref: this.target(),
17822
+ floating: el,
17823
+ placement: this.placement,
17824
+ offset: 4,
17825
+ autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
17826
+ autoSize: true,
17827
+ style: {
17828
+ height: this.height,
17829
+ maxHeight: this.maxHeight,
17830
+ minHeight: this.minHeight,
17831
+ },
17832
+ });
18332
17833
  }
18333
- catch (error) {
18334
- console.log(error);
17834
+ else {
17835
+ el.style.visibility = "hidden";
17836
+ el.style.opacity = "0";
18335
17837
  }
18336
- });
18337
- await Promise.all(clear).then(() => {
18338
- this.formData = {};
18339
- this.inputs = [];
18340
- this.duplicateInput = [];
18341
- this.isValid = true;
18342
- this.returnCaption = [];
18343
- });
18344
- await utils.delay(10);
18345
- return Promise.resolve(true);
17838
+ }
18346
17839
  }
18347
- async resetCaption() {
18348
- await utils.delay(10);
18349
- this.formData = {};
18350
- this.inputs = [];
18351
- this.selector = this.el;
18352
- await this.getInputs();
18353
- for (const item of this.inputs) {
18354
- try {
18355
- await item.resetCaption();
17840
+ init() {
17841
+ const target = this.target();
17842
+ if (target) {
17843
+ target.setAttribute("is-linked", this.el.id);
17844
+ if (!generate.Generate.getAncestor(target, "bcm-linked")) {
17845
+ this.el.setAttribute("main-linked", "true");
18356
17846
  }
18357
- catch (error) {
18358
- console.log(item.nodeName, "rc p");
17847
+ else {
17848
+ this.el.removeAttribute("main-linked");
18359
17849
  }
18360
17850
  }
18361
- await utils.delay(10);
18362
- return Promise.resolve();
18363
17851
  }
18364
- async config(_config) {
18365
- if (_config['validation']) {
18366
- typeof _config['validation'] == 'boolean'
18367
- ? this.validation = _config['validation']
18368
- : this.validation = false;
17852
+ componentDidLoad() {
17853
+ this.init();
17854
+ document.body.appendChild(this.el);
17855
+ }
17856
+ onLinkedDataDismis() {
17857
+ // console.log('onLinkedDataDismis');
17858
+ this.hide(false);
17859
+ }
17860
+ onBcmFloatingIsHide(e) {
17861
+ if (e.detail.id === this._id) {
17862
+ this.hide(false);
18369
17863
  }
18370
- return true;
18371
17864
  }
18372
- async getInputs() {
18373
- var form = this.selector;
18374
- if (!form) {
18375
- console.warn(this.Bromcom.errors.targetFormNotExist + this.selector);
18376
- return;
17865
+ async show(wait = true) {
17866
+ wait && (await utils.delay(50));
17867
+ const target = this.target();
17868
+ if (target) {
17869
+ document.body.appendChild(this.el);
17870
+ target.setAttribute("linked-is-open", "true");
17871
+ this.isOpen = true;
17872
+ this.calculatePosition();
18377
17873
  }
18378
- const inputs = Array.from(form.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
18379
- this.duplicateInput = [];
18380
- // s-hn: Stencil private flag that contains host web component
18381
- // https://github.com/ionic-team/stencil/blob/45388e95edb46ef357eb9ae37cd32bbb5bc1ed23/src/runtime/vdom/vdom-render.ts#L116
18382
- const rootInputs = inputs.filter((input) => { var _a; return !input['s-hn'] || ((_a = input['s-hn']) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'BcmForm'; });
18383
- // debugger;
18384
- for (const item of rootInputs) {
18385
- if (stringHelper.StringHelper.lowercase(item.nodeName) == "bcm-checkbox-group") {
18386
- let checkboxs = item.querySelectorAll("bcm-checkbox");
18387
- if (checkboxs) {
18388
- for (const checkbox of checkboxs) {
18389
- this.duplicateInput.push(checkbox.name);
18390
- }
18391
- }
18392
- }
18393
- if (stringHelper.StringHelper.lowercase(item.nodeName) == "bcm-form") {
18394
- const groupInputs = Array.from(item.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
18395
- let itemObject = {};
18396
- for (const element of groupInputs) {
18397
- var name = element.name;
18398
- var value = element.value;
18399
- itemObject = Object.assign(Object.assign({}, itemObject), { [name]: value });
18400
- this.duplicateInput.push(element.name);
18401
- }
18402
- item.value = itemObject;
18403
- let checkboxs = item.querySelectorAll("bcm-checkbox");
18404
- if (checkboxs) {
18405
- for (const checkbox of checkboxs) {
18406
- this.duplicateInput.push(checkbox.name);
18407
- }
18408
- }
18409
- }
17874
+ else {
17875
+ this.hide(false);
18410
17876
  }
18411
- await utils.delay(10);
18412
- this.inputs = rootInputs;
17877
+ return this.isOpen;
18413
17878
  }
18414
- getItemValue(item) {
18415
- const tagName = item.tagName.toLowerCase().replace('bcm-', '');
18416
- switch (tagName) {
18417
- /* case 'date-picker':
18418
- case 'datetime-picker':
18419
- return item.value.timestamp
18420
- case 'time-picker':
18421
- return item.value.time */
18422
- default:
18423
- return item.value;
17879
+ async hide(wait = true) {
17880
+ wait && (await utils.delay(50));
17881
+ const target = this.target();
17882
+ if (target) {
17883
+ target.removeAttribute("linked-is-open");
17884
+ this.hideChildLinked();
17885
+ this.isOpen = false;
18424
17886
  }
17887
+ return this.isOpen;
18425
17888
  }
18426
- isWrapperComponent(item) {
18427
- return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
18428
- }
18429
- isGroupComponent(item) {
18430
- return ['bcm-checkbox-group'].includes(item.toLowerCase());
18431
- }
18432
- isListComponent(item) {
18433
- return ['bcm-list'].includes(item.toLowerCase());
17889
+ async toggle(wait = true) {
17890
+ return this.isOpen ? await this.hide(wait) : await this.show(wait);
18434
17891
  }
18435
- async userFormData() {
18436
- this.formData = {};
18437
- this.isValid = true;
18438
- this.returnCaption = [];
18439
- for (const item of this.inputs) {
18440
- // const isListComponent = this.isListComponent(item.tagName);
18441
- const isGroupComponent = this.isGroupComponent(item.tagName);
18442
- const isWrapperComponent = this.isWrapperComponent(item.tagName);
18443
- const wrapperComponent = isWrapperComponent && item;
18444
- const input = isWrapperComponent
18445
- ? await item.getInput() && item
18446
- : item;
18447
- // input.caption = ''
18448
- // input.captionType = ''
18449
- if (this.validation) {
18450
- let valid = null;
18451
- // if (isListComponent) {
18452
- // valid = !(input.value && input.value.length > 0) && validate.required(input.value)
18453
- // } else
18454
- if (isWrapperComponent) {
18455
- const isPickerValid = await wrapperComponent.isValid();
18456
- valid = validate.required(input.value, isPickerValid);
18457
- if (valid) {
18458
- if (input.value instanceof Object) {
18459
- if (input.value["isValid"] == false) {
18460
- valid = validate.required("", isPickerValid);
18461
- }
18462
- }
18463
- else {
18464
- valid = validate.required(input.value, isPickerValid);
18465
- }
18466
- }
18467
- }
18468
- else if (isGroupComponent) {
18469
- const childsCheckbox = utils.getChildElements(input, 'bcm-checkbox:not(#bcm-indeterminate-element)');
18470
- if (childsCheckbox && childsCheckbox.length > 0) {
18471
- for (const element of childsCheckbox) {
18472
- if (element && element.required === true) {
18473
- valid = validate.required(element.checked);
18474
- if (!valid['valid']) {
18475
- element.noCaption = false;
18476
- element.captionError = valid['message'];
18477
- element.captionType = valid['type'];
18478
- }
18479
- else {
18480
- element.noCaption = input.noCaption;
18481
- element.captionError = null;
18482
- element.captionType = "default";
18483
- }
18484
- }
18485
- }
18486
- }
18487
- }
18488
- else {
18489
- valid = validate.required(input.value);
18490
- }
18491
- if (input.required) {
18492
- if (!valid['valid']) {
18493
- input.captionError = valid['message'];
18494
- input.captionType = valid['type'];
18495
- }
18496
- else {
18497
- input.captionError = null;
18498
- input.captionType = "default";
18499
- }
18500
- await utils.delay(10);
18501
- const selfValidation = validate.selfValidation(input);
18502
- if (valid['valid']) {
18503
- if (!selfValidation['valid']) {
18504
- input.captionError = selfValidation['message'];
18505
- input.captionType = selfValidation['type'];
18506
- }
18507
- }
18508
- }
18509
- let name = input.name;
18510
- let value = input.captionError;
18511
- !input.hidden && input.captionType == 'error' && (this.returnCaption = [...Array.from(this.returnCaption), { [name]: value }],
18512
- this.isValid = false);
18513
- }
18514
- if (input.name && !this.duplicateInput.includes(input.name)) {
18515
- var itemValue = this.getItemValue(input);
18516
- if (!itemValue || itemValue == undefined || itemValue == null) {
18517
- itemValue = null;
18518
- }
18519
- this.formData[input.name] = itemValue;
18520
- }
17892
+ clickListener(e) {
17893
+ if (!this.target())
17894
+ return;
17895
+ const isTarget = generate.Generate.findEventPath(e, this.target());
17896
+ const isSelf = generate.Generate.findEventPath(e, this.el);
17897
+ const isLinked = generate.Generate.findEventPathWithNodeName(e, "BCM-LINKED");
17898
+ if (!isTarget && !isSelf && !isLinked) {
17899
+ this.hide();
17900
+ this.bcmOpen.emit(this.isOpen);
17901
+ return;
18521
17902
  }
18522
- return this.formData;
18523
- }
18524
- async handleChange(e) {
18525
- const isWrapperComponent = this.isWrapperComponent(e.target.tagName);
18526
- const isGroupComponent = this.isGroupComponent(e.target.tagName);
18527
- let target;
18528
- if (isWrapperComponent) {
18529
- target = e.target.getInput && await e.target.getInput() || e.target;
18530
- }
18531
- else if (isGroupComponent) {
18532
- let req = false;
18533
- const childsCheckbox = utils.getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
18534
- childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
18535
- if (element && element.required === true) {
18536
- req = true;
18537
- }
18538
- }));
18539
- target = Object.assign(Object.assign({}, e.target), { required: req });
17903
+ if (this.isOpen) {
17904
+ isTarget && this.hide(false);
17905
+ isSelf && this.checkDataDismiss(e);
17906
+ if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
17907
+ this.dismissEvent();
17908
+ }
18540
17909
  }
18541
17910
  else {
18542
- target = e.target;
18543
- }
18544
- const value = e.target.value;
18545
- const wrapperComponent = isWrapperComponent && e.target;
18546
- var isPickerValid;
18547
- if (isWrapperComponent) {
18548
- isPickerValid = await wrapperComponent.isValid();
18549
- }
18550
- const tick = setTimeout(() => {
18551
- if (target.required) {
18552
- let valid = null;
18553
- if (isWrapperComponent) {
18554
- valid = validate.required(value, isPickerValid);
18555
- if (valid) {
18556
- if (value instanceof Object) {
18557
- if (value["isValid"] == false) {
18558
- valid = validate.required("", isPickerValid);
18559
- }
18560
- }
18561
- else {
18562
- valid = validate.required(value, isPickerValid);
18563
- }
18564
- }
18565
- }
18566
- else if (isGroupComponent) {
18567
- const childsCheckbox = utils.getChildElements(e.target, 'bcm-checkbox:not(#bcm-indeterminate-element)');
18568
- childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
18569
- if (element && element.required === true) {
18570
- valid = validate.required(element.checked);
18571
- if (!valid['valid']) {
18572
- element.noCaption = false;
18573
- element.captionError = valid['message'];
18574
- element.captionType = valid['type'];
18575
- }
18576
- else {
18577
- element.noCaption = e.target.noCaption;
18578
- element.captionError = null;
18579
- element.captionType = "default";
18580
- }
18581
- }
18582
- }));
18583
- }
18584
- else {
18585
- valid = validate.required(value);
18586
- }
18587
- if (valid['valid']) {
18588
- target.captionError = null;
18589
- target.captionType = null;
18590
- }
18591
- else {
18592
- target.captionError = valid['message'];
18593
- target.captionType = valid['type'];
18594
- }
18595
- }
18596
- clearTimeout(tick);
18597
- });
18598
- this.value = await this.userFormData();
17911
+ isTarget && this.show(false);
17912
+ }
18599
17913
  }
18600
- render() {
18601
- const hostClasses = index$2.classnames(this.hidden ? 'hidden' : null);
18602
- return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("form", { class: "bcm-form", autocomplete: this.autocomplete ? "on" : "off" }, index$1.h("slot", null))));
17914
+ resizeListener() {
17915
+ this.calculatePosition();
18603
17916
  }
18604
- get el() { return index$1.getElement(this); }
18605
- };
18606
- __decorate$a([
18607
- isLoadDecorator.IsLoad()
18608
- ], BcmForm.prototype, "el", void 0);
18609
- BcmForm.style = formCss;
18610
-
18611
- const iconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-icon.hidden{display:none}";
18612
-
18613
- var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
18614
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
18615
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
18616
- r = Reflect.decorate(decorators, target, key, desc);
18617
- else
18618
- for (var i = decorators.length - 1; i >= 0; i--)
18619
- if (d = decorators[i])
18620
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
18621
- return c > 3 && r && Object.defineProperty(target, key, r), r;
18622
- };
18623
- const BcmIcon = class {
18624
- constructor(hostRef) {
18625
- index$1.registerInstance(this, hostRef);
18626
- this.hidden = false;
18627
- this.icon = undefined;
17917
+ scrollListener() {
17918
+ this.calculatePosition();
17919
+ }
17920
+ wheelListener() {
17921
+ this.calculatePosition();
17922
+ }
17923
+ watchIsOpen() {
17924
+ this.bcmOpen.emit(this.isOpen);
18628
17925
  }
18629
17926
  render() {
18630
- const { icon, hidden } = this;
18631
- return (index$1.h(index$1.Host, { class: `bcm-icon fa ${hidden ? 'hidden' : ''}` }, index$1.h("i", { class: `${icon}` })));
17927
+ const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
17928
+ return (index.h(index.Host, { class: "tw-invisible tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-block tw-overscroll-contain tw-scroll-smooth tw-rounded tw-bg-white tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, index.h("slot", null)));
18632
17929
  }
18633
- get el() { return index$1.getElement(this); }
17930
+ get el() { return index.getElement(this); }
17931
+ static get watchers() { return {
17932
+ "isOpen": ["watchIsOpen"]
17933
+ }; }
18634
17934
  };
18635
- __decorate$9([
17935
+ __decorate([
18636
17936
  isLoadDecorator.IsLoad()
18637
- ], BcmIcon.prototype, "el", void 0);
18638
- BcmIcon.style = iconCss;
18639
-
18640
- const inputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea .bcm-input-element{white-space:normal}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
18641
-
18642
- var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
18643
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
18644
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
18645
- r = Reflect.decorate(decorators, target, key, desc);
18646
- else
18647
- for (var i = decorators.length - 1; i >= 0; i--)
18648
- if (d = decorators[i])
18649
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
18650
- return c > 3 && r && Object.defineProperty(target, key, r), r;
18651
- };
18652
- const BcmInput = class {
18653
- constructor(hostRef) {
18654
- index$1.registerInstance(this, hostRef);
18655
- this.focus = index$1.createEvent(this, "bcm-focus", 7);
18656
- this.blur = index$1.createEvent(this, "bcm-blur", 7);
18657
- this.clear = index$1.createEvent(this, "bcm-clear", 7);
18658
- this.change = index$1.createEvent(this, "bcm-change", 7);
18659
- this.input = index$1.createEvent(this, "bcm-input", 7);
18660
- this.isBlur = false;
18661
- this._id = generate.Generate.UID();
18662
- this._internal_id = generate.Generate.UID();
18663
- this.value = '';
18664
- this.size = bcm.Bcm.Size.medium;
18665
- this.label = undefined;
18666
- this.pattern = undefined;
18667
- this.tooltip = undefined;
18668
- this.placeholder = undefined;
18669
- this.disabled = false;
18670
- this.readonly = false;
18671
- this.clearable = false;
18672
- this.autocomplete = false;
18673
- this.name = undefined;
18674
- this.type = bcm.Bcm.InputType.text;
18675
- this.hidden = false;
18676
- this.required = false;
18677
- this.fullWidth = false;
18678
- this.noDefaultIcon = undefined;
18679
- this.disableWatchValue = false // datetimepicker
18680
- ;
18681
- this.passwordToggle = false // type password
18682
- ;
18683
- this.maxLength = null;
18684
- this.unitPrefix = null;
18685
- this.unit = undefined;
18686
- this.decimal = true;
18687
- this.min = undefined;
18688
- this.max = undefined;
18689
- this.step = undefined;
18690
- this.caption = undefined;
18691
- this.noCaption = false;
18692
- this.captionType = bcm.Bcm.Status.default;
18693
- this.captionError = undefined;
18694
- this.customErrorMessage = undefined;
18695
- this._prefix = undefined;
18696
- this._suffix = undefined;
18697
- this.captionCache = undefined;
18698
- this.captionTypeCache = undefined;
18699
- this.inValid = false;
18700
- this.valueCache = '';
18701
- this.focused = false;
18702
- this.isPasswordVisible = false;
18703
- }
18704
- connectedCallback() {
18705
- this.valueCache = this.value;
18706
- this.captionCache = this.caption;
18707
- this.captionTypeCache = this.captionType;
18708
- }
18709
- componentWillRender() {
18710
- const { type, isBlur, value } = this;
18711
- if (value) {
18712
- this.value.length > 0 && (this.checkPattern());
18713
- switch (type) {
18714
- case "number":
18715
- {
18716
- !this.checkValid("number") && (this.validationRange());
18717
- }
18718
- break;
18719
- case "email":
18720
- {
18721
- isBlur && (this.checkValid("email"));
18722
- }
18723
- break;
18724
- case "tel":
18725
- {
18726
- isBlur && (this.checkValid("phone"));
18727
- }
18728
- break;
18729
- }
18730
- }
18731
- else {
18732
- !this.required && (this.resetCaption());
18733
- }
18734
- }
18735
- async onBcmFocus() {
18736
- this.inputElement.focus();
18737
- }
18738
- async onBcmBlur() {
18739
- this.inputElement.blur();
18740
- }
18741
- async onBcmSelect() {
18742
- this.inputElement.select();
18743
- }
18744
- async set(data) {
18745
- await this.setValue(data);
18746
- }
18747
- async get() {
18748
- return this.value || null;
18749
- }
18750
- async setValue(value) {
18751
- this.inputElement.value = value;
18752
- this.handleChange();
18753
- return value;
18754
- }
18755
- async setClear() {
18756
- this.inputElement.value = '';
18757
- this.value = '';
18758
- await utils.delay(10);
18759
- return Promise.resolve();
18760
- }
18761
- async resetCaption() {
18762
- await utils.delay(10);
18763
- this.caption = this.captionCache;
18764
- this.captionType = this.captionTypeCache;
18765
- this.captionError = null;
18766
- this.inValid = false;
18767
- await utils.delay(10);
18768
- return Promise.resolve();
18769
- }
18770
- async getValue() {
18771
- return this.value;
18772
- }
18773
- watchValue() {
18774
- if (!this.disableWatchValue && this.type != "number") {
18775
- this.handleChange();
18776
- }
18777
- }
18778
- listenKeyDown(e) {
18779
- if (!this.disabled && !this.readonly) {
18780
- this.onBcmFocus();
18781
- if (this.type == "number") {
18782
- var which = e.which || 0;
18783
- var key = e.key;
18784
- if (which == 38) { // up arrow
18785
- e.preventDefault(),
18786
- this.stepUpOrDown('up');
18787
- }
18788
- if (which == 40) { // down arrow
18789
- e.preventDefault(),
18790
- this.stepUpOrDown('down');
18791
- }
18792
- if ((which == 190 || which == 110 || key == ".") && this.value.indexOf(".") > -1) { //.
18793
- e.preventDefault();
18794
- }
18795
- if ((which == 189 || which == 109 || key == "-")) { //-
18796
- if (this.value.charAt(0) == '-' || this.value.indexOf("-") > -1) {
18797
- e.preventDefault();
18798
- }
18799
- }
18800
- }
18801
- }
18802
- }
18803
- handleFocus() {
18804
- this.focused = true;
18805
- this.focus.emit();
18806
- this.whatchHasFocus();
18807
- }
18808
- handleBlur() {
18809
- this.focused = false;
18810
- this.isBlur = true;
18811
- this.whatchHasFocus();
18812
- this.blur.emit();
18813
- }
18814
- handleChange() {
18815
- this.valueSync();
18816
- }
18817
- handleInput() {
18818
- if (this.type == "number" && this.maxLength) {
18819
- const inputValue = this.inputElement.value;
18820
- if (inputValue && inputValue.length > 0 && inputValue.length > this.maxLength) {
18821
- this.inputElement.value = inputValue.substring(0, this.maxLength);
18822
- }
18823
- }
18824
- this.valueSync();
18825
- }
18826
- valueSync() {
18827
- if (this.value != this.inputElement.value) {
18828
- this.value = this.inputElement.value;
18829
- this.change.emit(this.value);
18830
- return true;
18831
- }
18832
- this.input.emit(this.value);
18833
- return false;
18834
- }
18835
- handleClear(e) {
18836
- this.inputElement.value = '';
18837
- this.value = '';
18838
- this.inputElement.focus();
18839
- this.clear.emit(e);
18840
- this.change.emit(this.value);
18841
- e.stopPropagation();
18842
- }
18843
- changePasswordVisibility() {
18844
- this.isPasswordVisible = !this.isPasswordVisible;
18845
- }
18846
- setCaption(caption = null, captionType = null) {
18847
- this.caption = caption || this.captionCache;
18848
- this.captionType = captionType || this.captionTypeCache;
18849
- this.captionError = captionType == "error" ? caption : null;
18850
- }
18851
- stepUpOrDown(type) {
18852
- if (!this.inValid && !this.disabled && !this.readonly) {
18853
- let step = +(this.step) || 1;
18854
- let val = +(this.value);
18855
- if (type == 'up') {
18856
- val = +(val + step);
18857
- }
18858
- else {
18859
- val = +(val - step);
18860
- }
18861
- this.value = val.toString();
18862
- this.change.emit(this.value);
18863
- }
18864
- }
18865
- validationRange() {
18866
- const { min, max, value } = this;
18867
- if (value) {
18868
- if (min && max) {
18869
- if (value < min || value > max) {
18870
- this.setCaption(stringHelper.StringHelper.getMessage('between', [min, max]), "error");
18871
- return false;
18872
- }
18873
- }
18874
- else if (min) {
18875
- if (value < min) {
18876
- this.setCaption(stringHelper.StringHelper.getMessage('min', [min]), "error");
18877
- return false;
18878
- }
18879
- }
18880
- else if (max) {
18881
- if (value > max) {
18882
- this.setCaption(stringHelper.StringHelper.getMessage('max', [max]), "error");
18883
- return false;
18884
- }
18885
- }
18886
- }
18887
- this.setCaption();
18888
- return true;
18889
- }
18890
- checkPattern() {
18891
- const { pattern, value } = this;
18892
- if (pattern) {
18893
- if (validators.Validators.pattern(value, pattern)) {
18894
- this.setCaption();
18895
- this.inValid = false;
18896
- }
18897
- else {
18898
- this.setCaption(stringHelper.StringHelper.getMessage('pattern'), "error");
18899
- this.inValid = true;
18900
- }
18901
- }
18902
- }
18903
- checkValid(type) {
18904
- const { value } = this;
18905
- if (validators.Validators.isValidate(value, type)) {
18906
- this.setCaption();
18907
- this.inValid = false;
18908
- }
18909
- else {
18910
- this.setCaption(stringHelper.StringHelper.getMessage(type), "error");
18911
- this.inValid = true;
18912
- }
18913
- return this.inValid;
18914
- }
18915
- whatchHasFocus() {
18916
- const { type, focused, valueCache, inValid } = this;
18917
- if (type == bcm.Bcm.InputType.number && inValid) {
18918
- console.log("whatchHasFocus");
18919
- if (focused) {
18920
- this.value = '';
18921
- }
18922
- else {
18923
- if (!stringHelper.StringHelper.isNullOrEmpty(this.value)) {
18924
- this.value = this.value ? this.fixToNumber(this.value) : '';
18925
- }
18926
- else {
18927
- this.value = valueCache;
18928
- }
18929
- }
18930
- }
18931
- }
18932
- fixToNumber(val) {
18933
- if (val) {
18934
- const decLen = numberHelper.NumberHelper.getDecimalLength(this.step);
18935
- return decLen > 0 ? numberHelper.NumberHelper.parseFloatFixed(val, decLen) : val;
18936
- }
18937
- return val;
18938
- }
18939
- eyeDropper() {
18940
- const eyeDropper = new window.EyeDropper();
18941
- eyeDropper
18942
- .open()
18943
- .then((color) => {
18944
- console.log("color: ", color.sRGBHex);
18945
- this.setValue(color.sRGBHex);
18946
- })
18947
- .catch((error) => {
18948
- if (error.name === "NotAllowedError") {
18949
- console.log("Permission to access sensor was denied.");
18950
- }
18951
- else if (error.name === "NotSupportedError") {
18952
- console.log("Sensor not supported.");
18953
- }
18954
- });
18955
- }
18956
- isEyeDropperSupported() {
18957
- return typeof window !== "undefined" && "EyeDropper" in window;
18958
- }
18959
- toggleLinked() {
18960
- const linkedElement = document.getElementById(`${this._id}-linked`);
18961
- if (linkedElement) {
18962
- linkedElement.toggle();
18963
- }
18964
- }
18965
- render() {
18966
- const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
18967
- const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
18968
- const hostClasses = index$2.classnames('bcm-input', `bcm-input__container--${size}`, {
18969
- hidden,
18970
- // 'no-margin': noMargin,
18971
- 'full-width': fullWidth
18972
- });
18973
- return (index$1.h(index$1.Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && index$1.h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), index$1.h(inputTemplate.InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == bcm.Bcm.InputType.color &&
18974
- index$1.h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, index$1.h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
18975
- }
18976
- static get watchers() { return {
18977
- "value": ["watchValue"]
18978
- }; }
18979
- };
18980
- __decorate$8([
18981
- isLoadDecorator.IsLoad()
18982
- ], BcmInput.prototype, "inputElement", void 0);
18983
- BcmInput.style = inputCss;
18984
-
18985
- const labelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}";
18986
-
18987
- var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
18988
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
18989
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
18990
- r = Reflect.decorate(decorators, target, key, desc);
18991
- else
18992
- for (var i = decorators.length - 1; i >= 0; i--)
18993
- if (d = decorators[i])
18994
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
18995
- return c > 3 && r && Object.defineProperty(target, key, r), r;
18996
- };
18997
- const BcmLabel = class {
18998
- constructor(hostRef) {
18999
- index$1.registerInstance(this, hostRef);
19000
- this._id = generate.Generate.UID();
19001
- this.required = false;
19002
- this.value = undefined;
19003
- this.size = "medium";
19004
- this.form = undefined;
19005
- this.htmlFor = undefined;
19006
- this.hidden = false;
19007
- this.type = bcm.Bcm.Status.default;
19008
- this.tooltip = undefined;
19009
- }
19010
- render() {
19011
- const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
19012
- const hostClasses = index$2.classnames('bcm-label', { hidden });
19013
- const Label = (index$1.h(labelTemplate.LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
19014
- return (index$1.h(index$1.Host, { class: hostClasses }, Label, tooltip && (index$1.h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, index$1.h("bcm-icon", { icon: "far fa-question-circle" })))));
19015
- }
19016
- get el() { return index$1.getElement(this); }
19017
- };
19018
- __decorate$7([
19019
- isLoadDecorator.IsLoad()
19020
- ], BcmLabel.prototype, "el", void 0);
19021
- BcmLabel.style = labelCss;
19022
-
19023
- var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
19024
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
19025
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
19026
- r = Reflect.decorate(decorators, target, key, desc);
19027
- else
19028
- for (var i = decorators.length - 1; i >= 0; i--)
19029
- if (d = decorators[i])
19030
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
19031
- return c > 3 && r && Object.defineProperty(target, key, r), r;
19032
- };
19033
- const BcmLinked = class {
19034
- constructor(hostRef) {
19035
- index$1.registerInstance(this, hostRef);
19036
- this.bcmOpen = index$1.createEvent(this, "bcm-open", 7);
19037
- this._id = generate.Generate.UID();
19038
- this.placement = bcm.Bcm$1.Placement["bottom-start"];
19039
- this.trigger = bcm.Bcm$1.TriggerType.click;
19040
- this.targetId = "";
19041
- this.height = undefined;
19042
- this.maxHeight = undefined;
19043
- this.minHeight = "50px";
19044
- this.isOpen = false;
19045
- }
19046
- target() {
19047
- const target = document.querySelectorAll(`[id="${this.targetId}"]`);
19048
- if (target.length > 0) {
19049
- target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
19050
- return target[0];
19051
- }
19052
- else {
19053
- // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
19054
- this.el.remove();
19055
- return null;
19056
- }
19057
- }
19058
- dismissEvent() {
19059
- document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
19060
- }
19061
- checkDataDismiss(e) {
19062
- generate.Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
19063
- }
19064
- hideChildLinked() {
19065
- this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
19066
- var _a;
19067
- (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
19068
- });
19069
- }
19070
- calculatePosition() {
19071
- const el = this.el;
19072
- if (el && this.target()) {
19073
- if (this.isOpen) {
19074
- floatingUi.FloatingUI({
19075
- ref: this.target(),
19076
- floating: el,
19077
- placement: this.placement,
19078
- offset: 4,
19079
- autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
19080
- autoSize: true,
19081
- style: {
19082
- height: this.height,
19083
- maxHeight: this.maxHeight,
19084
- minHeight: this.minHeight,
19085
- },
19086
- });
19087
- }
19088
- else {
19089
- el.style.visibility = "hidden";
19090
- el.style.opacity = "0";
19091
- }
19092
- }
19093
- }
19094
- init() {
19095
- const target = this.target();
19096
- if (target) {
19097
- target.setAttribute("is-linked", this.el.id);
19098
- if (!generate.Generate.getAncestor(target, "bcm-linked")) {
19099
- this.el.setAttribute("main-linked", "true");
19100
- }
19101
- else {
19102
- this.el.removeAttribute("main-linked");
19103
- }
19104
- }
19105
- }
19106
- componentDidLoad() {
19107
- this.init();
19108
- document.body.appendChild(this.el);
19109
- }
19110
- onLinkedDataDismis() {
19111
- // console.log('onLinkedDataDismis');
19112
- this.hide(false);
19113
- }
19114
- onBcmFloatingIsHide(e) {
19115
- if (e.detail.id === this._id) {
19116
- this.hide(false);
19117
- }
19118
- }
19119
- async show(wait = true) {
19120
- wait && (await utils.delay(50));
19121
- const target = this.target();
19122
- if (target) {
19123
- document.body.appendChild(this.el);
19124
- target.setAttribute("linked-is-open", "true");
19125
- this.isOpen = true;
19126
- this.calculatePosition();
19127
- }
19128
- else {
19129
- this.hide(false);
19130
- }
19131
- return this.isOpen;
19132
- }
19133
- async hide(wait = true) {
19134
- wait && (await utils.delay(50));
19135
- const target = this.target();
19136
- if (target) {
19137
- target.removeAttribute("linked-is-open");
19138
- this.hideChildLinked();
19139
- this.isOpen = false;
19140
- }
19141
- return this.isOpen;
19142
- }
19143
- async toggle(wait = true) {
19144
- return this.isOpen ? await this.hide(wait) : await this.show(wait);
19145
- }
19146
- clickListener(e) {
19147
- if (!this.target())
19148
- return;
19149
- const isTarget = generate.Generate.findEventPath(e, this.target());
19150
- const isSelf = generate.Generate.findEventPath(e, this.el);
19151
- const isLinked = generate.Generate.findEventPathWithNodeName(e, "BCM-LINKED");
19152
- if (!isTarget && !isSelf && !isLinked) {
19153
- this.hide();
19154
- this.bcmOpen.emit(this.isOpen);
19155
- return;
19156
- }
19157
- if (this.isOpen) {
19158
- isTarget && this.hide(false);
19159
- isSelf && this.checkDataDismiss(e);
19160
- if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
19161
- this.dismissEvent();
19162
- }
19163
- }
19164
- else {
19165
- isTarget && this.show(false);
19166
- }
19167
- }
19168
- resizeListener() {
19169
- this.calculatePosition();
19170
- }
19171
- scrollListener() {
19172
- this.calculatePosition();
19173
- }
19174
- wheelListener() {
19175
- this.calculatePosition();
19176
- }
19177
- watchIsOpen() {
19178
- this.bcmOpen.emit(this.isOpen);
19179
- }
19180
- render() {
19181
- const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
19182
- return (index$1.h(index$1.Host, { class: "tw-invisible tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-block tw-overscroll-contain tw-scroll-smooth tw-rounded tw-bg-white tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, index$1.h("slot", null)));
19183
- }
19184
- get el() { return index$1.getElement(this); }
19185
- static get watchers() { return {
19186
- "isOpen": ["watchIsOpen"]
19187
- }; }
19188
- };
19189
- __decorate$6([
19190
- isLoadDecorator.IsLoad()
19191
- ], BcmLinked.prototype, "el", void 0);
19192
-
19193
- const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
19194
- // if ( indeterminate ) {
19195
- // checked = indeterminate == 'determinate' ? true : false
19196
- // }
19197
- const hostClasses = index$2.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
19198
- // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
19199
- // 'size-3': optionType === 'button' && size === Bcm.Size.large,
19200
- 'error': captionType == bcm.Bcm.Status.error,
19201
- hidden,
19202
- checked,
19203
- disabled,
19204
- required,
19205
- readonly,
19206
- });
19207
- const bcmCheckboxIconClass = index$2.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
19208
- 'bcm-checkbox__label-icon-checked': checked,
19209
- });
19210
- const bcmCheckboxLabelClass = index$2.classnames('bcm-checkbox__label');
19211
- return (index$1.h("div", { class: hostClasses },
19212
- index$1.h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
19213
- index$1.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
19214
- index$1.h("span", { class: bcmCheckboxIconClass },
19215
- index$1.h("bcm-icon", { icon: "far fa-check" })))));
19216
- };
19217
-
19218
- const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
19219
- total = total || 0;
19220
- variableText = variableText ? utils.pluralize(variableText, total) : 'items';
19221
- return (index$1.h("footer", { class: "bcm-info-footer" },
19222
- index$1.h("bcm-text", { scale: "size-1", color: "grey-8" },
19223
- (multiple && selected > 0) && ` ( ${selected} selected ) `,
19224
- ` Total ${total} `,
19225
- found != null && ` / ${found} `,
19226
- ` ${variableText} found. `)));
19227
- };
19228
-
19229
- const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
19230
- const isHaveChildren = item.items && item.items.length > 0;
19231
- var text = stringHelper.StringHelper.htmlEntities(item.text);
19232
- let intersection = [];
19233
- if (highlight && stringHelper.StringHelper.slugify(text).includes(stringHelper.StringHelper.slugify(highlight))) {
19234
- if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
19235
- text = stringHelper.StringHelper.highlight(text, highlight);
19236
- }
19237
- }
19238
- if (item.type != 'group' && item.template) {
19239
- const match = item.template
19240
- .replace(/\s/g, '')
19241
- .match(/\{{[^}}]+\}/g)
19242
- .map(x => x.replace(/[{}]/g, ''));
19243
- const keys = Object.keys(item.itemObject);
19244
- intersection = match.filter(x => keys.includes(x));
19245
- }
19246
- text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? stringHelper.StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
19247
- const unClickable = !treeview && item.type == "group" && !item.clickable;
19248
- const disabled = item.disabled;
19249
- const readonly = item.readonly;
19250
- const itemClick = (event) => {
19251
- let path = event.path || event.composedPath();
19252
- if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
19253
- return;
19254
- }
19255
- if (readonly) {
19256
- collapseClick();
19257
- }
19258
- !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
19259
- };
19260
- const collapseClick = () => {
19261
- item.open = item.isSearching;
19262
- openGroup(item.id);
19263
- };
19264
- return (index$1.h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), class: index$2.classnames('bcm-list__item',
19265
- // size === 'large' ? 'size-3' : 'size-2',
19266
- 'bcm-list__item-' + size, {
19267
- 'bcm-list__item--group': !treeview && item.type == 'group',
19268
- 'bcm-list__item--readonly': readonly,
19269
- }) },
19270
- index$1.h("div", { class: index$2.classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled: disabled }) },
19271
- treeview && (index$1.h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && index$1.h("bcm-icon", { icon: index$2.classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
19272
- index$1.h("div", { class: index$2.classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
19273
- checkboxes && (treeview || (!treeview && item.type != 'group')) && (index$1.h("div", { class: "bcm-list__item-content-text-checkbox" },
19274
- index$1.h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
19275
- index$1.h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
19276
- (treeview || !treeview && item.type == "group") && isHaveChildren && (index$1.h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
19277
- item.items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
19278
- };
19279
-
19280
- const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, }) => {
19281
- const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
19282
- const setScrollHeight = () => {
19283
- const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
19284
- const itemCount = searchFound >= 0 || (treeview ? items.length : totalData);
19285
- let scrollHeight = itemCount * itemHeight || 0;
19286
- return {
19287
- 'min-height': `${scrollHeight}px`,
19288
- 'overscroll-behavior': 'none',
19289
- 'height': '100%',
19290
- 'display': 'flex',
19291
- 'flex-direction': 'column',
19292
- };
19293
- };
19294
- return (index$1.h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } },
19295
- data && searchable && (index$1.h("section", { class: "bcm-list__container-search" },
19296
- index$1.h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
19297
- index$1.h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } },
19298
- index$1.h("div", { style: setScrollHeight() },
19299
- checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (index$1.h("section", { class: "bcm-list__container-select-all" },
19300
- index$1.h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
19301
- items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
19302
- (!items || items.length === 0) && searchFound != 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
19303
- index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
19304
- index$1.h("span", { innerHTML: emptyText || 'No data' })))),
19305
- searchFound == 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
19306
- index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
19307
- index$1.h("span", { innerHTML: emptyText || 'No Data Found' })))))),
19308
- infoFooter && data && data.length > 0 && (index$1.h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
19309
- };
19310
-
19311
- const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
19312
- const classes = index$2.classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
19313
- 'bcm-stepper__header-item--active': active,
19314
- 'bcm-stepper__header-item--valid': valid,
19315
- 'bcm-stepper__header-item--invalid': !valid,
19316
- 'bcm-stepper__header-item--disabled': disabled,
19317
- 'hidden': headerHidden,
19318
- });
19319
- const defaultIcons = {
19320
- success: 'fal fa-check',
19321
- warning: 'fal fa-exclamation-triangle',
19322
- error: 'fal fa-times',
19323
- };
19324
- const customIcon = (icon || (statusIcon && defaultIcons[status])) && index$1.h("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
19325
- return (index$1.h("div", { class: classes },
19326
- index$1.h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
19327
- index$1.h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? index$1.h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
19328
- index$1.h("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
19329
- index$1.h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
19330
- };
19331
-
19332
- const { state: state$2 } = index.createStore({
19333
- value: new Map(),
19334
- });
19335
- const setValue$2 = val => {
19336
- const { id, dataSource, options } = val;
19337
- const { type, treeview, checkboxes, searchable, value, name, label, size, disabled, readonly, highlight, required, hidden, fullWidth, height, maxHeight, minHeight, width, infoFooter, variableText, template, allOpen, keyControl, checkAll, linkedComponent, placeholder, searchPlaceholder, searchIsOnlyChilds, clearable, caption, noCaption, captionType, captionError, placement, } = options;
19338
- const itemOptions = { size, checkboxes, template, allOpen, highlight, treeview };
19339
- const data = {
19340
- id: generate.snq(() => id, generate.Generate.UID),
19341
- dataSource: dataSource && dataSource.length > 0 && recursive$1(dataSource, itemOptions),
19342
- options: {
19343
- type,
19344
- treeview,
19345
- checkboxes,
19346
- searchable,
19347
- value,
19348
- name,
19349
- label,
19350
- size,
19351
- disabled,
19352
- readonly,
19353
- highlight,
19354
- required,
19355
- hidden,
19356
- fullWidth,
19357
- height,
19358
- maxHeight,
19359
- minHeight,
19360
- width,
19361
- infoFooter,
19362
- variableText,
19363
- template,
19364
- allOpen,
19365
- keyControl,
19366
- checkAll,
19367
- linkedComponent,
19368
- placeholder,
19369
- searchPlaceholder,
19370
- searchIsOnlyChilds,
19371
- clearable,
19372
- caption,
19373
- noCaption,
19374
- captionType,
19375
- captionError,
19376
- placement,
19377
- },
19378
- totalItems: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && calculateTotalItems(dataSource, options.treeview),
19379
- totalRoots: dataSource === null || dataSource === void 0 ? void 0 : dataSource.length,
19380
- };
19381
- state$2.value.set(data.id, data);
19382
- };
19383
- const recursive$1 = (data, options, parentId) => {
19384
- let recData = [];
19385
- if (data && data.length > 0) {
19386
- recData = data.map(item => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: generate.snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
19387
- ? { items: generate.snq(() => recursive$1(item.items, options, item.id), []) }
19388
- : { items: [] }))));
19389
- }
19390
- return recData;
19391
- };
19392
- const removeValue$1 = _id => {
19393
- state$2.value.delete(_id);
19394
- };
19395
- const getValue$2 = id => generate.snq(() => state$2.value.get(id), {});
19396
- const calculateTotalItems = (dataSource, treeview) => {
19397
- let total = 0;
19398
- dataSource.forEach(item => {
19399
- if (treeview || (!treeview && item.type != 'group')) {
19400
- total += 1;
19401
- }
19402
- if ((treeview || (!treeview && item.type == 'group')) && item.items) {
19403
- total += calculateTotalItems(item.items, treeview);
19404
- }
19405
- });
19406
- return total;
19407
- };
19408
- const getData = id => {
19409
- let data = [];
19410
- const value = getValue$2(id);
19411
- if (value) {
19412
- const { dataSource } = value;
19413
- data = dataSource;
19414
- }
19415
- return data;
19416
- };
19417
- const getDataPagination$1 = (id, limit = 3, ids) => {
19418
- let data = [];
19419
- const value = getValue$2(id);
19420
- if (value) {
19421
- const { dataSource } = value;
19422
- data = !ids ? dataSource.slice(0, limit) : dataSource.filter(item => ids.indexOf(item.id) > -1).slice(0, limit);
19423
- }
19424
- return data;
19425
- };
19426
- const openGroup = (id, groupId, items, status) => {
19427
- let dataSource;
19428
- if (items) {
19429
- dataSource = items;
19430
- }
19431
- else {
19432
- const value = getValue$2(id);
19433
- dataSource = value.dataSource;
19434
- }
19435
- if (dataSource) {
19436
- dataSource.forEach(item => {
19437
- if (status != undefined) {
19438
- item.open = status;
19439
- }
19440
- else if (item.id == groupId) {
19441
- item.open = !item.open;
19442
- item.isSearching = item.open;
19443
- if (!item.open && item.items) {
19444
- openGroup(id, groupId, item.items, false);
19445
- }
19446
- }
19447
- else if (item.items) {
19448
- openGroup(id, groupId, item.items);
19449
- }
19450
- });
19451
- }
19452
- };
19453
- const removeOtherTags = (id, ids, items) => {
19454
- ids = Array.isArray(ids) ? ids : [ids];
19455
- let dataSource;
19456
- if (items) {
19457
- dataSource = items;
19458
- }
19459
- else {
19460
- const value = getValue$2(id);
19461
- dataSource = value.dataSource;
19462
- }
19463
- if (dataSource) {
19464
- ids.forEach(otherTagIds => {
19465
- dataSource.forEach(child => {
19466
- if (child.id == otherTagIds) {
19467
- child.checked = false;
19468
- child.itemObject.checked = false;
19469
- }
19470
- else if (child.items) {
19471
- onRemoveItems(id, otherTagIds, child.items);
19472
- }
19473
- });
19474
- });
19475
- }
19476
- };
19477
- const onRemoveItems = (id, itemId, items) => {
19478
- if (items) {
19479
- items.forEach(item => {
19480
- if (item.id == itemId) {
19481
- item.checked = false;
19482
- item.itemObject.checked = false;
19483
- indeterminateStatus(id, item.parentId);
19484
- }
19485
- else if (item.items) {
19486
- onRemoveItems(id, itemId, item.items);
19487
- }
19488
- });
19489
- }
19490
- };
19491
- const addChecked = (id, ids) => {
19492
- const value = getValue$2(id);
19493
- if (value) {
19494
- ids.forEach(item => {
19495
- checkedItem(id, item);
19496
- });
19497
- }
19498
- };
19499
- const checkedItem = (id, itemId) => {
19500
- findItem(id, itemId);
19501
- };
19502
- const findItem = (id, itemId, items) => {
19503
- itemId = Array.isArray(itemId) ? itemId : [itemId];
19504
- let dataSource;
19505
- if (items) {
19506
- dataSource = items;
19507
- }
19508
- else {
19509
- const value = getValue$2(id);
19510
- dataSource = value.dataSource;
19511
- }
19512
- if (dataSource) {
19513
- dataSource.forEach(item => {
19514
- if (itemId.includes(item.id)) {
19515
- checkedProcess(id, item);
19516
- if (item.parentId) {
19517
- indeterminateStatus(id, item.parentId);
19518
- }
19519
- }
19520
- else if (item.items) {
19521
- findItem(id, itemId, item.items);
19522
- }
19523
- });
19524
- }
19525
- };
19526
- const checkedProcess = (id, item, status) => {
19527
- const value = getValue$2(id);
19528
- if (value) {
19529
- const treeview = value.options.treeview;
19530
- if (item) {
19531
- // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
19532
- if (treeview || (!treeview && item.type != 'group')) {
19533
- if (!item.disabled) {
19534
- if (status != undefined) {
19535
- item.checked = status;
19536
- }
19537
- else {
19538
- item.checked = !item.checked;
19539
- }
19540
- item.itemObject.checked = item.checked;
19541
- item.indeterminate = item.checked ? 'determinate' : 'uncheck';
19542
- }
19543
- }
19544
- if (item.items) {
19545
- item.items.forEach(child => {
19546
- checkedProcess(id, child, status == undefined ? item.checked : status);
19547
- });
19548
- }
19549
- }
19550
- }
19551
- };
19552
- const indeterminateStatus = (id, itemId, items) => {
19553
- let dataSource;
19554
- if (items) {
19555
- dataSource = items;
19556
- }
19557
- else {
19558
- const value = getValue$2(id);
19559
- dataSource = value.dataSource;
19560
- }
19561
- if (dataSource) {
19562
- dataSource.forEach(item => {
19563
- if (item.id == itemId) {
19564
- let allChecked = true;
19565
- let allUnchecked = true;
19566
- if (item.items) {
19567
- item.items.map(child => {
19568
- (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
19569
- !child.checked && (allChecked = false);
19570
- });
19571
- }
19572
- const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
19573
- item.indeterminate = indeterminateState;
19574
- item.checked = indeterminateState == 'determinate' ? true : false;
19575
- item.itemObject.checked = item.checked;
19576
- if (item.parentId) {
19577
- indeterminateStatus(id, item.parentId);
19578
- }
19579
- }
19580
- else if (item.items) {
19581
- indeterminateStatus(id, itemId, item.items);
19582
- }
19583
- });
19584
- }
19585
- };
19586
- const filterData = (id, ids, items, searchOtherTag) => {
19587
- let checkeds = [];
19588
- let visibled = [];
19589
- getValue$2(id).isSearchOtherTag = searchOtherTag;
19590
- let dataSource;
19591
- if (items) {
19592
- dataSource = items;
19593
- }
19594
- else {
19595
- const value = getValue$2(id);
19596
- dataSource = value.dataSource;
19597
- }
19598
- if (dataSource) {
19599
- dataSource.forEach(item => {
19600
- if (ids) {
19601
- item.hidden = true;
19602
- // const filter = ids.find((find) => find.id === item.id)
19603
- var filter;
19604
- for (let index = 0; index < ids.length; index++) {
19605
- if (ids[index].id === item.id) {
19606
- filter = ids[index];
19607
- break;
19608
- }
19609
- }
19610
- if (filter) {
19611
- item.hidden = false;
19612
- if (!getValue$2(id).isSearchOtherTag) {
19613
- item.isSearching = true;
19614
- }
19615
- visibled.push(item);
19616
- if (item.checked) {
19617
- checkeds.push(item);
19618
- }
19619
- if (filter.items) {
19620
- const { checkedItems, visibledItems } = filterData(id, filter.items, item.items, searchOtherTag);
19621
- if (checkedItems) {
19622
- checkeds = [...new Set([...checkeds, ...checkedItems])];
19623
- }
19624
- if (visibledItems) {
19625
- visibled = [...new Set([...visibled, ...visibledItems])];
19626
- }
19627
- }
19628
- }
19629
- }
19630
- else {
19631
- item.hidden = false;
19632
- if (item.items) {
19633
- filterData(id, null, item.items);
19634
- }
19635
- visibled.push(item);
19636
- item.isSearching = false;
19637
- }
19638
- });
19639
- }
19640
- return { checkedItems: checkeds !== null && checkeds !== void 0 ? checkeds : [], visibledItems: visibled !== null && visibled !== void 0 ? visibled : [] };
19641
- };
19642
- const getSelected = (id, items) => {
19643
- let dataSource;
19644
- let selected = null;
19645
- if (items) {
19646
- dataSource = items;
19647
- }
19648
- else {
19649
- const value = getValue$2(id);
19650
- dataSource = value.dataSource;
19651
- }
19652
- if (dataSource) {
19653
- dataSource.forEach(item => {
19654
- if (item.selected) {
19655
- selected = item.itemObject;
19656
- }
19657
- else if (item.items) {
19658
- const found = getSelected(id, item.items);
19659
- if (found) {
19660
- selected = found;
19661
- }
19662
- }
19663
- });
19664
- }
19665
- return selected;
19666
- };
19667
- const getCheckedList = (id, items) => {
19668
- let dataSource;
19669
- let checkedList = [];
19670
- let nestedResult = [];
19671
- if (items) {
19672
- dataSource = items;
19673
- }
19674
- else {
19675
- const value = getValue$2(id);
19676
- dataSource = value.dataSource;
19677
- }
19678
- if (dataSource) {
19679
- dataSource.forEach(item => {
19680
- var _a;
19681
- let foundChild = [];
19682
- let foundItem = [];
19683
- if (item.checked) {
19684
- checkedList.push(item.itemObject);
19685
- foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
19686
- }
19687
- if (item.items) {
19688
- const found = getCheckedList(id, item.items);
19689
- if (((_a = found === null || found === void 0 ? void 0 : found.checkedList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
19690
- checkedList = [...checkedList, ...found.checkedList];
19691
- }
19692
- if (found.nestedResult.length > 0) {
19693
- foundChild = found.nestedResult;
19694
- }
19695
- }
19696
- if (foundChild.length > 0) {
19697
- if (foundItem.length == 0) {
19698
- foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
19699
- }
19700
- foundItem[0].items = foundChild;
19701
- nestedResult.push(foundItem[0]);
19702
- }
19703
- else {
19704
- if (foundItem.length > 0) {
19705
- foundItem[0].items = foundChild;
19706
- nestedResult.push(foundItem[0]);
19707
- }
19708
- }
19709
- });
19710
- }
19711
- return { checkedList: (checkedList === null || checkedList === void 0 ? void 0 : checkedList.length) > 0 ? checkedList : null, nestedResult: nestedResult };
19712
- };
19713
- const selectedItem = (id, itemId, items) => {
19714
- let dataSource;
19715
- let selected = [];
19716
- if (items) {
19717
- dataSource = items;
19718
- }
19719
- else {
19720
- const value = getValue$2(id);
19721
- dataSource = value.dataSource;
19722
- }
19723
- if (dataSource) {
19724
- dataSource.forEach(item => {
19725
- if (itemId) {
19726
- if (item.id == itemId) {
19727
- // if (!item.selected){
19728
- item.selected = true;
19729
- item.itemObject.selected = item.selected;
19730
- // }
19731
- }
19732
- else {
19733
- if (item.selected) {
19734
- item.selected = false;
19735
- item.itemObject.selected = item.selected;
19736
- }
19737
- }
19738
- }
19739
- if (item.items) {
19740
- const found = selectedItem(id, itemId, item.items);
19741
- if ((found === null || found === void 0 ? void 0 : found.length) > 0) {
19742
- selected = [...selected, ...found];
19743
- }
19744
- }
19745
- if (item.selected) {
19746
- selected.push(item.itemObject);
19747
- }
19748
- });
19749
- }
19750
- return selected && selected.length > 0 ? selected : null;
19751
- };
19752
- const setClear = (id, items) => {
19753
- let dataSource;
19754
- if (items) {
19755
- dataSource = items;
19756
- }
19757
- else {
19758
- const value = getValue$2(id);
19759
- dataSource = value.dataSource;
19760
- }
19761
- if (dataSource) {
19762
- dataSource.forEach(item => {
19763
- var _a, _b, _c;
19764
- item.checked && (item.checked = false);
19765
- item.selected && (item.selected = false);
19766
- item.indeterminate && (item.indeterminate = 'uncheck');
19767
- ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
19768
- ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
19769
- ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
19770
- if (item.items) {
19771
- setClear(id, item.items);
19772
- }
19773
- });
19774
- }
19775
- };
19776
- const selectAll = (id, status) => {
19777
- const dataSource = getValue$2(id).dataSource;
19778
- if (dataSource) {
19779
- dataSource.forEach(item => {
19780
- checkedProcess(id, item, status);
19781
- });
19782
- }
19783
- };
19784
- const updateOptions = (id, options) => {
19785
- Object.keys(getValue$2(id).options).forEach(key => {
19786
- getValue$2(id).options[key] = options[key];
19787
- });
19788
- };
19789
- const removeState$1 = id => {
19790
- return Promise.resolve(state$2.value.delete(id));
19791
- };
19792
- const listState = {
19793
- setValue: setValue$2,
19794
- removeValue: removeValue$1,
19795
- getValue: getValue$2,
19796
- getData,
19797
- getDataPagination: getDataPagination$1,
19798
- openGroup,
19799
- checkedItem,
19800
- filterData,
19801
- getSelected,
19802
- getCheckedList,
19803
- selectedItem,
19804
- addChecked,
19805
- setClear,
19806
- selectAll,
19807
- removeOtherTags,
19808
- onRemoveItems,
19809
- updateOptions,
19810
- removeState: removeState$1,
19811
- };
19812
-
19813
- class KeyControl {
19814
- constructor(keyCode, element, elementName, childElementName) {
19815
- this.elementName = '';
19816
- this.childElementName = '';
19817
- this.keyCode = keyCode;
19818
- this.element = element;
19819
- this.elementName = elementName;
19820
- this.childElementName = childElementName;
19821
- }
19822
- getKeyCode() {
19823
- return this.keyCode;
19824
- }
19825
- getElementName() {
19826
- return this.elementName;
19827
- }
19828
- getChildElementName() {
19829
- return this.childElementName;
19830
- }
19831
- getFocusedElementName() {
19832
- return this.getElementName() + '.focused';
19833
- }
19834
- getFocusedElement() {
19835
- return this.element.querySelectorAll(this.getFocusedElementName())[0] || null;
19836
- }
19837
- getFirstElement() {
19838
- return this.element.querySelectorAll(this.getElementName())[0] || null;
19839
- }
19840
- getNextElement() {
19841
- var _a;
19842
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) || this.getFirstElement();
19843
- }
19844
- getPreviousElement() {
19845
- var _a;
19846
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.getFirstElement();
19847
- }
19848
- getChildElement() {
19849
- var _a;
19850
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName())[0]) || null;
19851
- }
19852
- getParentElement(element) {
19853
- if (element && element) {
19854
- const isRootElement = element && element.attributes['data-isroot'];
19855
- if (isRootElement) {
19856
- return element;
19857
- }
19858
- return this.getParentElement(element.parentNode);
19859
- }
19860
- }
19861
- focusElementIsOpen() {
19862
- var _a;
19863
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.classList.contains('bcm-list__item--open')) || false;
19864
- }
19865
- isRootElement() {
19866
- var _a;
19867
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName()).length) > 0;
19868
- }
19869
- isRootElementIsOpen() {
19870
- return this.getFocusedElement().classList.contains('bcm-list__item--open');
19871
- }
19872
- getFocusedChildElement() {
19873
- var _a;
19874
- return ((_a = this.getChildElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.focused')[0]) || null;
19875
- }
19876
- isLastElement() {
19877
- var _a;
19878
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null;
19879
- }
19880
- focusParentElementFirstChild() {
19881
- var _a, _b;
19882
- return this.setFocus((_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
19883
- }
19884
- isFirstElement() {
19885
- var _a;
19886
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null;
19887
- }
19888
- focusRootElement() {
19889
- var _a, _b, _c;
19890
- return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.firstChild);
19891
- }
19892
- nextRootElement() {
19893
- var _a, _b, _c;
19894
- return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.nextElementSibling);
19895
- }
19896
- findFocusElementParent() {
19897
- return this.getFocusedElement().parentNode.querySelectorAll('.bcm-list__item--open');
19898
- }
19899
- getLastElement() {
19900
- return this.element.querySelectorAll(this.getElementName())[this.element.querySelectorAll(this.getElementName()).length - 1] || null;
19901
- }
19902
- setFocus(element) {
19903
- element.focus();
19904
- }
19905
- }
19906
-
19907
- class ListKeyControl extends KeyControl {
19908
- constructor(keyCode, element, treeview, checkBoxes) {
19909
- super(keyCode, element, '.bcm-list__item', '.bcm-list__item-childs');
19910
- this.isTreeview = false;
19911
- this.isCheckBoxes = false;
19912
- this.isTreeview = treeview;
19913
- this.isCheckBoxes = checkBoxes;
19914
- }
19915
- keyUpControl() {
19916
- if (this.isTreeview) {
19917
- this.keyUpTreeview();
19918
- }
19919
- else {
19920
- if (this.isFirstElement()) {
19921
- this.setFocus(this.getLastElement());
19922
- }
19923
- else {
19924
- this.setFocus(this.getPreviousElement());
19925
- }
19926
- }
19927
- }
19928
- keyDownTreeView() {
19929
- var _a;
19930
- if (this.isTreeview) {
19931
- if (this.isRootElement() && this.isRootElementIsOpen()) {
19932
- const childs = this.getChildElement();
19933
- if (childs) {
19934
- this.setFocus(childs.firstChild);
19935
- }
19936
- }
19937
- else {
19938
- if (this.isLastElement() && this.getParentElement(this.getFocusedElement())) {
19939
- this.setFocus((_a = this.getParentElement(this.getFocusedElement())) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
19940
- }
19941
- else {
19942
- this.setFocus(this.getNextElement());
19943
- }
19944
- }
19945
- }
19946
- }
19947
- keyUpTreeview() {
19948
- if (this.isFirstElement()) {
19949
- const parent = this.getParentElement(this.getFocusedElement());
19950
- this.setFocus(parent);
19951
- }
19952
- else {
19953
- const previousElement = this.getPreviousElement();
19954
- if (previousElement) {
19955
- if (previousElement.classList.contains('bcm-list__item--open')) {
19956
- const getChildElement = previousElement.querySelectorAll(this.getChildElementName())[0];
19957
- console.log({ getChildElement });
19958
- this.setFocus(getChildElement.lastChild);
19959
- }
19960
- else {
19961
- this.setFocus(previousElement);
19962
- }
19963
- }
19964
- }
19965
- }
19966
- keyDownControl() {
19967
- if (this.isTreeview) {
19968
- this.keyDownTreeView();
19969
- }
19970
- else {
19971
- if (this.isLastElement()) {
19972
- this.setFocus(this.getFirstElement());
19973
- }
19974
- else {
19975
- this.setFocus(this.getNextElement());
19976
- }
19977
- }
19978
- }
19979
- keyRightControl() {
19980
- if (this.isTreeview) {
19981
- if (!this.isRootElementIsOpen() && this.isRootElement()) {
19982
- const { id } = this.getFocusedElement();
19983
- this.openGroup(id);
19984
- }
19985
- }
19986
- }
19987
- keyLeftControl() {
19988
- if (this.isTreeview) {
19989
- if (this.isRootElementIsOpen() && this.isRootElement()) {
19990
- const { id } = this.getFocusedElement();
19991
- this.openGroup(id);
19992
- }
19993
- }
19994
- }
19995
- keyEnterControl() { }
19996
- keySpaceControl() {
19997
- if (this.isCheckBoxes) {
19998
- const { id } = this.getFocusedElement();
19999
- this.checkedItem(id);
20000
- }
20001
- }
20002
- keyDown() {
20003
- switch (this.getKeyCode()) {
20004
- case bcm.Bcm.KeyCode.up:
20005
- this.keyUpControl();
20006
- break;
20007
- case bcm.Bcm.KeyCode.down:
20008
- this.keyDownControl();
20009
- break;
20010
- case bcm.Bcm.KeyCode.left:
20011
- this.keyLeftControl();
20012
- break;
20013
- case bcm.Bcm.KeyCode.right:
20014
- this.keyRightControl();
20015
- break;
20016
- case bcm.Bcm.KeyCode.enter:
20017
- this.keyEnterControl();
20018
- break;
20019
- case bcm.Bcm.KeyCode.space:
20020
- this.keySpaceControl();
20021
- break;
20022
- }
20023
- }
20024
- keyUp() { }
20025
- }
20026
-
20027
- class ListTagControl {
20028
- constructor(containerId, values, listId, selectedOtherTag, clearable) {
20029
- this.clearable = false;
20030
- this.containerId = containerId;
20031
- this.values = values;
20032
- this.listId = listId;
20033
- this.selectedOtherTag = selectedOtherTag;
20034
- this.clearable = clearable;
20035
- }
20036
- getTooltip(id, text) {
20037
- return new tooltipHelper.Tooltip({ message: text, targetId: id, placement: 'bottom' });
20038
- }
20039
- tagHtmlTemplate(tag, isOtherTag = false, otherTagIsSingle = false) {
20040
- return `<span class="bcm-tag__content dismissable ${!otherTagIsSingle && isOtherTag && (this.selectedOtherTag ? 'checkable checked' : '')}">
20041
- <span class="value">${tag.text}</span>
20042
- ${otherTagIsSingle
20043
- ? ''
20044
- : `
20045
- <span class="right close-button" bcm-list-tag-dismiss >
20046
- <bcm-icon icon="fal fa-times"></bcm-icon>
20047
- </span>`}
20048
- </span>`;
20049
- }
20050
- getContainer() {
20051
- return document.getElementById(this.containerId);
20052
- }
20053
- getContainerWidth() {
20054
- let tagContainerWidth = generate.snq(() => document.getElementById(this.containerId).clientWidth, 0);
20055
- tagContainerWidth = (this.clearable ? tagContainerWidth - 20 : tagContainerWidth) - 20;
20056
- return [tagContainerWidth < 130 ? 130 : tagContainerWidth - 20, tagContainerWidth];
20057
- }
20058
- isClickDismiss(e) {
20059
- const path = e.path || (e.composedPath && e.composedPath());
20060
- const tag = path.find(element => element.attributes && element.attributes['bcm-list-tag-dismiss']);
20061
- return !!tag;
20062
- }
20063
- onClickControl(e, id, isOtherTag = false) {
20064
- const isDismiss = this.isClickDismiss(e);
20065
- let tooltipId = '';
20066
- if (isDismiss) {
20067
- this.onClickDismiss(id);
20068
- tooltipId = isOtherTag ? `bcm-list-input-tag-${this.listId}-other-tag` : `list-${this.listId}-${id}`;
20069
- this.getTooltip(tooltipId, '').hide();
20070
- }
20071
- else {
20072
- isOtherTag ? this.onClickOtherTag(id) : this.onClickTag(id);
20073
- }
20074
- }
20075
- calculateTags() {
20076
- const containerWidth = this.getContainerWidth();
20077
- const virtualDom = this.getContainer();
20078
- if (virtualDom) {
20079
- if (this.values && this.values.length > 0) {
20080
- if (containerWidth[0] > 0 && virtualDom) {
20081
- virtualDom.innerHTML = '';
20082
- this.values.slice(0, 50).map(value => {
20083
- const tag = document.createElement('div');
20084
- tag.classList.add('bcm-tag');
20085
- tag.id = `list-${this.listId}-${value.id}`;
20086
- // tag.title = value.tagTitle || value.text || '';
20087
- tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').show();
20088
- tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').hide();
20089
- tag.dataset.id = value.id;
20090
- tag.onclick = e => this.onClickControl(e, value.id);
20091
- tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, value), { text: stringHelper.StringHelper.textLimitter(value.text, 10) }));
20092
- virtualDom.appendChild(tag);
20093
- });
20094
- let tags = virtualDom.querySelectorAll('.bcm-tag');
20095
- let otherTags = [];
20096
- let visibleTags = [];
20097
- const checkControl = () => {
20098
- const virtualDomTags = virtualDom.querySelectorAll('.bcm-tag');
20099
- if (visibleTags.length === 1 && (virtualDomTags === null || virtualDomTags === void 0 ? void 0 : virtualDomTags.length) === 1) {
20100
- visibleTags[0].innerHTML = this.tagHtmlTemplate({ text: '+1' }, false, true);
20101
- }
20102
- };
20103
- let tagsWidth = Array.from(tags).reduce((acc, tag) => {
20104
- const tagClientWidth = tag.clientWidth > 50 ? tag.clientWidth : 50;
20105
- if (tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0]) {
20106
- acc += tagClientWidth + 10;
20107
- visibleTags.push(tag);
20108
- const checkFreeSpace = tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0];
20109
- !checkFreeSpace && containerWidth[1] < 70 && checkControl();
20110
- }
20111
- else {
20112
- otherTags.push(tag);
20113
- tag.remove();
20114
- }
20115
- return acc;
20116
- }, 0);
20117
- const otherTagElement = this.values.slice(visibleTags.length);
20118
- const virtualDomLastElements = virtualDom.lastElementChild;
20119
- const otherTagTextControl = args => {
20120
- const { count, width } = args;
20121
- if (count > 999)
20122
- return '999+' + utils.pluralize('item', count);
20123
- if (width > 100)
20124
- return `${count} ` + utils.pluralize('item', count) + ' selected';
20125
- if (width < 100)
20126
- return `+${count < 10 ? count : '9'}`;
20127
- };
20128
- if (otherTags && otherTags.length > 0 && virtualDomLastElements && virtualDomLastElements.id !== `bcm-list-input-tag-${this.listId}-other-tag`) {
20129
- otherTags.push(virtualDomLastElements);
20130
- if (otherTags.length > 0) {
20131
- const otherCounter = otherTagElement.length + 1;
20132
- const createOthertagElement = {
20133
- id: `bcm-list-input-tag-${this.listId}-other-tag`,
20134
- text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
20135
- title: generate.snq(() => otherTags
20136
- .map(tag => this.values.find(value => value.id == tag.dataset.id))
20137
- .slice(0, 15)
20138
- .map(item => stringHelper.StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
20139
- .toString()
20140
- .split(',')
20141
- .join('\r\n') + (otherTags.length > 15 ? ('\r\n...') : ''), '...'),
20142
- };
20143
- virtualDomLastElements.remove();
20144
- visibleTags = visibleTags.filter(tag => tag.id !== virtualDomLastElements.id);
20145
- const hiddenTags = this.values.filter(value => !visibleTags.find(tag => tag.dataset.id == value.id)).map(value => value.id);
20146
- const otherTag = document.createElement('div');
20147
- const otherTagIds = hiddenTags.join(',');
20148
- const otherTagIsSingle = visibleTags.length === 0;
20149
- otherTag.classList.add('bcm-tag');
20150
- !otherTagIsSingle && otherTag.classList.add('bcm-tag--other');
20151
- otherTag.id = createOthertagElement.id;
20152
- // otherTag.title = createOthertagElement.title || false;
20153
- if (createOthertagElement.title) {
20154
- otherTag.onmouseenter = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).show();
20155
- otherTag.onmouseleave = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).hide();
20156
- }
20157
- otherTag.onclick = e => this.onClickControl(e, otherTagIds, otherTagIsSingle ? false : true);
20158
- otherTag.innerHTML = this.tagHtmlTemplate(createOthertagElement, true, otherTagIsSingle);
20159
- otherTag.dataset.ids = hiddenTags.join(',');
20160
- virtualDom.appendChild(otherTag);
20161
- }
20162
- }
20163
- const otherTag = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
20164
- const otherTagWidth = otherTag ? (otherTag.clientWidth && otherTag.clientWidth < 50 ? 50 : otherTag.clientWidth) : 200;
20165
- const tagsPerRow = Math.floor(containerWidth[0] - tagsWidth);
20166
- if (tagsPerRow > otherTagWidth) {
20167
- if (otherTag) {
20168
- const findElement = this.values.find(value => value.id == otherTag.dataset.ids.split(',')[0]);
20169
- const tag = document.createElement('div');
20170
- tag.classList.add('bcm-tag');
20171
- tag.id = `list-${this.listId}-${findElement.id}`;
20172
- // tag.title = findElement?.title || '';
20173
- tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').show();
20174
- tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').hide();
20175
- tag.dataset.id = findElement.id;
20176
- tag.onclick = e => this.onClickControl(e, findElement === null || findElement === void 0 ? void 0 : findElement.id);
20177
- tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, findElement), { text: stringHelper.StringHelper.textLimitter(findElement.text, 10) }));
20178
- const otherTagElement = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
20179
- otherTagElement.remove();
20180
- virtualDom.appendChild(tag);
20181
- }
20182
- }
20183
- }
20184
- }
20185
- else {
20186
- virtualDom.innerHTML = '';
20187
- }
20188
- }
20189
- }
20190
- }
20191
-
20192
- const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{scroll-behavior:smooth;padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800;transition:visibility 0s linear 400ms, opacity 100ms, transform 200ms}.bcm-list__container.bcm-list__type-linked-component.bcm-list--top,.bcm-list__container.bcm-list__type-select.bcm-list--top,.bcm-list__container.bcm-list__type-autocomplete.bcm-list--top{transform:translateY(-10%)}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{opacity:1;transform:translateY(0);visibility:visible;transition:visibility 0s linear 0s, opacity 100ms, transform 100ms}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{width:100%}.bcm-list__input-container.value-empty{color:var(--bcm-color-grey-6)}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-color-grey-6)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px;min-width:40px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-50);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);user-select:none;cursor:not-allowed}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--readonly:focus>.bcm-list__item-content:not(.disabled),.bcm-list__item--readonly.focused>.bcm-list__item-content:not(.disabled){color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content{color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content:hover,.bcm-list__item--readonly>.bcm-list__item-content:focus{color:var(--bcm-color-grey-7)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
20193
-
20194
- var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
20195
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
20196
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
20197
- r = Reflect.decorate(decorators, target, key, desc);
20198
- else
20199
- for (var i = decorators.length - 1; i >= 0; i--)
20200
- if (d = decorators[i])
20201
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
20202
- return c > 3 && r && Object.defineProperty(target, key, r), r;
20203
- };
20204
- const BcmList = class {
20205
- constructor(hostRef) {
20206
- index$1.registerInstance(this, hostRef);
20207
- this.bcmChecklist = index$1.createEvent(this, "bcm-checklist", 7);
20208
- this.bcmSelected = index$1.createEvent(this, "bcm-selected", 7);
20209
- this.change = index$1.createEvent(this, "bcm-change", 7);
20210
- this.open = index$1.createEvent(this, "bcm-open", 7);
20211
- this.close = index$1.createEvent(this, "bcm-close", 7);
20212
- this.debounce = null;
20213
- this.debounceHandler = generate.Generate.debounceInput(() => this.listenResize(), 300, false);
20214
- this._id = generate.Generate.UID();
20215
- this.type = bcm.Bcm$1.ListType.listbox;
20216
- this.treeview = false;
20217
- this.checkboxes = false;
20218
- this.searchable = false;
20219
- this.value = null;
20220
- this.inputText = undefined;
20221
- this.name = undefined;
20222
- this.label = undefined;
20223
- this.size = bcm.Bcm$1.Size.medium;
20224
- this.disabled = false;
20225
- this.readonly = false;
20226
- this.highlight = false;
20227
- this.highlightText = undefined;
20228
- this.required = false;
20229
- this.hidden = false;
20230
- this.fullWidth = false;
20231
- this.height = '256px';
20232
- this.maxHeight = '500px';
20233
- this.minHeight = '150px';
20234
- this.width = '256px';
20235
- this.infoFooter = false;
20236
- this.variableText = 'item';
20237
- this.template = undefined;
20238
- this.allOpen = false;
20239
- this.keyControl = false;
20240
- this.checkAll = true;
20241
- this.stopDeepClean = false;
20242
- this.linkedComponent = undefined;
20243
- this.isOpen = false;
20244
- this.calculatedViewport = false;
20245
- this.isSelectedOther = false;
20246
- this.isHaveOtherTag = false;
20247
- this.placeholder = 'Choose an option';
20248
- this.searchPlaceholder = 'Search';
20249
- this.searchIsOnlyChilds = false;
20250
- this.minSearchLength = 2;
20251
- this.clearable = false;
20252
- this.caption = undefined;
20253
- this.noCaption = false;
20254
- this.captionType = bcm.Bcm$1.Status.default;
20255
- this.captionError = undefined;
20256
- this.emptyText = undefined;
20257
- this.emptyIcon = 'fad fa-folder-open';
20258
- this.captionCache = undefined;
20259
- this.captionTypeCache = undefined;
20260
- this.tick = {};
20261
- this.totalData = 0;
20262
- this.totalRootData = 0;
20263
- this.limit = 20;
20264
- this.searchGetParents = undefined;
20265
- this.searchResultLimit = 20;
20266
- this.searchFound = null;
20267
- this.returnFilterData = {};
20268
- this.returnOtherData = {};
20269
- this.options = {
20270
- rootMargin: '30px',
20271
- };
20272
- this.tagContainerWidth = 0;
20273
- this.selectAllItem = {
20274
- id: 'select-all',
20275
- text: 'Select All',
20276
- value: 'select-all',
20277
- checked: false,
20278
- disabled: false,
20279
- icon: '',
20280
- status: bcm.Bcm$1.Status.default,
20281
- indeterminate: 'uncheck',
20282
- };
20283
- this.placement = bcm.Bcm$1.Placement['bottom-start'];
20284
- this.data = [];
20285
- }
20286
- connectedCallback() {
20287
- if (this.height != '256px') {
20288
- if (this.height.indexOf('px') > -1) {
20289
- this.limit = Math.floor(+this.height.replace('px', '') / 10);
20290
- }
20291
- else {
20292
- this.limit = Math.floor(+(window.innerHeight / 10));
20293
- }
20294
- this.searchResultLimit = this.limit;
20295
- this.markForCheck();
20296
- }
20297
- const checkElementWithDom = document.querySelectorAll(`#bcm-list-${this._id}`);
20298
- (checkElementWithDom === null || checkElementWithDom === void 0 ? void 0 : checkElementWithDom.length) > 1 && checkElementWithDom.forEach((item, index) => index > 0 && item.remove());
20299
- }
20300
- componentWillRender() {
20301
- this.calculateLocation();
20302
- }
20303
- componentShouldUpdate(newVal, oldVal, propName) {
20304
- if (Object.keys(this.getOptions()).indexOf(propName) > -1 && newVal !== oldVal) {
20305
- this.updateOptions();
20306
- }
20307
- }
20308
- async componentDidLoad() {
20309
- await this.initState();
20310
- if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
20311
- const list = this.el.querySelector(`#bcm-list-${this._id}`);
20312
- if (list) {
20313
- document.body.appendChild(list);
20314
- }
20315
- }
20316
- }
20317
- tagCalculator() {
20318
- if (this.checkboxes && (this.type == 'select' || this.type == 'autocomplete')) {
20319
- const tagCalculator = new ListTagControl(`bcm-list-input-tag-container-${this._id}`, this.value, this._id, this.isSelectedOther, this.clearable);
20320
- tagCalculator.calculateTags();
20321
- const arrayIds = id => (typeof id == 'string' ? id.split(',') : [id]);
20322
- const clearAutocomplete = () => {
20323
- if (this.type == 'autocomplete') {
20324
- const autocompleteInput = this.getAutoCompleteInput();
20325
- if (autocompleteInput) {
20326
- autocompleteInput.handleClear(false);
20327
- }
20328
- }
20329
- };
20330
- tagCalculator.onClickOtherTag = async (id) => {
20331
- if (!this.disabled) {
20332
- clearAutocomplete();
20333
- if (this.isSelectedOther) {
20334
- await this.unSelectOther();
20335
- }
20336
- else {
20337
- await this.onClearSearch();
20338
- this.isSelectedOther = true;
20339
- this.filterOtherList(arrayIds(id));
20340
- this.isOpen = true;
20341
- }
20342
- this.onSelectSearch();
20343
- }
20344
- };
20345
- tagCalculator.onClickTag = _ => {
20346
- // console.log(id);
20347
- clearAutocomplete();
20348
- this.onSelectSearch();
20349
- this.unSelectOther();
20350
- };
20351
- tagCalculator.onClickDismiss = async (id) => {
20352
- var _a;
20353
- if (!this.disabled) {
20354
- if (this.isSelectedOther) {
20355
- await this.unSelectOther();
20356
- }
20357
- arrayIds(id).length > 1 ? listState.removeOtherTags(this._id, arrayIds(id)) : listState.checkedItem(this._id, arrayIds(id)[0]);
20358
- this.value = (await this.getCheckedList()).checkedList;
20359
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
20360
- }
20361
- };
20362
- }
20363
- }
20364
- disconnectedCallback() {
20365
- this.isOpen = false;
20366
- if (this.stopDeepClean)
20367
- return;
20368
- listState.removeState(this._id);
20369
- this.el.innerHTML = '';
20370
- if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
20371
- const list = document.querySelectorAll(`#bcm-list-${this._id}`);
20372
- if (list === null || list === void 0 ? void 0 : list.length) {
20373
- list.forEach(item => item.remove());
20374
- this.el.remove();
20375
- }
20376
- }
20377
- }
20378
- watchId(_, oldVal) {
20379
- // console.info('Changed component id:', oldVal + ' -> ' + newVal);
20380
- listState.removeState(oldVal);
20381
- this.initState();
20382
- }
20383
- handleValueChange(newVal, oldVal) {
20384
- var _a;
20385
- if (generate.Generate.objectIsEmpty(this.returnFilterData)) {
20386
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
20387
- }
20388
- if (this.checkboxes) {
20389
- if (!validators.Validators.compareTwoArrayIsSame(newVal, oldVal)) {
20390
- this.bcmChecklist.emit(this.value);
20391
- this.change.emit(this.value);
20392
- }
20393
- }
20394
- else {
20395
- if ((newVal === null || newVal === void 0 ? void 0 : newVal.text) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.text)) {
20396
- this.change.emit(this.value);
20397
- }
20398
- }
20399
- this.tagCalculator();
20400
- }
20401
- watchReturnFilterData(newVal) {
20402
- var _a;
20403
- const { checkedItems, visibledItems } = newVal;
20404
- if (checkedItems && visibledItems) {
20405
- this.handleIndeterminate(checkedItems.length, visibledItems.length);
20406
- }
20407
- else {
20408
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
20409
- }
20410
- }
20411
- handleOtherSelected(newValue) {
20412
- var _a;
20413
- const tagContent = (_a = document.getElementById(`bcm-list-input-tag-${this._id}-other-tag`)) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-tag__content');
20414
- if (tagContent) {
20415
- if (newValue === true) {
20416
- tagContent.classList.add('checkable', 'checked');
20417
- }
20418
- else {
20419
- tagContent.classList.remove('checkable', 'checked');
20420
- }
20421
- }
20422
- }
20423
- async handleOpen() {
20424
- if (this.isOpen) {
20425
- this.open.emit();
20426
- this.calculateLocation();
20427
- this.onSelectSearch();
20428
- }
20429
- else {
20430
- this.listScrollToTop();
20431
- this.close.emit();
20432
- await utils.delay(100);
20433
- this.unSelectOther();
20434
- }
20435
- }
20436
- listScrollToTop() {
20437
- const list = document.querySelector(`#bcm-list-${this._id}`);
20438
- if (list) {
20439
- list.querySelector('.scrolling').scrollTop = 0;
20440
- }
20441
- }
20442
- async dataChanged(newValue, oldValue) {
20443
- if (!validators.Validators.compareTwoArrayIsSame(newValue, oldValue)) {
20444
- await this.initState();
20445
- }
20446
- }
20447
- isIntersecting(e) {
20448
- const target = e === null || e === void 0 ? void 0 : e.target;
20449
- if (target && target.id === this._id) {
20450
- this.listenResize();
20451
- }
20452
- }
20453
- handleSlotItems(e) {
20454
- var _a;
20455
- if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
20456
- this.data = e.detail;
20457
- }
20458
- }
20459
- handleChange(e) {
20460
- if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
20461
- e.stopImmediatePropagation();
20462
- }
20463
- }
20464
- handleResize() {
20465
- this.calculateLocation();
20466
- this.debounceHandler();
20467
- }
20468
- handleWheel(event) {
20469
- if (this.isOpen) {
20470
- const list = document.querySelector(`#bcm-list-${this._id}`);
20471
- const isClickInside = list && generate.Generate.findEventPath(event, list);
20472
- if (isClickInside) {
20473
- if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
20474
- this.calculateLocation();
20475
- }
20476
- }
20477
- else {
20478
- this.hide();
20479
- }
20480
- }
20481
- }
20482
- handleClick(event) {
20483
- var _a;
20484
- if (this.disabled)
20485
- return;
20486
- const list = document.querySelector(`#bcm-list-${this._id}`);
20487
- const isClickInside = generate.Generate.findEventPath(event, this.el) || (list && generate.Generate.findEventPath(event, list));
20488
- if (isClickInside) {
20489
- if (this.debounce !== null) {
20490
- event.preventDefault();
20491
- event.stopPropagation();
20492
- clearTimeout(this.debounce);
20493
- this.debounce = null;
20494
- }
20495
- this.debounce = setTimeout(() => {
20496
- this.debounce = null;
20497
- }, 300);
20498
- }
20499
- if (!isClickInside) {
20500
- if (this.type == 'autocomplete') {
20501
- const autocompleteInput = this.getAutoCompleteInput();
20502
- if (autocompleteInput) {
20503
- if (this.checkboxes) {
20504
- autocompleteInput.setValue('');
20505
- }
20506
- else {
20507
- autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
20508
- }
20509
- }
20510
- }
20511
- }
20512
- const clickToTag = generate.Generate.findEventPathWithKey(event, 'className', ['bcm-tag']);
20513
- const clickToOtherTag = generate.Generate.findEventPathWithKey(event, 'className', ['bcm-tag bcm-tag--other']);
20514
- const clickToSelect = generate.Generate.findEventPathWithKey(event, 'id', [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
20515
- const clickToTagDismiss = generate.Generate.findEventPathWithKey(event, 'className', ['right close-button']);
20516
- if (clickToSelect && !clickToTagDismiss && this.type != 'autocomplete') {
20517
- this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
20518
- }
20519
- if (list) {
20520
- if (this.isOpen) {
20521
- if (!list.contains(event.target) && !this.el.contains(event.target)) {
20522
- this.isOpen = false;
20523
- // this.unSelectOther()
20524
- }
20525
- }
20526
- }
20527
- }
20528
- bcmOnSearchClear(event) {
20529
- var _a, _b;
20530
- if (this.type == 'autocomplete') {
20531
- if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
20532
- if (event.detail) {
20533
- this.setClear();
20534
- }
20535
- }
20536
- }
20537
- }
20538
- bcmOnSearch(event) {
20539
- var _a, _b, _c, _d, _e, _f;
20540
- if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
20541
- this.searchGetParents = generate.snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
20542
- this.searchResultLimit = 10;
20543
- this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
20544
- this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
20545
- if (this.searchFound > 0 && this.highlight) {
20546
- this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
20547
- }
20548
- if (this.type == 'autocomplete') {
20549
- this.isOpen = true;
20550
- }
20551
- if (!event.detail.result) {
20552
- if (this.type == 'autocomplete') {
20553
- this.isOpen = false;
20554
- }
20555
- if (this.isSelectedOther) {
20556
- this.filterOtherList(this.otherTagIds());
20557
- }
20558
- else {
20559
- this.returnFilterData = {};
20560
- listState.filterData(this._id, null);
20561
- }
20562
- // this.isSelectedOther = false
20563
- this.searchResultLimit = null;
20564
- this.highlightText = null;
20565
- }
20566
- this.markForCheck();
20567
- }
20568
- }
20569
- //keyboard navigation
20570
- handleKeyDown(ev) {
20571
- const keycode = ev.keyCode || ev.which;
20572
- if (keycode === bcm.Bcm$1.KeyCode.escape) {
20573
- if (this.isOpen) {
20574
- this.isOpen = false;
20575
- ev.preventDefault();
20576
- ev.stopPropagation();
20577
- ev.stopImmediatePropagation();
20578
- }
20579
- }
20580
- if (this.keyControl) {
20581
- const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
20582
- keyboard.openGroup = openGroupId => {
20583
- this.openGroup(openGroupId);
20584
- };
20585
- keyboard.checkedItem = checkedItemId => {
20586
- this.checkedItem(checkedItemId);
20587
- };
20588
- keyboard.keyDown();
20589
- }
20590
- }
20591
- handleKeyUp(ev) {
20592
- if (this.keyControl) {
20593
- const focusedList = generate.Generate.findEventPath(ev, this.el);
20594
- if (focusedList) {
20595
- const list = document.getElementById(`bcm-list-${this._id}`);
20596
- if (list) {
20597
- const items = list.querySelectorAll('.bcm-list__item.focused');
20598
- if (items.length > 0) {
20599
- const main = list.querySelector('main');
20600
- const itemHeight = items[0].offsetHeight;
20601
- const listHeight = main.offsetHeight;
20602
- const itemTop = items[0].offsetTop;
20603
- if (itemTop > listHeight) {
20604
- main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
20605
- }
20606
- if (itemTop < listHeight) {
20607
- main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
20608
- }
20609
- }
20610
- }
20611
- }
20612
- }
20613
- }
20614
- async set(data) {
20615
- if (data) {
20616
- if (Array.isArray(data)) {
20617
- this.addChecked(data);
20618
- }
20619
- if (typeof data === 'string' || typeof data === 'number') {
20620
- this.selectedItem(data);
20621
- }
20622
- }
20623
- else {
20624
- this.setClear();
20625
- }
20626
- }
20627
- async get() {
20628
- var _a, _b;
20629
- return this.value ? (this.checkboxes ? (_b = (_a = ((await this.getCheckedList()))) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.map(item => item.id) : this.value.id) : null;
20630
- }
20631
- async getCheckedList() {
20632
- return Promise.resolve(listState.getCheckedList(this._id));
20633
- }
20634
- async getSelected() {
20635
- return Promise.resolve(listState.getSelected(this._id));
20636
- }
20637
- async getValue() {
20638
- return Promise.resolve(this.value);
20639
- }
20640
- async addChecked(ids = [], save = false, emit = true) {
20641
- if (ids && ids.length > 0) {
20642
- if (!save) {
20643
- listState.setClear(this._id);
20644
- await utils.delay(10);
20645
- }
20646
- await listState.addChecked(this._id, ids);
20647
- await utils.delay(10);
20648
- emit && (this.value = (await this.getCheckedList()).checkedList);
20649
- this.markForCheck();
20650
- }
20651
- return Promise.resolve(this.value);
20652
- }
20653
- async selected(id) {
20654
- if (id) {
20655
- return Promise.resolve(await this.selectedItem(id));
20656
- }
20657
- return false;
20658
- }
20659
- async setClear(e) {
20660
- listState.setClear(this._id);
20661
- this.value = null;
20662
- this.inputText = '';
20663
- this.isOpen = false;
20664
- this.selectAllItem.indeterminate = 'uncheck';
20665
- this.tagCalculator();
20666
- this.markForCheck();
20667
- if (e) {
20668
- e.stopPropagation();
20669
- e.preventDefault();
20670
- }
20671
- await utils.delay(10);
20672
- return Promise.resolve();
20673
- }
20674
- async resetCaption() {
20675
- await utils.delay(10);
20676
- this.caption = this.captionCache;
20677
- this.captionType = this.captionTypeCache;
20678
- this.captionError = null;
20679
- await utils.delay(10);
20680
- return Promise.resolve();
20681
- }
20682
- async show() {
20683
- this.isOpen = true;
20684
- return Promise.resolve();
20685
- }
20686
- async hide() {
20687
- this.isOpen = false;
20688
- return Promise.resolve();
20689
- }
20690
- updateOptions() {
20691
- listState.updateOptions(this._id, this);
20692
- }
20693
- handleIndeterminate(checkeds, total) {
20694
- this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? 'check' : 'indeterminate') : 'uncheck', checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
20695
- }
20696
- listenResize() {
20697
- this.tagCalculator();
20698
- this.calculateLocation();
20699
- this.markForCheck();
20700
- }
20701
- async unSelectOther() {
20702
- await this.onClearSearch();
20703
- this.isSelectedOther = false;
20704
- this.searchFound = null;
20705
- this.returnFilterData = {};
20706
- listState.filterData(this._id, null);
20707
- await utils.delay(10);
20708
- return Promise.resolve();
20709
- }
20710
- async onClearSearch() {
20711
- const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
20712
- if (searchInput) {
20713
- await searchInput.handleClear();
20714
- }
20715
- return Promise.resolve();
20716
- }
20717
- async onSelectSearch() {
20718
- const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
20719
- if (searchInput) {
20720
- await utils.delay(100);
20721
- searchInput.onBcmFocus();
20722
- searchInput.onBcmSelect();
20723
- }
20724
- }
20725
- otherTagIds() {
20726
- const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
20727
- if (otherTag) {
20728
- return otherTag.getAttribute('data-ids').split(',');
20729
- }
20730
- }
20731
- async filterOtherList(ids) {
20732
- const checklist = (await this.getCheckedList()).nestedResult;
20733
- const filter = generate.Generate.convertIdsToNestedData(ids, checklist);
20734
- this.returnFilterData = await listState.filterData(this._id, filter, null, true);
20735
- this.searchFound = (ids === null || ids === void 0 ? void 0 : ids.length) || 0;
20736
- this.limit = 500;
20737
- this.searchGetParents = null;
20738
- await utils.delay(1000);
20739
- this.markForCheck();
20740
- }
20741
- async initState() {
20742
- var _a, _b, _c;
20743
- this.onClearSearch();
20744
- await listState.setValue({
20745
- id: this._id,
20746
- dataSource: this.data && generate.snq(() => (typeof this.data == 'string' ? JSON.parse(this.data) : this.data), []),
20747
- options: this,
20748
- });
20749
- const { totalRoots, totalItems } = listState.getValue(this._id);
20750
- this.totalData = totalItems;
20751
- this.totalRootData = totalRoots;
20752
- this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
20753
- if (!this.checkboxes) {
20754
- this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
20755
- }
20756
- // checkli olan subparentların indeterminate kontrolü için
20757
- if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
20758
- const checkedIDs = [];
20759
- this.value.forEach(item => {
20760
- if (!item.items || item.items.length === 0) {
20761
- checkedIDs.push(item.id);
20762
- }
20763
- });
20764
- await this.addChecked(checkedIDs, false, false);
20765
- }
20766
- await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
20767
- await this.markForCheck();
20768
- }
20769
- async markForCheck() {
20770
- await utils.delay(10);
20771
- this.tick = generate.Generate.UID();
20772
- }
20773
- getOptions() {
20774
- return generate.snq(() => listState.getValue(this._id).options, {});
20775
- }
20776
- getItems() {
20777
- if (this.isSelectedOther) {
20778
- return this.returnFilterData['checkedItems'];
20779
- }
20780
- return generate.snq(() => listState.getData(this._id), []);
20781
- }
20782
- getLimitedItems(ids) {
20783
- return generate.snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
20784
- }
20785
- openGroup(parentId) {
20786
- listState.openGroup(this._id, parentId);
20787
- this.markForCheck();
20788
- }
20789
- focusItem(e) {
20790
- if (e.target.classList.contains('bcm-list__item')) {
20791
- const item = e.target;
20792
- const list = document.getElementById(`bcm-list-${this._id}`);
20793
- if (list) {
20794
- const items = list.querySelectorAll('.bcm-list__item');
20795
- if (items.length > 0) {
20796
- const selectedItem = list.querySelector('.bcm-list__item.focused');
20797
- if (selectedItem) {
20798
- selectedItem.classList.remove('focused');
20799
- }
20800
- item.classList.add('focused');
20801
- }
20802
- }
20803
- }
20804
- }
20805
- async selectedItem(itemId) {
20806
- var _a;
20807
- if (!this.checkboxes) {
20808
- this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
20809
- this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
20810
- this.isOpen = false;
20811
- this.markForCheck();
20812
- if (this.type == 'autocomplete' && this.value) {
20813
- // await delay(100)
20814
- // this.resetCaption()
20815
- const autocompleteInput = this.getAutoCompleteInput();
20816
- if (autocompleteInput) {
20817
- setTimeout(() => {
20818
- var _a;
20819
- autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
20820
- this.isOpen = false;
20821
- }, 100);
20822
- }
20823
- }
20824
- }
20825
- return Promise.resolve(this.value);
20826
- }
20827
- async checkedItem(itemId) {
20828
- const isCheckSelectAll = itemId === 'select-all';
20829
- if (!isCheckSelectAll) {
20830
- listState.checkedItem(this._id, itemId);
20831
- }
20832
- else {
20833
- listState.selectAll(this._id, !this.selectAllItem.checked);
20834
- }
20835
- this.value = (await this.getCheckedList()).checkedList;
20836
- this.changeVisibleCheckeds();
20837
- this.markForCheck();
20838
- }
20839
- changeVisibleCheckeds() {
20840
- const { visibledItems } = this.returnFilterData;
20841
- this.returnFilterData = {
20842
- visibledItems,
20843
- checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
20844
- };
20845
- }
20846
- getAutoCompleteInput() {
20847
- return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
20848
- }
20849
- dataScrollEvent(event) {
20850
- let count = 0;
20851
- let io = new IntersectionObserver((data) => {
20852
- if (count === 0) {
20853
- count++;
20854
- if (data[0].isIntersecting) {
20855
- this.limit += 15;
20856
- this.searchResultLimit += 15;
20857
- io.disconnect();
20858
- io = null;
20859
- }
20860
- }
20861
- }, this.options);
20862
- io.observe(event.target.lastElementChild);
20863
- }
20864
- async calculateLocation() {
20865
- var _a, _b;
20866
- if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
20867
- const list = document.getElementById(`bcm-list-${this._id}`);
20868
- // list && (list.style.height = '256px') //sebebi neydi ki!
20869
- var placement = this.placement;
20870
- const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
20871
- const targetElement = document.getElementById(targetElementId);
20872
- if (list && targetElement) {
20873
- popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
20874
- await utils.delay(10);
20875
- let pos = popoverPlacement.setPosition(placement, targetElement);
20876
- let captionAreaHeight = 0;
20877
- let labelAreaHeight = 0;
20878
- if (this.linkedComponent) {
20879
- const linked = document.getElementById(this.linkedComponent);
20880
- if (linked) {
20881
- if (!linked['noCaption']) {
20882
- const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-caption-area')) || linked.querySelector('.bcm-caption-area');
20883
- if (captionArea) {
20884
- captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
20885
- }
20886
- }
20887
- const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.bcm-label')) || linked.querySelector('.bcm-label');
20888
- if (labelArea) {
20889
- labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
20890
- }
20891
- }
20892
- }
20893
- if (this.fullWidth) {
20894
- list.style.width = targetElement.offsetWidth + 'px';
20895
- }
20896
- else {
20897
- list.style.width = this.width || 'auto';
20898
- }
20899
- if (this.height.indexOf('%') > -1) {
20900
- list.style.height = numberHelper.NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + 'px';
20901
- }
20902
- else {
20903
- list.style.height = this.height;
20904
- }
20905
- list.style.minHeight = this.minHeight;
20906
- // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
20907
- const calculatedMaxHeight = placement.split('-')[0] == 'top' ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
20908
- if (this.maxHeight.indexOf('%') > -1) {
20909
- list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + 'px';
20910
- }
20911
- else {
20912
- list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + 'px';
20913
- }
20914
- popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
20915
- await utils.delay(10);
20916
- pos = popoverPlacement.setPosition(placement, targetElement);
20917
- list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
20918
- // list.style.left = pos[1] + 'px';
20919
- list.style.left = placement.split('-')[1] == 'end' ? pos[1] - list.offsetWidth + 'px' : pos[1] + 'px';
20920
- list.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
20921
- this.calculatedViewport = true;
20922
- }
20923
- }
20924
- }
20925
- render() {
20926
- const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
20927
- const hostClasses = index$2.classnames('bcm-list', `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === 'large' ? 'size-3' : 'size-2', {
20928
- 'error': this.captionType == bcm.Bcm$1.Status.error,
20929
- 'full-width': fullWidth,
20930
- 'bcm-list__linked': this.linkedComponent,
20931
- hidden,
20932
- readonly,
20933
- disabled,
20934
- });
20935
- const bcmListContainer = index$2.classnames('bcm-list__container', this.linkedComponent ? 'bcm-list__type-linked-component' : `bcm-list__type-${this.type}`, {
20936
- 'is-open': this.isOpen && this.calculatedViewport,
20937
- 'error': this.captionType == bcm.Bcm$1.Status.error,
20938
- 'full-width': fullWidth,
20939
- hidden,
20940
- readonly,
20941
- disabled,
20942
- });
20943
- const bcmListInput = index$2.classnames('bcm-list__input');
20944
- const openedType = this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent;
20945
- return (index$1.h(index$1.Host, { class: hostClasses, tabindex: "0", style: {
20946
- '--width': fullWidth ? '100%' : this.width,
20947
- '--height': openedType ? '100%' : this.height,
20948
- '--max-height': openedType ? 'inherit' : this.maxHeight,
20949
- '--min-height': openedType ? 'inherit' : this.minHeight,
20950
- } }, index$1.h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (index$1.h("div", null, index$1.h(labelTemplate.LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == 'select' && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, index$1.h("span", { class: index$2.classnames('bcm-list__input-container', { 'type-single': !checkboxes, 'value-empty': !this.value }) }, this.checkboxes && index$1.h("span", { id: `bcm-list-input-tag-container-${this._id}`, class: "bcm-list__input-tag-container" }), this.checkboxes && !this.value && index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder), !this.checkboxes && (this.value ? this.inputText : index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), index$1.h("span", { class: index$2.classnames('bcm-list__input-buttons', {
20951
- disabled: disabled,
20952
- }) }, this.clearable && this.value && (index$1.h("div", { class: "bcm-list__input-buttons-button" }, index$1.h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), index$1.h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && 'caret-is-open'}` }, index$1.h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === 'autocomplete' && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: index$2.classnames(bcmListInput, { 'bcm-list__input-autocomplete': this.type == 'autocomplete' }) }, index$1.h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && index$1.h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), index$1.h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), index$1.h(ListTemplate, { highlight: this.highlightText, searchable: this.type == 'autocomplete' ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
20953
- }
20954
- get el() { return index$1.getElement(this); }
20955
- static get watchers() { return {
20956
- "_id": ["watchId"],
20957
- "value": ["handleValueChange"],
20958
- "returnFilterData": ["watchReturnFilterData"],
20959
- "isSelectedOther": ["handleOtherSelected"],
20960
- "isOpen": ["handleOpen"],
20961
- "data": ["dataChanged"]
20962
- }; }
20963
- };
20964
- __decorate$5([
20965
- isLoadDecorator.IsLoad()
20966
- ], BcmList.prototype, "el", void 0);
20967
- __decorate$5([
20968
- jsonParseDecarator.JsonParse('data', true)
20969
- ], BcmList.prototype, "dataChanged", null);
20970
- BcmList.style = listCss;
20971
-
20972
- const { state: state$1 } = index.createStore({
20973
- value: new Map(),
20974
- });
20975
- const setValue$1 = val => {
20976
- const { id, dataSource } = val;
20977
- const data = {
20978
- id: generate.snq(() => id, generate.Generate.UID),
20979
- dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
20980
- searchIsOnlyChilds: val.searchIsOnlyChilds,
20981
- };
20982
- state$1.value.set(data.id, data);
20983
- };
20984
- const recursive = (data, parentId) => {
20985
- let recData = [];
20986
- if (data) {
20987
- recData = data.map(item => (Object.assign(Object.assign(Object.assign({}, item), { parentId: generate.snq(() => parentId, null) }), (item.items && item.items.length > 0 && { items: generate.snq(() => recursive(item.items, item.id), []) }))));
20988
- }
20989
- return recData;
20990
- };
20991
- const removeValue = _id => {
20992
- state$1.value.delete(_id);
20993
- };
20994
- const getValue$1 = id => generate.snq(() => state$1.value.get(id), {});
20995
- const getDataPagination = (id, limit = 3) => {
20996
- let data = [];
20997
- const value = getValue$1(id);
20998
- if (value) {
20999
- const { dataSource } = value;
21000
- data = dataSource.slice(0, limit);
21001
- }
21002
- return data;
21003
- };
21004
- // //search treeview data by text
21005
- // const searchData = (id, search, items?) => {
21006
- // let dataSource
21007
- // if (items && items.length > 0) {
21008
- // dataSource = items
21009
- // } else {
21010
- // const value = getValue(id);
21011
- // dataSource = value.dataSource;
21012
- // }
21013
- // let result = []
21014
- // if (dataSource) {
21015
- // dataSource.forEach(child => {
21016
- // if (child.text.toLowerCase().includes(search.toLowerCase())) {
21017
- // result.push(child)
21018
- // }
21019
- // result = result.concat(searchData(id, search, child.items))
21020
- // })
21021
- // };
21022
- // return result
21023
- // };
21024
- //nested search
21025
- const searchData = (id, searchText, items) => {
21026
- let dataSource;
21027
- if (items && items.length > 0) {
21028
- dataSource = items;
21029
- }
21030
- else {
21031
- const value = getValue$1(id);
21032
- dataSource = value.dataSource;
21033
- }
21034
- let results = [];
21035
- if (dataSource) {
21036
- results.push(nestedSearch(id, dataSource, searchText));
21037
- //return with their parents
21038
- // dataSource.forEach(child => {
21039
- // if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
21040
- // results.push(child)
21041
- // } else if (child.items && child.items.length > 0) {
21042
- // child.items = nestedSearch(child.items, searchText)
21043
- // if (child.items.length > 0) {
21044
- // results.push(child)
21045
- // }
21046
- // }
21047
- // })
21048
- }
21049
- return {
21050
- result: generate.snq(() => generate.Generate.flatArray(results[0].result), []),
21051
- matching: generate.snq(() => results[0].matching, []),
21052
- parentIndex: generate.snq(() => results[0].parentIndex, []),
21053
- nestedResult: generate.snq(() => results[0].nestedResult, []),
21054
- };
21055
- };
21056
- const nestedSearch = (id, items, searchText) => {
21057
- let matching = [];
21058
- let parentIndex = [];
21059
- let result = [];
21060
- let nestedResult = [];
21061
- const { searchIsOnlyChilds } = getValue$1(id);
21062
- if (items && items.length > 0) {
21063
- items.forEach(child => {
21064
- let isChild = searchIsOnlyChilds && child.parentId !== null;
21065
- let isMatching = stringHelper.StringHelper.slugify(child.text).indexOf(stringHelper.StringHelper.slugify(searchText)) > -1 ||
21066
- (child.keywords && stringHelper.StringHelper.slugify(child.keywords).indexOf(stringHelper.StringHelper.slugify(searchText)) > -1);
21067
- if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
21068
- result.push(child.id);
21069
- matching.push(child.id);
21070
- parentIndex.push(child.id);
21071
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
21072
- if (child.items && child.items.length > 0) {
21073
- const found = nestedSearch(id, child.items, searchText);
21074
- if (found.matching.length > 0) {
21075
- found.matching.forEach(chi => {
21076
- matching.push(chi);
21077
- });
21078
- }
21079
- }
21080
- }
21081
- else if (child.items && child.items.length > 0) {
21082
- const found = nestedSearch(id, child.items, searchText);
21083
- if (found.result.length > 0) {
21084
- found.result.forEach(chi => {
21085
- result.push(chi);
21086
- });
21087
- result.push(child.id);
21088
- parentIndex.push(child.id);
21089
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
21090
- }
21091
- if (found.matching.length > 0) {
21092
- matching.push(...found.matching);
21093
- }
21094
- }
21095
- });
21096
- }
21097
- return { result, matching, parentIndex, nestedResult };
21098
- };
21099
- const searchState = {
21100
- setValue: setValue$1,
21101
- removeValue,
21102
- getValue: getValue$1,
21103
- getDataPagination,
21104
- searchData,
21105
- };
21106
-
21107
- const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea .bcm-input-element{white-space:normal}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
21108
-
21109
- var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
21110
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
21111
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
21112
- r = Reflect.decorate(decorators, target, key, desc);
21113
- else
21114
- for (var i = decorators.length - 1; i >= 0; i--)
21115
- if (d = decorators[i])
21116
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
21117
- return c > 3 && r && Object.defineProperty(target, key, r), r;
21118
- };
21119
- const BcmSearch = class {
21120
- constructor(hostRef) {
21121
- index$1.registerInstance(this, hostRef);
21122
- this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
21123
- this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
21124
- this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
21125
- var _a, _b;
21126
- this.isActiveClearable = ((_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.clearable;
21127
- });
21128
- this._id = generate.Generate.UID();
21129
- this.placeholder = "Search";
21130
- this.disabled = false;
21131
- this.readonly = false;
21132
- this.clearable = true;
21133
- this.size = bcm.Bcm.Size.medium;
21134
- this.limit = 10;
21135
- this.searchIsOnlyChilds = false;
21136
- this.minSearchLength = 2;
21137
- this.data = [];
21138
- this.tick = {};
21139
- this.isActiveClearable = false;
21140
- }
21141
- async componentDidLoad() {
21142
- await this.initState();
21143
- }
21144
- async dataChanged(newValue, oldValue) {
21145
- // console.log('data changed', newValue, oldValue)
21146
- if (newValue !== oldValue) {
21147
- await this.initState();
21148
- }
21149
- }
21150
- async initState() {
21151
- await searchState.setValue({
21152
- id: this._id + "-input",
21153
- dataSource: this.data,
21154
- searchIsOnlyChilds: this.searchIsOnlyChilds,
21155
- });
21156
- await this.markForCheck();
21157
- }
21158
- markForCheck() {
21159
- this.tick = generate.Generate.UID();
21160
- }
21161
- handleInput() {
21162
- // console.log("aheyya")
21163
- }
21164
- async onBcmFocus() {
21165
- this.inputElement.focus();
21166
- }
21167
- async onBcmBlur() {
21168
- this.inputElement.blur();
21169
- }
21170
- async onBcmSelect() {
21171
- this.inputElement.select();
21172
- }
21173
- async setValue(newValue) {
21174
- this.inputElement.value = newValue;
21175
- }
21176
- handleFocus() { }
21177
- handleBlur() { }
21178
- handleChange() { }
21179
- async handleClear(eventEmit = true) {
21180
- this.inputElement.value = '';
21181
- const { value, id } = this.inputElement;
21182
- searchState.searchData(id, value);
21183
- this.isActiveClearable = false;
21184
- this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
21185
- this.bcmOnSearchClear.emit(eventEmit);
21186
- await utils.delay(10);
21187
- return Promise.resolve();
21188
- }
21189
- onSearchValue(event, instance) {
21190
- const { value, id } = event.target;
21191
- const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
21192
- const { bcmOnSearch, inputElement } = instance;
21193
- bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
21194
- }
21195
- render() {
21196
- const { _id, placeholder, disabled, readonly } = this;
21197
- return index$1.h(index$1.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index$1.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
21198
- }
21199
- get el() { return index$1.getElement(this); }
21200
- static get watchers() { return {
21201
- "data": ["dataChanged"]
21202
- }; }
21203
- };
21204
- __decorate$4([
21205
- isLoadDecorator.IsLoad()
21206
- ], BcmSearch.prototype, "el", void 0);
21207
- BcmSearch.style = searchCss;
21208
-
21209
- const { state } = index.createStore({
21210
- value: new Map(),
21211
- setData: {},
21212
- });
21213
- const setValue = val => {
21214
- const data = Object.assign(Object.assign({}, val), { steps: val.steps &&
21215
- val.steps.length > 0 &&
21216
- val.steps
21217
- .filter(data => !data.hidden)
21218
- .map((item, index) => ({
21219
- id: item.id || generate.Generate.UID(),
21220
- title: item.title || item._title,
21221
- _title: item.title || item._title || 'Step ' + (index + 1),
21222
- description: item.description || '',
21223
- status: item.status || 'default',
21224
- disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
21225
- icon: item.icon || undefined,
21226
- valid: item.valid || true,
21227
- loading: item.loading || false,
21228
- index: index + 1,
21229
- active: val.linear ? (index == 0 ? true : false) : val.active === index + 1,
21230
- isLast: index === val.steps.length - 1,
21231
- statusIcon: val.icon,
21232
- headerHidden: item.hidden,
21233
- })) });
21234
- state.value.set(val.id, data);
21235
- };
21236
- const removeState = _id => {
21237
- state.value.delete(_id);
21238
- };
21239
- const changeActiveStep = (id, index) => {
21240
- const value = state.value.get(id);
21241
- if (value) {
21242
- value.active = index;
21243
- value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === index - 1 })));
21244
- }
21245
- };
21246
- const getActiveIndex = id => generate.snq(() => state.value.get(id).active, 0);
21247
- const changeStepStatus = (id, stepId, status) => {
21248
- const value = state.value.get(id);
21249
- if (value && value.steps) {
21250
- value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
21251
- index$1.forceUpdate(value.el);
21252
- }
21253
- };
21254
- const changeStepDisabled = (id, stepId, disabled) => {
21255
- const value = state.value.get(id);
21256
- if (value && value.steps) {
21257
- value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
21258
- index$1.forceUpdate(value.el);
21259
- }
21260
- };
21261
- const setActiveIndex = (id, index) => state.value.get(id).active = index;
21262
- const stepperReset = id => {
21263
- const value = state.value.get(id);
21264
- if (value) {
21265
- value.active = 1;
21266
- value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
21267
- index$1.forceUpdate(value.el);
21268
- }
21269
- };
21270
- const getValue = id => generate.snq(() => state.value.get(id), {});
21271
- const stepperStates = {
21272
- removeState,
21273
- getValue,
21274
- setValue,
21275
- changeActiveStep,
21276
- getActiveIndex,
21277
- changeStepStatus,
21278
- changeStepDisabled,
21279
- stepperReset,
21280
- setActiveIndex
21281
- };
21282
-
21283
- var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
21284
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
21285
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
21286
- r = Reflect.decorate(decorators, target, key, desc);
21287
- else
21288
- for (var i = decorators.length - 1; i >= 0; i--)
21289
- if (d = decorators[i])
21290
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
21291
- return c > 3 && r && Object.defineProperty(target, key, r), r;
21292
- };
21293
- const BcmStep = class {
21294
- constructor(hostRef) {
21295
- index$1.registerInstance(this, hostRef);
21296
- this.dataIsLoaded = index$1.createEvent(this, "data-is-loaded", 7);
21297
- this.bcmChangeHidden = index$1.createEvent(this, "bcm-change-hidden", 7);
21298
- this.hidden = false;
21299
- this._id = generate.Generate.UID();
21300
- this._title = undefined;
21301
- this.description = undefined;
21302
- this.status = 'default';
21303
- this.icon = undefined;
21304
- this.loading = false;
21305
- this.valid = true;
21306
- this.index = undefined;
21307
- this.active = false;
21308
- this.htmlTemplate = undefined;
21309
- this.isLast = false;
21310
- this.disabled = false;
21311
- }
21312
- componentDidLoad() {
21313
- if (this.isLast) {
21314
- this.dataIsLoaded.emit(true);
21315
- }
21316
- }
21317
- getStepper() {
21318
- const stepper = this.el.closest('bcm-stepper');
21319
- return stepper || null;
21320
- }
21321
- activeChanged() {
21322
- if (this.active) {
21323
- const stepper = this.getStepper();
21324
- if (stepper) {
21325
- stepperStates.changeStepDisabled(stepper.stepperId, this._id, false);
21326
- }
21327
- }
21328
- }
21329
- statusChange() {
21330
- const stepper = this.getStepper();
21331
- if (stepper) {
21332
- stepperStates.changeStepStatus(stepper.stepperId, this._id, this.status);
21333
- }
21334
- }
21335
- hiddenChange(newValue, oldValue) {
21336
- const stepper = this.getStepper();
21337
- if (newValue !== oldValue && stepper && !this.active) {
21338
- this.bcmChangeHidden.emit(newValue);
21339
- }
21340
- }
21341
- disabledChange(newValue, _) {
21342
- const stepper = this.getStepper();
21343
- if (stepper) {
21344
- stepperStates.changeStepDisabled(stepper.stepperId, this._id, newValue);
21345
- }
21346
- }
21347
- render() {
21348
- const { hidden, valid, active } = this;
21349
- const hostClasses = index$2.classnames('bcm-stepper__step', valid ? 'bcm-stepper__step-valid' : 'bcm-stepper__step-invalid', {
21350
- 'bcm-stepper__step-active': active,
21351
- hidden,
21352
- });
21353
- return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("slot", null)));
21354
- }
21355
- get el() { return index$1.getElement(this); }
21356
- static get watchers() { return {
21357
- "active": ["activeChanged"],
21358
- "status": ["statusChange"],
21359
- "hidden": ["hiddenChange"],
21360
- "disabled": ["disabledChange"]
21361
- }; }
21362
- };
21363
- __decorate$3([
21364
- isLoadDecorator.IsLoad()
21365
- ], BcmStep.prototype, "el", void 0);
21366
-
21367
- const stepperCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-stepper{display:block;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-color-prime-blue-6);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-color-grey-8)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-7)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-color-prime-blue-6);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0}.bcm-stepper__header-item::before{left:0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-color-prime-blue-6);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-warmyellow-5)}.bcm-stepper__header-line--success{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-green-5)}.bcm-stepper__header-line--error{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-color-red-6)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-red-6)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-red-5)}.bcm-stepper__header-line--default{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-5)}.bcm-stepper__header-line--loading{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-5)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-grey-5)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
21368
-
21369
- var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
21370
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
21371
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
21372
- r = Reflect.decorate(decorators, target, key, desc);
21373
- else
21374
- for (var i = decorators.length - 1; i >= 0; i--)
21375
- if (d = decorators[i])
21376
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
21377
- return c > 3 && r && Object.defineProperty(target, key, r), r;
21378
- };
21379
- const BcmStepper = class {
21380
- constructor(hostRef) {
21381
- index$1.registerInstance(this, hostRef);
21382
- this.bcmStepChange = index$1.createEvent(this, "bcm-step-change", 7);
21383
- this.hidden = false;
21384
- this._id = generate.Generate.UID();
21385
- this.direction = bcm.Bcm$1.Direction.horizontal;
21386
- this.linear = false;
21387
- this.size = bcm.Bcm$1.Size.medium;
21388
- this.icon = false;
21389
- this.active = 1;
21390
- this.stepperId = generate.Generate.UID();
21391
- this.data = [];
21392
- this.tick = {};
21393
- }
21394
- async dataChanged() {
21395
- this.initState();
21396
- }
21397
- componentDidLoad() {
21398
- this.initState();
21399
- }
21400
- disconnectedCallback() {
21401
- // stepperStates.removeState(this.stepperId);
21402
- this.reset();
21403
- }
21404
- async initState() {
21405
- const { stepperId, data, direction, linear, size, icon, active, el } = this;
21406
- const steps = data.length > 0 ? data : this.getSlotElements();
21407
- await stepperStates.setValue({
21408
- id: stepperId,
21409
- el,
21410
- direction,
21411
- linear,
21412
- size,
21413
- icon,
21414
- active,
21415
- steps,
21416
- });
21417
- this.markForCheck();
21418
- }
21419
- componentDidRender() {
21420
- this.setSteps(this.getItems());
21421
- }
21422
- setSteps(steps) {
21423
- const slots = utils.getChildElements(this.el, "bcm-step");
21424
- if (slots.length > 0) {
21425
- slots.forEach((item, index) => {
21426
- const step = steps.find(step => !item.headerHidden && step.id === item.id);
21427
- if (step) {
21428
- generate.Generate.setAttributes(item, Object.assign({ title: "", _title: step.title || step._title || "", status: step.status || "default", disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || "" }, (item.hidden == true && { headerHidden: true })));
21429
- if ((item.hidden = false)) {
21430
- item.removeAttribute("hidden");
21431
- }
21432
- }
21433
- });
21434
- }
21435
- }
21436
- markForCheck() {
21437
- this.tick = generate.Generate.UID();
21438
- }
21439
- handleChangeBcmHidden() {
21440
- this.initState();
21441
- }
21442
- getActiveIndex() {
21443
- return stepperStates.getActiveIndex(this.stepperId);
21444
- }
21445
- getSlotElements() {
21446
- return generate.snq(() => utils.getChildElements(this.el, "bcm-step"), []);
21447
- }
21448
- async onStepChange(index) {
21449
- if (index) {
21450
- stepperStates.changeActiveStep(this.stepperId, index);
21451
- this.bcmStepChange.emit(index);
21452
- }
21453
- index$1.forceUpdate(this.el);
21454
- return Promise.resolve(index);
21455
- }
21456
- async prev() {
21457
- const index = this.getActiveIndex() - 1;
21458
- if (index >= 1) {
21459
- if (!this.linear) {
21460
- const previosStep = this.getItems()[index - 1];
21461
- if (previosStep.disabled)
21462
- return;
21463
- await this.onStepChange(index);
21464
- }
21465
- else {
21466
- await this.onStepChange(index);
21467
- }
21468
- }
21469
- index$1.forceUpdate(this.el);
21470
- return Promise.resolve(this.getActiveIndex());
21471
- }
21472
- async next(idx) {
21473
- const index = idx || this.getActiveIndex();
21474
- const step = await this.getCurrentStep();
21475
- const lastStep = this.getItems()[this.getItems().length - 1];
21476
- if (step.valid) {
21477
- this.linear && lastStep.id != step.id && (step.status = "success");
21478
- if (index < this.getItems().length) {
21479
- await this.onStepChange(index + 1);
21480
- }
21481
- }
21482
- else {
21483
- step.status = "error";
21484
- }
21485
- index$1.forceUpdate(this.el);
21486
- return Promise.resolve(this.getActiveIndex());
21487
- }
21488
- async setActive(index, force = false) {
21489
- if (!index)
21490
- return;
21491
- if (force) {
21492
- if (this.getActiveIndex() < index) {
21493
- while (this.getActiveIndex() < index) {
21494
- await this.next();
21495
- await utils.delay(100);
21496
- }
21497
- }
21498
- else {
21499
- while (this.getActiveIndex() > index) {
21500
- await this.prev();
21501
- await utils.delay(100);
21502
- }
21503
- }
21504
- }
21505
- else {
21506
- if (this.linear) {
21507
- const prevStepIsValid = this.getItems()
21508
- .filter(item => item.index < index)
21509
- .map(item => ({
21510
- id: item.id,
21511
- status: item.status,
21512
- disabled: item.disabled,
21513
- }))
21514
- .every(item => !item.disabled && (item.status === "success" || item.status === "default"));
21515
- console.log("prevStepIsValid", prevStepIsValid);
21516
- if (prevStepIsValid) {
21517
- await this.next(index - 1);
21518
- }
21519
- }
21520
- else {
21521
- stepperStates.setActiveIndex(this.stepperId, index);
21522
- await this.next(index - 1);
21523
- }
21524
- }
21525
- }
21526
- async reset() {
21527
- await this.onStepChange(1);
21528
- stepperStates.stepperReset(this.stepperId);
21529
- return Promise.resolve(this.getActiveIndex());
21530
- }
21531
- async getCurrentStep() {
21532
- var _a;
21533
- return generate.snq(() => this.getItems().filter(item => item.active == true)[0], (_a = this.getItems()[0]) !== null && _a !== void 0 ? _a : null);
21534
- }
21535
- async getSteps() {
21536
- return Promise.resolve(this.getItems());
21537
- }
21538
- getItems() {
21539
- return generate.snq(() => { var _a; return (_a = stepperStates.getValue(this.stepperId).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
21540
- }
21541
- render() {
21542
- const { hidden, direction, linear, size } = this;
21543
- const hostClasses = index$2.classnames("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
21544
- "bcm-stepper__linear": linear,
21545
- hidden,
21546
- });
21547
- const lineClasses = item => index$2.classnames("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
21548
- const items = this.getItems();
21549
- return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, index$1.h("slot", null)), index$1.h("main", null, index$1.h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
21550
- index$1.h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.onStepChange(step) })),
21551
- items.length > index + 1 && index$1.h("div", { class: lineClasses(item) }),
21552
- ])), index$1.h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => index$1.h("bcm-step", Object.assign({}, item))) : index$1.h("slot", null)))));
21553
- }
21554
- get el() { return index$1.getElement(this); }
21555
- static get watchers() { return {
21556
- "data": ["dataChanged"]
21557
- }; }
21558
- };
21559
- __decorate$2([
21560
- isLoadDecorator.IsLoad()
21561
- ], BcmStepper.prototype, "el", void 0);
21562
- BcmStepper.style = stepperCss;
21563
-
21564
- const textCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-text{display:inline;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-text.hidden{display:none}.bcm-text__paragraph{margin:0;padding:0}.bcm-text__font-size-1{font-size:10px;line-height:calc(10px + 8px)}.bcm-text__font-size-2{font-size:12px;line-height:calc(12px + 8px)}.bcm-text__font-size-3{font-size:14px;line-height:calc(14px + 8px)}.bcm-text__font-size-4{font-size:16px;line-height:calc(16px + 8px)}.bcm-text__font-size-5{font-size:18px;line-height:calc(18px + 8px)}.bcm-text__font-size-6{font-size:20px;line-height:calc(20px + 8px)}.bcm-text__font-size-7{font-size:24px;line-height:calc(24px + 8px)}.bcm-text__font-size-8{font-size:32px;line-height:calc(32px + 8px)}.bcm-text__font-size-9{font-size:40px;line-height:calc(40px + 8px)}";
21565
-
21566
- var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
21567
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
21568
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
21569
- r = Reflect.decorate(decorators, target, key, desc);
21570
- else
21571
- for (var i = decorators.length - 1; i >= 0; i--)
21572
- if (d = decorators[i])
21573
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
21574
- return c > 3 && r && Object.defineProperty(target, key, r), r;
21575
- };
21576
- const BcmText = class {
21577
- constructor(hostRef) {
21578
- index$1.registerInstance(this, hostRef);
21579
- this.hidden = false;
21580
- this.scale = undefined;
21581
- this.weight = "400";
21582
- this.color = "slate";
21583
- this.text = undefined;
21584
- this.fontSize = 4;
21585
- }
21586
- render() {
21587
- const { hidden, scale, weight, color, fontSize } = this;
21588
- const hostClasses = index$2.classnames('bcm-text', {
21589
- hidden
21590
- });
21591
- const classes = index$2.classnames('bcm-text__paragraph', `bcm-text__font-size-${fontSize}`, scale);
21592
- const fontWeight = +weight || 400;
21593
- const style = {
21594
- color: colorHelper.ColorHelper.dsColor(color),
21595
- fontWeight
21596
- };
21597
- return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("span", { hidden: true }, index$1.h("slot", null)), index$1.h("p", { class: classes, style: Object.assign({}, style) }, index$1.h(slotTemplate.SlotTemplate, { value: this.text }))));
21598
- }
21599
- get el() { return index$1.getElement(this); }
21600
- };
21601
- __decorate$1([
21602
- isLoadDecorator.IsLoad()
21603
- ], BcmText.prototype, "el", void 0);
21604
- BcmText.style = textCss;
21605
-
21606
- var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
21607
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
21608
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
21609
- r = Reflect.decorate(decorators, target, key, desc);
21610
- else
21611
- for (var i = decorators.length - 1; i >= 0; i--)
21612
- if (d = decorators[i])
21613
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
21614
- return c > 3 && r && Object.defineProperty(target, key, r), r;
21615
- };
21616
- const BcmTooltip = class {
21617
- constructor(hostRef) {
21618
- index$1.registerInstance(this, hostRef);
21619
- this.bcmTooltipShow = index$1.createEvent(this, "bcmTooltipShow", 7);
21620
- this.bcmTooltipHide = index$1.createEvent(this, "bcmTooltipHide", 7);
21621
- this._id = generate.Generate.UID();
21622
- this.message = "";
21623
- this.placement = bcm.Bcm$1.Placement.top;
21624
- this.trigger = bcm.Bcm$1.TriggerType.click;
21625
- this.open = false;
21626
- this.color = "slate";
21627
- this.size = bcm.Bcm$1.Size.medium;
21628
- this.openDelay = 0;
21629
- this.closeDelay = 0;
21630
- this.targetId = undefined;
21631
- this.tooltip = undefined;
21632
- }
21633
- emitShow() {
21634
- this.bcmTooltipShow.emit();
21635
- }
21636
- emitHide() {
21637
- this.bcmTooltipHide.emit();
21638
- }
21639
- componentWillLoad() {
21640
- this.tooltip = new tooltipHelper.Tooltip({
21641
- targetId: this.targetId || this._id,
21642
- message: this.message,
21643
- placement: this.placement,
21644
- color: this.color,
21645
- trigger: this.trigger,
21646
- size: this.size,
21647
- openDelay: this.openDelay,
21648
- closeDelay: this.closeDelay,
21649
- emitShow: () => this.emitShow(),
21650
- emitHide: () => this.emitHide(),
21651
- });
21652
- }
21653
- componentDidLoad() {
21654
- this.tooltip.listener();
21655
- }
21656
- componentDidRender() {
21657
- this.tooltip.message = this.message;
21658
- this.tooltip.placement = this.placement;
21659
- this.tooltip.color = this.color;
21660
- this.tooltip.trigger = this.trigger;
21661
- this.tooltip.size = this.size;
21662
- this.tooltip.openDelay = this.openDelay;
21663
- this.tooltip.closeDelay = this.closeDelay;
21664
- this.tooltip.update();
21665
- }
21666
- disconnectedCallback() {
21667
- this.tooltip.destroy();
21668
- }
21669
- async show() {
21670
- this.tooltip.show();
21671
- }
21672
- async hide() {
21673
- this.tooltip.hide();
21674
- }
21675
- async toggle() {
21676
- this.tooltip.toggle();
21677
- }
21678
- render() {
21679
- return (index$1.h(index$1.Host, { "aria-describedby": "tooltip", class: "tw-inline-flex tw-h-fit tw-w-fit" }, index$1.h("slot", null)));
21680
- }
21681
- get el() { return index$1.getElement(this); }
21682
- };
21683
- __decorate([
21684
- isLoadDecorator.IsLoad()
21685
- ], BcmTooltip.prototype, "el", void 0);
17937
+ ], BcmLinked.prototype, "el", void 0);
21686
17938
 
21687
- exports.bcm_button = BcmButton;
21688
17939
  exports.bcm_colorful = BcmColorful;
21689
- exports.bcm_form = BcmForm;
21690
- exports.bcm_icon = BcmIcon;
21691
- exports.bcm_input = BcmInput;
21692
- exports.bcm_label = BcmLabel;
21693
17940
  exports.bcm_linked = BcmLinked;
21694
- exports.bcm_list = BcmList;
21695
- exports.bcm_search = BcmSearch;
21696
- exports.bcm_step = BcmStep;
21697
- exports.bcm_stepper = BcmStepper;
21698
- exports.bcm_text = BcmText;
21699
- exports.bcm_tooltip = BcmTooltip;