bromcom-ui 2.7.37-rc.8 → 2.7.37-rc.9

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 (200) hide show
  1. package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
  2. package/dist/bromcom-ui/{p-243c1232.entry.js → p-0031ea84.entry.js} +1 -1
  3. package/dist/bromcom-ui/{p-bd74b025.entry.js → p-00fb02e5.entry.js} +1 -1
  4. package/dist/bromcom-ui/{p-4d419811.entry.js → p-046bc94c.entry.js} +1 -1
  5. package/dist/bromcom-ui/{p-cda77af6.entry.js → p-0594c485.entry.js} +1 -1
  6. package/dist/bromcom-ui/p-0ae411fe.entry.js +5 -0
  7. package/dist/bromcom-ui/p-0d37438e.entry.js +5 -0
  8. package/dist/bromcom-ui/{p-875ef930.entry.js → p-12e845fb.entry.js} +1 -1
  9. package/dist/bromcom-ui/{p-ad9303de.entry.js → p-1507f99a.entry.js} +1 -1
  10. package/dist/bromcom-ui/{p-fb7fd3f4.entry.js → p-1808adae.entry.js} +1 -1
  11. package/dist/bromcom-ui/{p-ae18981d.entry.js → p-23de3629.entry.js} +1 -1
  12. package/dist/bromcom-ui/{p-31eb4512.js → p-2444a19c.js} +1 -1
  13. package/dist/bromcom-ui/{p-de4e1e66.entry.js → p-2b91dab0.entry.js} +1 -1
  14. package/dist/bromcom-ui/{p-dd0f2ded.entry.js → p-3057e85a.entry.js} +1 -1
  15. package/dist/bromcom-ui/{p-53ac0ebf.entry.js → p-34c2069d.entry.js} +1 -1
  16. package/dist/bromcom-ui/{p-4f9a5b60.entry.js → p-35be5c95.entry.js} +1 -1
  17. package/dist/bromcom-ui/{p-d24617c8.entry.js → p-3b581c7d.entry.js} +1 -1
  18. package/dist/bromcom-ui/p-3bcefb6e.entry.js +5 -0
  19. package/dist/bromcom-ui/{p-58109dc6.entry.js → p-3c60d68f.entry.js} +1 -1
  20. package/dist/bromcom-ui/{p-14ad99d5.entry.js → p-3ee2e4fe.entry.js} +1 -1
  21. package/dist/bromcom-ui/{p-7ee1e704.entry.js → p-41cbecc7.entry.js} +1 -1
  22. package/dist/bromcom-ui/{p-ceba9b7a.entry.js → p-42197730.entry.js} +1 -1
  23. package/dist/bromcom-ui/{p-52e435e3.js → p-44d68311.js} +1 -1
  24. package/dist/bromcom-ui/{p-90057167.entry.js → p-4533663c.entry.js} +1 -1
  25. package/dist/bromcom-ui/{p-05c3f64a.js → p-4caf9f93.js} +1 -1
  26. package/dist/bromcom-ui/{p-0a34e8ce.entry.js → p-4dbbb202.entry.js} +1 -1
  27. package/dist/bromcom-ui/{p-82ca33ab.entry.js → p-5273d935.entry.js} +1 -1
  28. package/dist/bromcom-ui/{p-454e1d24.js → p-52ffb8e1.js} +1 -1
  29. package/dist/bromcom-ui/p-5ad079a6.entry.js +5 -0
  30. package/dist/bromcom-ui/{p-eb892c04.entry.js → p-6e89ceb2.entry.js} +1 -1
  31. package/dist/bromcom-ui/{p-691bf6a3.entry.js → p-6f30d39e.entry.js} +1 -1
  32. package/dist/bromcom-ui/{p-b4a2ee54.entry.js → p-70b13097.entry.js} +1 -1
  33. package/dist/bromcom-ui/{p-8f3099a6.entry.js → p-721534bd.entry.js} +1 -1
  34. package/dist/bromcom-ui/p-7385899c.js +5 -0
  35. package/dist/bromcom-ui/{p-adc35e17.entry.js → p-78d48636.entry.js} +1 -1
  36. package/dist/bromcom-ui/{p-d40ebb43.entry.js → p-799a5570.entry.js} +1 -1
  37. package/dist/bromcom-ui/{p-fda71519.entry.js → p-7d76a273.entry.js} +1 -1
  38. package/dist/bromcom-ui/{p-5ae0a59b.js → p-7e44e6b5.js} +1 -1
  39. package/dist/bromcom-ui/{p-6e873e3c.entry.js → p-8255f60a.entry.js} +1 -1
  40. package/dist/bromcom-ui/{p-4fc53045.entry.js → p-8907162c.entry.js} +1 -1
  41. package/dist/bromcom-ui/{p-3c7a0345.js → p-8c018ae0.js} +1 -1
  42. package/dist/bromcom-ui/{p-2e38b7ea.entry.js → p-92fa0a00.entry.js} +1 -1
  43. package/dist/bromcom-ui/{p-ad456d2b.entry.js → p-993c912d.entry.js} +1 -1
  44. package/dist/bromcom-ui/p-99a2cb36.entry.js +5 -0
  45. package/dist/bromcom-ui/{p-4eca8b88.entry.js → p-9e2b4b55.entry.js} +1 -1
  46. package/dist/bromcom-ui/{p-d11d1f5a.entry.js → p-9efe118a.entry.js} +1 -1
  47. package/dist/bromcom-ui/{p-d0f6a6bc.entry.js → p-a0042349.entry.js} +1 -1
  48. package/dist/bromcom-ui/{p-604f9d0d.entry.js → p-a0c10e3e.entry.js} +1 -1
  49. package/dist/bromcom-ui/{p-a8d1397d.js → p-a3ffcb0d.js} +1 -1
  50. package/dist/bromcom-ui/{p-f2eeb1aa.entry.js → p-a628aed8.entry.js} +1 -1
  51. package/dist/bromcom-ui/{p-a08d69f0.entry.js → p-a98aecdf.entry.js} +1 -1
  52. package/dist/bromcom-ui/{p-0a97248d.js → p-ae327774.js} +1 -1
  53. package/dist/bromcom-ui/{p-4cc3e4dd.entry.js → p-b088a98d.entry.js} +1 -1
  54. package/dist/bromcom-ui/{p-34e9cd7a.entry.js → p-b1e3b913.entry.js} +1 -1
  55. package/dist/bromcom-ui/{p-0ba26074.js → p-b2693a0f.js} +1 -1
  56. package/dist/bromcom-ui/{p-ae9edc91.entry.js → p-b68fcefb.entry.js} +1 -1
  57. package/dist/bromcom-ui/p-b9983e4b.entry.js +5 -0
  58. package/dist/bromcom-ui/{p-36885946.entry.js → p-be39c24b.entry.js} +1 -1
  59. package/dist/bromcom-ui/{p-3ebe6022.entry.js → p-c0e8c481.entry.js} +1 -1
  60. package/dist/bromcom-ui/{p-b4e2c796.entry.js → p-d9fb53c9.entry.js} +1 -1
  61. package/dist/bromcom-ui/{p-e9f81882.entry.js → p-dbb106a4.entry.js} +1 -1
  62. package/dist/bromcom-ui/{p-340720fb.entry.js → p-e50f0098.entry.js} +1 -1
  63. package/dist/bromcom-ui/{p-da1489e5.entry.js → p-ebb01d57.entry.js} +1 -1
  64. package/dist/bromcom-ui/{p-b1fde043.entry.js → p-f1b09912.entry.js} +1 -1
  65. package/dist/bromcom-ui/{p-e5a45bf4.entry.js → p-f33f5581.entry.js} +1 -1
  66. package/dist/bromcom-ui/{p-95884484.entry.js → p-f4936482.entry.js} +1 -1
  67. package/dist/cjs/bcm-accordion.cjs.entry.js +1 -1
  68. package/dist/cjs/bcm-alert.cjs.entry.js +1 -1
  69. package/dist/cjs/bcm-attendance.cjs.entry.js +2 -2
  70. package/dist/cjs/bcm-avatar_2.cjs.entry.js +3 -3
  71. package/dist/cjs/bcm-breadcrumb.cjs.entry.js +1 -1
  72. package/dist/cjs/bcm-button-group.cjs.entry.js +1 -1
  73. package/dist/cjs/bcm-button_3.cjs.entry.js +530 -0
  74. package/dist/cjs/bcm-card.cjs.entry.js +1 -1
  75. package/dist/cjs/bcm-checkbox-group.cjs.entry.js +1 -1
  76. package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +1 -1
  77. package/dist/cjs/bcm-checkbox_2.cjs.entry.js +1 -1
  78. package/dist/cjs/bcm-chip.cjs.entry.js +1 -1
  79. package/dist/cjs/bcm-collapse.cjs.entry.js +1 -1
  80. package/dist/cjs/bcm-date-picker.cjs.entry.js +1 -1
  81. package/dist/cjs/bcm-datetime-picker.cjs.entry.js +1432 -0
  82. package/dist/cjs/bcm-default.cjs.entry.js +1 -1
  83. package/dist/cjs/bcm-drawer.cjs.entry.js +3 -3
  84. package/dist/cjs/bcm-dropdown.cjs.entry.js +2 -2
  85. package/dist/cjs/bcm-expansion-panel.cjs.entry.js +1 -1
  86. package/dist/cjs/bcm-form-2.cjs.entry.js +1 -1
  87. package/dist/cjs/bcm-input.cjs.entry.js +4 -5
  88. package/dist/cjs/bcm-item.cjs.entry.js +1 -1
  89. package/dist/cjs/bcm-items.cjs.entry.js +1 -1
  90. package/dist/cjs/bcm-label_2.cjs.entry.js +119 -0
  91. package/dist/cjs/bcm-linked.cjs.entry.js +3 -3
  92. package/dist/cjs/bcm-list.cjs.entry.js +5 -5
  93. package/dist/cjs/bcm-menu.cjs.entry.js +5 -5
  94. package/dist/cjs/bcm-old-input.cjs.entry.js +398 -0
  95. package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +1 -1
  96. package/dist/cjs/bcm-popconfirm.cjs.entry.js +1 -1
  97. package/dist/cjs/bcm-popover.cjs.entry.js +3 -3
  98. package/dist/cjs/bcm-progress.cjs.entry.js +1 -1
  99. package/dist/cjs/bcm-radio-group.cjs.entry.js +3 -2
  100. package/dist/cjs/bcm-radio.cjs.entry.js +1 -1
  101. package/dist/cjs/bcm-range.cjs.entry.js +1 -1
  102. package/dist/cjs/bcm-search.cjs.entry.js +3 -3
  103. package/dist/cjs/bcm-skeleton.cjs.entry.js +1 -1
  104. package/dist/cjs/bcm-step.cjs.entry.js +2 -2
  105. package/dist/cjs/bcm-stepper.cjs.entry.js +3 -3
  106. package/dist/cjs/bcm-switch.cjs.entry.js +1 -1
  107. package/dist/cjs/bcm-tab-group.cjs.entry.js +1 -1
  108. package/dist/cjs/bcm-tag.cjs.entry.js +2 -2
  109. package/dist/cjs/bcm-textarea.cjs.entry.js +2 -2
  110. package/dist/cjs/bcm-time-picker.cjs.entry.js +1 -1
  111. package/dist/cjs/bromcom-ui.cjs.js +1 -1
  112. package/dist/cjs/{generate-bb74129d.js → generate-73db206b.js} +1 -1
  113. package/dist/cjs/{input-template-8d849211.js → input-template-c8ceb3ff.js} +1 -1
  114. package/dist/cjs/{json-parse-decarator-c7165900.js → json-parse-decarator-4d8d8097.js} +1 -1
  115. package/dist/cjs/loader.cjs.js +1 -1
  116. package/dist/cjs/{number-helper-f3a12102.js → number-helper-2253d3ad.js} +1 -1
  117. package/dist/cjs/old-bcm-popover-box.cjs.entry.js +2 -2
  118. package/dist/cjs/old-bcm-popover.cjs.entry.js +1 -1
  119. package/dist/cjs/{stepper-states-82436ff7.js → stepper-states-c4dbafba.js} +1 -1
  120. package/dist/cjs/{tooltip-helper-56706e14.js → tooltip-helper-88c00766.js} +3 -3
  121. package/dist/cjs/{validators-1ab45588.js → validators-e5907199.js} +1 -1
  122. package/dist/collection/components/molecules/input/input.js +0 -1
  123. package/dist/collection/components/molecules/radio/group.js +2 -1
  124. package/dist/components/bcm-input.js +0 -1
  125. package/dist/components/bcm-radio-group.js +2 -1
  126. package/dist/components/generate.js +1 -1
  127. package/dist/esm/bcm-accordion.entry.js +1 -1
  128. package/dist/esm/bcm-alert.entry.js +1 -1
  129. package/dist/esm/bcm-attendance.entry.js +2 -2
  130. package/dist/esm/bcm-avatar_2.entry.js +6 -6
  131. package/dist/esm/bcm-breadcrumb.entry.js +1 -1
  132. package/dist/esm/bcm-button-group.entry.js +1 -1
  133. package/dist/esm/bcm-button_3.entry.js +524 -0
  134. package/dist/esm/bcm-card.entry.js +3 -3
  135. package/dist/esm/bcm-checkbox-group.entry.js +2 -2
  136. package/dist/esm/bcm-checkbox-lite_9.entry.js +2 -2
  137. package/dist/esm/bcm-checkbox_2.entry.js +3 -3
  138. package/dist/esm/bcm-chip.entry.js +3 -3
  139. package/dist/esm/bcm-collapse-group.entry.js +1 -1
  140. package/dist/esm/bcm-collapse.entry.js +1 -1
  141. package/dist/esm/bcm-colorpicker.entry.js +2 -2
  142. package/dist/esm/bcm-date-picker.entry.js +2 -2
  143. package/dist/esm/bcm-datetime-picker.entry.js +1428 -0
  144. package/dist/esm/bcm-default.entry.js +1 -1
  145. package/dist/esm/bcm-drawer.entry.js +6 -6
  146. package/dist/esm/bcm-dropdown.entry.js +2 -2
  147. package/dist/esm/bcm-expansion-panel.entry.js +3 -3
  148. package/dist/esm/bcm-form-2.entry.js +1 -1
  149. package/dist/esm/bcm-form.entry.js +1 -1
  150. package/dist/esm/bcm-input.entry.js +5 -6
  151. package/dist/esm/bcm-item.entry.js +3 -3
  152. package/dist/esm/bcm-items.entry.js +1 -1
  153. package/dist/esm/bcm-label_2.entry.js +114 -0
  154. package/dist/esm/bcm-linked.entry.js +6 -6
  155. package/dist/esm/bcm-list.entry.js +8 -8
  156. package/dist/esm/bcm-menu.entry.js +8 -8
  157. package/dist/esm/bcm-old-input.entry.js +394 -0
  158. package/dist/esm/bcm-old-tag_2.entry.js +1 -1
  159. package/dist/esm/bcm-popconfirm-box.entry.js +3 -3
  160. package/dist/esm/bcm-popconfirm.entry.js +1 -1
  161. package/dist/esm/bcm-popover.entry.js +6 -6
  162. package/dist/esm/bcm-progress.entry.js +3 -3
  163. package/dist/esm/bcm-radio-group.entry.js +4 -3
  164. package/dist/esm/bcm-radio.entry.js +3 -3
  165. package/dist/esm/bcm-range.entry.js +2 -2
  166. package/dist/esm/bcm-search.entry.js +4 -4
  167. package/dist/esm/bcm-select.entry.js +1 -1
  168. package/dist/esm/bcm-skeleton.entry.js +1 -1
  169. package/dist/esm/bcm-step.entry.js +2 -2
  170. package/dist/esm/bcm-stepper.entry.js +4 -4
  171. package/dist/esm/bcm-switch.entry.js +2 -2
  172. package/dist/esm/bcm-tab-group.entry.js +1 -1
  173. package/dist/esm/bcm-table.entry.js +1 -1
  174. package/dist/esm/bcm-tabs-content.entry.js +1 -1
  175. package/dist/esm/bcm-tabs.entry.js +1 -1
  176. package/dist/esm/bcm-tag.entry.js +3 -3
  177. package/dist/esm/bcm-text.entry.js +2 -2
  178. package/dist/esm/bcm-textarea.entry.js +3 -3
  179. package/dist/esm/bcm-time-picker.entry.js +2 -2
  180. package/dist/esm/bromcom-ui.js +1 -1
  181. package/dist/esm/{color-helper-b5e9aa56.js → color-helper-7e202fd8.js} +1 -1
  182. package/dist/esm/{element-dragger-7ea06c76.js → element-dragger-89bb52fd.js} +1 -1
  183. package/dist/esm/{generate-a9881049.js → generate-a7f3d168.js} +1 -1
  184. package/dist/esm/{input-template-9fceea5b.js → input-template-928c8d17.js} +1 -1
  185. package/dist/esm/{json-parse-decarator-c325c1dc.js → json-parse-decarator-58394179.js} +1 -1
  186. package/dist/esm/loader.js +1 -1
  187. package/dist/esm/{number-helper-34328380.js → number-helper-f3b67bd2.js} +1 -1
  188. package/dist/esm/old-bcm-popover-box.entry.js +4 -4
  189. package/dist/esm/old-bcm-popover.entry.js +1 -1
  190. package/dist/esm/{stepper-states-bd4ca5d4.js → stepper-states-e2489128.js} +1 -1
  191. package/dist/esm/{tooltip-helper-1a392c00.js → tooltip-helper-99202557.js} +5 -5
  192. package/dist/esm/{utils-b3338faf.js → utils-57652744.js} +1 -1
  193. package/dist/esm/{validators-69843fd0.js → validators-0f31a959.js} +1 -1
  194. package/package.json +1 -1
  195. package/dist/bromcom-ui/p-799d326b.entry.js +0 -5
  196. package/dist/bromcom-ui/p-bc56ec8a.entry.js +0 -5
  197. package/dist/bromcom-ui/p-c6bbfd20.entry.js +0 -5
  198. package/dist/bromcom-ui/p-e269d048.js +0 -5
  199. package/dist/cjs/bcm-button_7.cjs.entry.js +0 -2424
  200. package/dist/esm/bcm-button_7.entry.js +0 -2414
@@ -1,2414 +0,0 @@
1
- /*!
2
- * Built with Stencil
3
- * Copyright (c) Bromcom.
4
- */
5
- import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, f as forceUpdate } from './index-2a3eeccc.js';
6
- import { s as snq, G as Generate } from './generate-a9881049.js';
7
- import { B as Bcm, a as Bcm$1 } from './bcm-b8d8a236.js';
8
- import { c as classnames } from './index-ba2edd32.js';
9
- import { c as createStore } from './index-6e950253.js';
10
- import { S as SlotTemplate } from './slot-template-877c4e01.js';
11
- import { C as ColorHelper } from './color-helper-b5e9aa56.js';
12
- import { I as IsLoad } from './is-load-decorator-b990575a.js';
13
- import { D as DragDirections, E as ElementDragger } from './element-dragger-7ea06c76.js';
14
- import { D as DateTimeHelper } from './datetime-helper-df25808a.js';
15
- import { d as delay } from './utils-b3338faf.js';
16
- import { g as getPlacement, s as setPosition } from './popover-placement-9864294b.js';
17
- import { L as LabelTemplate } from './label-template-e3eebfbc.js';
18
- import { S as StringHelper } from './string-helper-74a1648f.js';
19
- import { C as CaptionTemplate } from './caption-template-d54ee0c3.js';
20
- import './number-helper-34328380.js';
21
- import './validators-69843fd0.js';
22
- import { T as Tooltip } from './tooltip-helper-1a392c00.js';
23
- import './_commonjsHelpers-3016b722.js';
24
- import './colors-1d7854ea.js';
25
- import './floating-ui-f03a96ce.js';
26
-
27
- const variantOptions = {
28
- save: {
29
- text: 'Save',
30
- color: 'emerald',
31
- icon: 'far fa-save',
32
- iconPosition: 'prefix',
33
- },
34
- ok: {
35
- text: 'Ok',
36
- color: 'emerald',
37
- icon: 'far fa-check',
38
- iconPosition: 'prefix',
39
- },
40
- new: {
41
- text: 'New',
42
- color: 'emerald',
43
- icon: 'far fa-plus',
44
- iconPosition: 'prefix',
45
- },
46
- add: {
47
- text: 'Add',
48
- color: 'emerald',
49
- icon: 'far fa-plus',
50
- iconPosition: 'prefix',
51
- },
52
- create: {
53
- text: 'Create',
54
- color: 'emerald',
55
- icon: 'far fa-plus',
56
- iconPosition: 'prefix',
57
- },
58
- prev: {
59
- text: 'Prev',
60
- color: '',
61
- icon: 'far fa-arrow-left',
62
- iconPosition: 'prefix',
63
- },
64
- next: {
65
- text: 'Next',
66
- color: '',
67
- icon: 'far fa-arrow-right',
68
- iconPosition: 'suffix',
69
- },
70
- apply: {
71
- text: 'Apply',
72
- color: '',
73
- icon: 'far fa-check-circle',
74
- iconPosition: 'prefix',
75
- },
76
- submit: {
77
- text: 'Submit',
78
- color: '',
79
- icon: 'far fa-save',
80
- iconPosition: 'prefix',
81
- },
82
- send: {
83
- text: 'Send',
84
- color: 'emerald',
85
- icon: 'far fa-paper-plane',
86
- iconPosition: 'prefix',
87
- },
88
- delete: {
89
- text: 'Delete',
90
- color: 'red',
91
- icon: 'far fa-trash',
92
- iconPosition: 'prefix',
93
- },
94
- cancel: {
95
- text: 'Cancel',
96
- color: 'red',
97
- icon: 'far fa-times',
98
- iconPosition: 'prefix',
99
- },
100
- decline: {
101
- text: 'Decline',
102
- color: 'red',
103
- icon: 'far fa-ban',
104
- iconPosition: 'prefix',
105
- },
106
- close: {
107
- text: 'Close',
108
- color: 'red',
109
- icon: 'far fa-times-circle',
110
- iconPosition: 'prefix',
111
- },
112
- archive: {
113
- text: 'Archive',
114
- color: 'red',
115
- icon: 'far fa-folder-open',
116
- iconPosition: 'prefix',
117
- },
118
- remove: {
119
- text: 'Remove',
120
- color: 'red',
121
- icon: 'far fa-minus-circle',
122
- iconPosition: 'prefix',
123
- },
124
- edit: {
125
- text: 'Edit',
126
- color: '',
127
- icon: 'far fa-edit',
128
- iconPosition: 'prefix',
129
- },
130
- export: {
131
- text: 'Export',
132
- color: '',
133
- icon: 'far fa-sign-out',
134
- iconPosition: 'prefix',
135
- },
136
- import: {
137
- text: 'Import',
138
- color: '',
139
- icon: 'far fa-sign-in',
140
- iconPosition: 'prefix',
141
- },
142
- filter: {
143
- text: 'Filter',
144
- color: '',
145
- icon: 'far fa-filter',
146
- iconPosition: 'prefix',
147
- },
148
- update: {
149
- text: 'Update',
150
- color: '',
151
- icon: 'far fa-sync',
152
- iconPosition: 'prefix',
153
- },
154
- reset: {
155
- text: "Reset",
156
- color: "",
157
- icon: 'far fa-sync',
158
- iconPosition: "prefix",
159
- },
160
- download: {
161
- text: 'Download',
162
- color: '',
163
- icon: 'far fa-download',
164
- iconPosition: 'prefix',
165
- },
166
- };
167
- var VariantProps;
168
- (function (VariantProps) {
169
- VariantProps["save"] = "save";
170
- VariantProps["submit"] = "submit";
171
- VariantProps["ok"] = "ok";
172
- VariantProps["new"] = "new";
173
- VariantProps["add"] = "add";
174
- VariantProps["create"] = "create";
175
- VariantProps["apply"] = "apply";
176
- VariantProps["prev"] = "prev";
177
- VariantProps["next"] = "next";
178
- VariantProps["send"] = "send";
179
- VariantProps["delete"] = "delete";
180
- VariantProps["cancel"] = "cancel";
181
- VariantProps["decline"] = "decline";
182
- VariantProps["close"] = "close";
183
- VariantProps["archive"] = "archive";
184
- VariantProps["remove"] = "remove";
185
- VariantProps["edit"] = "edit";
186
- VariantProps["export"] = "export";
187
- VariantProps["import"] = "import";
188
- VariantProps["filter"] = "filter";
189
- VariantProps["update"] = "update";
190
- VariantProps["reset"] = "Reset";
191
- VariantProps["download"] = "download";
192
- })(VariantProps || (VariantProps = {}));
193
-
194
- const { state } = createStore({
195
- value: new Map(),
196
- setData: {},
197
- removeData: {}
198
- });
199
- const setValue = (val) => {
200
- const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
201
- icon: variantOptions[val.variant].icon,
202
- value: variantOptions[val.variant].text,
203
- iconPosition: Bcm.IconPosition[variantOptions[val.variant].iconPosition],
204
- variantColor: variantOptions[val.variant].color
205
- }));
206
- state.value.set(data.id, data);
207
- };
208
- const removeValue = (_id) => {
209
- state.value.delete(_id);
210
- };
211
- const getValue = (id) => snq(() => state.value.get(id), {});
212
- const buttonState = {
213
- setValue,
214
- removeValue,
215
- getValue
216
- };
217
-
218
- const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
219
- const ButtonTagType = (href) ? Bcm.HtmlElementType.a : Bcm.HtmlElementType.button;
220
- return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "1" }),
221
- h("span", { hidden: true },
222
- h("slot", null)),
223
- loading && h("span", { class: "bcm-button__container-loading" },
224
- " ",
225
- h("span", { class: "bcm-button__container-icon" },
226
- h("i", { class: "far fa-spinner-third fa-spin" }),
227
- " ")),
228
- icon && h("span", { class: `${iconPosition} bcm-button__container-icon` },
229
- h("i", { class: `${icon}` })),
230
- !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })),
231
- h("slot", { name: "suffix" })));
232
- };
233
-
234
- 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{--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)}";
235
-
236
- var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
237
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
238
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
239
- r = Reflect.decorate(decorators, target, key, desc);
240
- else
241
- for (var i = decorators.length - 1; i >= 0; i--)
242
- if (d = decorators[i])
243
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
244
- return c > 3 && r && Object.defineProperty(target, key, r), r;
245
- };
246
- const BcmButton = class {
247
- constructor(hostRef) {
248
- registerInstance(this, hostRef);
249
- this.bcmClick = createEvent(this, "bcm-click", 7);
250
- this._id = Generate.UID();
251
- this.hidden = false;
252
- this.type = Bcm.ButtonType.button;
253
- this.size = Bcm.Size.medium;
254
- this.disabled = false;
255
- this.kind = Bcm.Kind.solid;
256
- this.outline = false;
257
- this.loading = false;
258
- this.dataDismiss = false;
259
- this.fullWidth = false;
260
- this.iconPosition = Bcm.IconPosition.prefix;
261
- this.checked = false;
262
- }
263
- handleOnClick(e) {
264
- if (this.disabled) {
265
- e.preventDefault();
266
- e.stopPropagation();
267
- return false;
268
- }
269
- }
270
- componentWillRender() {
271
- const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
272
- buttonState.setValue({
273
- id: this._id,
274
- size,
275
- type,
276
- kind,
277
- icon,
278
- iconPosition,
279
- disabled,
280
- outline,
281
- href,
282
- target,
283
- loading,
284
- variant,
285
- fullWidth,
286
- hidden,
287
- value,
288
- isIconOnly: !!(this.isHaveChildNodes() && this.icon),
289
- });
290
- }
291
- getStateData() {
292
- return buttonState.getValue(this._id);
293
- }
294
- isHaveChildNodes() {
295
- const childNodes = Array.from(this.el.childNodes);
296
- return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
297
- }
298
- setColor(color = this.color) {
299
- if (!color)
300
- return;
301
- const { kind } = this;
302
- const prefix = `--bcm-button-${kind}`;
303
- if (kind === 'solid') {
304
- return {
305
- [`${prefix}-color-default`]: ColorHelper.dsColor('white'),
306
- [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
307
- [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
308
- [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
309
- [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
310
- [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-500'),
311
- [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
312
- [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
313
- [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
314
- [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
315
- [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
316
- [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
317
- [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
318
- [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
319
- [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
320
- };
321
- }
322
- else if (kind == 'link') {
323
- return {
324
- [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
325
- [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
326
- [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
327
- [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
328
- [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
329
- [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
330
- [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
331
- [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
332
- [`${prefix}-background-color-active`]: ColorHelper.dsColor('slate-50'),
333
- [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('transparent'),
334
- [`${prefix}-border-default`]: ColorHelper.dsColor('transparent'),
335
- [`${prefix}-border-hover`]: ColorHelper.dsColor('transparent'),
336
- [`${prefix}-border-focus-visible`]: ColorHelper.dsColor('slate-50'),
337
- [`${prefix}-border-active`]: ColorHelper.dsColor('slate-50'),
338
- [`${prefix}-border-disabled`]: ColorHelper.dsColor('transparent')
339
- };
340
- }
341
- else if (kind == 'ghost') {
342
- return {
343
- [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-600'),
344
- [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
345
- [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
346
- [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
347
- [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),
348
- [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-100'),
349
- [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-200'),
350
- [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-400'),
351
- [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-300'),
352
- [`${prefix}-background-color-disabled`]: ColorHelper.dsColor(color + '-50'),
353
- [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-300'),
354
- [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-400'),
355
- [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-600'),
356
- [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-500'),
357
- [`${prefix}-border-disabled`]: ColorHelper.dsColor(color + '-200'),
358
- };
359
- }
360
- return;
361
- }
362
- render() {
363
- const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
364
- const classPrefix = 'bcm-button';
365
- let componentClass = classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
366
- 'full-width': fullWidth,
367
- 'checked': this.checked,
368
- 'disabled': disabled,
369
- });
370
- const hostClasses = classnames(`${classPrefix}`, {
371
- hidden,
372
- 'full-width': fullWidth,
373
- });
374
- return (h(Host, { class: hostClasses, tabindex: "-1", style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
375
- }
376
- get el() { return getElement(this); }
377
- };
378
- __decorate$6([
379
- IsLoad()
380
- ], BcmButton.prototype, "el", void 0);
381
- BcmButton.style = buttonCss;
382
-
383
- var Months;
384
- (function (Months) {
385
- Months["january"] = "january";
386
- Months["february"] = "february";
387
- Months["march"] = "march";
388
- Months["april"] = "april";
389
- Months["may"] = "may";
390
- Months["june"] = "june";
391
- Months["july"] = "july";
392
- Months["august"] = "august";
393
- Months["september"] = "september";
394
- Months["october"] = "october";
395
- Months["november"] = "november";
396
- Months["december"] = "december";
397
- })(Months || (Months = {}));
398
- var Days;
399
- (function (Days) {
400
- Days["sunday"] = "sunday";
401
- Days["monday"] = "monday";
402
- Days["tuesday"] = "tuesday";
403
- Days["wednesday"] = "wednesday";
404
- Days["thursday"] = "thursday";
405
- Days["friday"] = "friday";
406
- Days["saturday"] = "saturday";
407
- })(Days || (Days = {}));
408
- /**
409
- * 'type' prop predefined values
410
- */
411
- var Types;
412
- (function (Types) {
413
- Types["datetime"] = "datetime";
414
- Types["range"] = "range";
415
- Types["date"] = "date";
416
- Types["time"] = "time";
417
- })(Types || (Types = {}));
418
-
419
- const datetimePickerCss = "@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{--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{--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{--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}:host{display:inline-block;position:relative;width:100%;max-width:256px;margin:0;margin-bottom:8px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}.toggle{cursor:pointer}.toggle.disabled{cursor:not-allowed}.modules{display:flex}.picker-label{user-select:none;line-height:1}.datetime-picker{position:absolute;top:-1000px;display:inline-flex;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px);background-color:#ffffff;min-height:356px;max-height:356px;box-sizing:border-box;z-index:-1000}.datetime-picker.alignment-left{left:0}.datetime-picker.alignment-right{right:0}.datetime-picker.open{top:calc(100% - 28px);z-index:10000;opacity:1;visibility:visible;transform:scale(1) translateY(0)}.datetime-picker.open.no-caption{top:100%}.actions{display:flex;align-items:center;justify-content:space-between;padding:8px;margin-top:auto;border-top:1px solid var(--bcm-color-grey-6)}.actions .current-date{font-size:14px;line-height:22px;color:var(--bcm-color-prime-blue-6);text-transform:capitalize}.date-container+.time-container{border-left:1px solid #cecece}.time-container{width:185px}.time-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.time-container .bcm-datetime-picker__header .now{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.time-container .bcm-datetime-picker__content{position:relative;display:flex}.time-container .hours,.time-container .minutes,.time-container .time-period{position:relative;flex:1 1 100%;max-width:100%;height:280px;overflow:hidden}.time-container .hours .items>span,.time-container .minutes .items>span,.time-container .time-period .items>span{font-size:14px;color:var(--bcm-color-grey-8)}.time-container .hours .items>span.selected,.time-container .minutes .items>span.selected,.time-container .time-period .items>span.selected{color:var(--bcm-color-prime-blue-6)}.date-container{width:364px;}.date-container .bcm-datetime-picker__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-height:60px;border-bottom:1px solid var(--bcm-color-grey-4)}.date-container .bcm-datetime-picker__header .month-year-wrapper{display:flex;align-items:center;justify-content:center;margin:0 4px;min-width:125px}.date-container .bcm-datetime-picker__header .month-year{font-size:16px;line-height:24px}.date-container .bcm-datetime-picker__header .month-year{display:flex;align-items:center}.date-container .bcm-datetime-picker__header .month-year button{display:flex;align-items:center;box-shadow:none;background:transparent;outline:none;appearance:none;border:none;color:var(--bcm-color-prime-blue-6);cursor:pointer}.date-container .bcm-datetime-picker__header .month{text-transform:capitalize}.date-container .bcm-datetime-picker__header .year{padding-left:4px}.date-container .bcm-datetime-picker__header .today{font-size:14px;line-height:22px;cursor:pointer;color:var(--bcm-color-prime-blue-6);user-select:none}.date-container .bcm-datetime-picker__content{display:flex}.date-container .years{position:relative;flex:0 0 70px;max-width:70px;height:280px;overflow:hidden;background-color:var(--bcm-color-grey-2)}.date-container .days{width:100%}.date-container .day-numbers,.date-container .day-labels{display:grid;grid-template-columns:repeat(7, 1fr)}.date-container .day-numbers{padding:24px 24px}.date-container .day-numbers>span,.date-container .day-labels span{text-align:center}.date-container .day-numbers>span{position:relative;padding-bottom:100%;cursor:pointer}.date-container .day-numbers>span.not-this-month{color:var(--bcm-color-grey-4)}.date-container .day-numbers>span.is-weekend{color:var(--bcm-color-prime-blue-3)}.date-container .day-numbers>span.is-disabled-date:not(.today){color:var(--bcm-color-grey-4);cursor:not-allowed}.date-container .day-numbers>span.is-disabled-date:not(.today):before{opacity:0 !important}.date-container .day-numbers>span.today{color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.today:before{opacity:1;background-color:var(--bcm-color-prime-blue-2);border:1px solid var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.selected-start{background:linear-gradient(90deg, white 50%, #8abde2 50%) !important}.date-container .day-numbers>span.selected-end{background:linear-gradient(90deg, #8abde2 50%, white 50%) !important}.date-container .day-numbers>span.range{background:#8abde2}.date-container .day-numbers>span.range:not(.today){color:#ffffff}.date-container .day-numbers>span.range:not(.today):before{background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers>span.range.is-weekend:not(.today){color:var(--bcm-color-prime-blue-2)}.date-container .day-numbers>span.selected,.date-container .day-numbers>span.selected-end{color:#ffffff}.date-container .day-numbers>span.selected:before,.date-container .day-numbers>span.selected-end:before{opacity:1;background-color:var(--bcm-color-prime-blue-6)}.date-container .day-numbers.start-1>span:first-child{grid-column:1}.date-container .day-numbers.start-2>span:first-child{grid-column:2}.date-container .day-numbers.start-3>span:first-child{grid-column:3}.date-container .day-numbers.start-4>span:first-child{grid-column:4}.date-container .day-numbers.start-5>span:first-child{grid-column:5}.date-container .day-numbers.start-6>span:first-child{grid-column:6}.date-container .day-numbers.start-7>span:first-child{grid-column:7}.date-container .day-numbers>span:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--bcm-color-grey-4);opacity:0;box-sizing:border-box}.date-container .day-numbers>span:hover.not-this-month:not(.is-weekend){color:var(--bcm-color-grey-6)}.date-container .day-numbers>span:hover:before{opacity:1}.date-container .day-numbers .number{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.date-container .day-labels{padding:24px 40px 0 40px}.date-container .day-labels span{font-size:12px;color:var(--bcm-color-grey-6)}.date-container .day-labels span:nth-child(7n+6),.date-container .day-labels span:nth-child(7n+7){color:var(--bcm-color-prime-blue-3)}.years .items,.hours .items,.minutes .items,.time-period .items{position:relative;display:flex;flex-direction:column;z-index:0;transform:translateY(0);scroll-behavior:smooth}.years .items>span,.hours .items>span,.minutes .items>span,.time-period .items>span{text-align:center;font-size:12px;min-height:26px;max-height:26px;line-height:26px;color:var(--bcm-color-grey-8);user-select:none}.years:before,.years:after,.hours:before,.hours:after,.minutes:before,.minutes:after,.time-period:before,.time-period:after{content:\"\";position:absolute;left:0;width:100%;height:40px}.years:before,.hours:before,.minutes:before,.time-period:before{top:-40px;box-shadow:0 10px 100px 70px #ffffff;z-index:1}.years:after,.hours:after,.minutes:after,.time-period:after{bottom:-40px;box-shadow:0 -10px 100px 70px #ffffff;z-index:2}.select-strip{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);min-height:26px;max-height:26px;border:1px solid var(--bcm-color-grey-5);border-left:0;border-right:0;pointer-events:none;box-sizing:border-box}";
420
-
421
- var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
422
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
423
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
424
- r = Reflect.decorate(decorators, target, key, desc);
425
- else
426
- for (var i = decorators.length - 1; i >= 0; i--)
427
- if (d = decorators[i])
428
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
429
- return c > 3 && r && Object.defineProperty(target, key, r), r;
430
- };
431
- const stringify = JSON.stringify;
432
- const BcmDatetimePicker = class {
433
- constructor(hostRef) {
434
- registerInstance(this, hostRef);
435
- this.load = createEvent(this, "bcm-load", 7);
436
- this.change = createEvent(this, "bcm-change", 7);
437
- this.bcmOpen = createEvent(this, "bcm-open", 7);
438
- this.inputId = null;
439
- this.emptyState = false;
440
- this.initialized = false;
441
- this.disabledDatesList = { min: null, max: null, dates: [] };
442
- this.dayNumbers = [];
443
- this.valueText = null;
444
- this.dataIsValid = false;
445
- /**
446
- * Component Properties
447
- */
448
- this._id = Generate.UID();
449
- this.date = new Date();
450
- this.endDate = null;
451
- this.type = Types.datetime;
452
- this.disabled = false;
453
- this.disabledDates = '';
454
- this.value = null;
455
- this._open = false;
456
- this.hidden = false;
457
- this.fullWidth = false;
458
- this.required = false;
459
- this.minYear = 1900;
460
- this.maxYear = 2200;
461
- this.noCaption = false;
462
- this.caption = '';
463
- this.captionType = 'default';
464
- this.placement = Bcm.Placement['bottom-start'];
465
- /**
466
- * Component States
467
- */
468
- this.years = [];
469
- this.hours = [];
470
- this.minutes = [];
471
- this.hasDateModule = false;
472
- this.hasTimeModule = false;
473
- this.error = false;
474
- this.errorText = '';
475
- this.tick = {};
476
- }
477
- markForCheck() {
478
- this.tick = Generate.UID();
479
- }
480
- openChanged() {
481
- this.bcmOpen.emit(this._open);
482
- }
483
- /**
484
- * @ComponentMethod
485
- */
486
- componentWillLoad() {
487
- this.inputId = 'picker-input-' + this._id;
488
- this.hasDateModule = this.type === Types.datetime
489
- || this.type === Types.date
490
- || this.type === Types.range;
491
- this.hasTimeModule = this.type === Types.datetime
492
- || this.type === Types.time;
493
- this.prepareDisabledDates();
494
- this.setData();
495
- // Generate year, hour, minute sequences
496
- // #
497
- if (!this.initialized) {
498
- for (let i = this.minYear; i <= this.maxYear; i++)
499
- this.years.push(i);
500
- for (let i = 0; i <= 23; i++)
501
- this.hours.push(i);
502
- for (let i = 0; i <= 59; i++)
503
- this.minutes.push(i);
504
- this.load.emit();
505
- }
506
- this.initialized = true;
507
- }
508
- /**
509
- * @ComponentMethod
510
- */
511
- componentDidRender() {
512
- // Create years selection
513
- // #
514
- if (this.hasDateModule && !this.yearsDragger) {
515
- this.createDragSelection('years', this.yearsElement, this.yearsWrapperElement, this.yearsStripElement, DragDirections.y);
516
- this.createWheelChange('years', this.yearsWrapperElement, this.yearsStripElement);
517
- this.setDragSelection('years', this.currentDate.year);
518
- }
519
- // Create hours selection
520
- // #
521
- if (this.hasTimeModule && !this.hoursDragger) {
522
- this.createDragSelection('hours', this.hoursElement, this.hoursWrapperElement, this.timeStripElement, DragDirections.y);
523
- this.createWheelChange('hours', this.hoursWrapperElement, this.timeStripElement);
524
- this.setDragSelection('hours', this.currentDate.hour);
525
- }
526
- // Create minutes selection
527
- // #
528
- if (this.hasTimeModule && !this.minutesDragger) {
529
- this.createDragSelection('minutes', this.minutesElement, this.minutesWrapperElement, this.timeStripElement, DragDirections.y);
530
- this.createWheelChange('minutes', this.minutesWrapperElement, this.timeStripElement);
531
- this.setDragSelection('minutes', this.currentDate.minute);
532
- }
533
- }
534
- /**
535
- * @desc
536
- * @param newValue
537
- */
538
- renderDateChange() {
539
- if (!this.initialized)
540
- return;
541
- this.setData();
542
- this.hasDateModule && this.setDragSelection('years', this.currentDate.year);
543
- }
544
- /**
545
- * @desc
546
- * @param newValue
547
- */
548
- openChange(newValue) {
549
- if (newValue) {
550
- this.calculateLocation();
551
- // Create years selection
552
- // #
553
- if (this.hasDateModule) {
554
- this.createDragSelection('years', this.yearsElement, this.yearsWrapperElement, this.yearsStripElement, DragDirections.y);
555
- this.createWheelChange('years', this.yearsWrapperElement, this.yearsStripElement);
556
- this.setDragSelection('years', this.currentDate.year);
557
- }
558
- // Create hours selection
559
- // #
560
- if (this.hasTimeModule) {
561
- this.createDragSelection('hours', this.hoursElement, this.hoursWrapperElement, this.timeStripElement, DragDirections.y);
562
- this.createWheelChange('hours', this.hoursWrapperElement, this.timeStripElement);
563
- this.setDragSelection('hours', this.currentDate.hour, true);
564
- }
565
- // Create minutes selection
566
- // #
567
- if (this.hasTimeModule) {
568
- this.createDragSelection('minutes', this.minutesElement, this.minutesWrapperElement, this.timeStripElement, DragDirections.y);
569
- this.createWheelChange('minutes', this.minutesWrapperElement, this.timeStripElement);
570
- this.setDragSelection('minutes', this.currentDate.minute, true);
571
- }
572
- this.markForCheck();
573
- forceUpdate(this.el);
574
- }
575
- }
576
- /**
577
- * @desc
578
- * @param newValue
579
- */
580
- valueChange(newValue, oldValue) {
581
- const errorObject1 = { isValid: false, value: this.valueText };
582
- const errorObject2 = { isValid: false, value: this.inputElement.value };
583
- if (!newValue) {
584
- this.change.emit();
585
- return;
586
- }
587
- if (this.type !== Types.range && this.error) {
588
- this.change.emit(errorObject2);
589
- return;
590
- }
591
- try {
592
- if ((oldValue && stringify(newValue.dateObject) !== stringify(oldValue.dateObject)) || (!oldValue && newValue)) {
593
- if (this.type === Types.date || this.type === Types.datetime) {
594
- this.change.emit(newValue);
595
- }
596
- if (this.type === Types.time) {
597
- this.change.emit(newValue);
598
- // this.change.emit({
599
- // time: newValue.time,
600
- // timeObject: newValue.dateObject
601
- // })
602
- }
603
- if (this.type === Types.range) {
604
- const dateObject = newValue.dateObject;
605
- if (dateObject.start.date && dateObject.end.date) {
606
- if (newValue.isValid) {
607
- this.change.emit({
608
- isValid: newValue.isValid,
609
- value: newValue.value,
610
- start: dateObject.start,
611
- end: dateObject.end
612
- });
613
- }
614
- }
615
- else {
616
- this.change.emit(errorObject1);
617
- }
618
- }
619
- }
620
- }
621
- catch (exception) { }
622
- }
623
- /**
624
- * @desc
625
- * @param newValue -
626
- */
627
- disabledDatesChange(newValue) {
628
- if (newValue) {
629
- this.prepareDisabledDates();
630
- }
631
- }
632
- /**
633
- * @desc
634
- * @param date
635
- */
636
- stringToDate(date) {
637
- const isDate = !!date.getMonth;
638
- if (!isDate) {
639
- return new Date(Date.parse(this.switchDDMM(date)));
640
- }
641
- return date;
642
- }
643
- /**
644
- * @desc
645
- * @param date
646
- */
647
- dateToString(date) {
648
- if (!(date instanceof Date))
649
- return false;
650
- }
651
- /**
652
- *
653
- * @param str
654
- */
655
- switchDDMM(str) {
656
- if (!str)
657
- return;
658
- const parts = str.split('/');
659
- if (str.indexOf('/') === -1 || parts.length !== 3)
660
- return str;
661
- return `${parts[1]}/${parts[0]}/${parts[2]}`;
662
- }
663
- /**
664
- * @desc
665
- */
666
- setData() {
667
- this.date = this.stringToDate(this.date);
668
- if (!this.initialized && !this.renderDate) {
669
- this.renderDate = this.date && this.date || new Date();
670
- }
671
- if (!this.initialized && this.endDate) {
672
- this.selectedEndDate = this.stringToDate(this.endDate);
673
- //this.currentEndDate = this.createDateObject(this.selectedEndDate)
674
- }
675
- const date = this.renderDate;
676
- this.currentDate = this.createDateObject(date);
677
- // Calculate days in current
678
- // month
679
- this.dayNumbers = this.getMonthDayNumbers(date).map(day => {
680
- return {
681
- day,
682
- thisMonth: true,
683
- isWeekend: this.getDayIsWeekend(date, day),
684
- today: this.getIsCurrentDate(date, day),
685
- date: this.getTargetDayDate(date, day)
686
- };
687
- });
688
- // Add prev month days to
689
- // empty columns
690
- if (this.currentDate.year > this.minYear) {
691
- let targetMonth = new Date(new Date(date).setMonth(this.currentDate.month - 1, 1));
692
- let targetMonthDayNumbers = this.getMonthDayNumbers(targetMonth).reverse();
693
- let max = this.currentDate.monthFirstDay;
694
- for (let i = 1; i < (max === 0 ? 7 : max); i++) {
695
- const day = targetMonthDayNumbers[i - 1];
696
- this.dayNumbers.unshift({
697
- day,
698
- prevMonth: true,
699
- isWeekend: this.getDayIsWeekend(targetMonth, day),
700
- date: this.getTargetDayDate(targetMonth, day)
701
- });
702
- }
703
- }
704
- // Add next month days to
705
- // rest of columns
706
- if (this.currentDate.year < this.maxYear) {
707
- let targetMonth = new Date(new Date(date).setMonth(this.currentDate.month + 1));
708
- let targetMonthDayNumbers = this.getMonthDayNumbers(targetMonth);
709
- let max = 42 - this.dayNumbers.length;
710
- for (let i = 0; i < max; i++) {
711
- const day = targetMonthDayNumbers[i];
712
- this.dayNumbers.push({
713
- day,
714
- nextMonth: true,
715
- isWeekend: this.getDayIsWeekend(targetMonth, day),
716
- date: this.getTargetDayDate(targetMonth, day)
717
- });
718
- }
719
- }
720
- if (!this.emptyState) {
721
- this.valueText = this.getValueText();
722
- }
723
- forceUpdate(this.el);
724
- }
725
- /**
726
- * @desc
727
- */
728
- prepareDisabledDates() {
729
- if (!this.disabledDates)
730
- return;
731
- let disabledDatesData = null;
732
- if (typeof this.disabledDates === 'string') {
733
- try {
734
- disabledDatesData = JSON.parse(this.disabledDates);
735
- }
736
- catch (e) {
737
- return;
738
- }
739
- }
740
- else
741
- disabledDatesData = this.disabledDates;
742
- // Convert dates to list
743
- // #
744
- if (disabledDatesData.dates && disabledDatesData.dates.length && !!disabledDatesData.dates.length) {
745
- const disabledDates = disabledDatesData.dates.map(date => {
746
- const tempDate = new Date(date);
747
- if (tempDate.toString().toLowerCase() === 'invalid date')
748
- return null;
749
- else
750
- return tempDate;
751
- }).filter(date => date);
752
- this.disabledDatesList.dates = disabledDates;
753
- }
754
- // Get min & max range
755
- // #
756
- if (disabledDatesData.min &&
757
- disabledDatesData.max && (disabledDatesData.min.getTime() > disabledDatesData.max.getTime() ||
758
- disabledDatesData.max.getTime() < disabledDatesData.min.getTime())) {
759
- return;
760
- }
761
- if (disabledDatesData.min && disabledDatesData.min instanceof Date) {
762
- this.disabledDatesList.min = new Date(disabledDatesData.min.toDateString());
763
- }
764
- else {
765
- delete this.disabledDatesList.min;
766
- }
767
- if (disabledDatesData.max && disabledDatesData.max instanceof Date) {
768
- this.disabledDatesList.max = new Date(disabledDatesData.max.toDateString());
769
- }
770
- else {
771
- delete this.disabledDatesList.max;
772
- }
773
- const value = this.inputElement.value;
774
- value && this.setDataFromText(value);
775
- }
776
- /**
777
- *
778
- * @param target
779
- * @param wheelTriggerElement
780
- * @param strip
781
- */
782
- createWheelChange(target, wheelTriggerElement, strip) {
783
- /**
784
- * [ Mouse Event: wheel ]
785
- */
786
- wheelTriggerElement.addEventListener('wheel', (event) => {
787
- const moveDown = event.deltaY > 0;
788
- const dragger = this[target + 'Dragger'];
789
- const draggerOffsetY = dragger.getOffset().top;
790
- const childIdx = this.getTargetChildByDragPosition({ y: draggerOffsetY }, strip);
791
- let nextChild = moveDown ? childIdx + 1 : childIdx - 1;
792
- // Array bounds check
793
- // #
794
- nextChild < 0
795
- ? (nextChild = 0) : typeof this[target][nextChild] === 'undefined'
796
- ? (nextChild = this[target].length - 1) : nextChild;
797
- if (this.type == "time" && !this.selectedDate) {
798
- this.setTime();
799
- }
800
- this.setDragSelection(target, this[target][nextChild], true, true);
801
- });
802
- }
803
- /**
804
- * @desc
805
- */
806
- createDragSelection(target, element, dragTriggerElement, strip, direction) {
807
- const dragger = target + 'Dragger';
808
- this[dragger] = new ElementDragger({
809
- target: element,
810
- trigger: dragTriggerElement,
811
- direction: direction,
812
- useTransform: true,
813
- limit: {
814
- y: {
815
- max: strip.offsetTop - (strip.offsetHeight / 2),
816
- min: (element.offsetHeight - (strip.offsetTop + strip.offsetHeight / 2)) * -1
817
- }
818
- }
819
- });
820
- /**
821
- * [ ElementDragger Event: end ]
822
- */
823
- this[dragger].on('end', (pos) => {
824
- const childIdx = this.getTargetChildByDragPosition(pos, strip);
825
- // Select target child when dragging
826
- // end
827
- this.selectTargetChildByDragIdx(childIdx, strip, this[dragger]);
828
- // Set target value
829
- // #
830
- this.setDragSelection(target, this[target][childIdx], false);
831
- });
832
- }
833
- /**
834
- * @desc Calculates which child in center of strip
835
- * for drag areas
836
- */
837
- getTargetChildByDragPosition({ y }, strip) {
838
- const stripHeight = strip.offsetHeight;
839
- const stripCenter = stripHeight / 2;
840
- const stripTriggerY = strip.offsetTop - (stripCenter);
841
- const childY = -(y - stripTriggerY - (stripCenter));
842
- return Math.floor(childY / stripHeight);
843
- }
844
- /**
845
- * @esc
846
- * @param target
847
- * @param childIdx
848
- */
849
- selectTargetChildByDragIdx(childIdx, strip, dragger, anim = true) {
850
- const y = ((strip.offsetHeight / 2) + strip.offsetTop) - ((childIdx + 1) * (strip.offsetHeight));
851
- dragger.setPosition({ y, anim });
852
- }
853
- /**
854
- * @desc
855
- * @param year
856
- */
857
- setDragSelection(target, value, scroll = true, anim = false) {
858
- // if (!value) return
859
- const childIdx = this[target].findIndex((itemValue) => itemValue === value);
860
- scroll && this.selectTargetChildByDragIdx(childIdx, this[target === 'years' ? target + 'StripElement' : 'timeStripElement'], this[target + 'Dragger'], anim);
861
- switch (target) {
862
- case 'years':
863
- this.date.setFullYear(value);
864
- break;
865
- case 'hours':
866
- this.date.setHours(value);
867
- break;
868
- case 'minutes':
869
- this.date.setMinutes(value);
870
- break;
871
- }
872
- this.renderDate = this.date;
873
- this.setData();
874
- if (this.selectedDate) {
875
- this.setValue();
876
- }
877
- }
878
- /**
879
- * @desc
880
- * @returns
881
- */
882
- getHours12() {
883
- const hours = (this.date.getHours() + 24) % 12 || 12;
884
- return hours > 12 ? hours - 12 : hours;
885
- }
886
- /**
887
- * @desc
888
- * @param date
889
- * @param excludeTime -
890
- */
891
- createDateObject(date, { excludeTime = false, exactMonthNumber = false } = {}) {
892
- const dateYear = date.getFullYear();
893
- const year = dateYear >= this.maxYear
894
- ? this.maxYear : dateYear <= this.minYear
895
- ? this.minYear : dateYear;
896
- return Object.assign(Object.assign({ year, day: date.getDate(), month: date.getMonth() + (exactMonthNumber ? 1 : 0), dayOfWeek: date.getDay(), monthFirstDay: new Date(new Date(date).setDate(1)).getDay() }, !excludeTime && { hour: date.getHours() }), !excludeTime && { minute: date.getMinutes() });
897
- }
898
- /**
899
- * @desc
900
- * @param max
901
- */
902
- generateDaysArrayFromMax(max) {
903
- return Array.from(Array(max + 1).keys()).slice(1);
904
- }
905
- /**
906
- * @desc
907
- * @param date
908
- */
909
- getMonthDayNumbers(date) {
910
- const totalDays = this.getDaysInMonth(date.getMonth(), date.getFullYear());
911
- return this.generateDaysArrayFromMax(totalDays);
912
- }
913
- /**
914
- * @desc
915
- * @param date
916
- * @param day
917
- */
918
- getTargetDayDate(date, day) {
919
- return new Date(new Date(date).setDate(day));
920
- }
921
- /**
922
- * @desc
923
- * @param date
924
- * @param day
925
- */
926
- getDayIsWeekend(date, day) {
927
- const dayOfWeek = new Date(new Date(date).setDate(day)).getDay();
928
- return (dayOfWeek === 6) || (dayOfWeek === 0);
929
- }
930
- /**
931
- * @desc
932
- * @param date
933
- */
934
- getClock(date) {
935
- date = date || new Date();
936
- const hours = date.getHours();
937
- const minutes = date.getMinutes();
938
- const seconds = date.getSeconds();
939
- const milis = date.getMilliseconds();
940
- return { hours, minutes, seconds, milis };
941
- }
942
- /**
943
- * @desc
944
- */
945
- setValue(reset) {
946
- var _a, _b, _c;
947
- const date = new Date(this.date.setHours(Number(this.currentDate.hour), Number(this.currentDate.minute)));
948
- if (reset) {
949
- this.value = null;
950
- return;
951
- }
952
- this.dataIsValid = true;
953
- if (this.type === Types.datetime) {
954
- const dateObject = Object.assign({}, this.currentDate);
955
- dateObject.month += 1;
956
- if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.value) != this.valueText) {
957
- this.value = {
958
- isValid: this.dataIsValid,
959
- date: date,
960
- timestamp: date.getTime(),
961
- dateObject,
962
- value: this.valueText
963
- };
964
- }
965
- }
966
- if (this.type === Types.date) {
967
- const dateObject = Object.assign({}, this.currentDate);
968
- delete dateObject.hour;
969
- delete dateObject.minute;
970
- dateObject.month += 1;
971
- if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.value) != this.valueText) {
972
- this.value = {
973
- isValid: this.dataIsValid,
974
- date,
975
- timestamp: date.getTime(),
976
- dateObject,
977
- value: this.valueText
978
- };
979
- }
980
- }
981
- if (this.type === Types.time) {
982
- const getTimeText = this.getTimeText();
983
- const dateObject = Object.assign({}, this.currentDate);
984
- dateObject.month += 1;
985
- this.value = {
986
- isValid: this.dataIsValid,
987
- date: date,
988
- timestamp: date.getTime(),
989
- time: getTimeText,
990
- dateObject,
991
- timeObject: {
992
- hours: this.currentDate.hour,
993
- minutes: this.currentDate.minute
994
- },
995
- value: getTimeText
996
- };
997
- this.inputElement.value = getTimeText;
998
- }
999
- if (this.type === Types.range) {
1000
- if (((_c = this.value) === null || _c === void 0 ? void 0 : _c.value) != this.valueText) {
1001
- this.value = {
1002
- isValid: this.dataIsValid,
1003
- dateObject: {
1004
- start: Object.assign({}, this.selectedDate && {
1005
- date: this.selectedDate,
1006
- timestamp: this.selectedDate.getTime(),
1007
- detail: this.createDateObject(this.selectedDate, {
1008
- excludeTime: true,
1009
- exactMonthNumber: true
1010
- })
1011
- }),
1012
- end: Object.assign({}, this.selectedEndDate && {
1013
- date: this.selectedEndDate,
1014
- timestamp: this.selectedEndDate.getTime(),
1015
- detail: this.createDateObject(this.selectedEndDate, {
1016
- excludeTime: true,
1017
- exactMonthNumber: true
1018
- })
1019
- })
1020
- },
1021
- value: this.valueText
1022
- };
1023
- }
1024
- }
1025
- }
1026
- /**
1027
- * @desc
1028
- * @param month
1029
- */
1030
- setMonth(month) {
1031
- this.renderDate.setDate(1);
1032
- this.renderDate = new Date(this.renderDate.setMonth(month));
1033
- this.setDragSelection('years', this.currentDate.year);
1034
- }
1035
- /**
1036
- * @desc
1037
- * @param popupClosing -
1038
- */
1039
- checkRangeValidation({ popupClosing = false } = {}) {
1040
- if (this.type !== Types.range)
1041
- return true;
1042
- const errorText = 'date range invalid';
1043
- if (popupClosing && (!this.selectedDate || this.selectedDate && !this.selectedEndDate)) {
1044
- this.setError(true, errorText);
1045
- return false;
1046
- }
1047
- if (!popupClosing) {
1048
- this.setError(false);
1049
- return true;
1050
- }
1051
- return true;
1052
- }
1053
- /**
1054
- * @desc
1055
- * @param value
1056
- * @param max
1057
- * @returns
1058
- */
1059
- pad(value, max) {
1060
- return value < max ? '0' : '';
1061
- }
1062
- /**
1063
- * @desc
1064
- * @returns
1065
- */
1066
- isInputClearable() {
1067
- if (this.inputElement && this.inputElement.value) {
1068
- return true;
1069
- }
1070
- return false;
1071
- }
1072
- /**
1073
- * @desc
1074
- * @param date
1075
- */
1076
- isDisabledDate(date) {
1077
- if (!!this.disabledDatesList.dates.map(d => this.isSameDate(d, date)).filter(d => d).length)
1078
- return true;
1079
- if (this.disabledDatesList.min) {
1080
- const minDate = new Date(this.disabledDatesList.min);
1081
- if (minDate && minDate.getTime() > date.getTime())
1082
- return true;
1083
- }
1084
- if (this.disabledDatesList.max) {
1085
- const maxDate = new Date(this.disabledDatesList.max);
1086
- if (maxDate && new Date(maxDate.setDate(maxDate.getDate() + 1)).getTime() < date.getTime())
1087
- return true;
1088
- }
1089
- }
1090
- /**
1091
- * @desc
1092
- * @param date
1093
- */
1094
- setDate(date, isUserSelect, notClosePicker = false) {
1095
- const isRange = this.type === Types.range;
1096
- const isEndSelect = !!this.selectedEndDate;
1097
- // Check disabled date
1098
- // #
1099
- if ((this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(date)) {
1100
- return;
1101
- }
1102
- this.emptyState = false;
1103
- if (!isRange || (isRange && !isEndSelect)) {
1104
- this.date = new Date(date.setHours(this.currentDate.hour, this.currentDate.minute));
1105
- }
1106
- isRange && this.checkRangeValidation();
1107
- if (isRange && this.selectedDate && this.selectedEndDate) {
1108
- this.selectedDate = null;
1109
- this.selectedEndDate = null;
1110
- }
1111
- if (isUserSelect) {
1112
- const newDate = new Date(date);
1113
- !isRange
1114
- ? this.selectedDate = newDate
1115
- : !this.selectedDate
1116
- ? this.selectedDate = newDate
1117
- : this.selectedDate.getTime() > newDate.getTime()
1118
- ? (this.selectedEndDate = this.selectedDate) && (this.selectedDate = newDate)
1119
- : this.selectedEndDate = newDate;
1120
- !isRange && (this._open = notClosePicker);
1121
- this.renderDate = this.date;
1122
- this.valueText = this.getValueText();
1123
- this.setValue();
1124
- const splitText = this.valueText.split('/');
1125
- const newValue = this.valueText ? this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2])) : '';
1126
- this.inputElement.value = newValue;
1127
- }
1128
- }
1129
- setDataFromText(text, updateData = false, openPicker = true) {
1130
- let update = false;
1131
- let errorState = '';
1132
- const parsed = this.parse(text);
1133
- if ((this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(parsed.date)) {
1134
- parsed.dateIsValid = false;
1135
- errorState = 'disabled-date';
1136
- }
1137
- // Check mode datetime
1138
- // #
1139
- if (this.type === Types.datetime && parsed.dateIsValid && parsed.timeIsValid) {
1140
- updateData && this.setDate(parsed.date, true, openPicker);
1141
- updateData && this.setTime(parsed.timeSections[0], parsed.timeSections[1]);
1142
- update = true;
1143
- }
1144
- // Check mode date
1145
- // #
1146
- if (this.type === Types.date && parsed.dateIsValid) {
1147
- updateData && this.setDate(parsed.date, true, openPicker);
1148
- update = true;
1149
- }
1150
- // Check mode time
1151
- // #
1152
- if (this.type === Types.time && parsed.timeIsValid) {
1153
- updateData && this.setTime(parsed.timeSections[0], parsed.timeSections[1]);
1154
- update = true;
1155
- }
1156
- // Check mode range
1157
- // #
1158
- if (this.type === Types.range) {
1159
- if (parsed.dateIsValid && !this.selectedDate) {
1160
- updateData && this.setDate(parsed.date, true, openPicker);
1161
- update = true;
1162
- }
1163
- if (parsed.date2IsValid && !this.selectedEndDate) {
1164
- updateData && this.setDate(parsed.date2, true, openPicker);
1165
- update = true;
1166
- }
1167
- if (this.selectedDate && this.selectedEndDate && parsed.rangeIsValid) {
1168
- if (this.isSameDate(parsed.date2, this.selectedEndDate) && !this.isSameDate(parsed.date, this.selectedDate)) {
1169
- this.selectedDate = null;
1170
- updateData && this.setDate(parsed.date, true, openPicker);
1171
- update = true;
1172
- }
1173
- if (this.isSameDate(parsed.date, this.selectedDate) && !this.isSameDate(parsed.date2, this.selectedEndDate)) {
1174
- this.selectedEndDate = null;
1175
- updateData && this.setDate(parsed.date2, true, openPicker);
1176
- update = true;
1177
- }
1178
- }
1179
- if (this.selectedDate && this.selectedEndDate && !parsed.rangeIsValid && updateData) {
1180
- this.selectedDate = null;
1181
- this.selectedEndDate = null;
1182
- }
1183
- }
1184
- // Fix: render warning
1185
- if (update) {
1186
- if (updateData) {
1187
- this.renderDate = this.date;
1188
- }
1189
- this.setError(false);
1190
- }
1191
- else {
1192
- if (this.type === Types.range && this.selectedDate && this.selectedEndDate && parsed.rangeIsValid) {
1193
- this.setError(false);
1194
- }
1195
- else {
1196
- if (errorState) {
1197
- this.setError(true, (errorState === 'disabled-date' && 'selected date is not allowed'));
1198
- }
1199
- else {
1200
- if (text) {
1201
- this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
1202
- (this.type === Types.range && 'invalid date range') ||
1203
- (this.type === Types.date && 'invalid date') ||
1204
- (this.type === Types.time && 'invalid time'));
1205
- }
1206
- this.setValue(true);
1207
- }
1208
- }
1209
- const splitText = text.split('/');
1210
- const newValue = text && !this.error ? this.changeFormat(new Date(splitText[1] + "/" + splitText[0] + "/" + splitText[2])) : '';
1211
- this.inputElement.value = newValue;
1212
- }
1213
- }
1214
- /**
1215
- * @desc
1216
- */
1217
- setDateToday() {
1218
- const date = new Date();
1219
- if (this.type === Types.range) {
1220
- this.selectedDate = null;
1221
- this.selectedEndDate = null;
1222
- }
1223
- this.setDate(date, true, false);
1224
- }
1225
- HourContentDblClick(e) {
1226
- const getPath = Generate.findEventPathWithNodeName(e, 'SPAN');
1227
- if (getPath && getPath.classList.contains('selected')) {
1228
- this.setValue();
1229
- this._open = false;
1230
- }
1231
- }
1232
- /**
1233
- * @desc
1234
- */
1235
- setTime(hours, minutes) {
1236
- this.renderDate = new Date(this.date.setHours(Number(hours || this.getClock().hours), Number(minutes || this.getClock().minutes)));
1237
- if (this.type === Types.time) {
1238
- this.selectedDate = this.date;
1239
- }
1240
- const hour = this.currentDate.hour || new Date().getHours();
1241
- const minute = this.currentDate.minute || new Date().getMinutes();
1242
- this.setDragSelection('hours', hour, true, true);
1243
- this.setDragSelection('minutes', minute, true, true);
1244
- }
1245
- /**
1246
- * @desc
1247
- * @param state
1248
- * @param error
1249
- */
1250
- setError(state = false, error = '') {
1251
- this.error = state;
1252
- this.errorText = !state ? '' : error;
1253
- }
1254
- /**
1255
- * @desc
1256
- */
1257
- getError() {
1258
- const { error, errorText } = this;
1259
- return { valid: !error, error, errorText };
1260
- }
1261
- /**
1262
- * @desc
1263
- * @param month
1264
- * @param year
1265
- */
1266
- getDaysInMonth(month, year) {
1267
- return new Date(year, month + 1, 0).getDate();
1268
- }
1269
- /**
1270
- * @desc
1271
- * @param date
1272
- * @param day
1273
- * @returns
1274
- */
1275
- getIsCurrentDate(date, day) {
1276
- const today = new Date();
1277
- return today.getDate() === day
1278
- && today.getMonth() === date.getMonth()
1279
- && today.getFullYear() === date.getFullYear();
1280
- }
1281
- /**
1282
- * @desc
1283
- * @param date1
1284
- * @param date2
1285
- */
1286
- isSameDate(date1, date2) {
1287
- return (date1.getFullYear() === date2.getFullYear() &&
1288
- date1.getMonth() === date2.getMonth() &&
1289
- date1.getDate() === date2.getDate());
1290
- }
1291
- /**
1292
- * @desc
1293
- * @param date
1294
- * @returns
1295
- */
1296
- getSelected(date, endDate = false) {
1297
- const selectPart = endDate ? 'EndDate' : 'Date';
1298
- const targetDate = new Date(this['selected' + selectPart]);
1299
- const year = targetDate.getFullYear();
1300
- const month = targetDate.getMonth();
1301
- const day = targetDate.getDate();
1302
- const isSelected = date.getDate() === day
1303
- && date.getMonth() === month
1304
- && date.getFullYear() === year;
1305
- return isSelected;
1306
- }
1307
- /**
1308
- * @desc
1309
- * @param date
1310
- */
1311
- getDateIsInRange(date) {
1312
- if (this.type !== Types.range || (!this.selectedDate || !this.selectedEndDate))
1313
- return;
1314
- const current = date.getTime();
1315
- const start = this.selectedDate.getTime();
1316
- const end = this.selectedEndDate.getTime();
1317
- return current > start && current < end;
1318
- }
1319
- /**
1320
- * @desc
1321
- */
1322
- getMonthText() {
1323
- return Object.values(Months)[this.renderDate.getMonth()];
1324
- }
1325
- /**
1326
- * @desc
1327
- */
1328
- getCurrentDateText() {
1329
- const dayText = Object.values(Days)[this.currentDate.dayOfWeek];
1330
- const monthText = Object.values(Months)[this.currentDate.month];
1331
- const text = `${dayText}, ${this.currentDate.day}th ${monthText} ${this.currentDate.year}`;
1332
- return text;
1333
- }
1334
- /**
1335
- * @desc
1336
- * @returns
1337
- */
1338
- getTimeText() {
1339
- const { hour, minute } = this.currentDate;
1340
- return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`;
1341
- }
1342
- /**
1343
- *
1344
- */
1345
- getValueText() {
1346
- if (!this.selectedDate)
1347
- return '';
1348
- const selectedDate = this.selectedDate;
1349
- const year = selectedDate.getFullYear();
1350
- const day = selectedDate.getDate();
1351
- const baseMonth = selectedDate.getMonth();
1352
- const month = baseMonth + 1;
1353
- let text = '';
1354
- if (this.type === Types.date || this.type === Types.datetime) {
1355
- text = `${day < 10 ? '0' + day : day}/${month < 10 ? '0' + month : month}/${year}`;
1356
- }
1357
- if (this.type === Types.time) {
1358
- text = this.getTimeText();
1359
- }
1360
- if (this.type === Types.datetime) {
1361
- text = `${text} ${this.getTimeText()}`;
1362
- }
1363
- if (this.type === Types.range) {
1364
- text = `${day < 10 ? '0' + day : day}/${month < 10 ? '0' + month : month}/${year}`;
1365
- }
1366
- if (this.type === Types.range && this.selectedEndDate) {
1367
- const endDate = this.selectedEndDate;
1368
- const endYear = endDate.getFullYear();
1369
- const endDay = endDate.getDate();
1370
- const endBaseMonth = endDate.getMonth();
1371
- const endMonth = endBaseMonth + 1;
1372
- text += `-${endDay < 10 ? '0' + endDay : endDay}/${endMonth < 10 ? '0' + endMonth : endMonth}/${endYear}`;
1373
- }
1374
- this.setDataFromText(text);
1375
- return text;
1376
- }
1377
- /**
1378
- * @desc
1379
- * @param dateStr
1380
- */
1381
- parse(dateStr) {
1382
- const sections = dateStr.split(this.type === Types.range ? '-' : ' ');
1383
- // const sections: Array<string> = dateStr.split("-")
1384
- const sectionDate = this.switchDDMM(sections[0]);
1385
- const sectionDate2 = this.switchDDMM(sections[1]);
1386
- const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
1387
- const date = new Date(sectionDate);
1388
- const date2 = new Date(sectionDate2);
1389
- const dateCheck = date.toString().toLowerCase() !== 'invalid date';
1390
- const dateCheck2 = date2.toString().toLowerCase() !== 'invalid date';
1391
- const regDate = /^((0?[1-9]|1[0-2])(-|\/)(0?[1-9]|[12]\d|3[01])(-|\/)[12]\d{3})$/;
1392
- const regDateCheck = regDate.test(sectionDate);
1393
- const regDateCheck2 = regDate.test(sectionDate2);
1394
- const regTime = /\b([01][0-9]|2[0-3]):([0-5][0-9])\b/;
1395
- const regTimeCheck = regTime.test(sectionTime);
1396
- const dateIsValid = dateCheck && regDateCheck;
1397
- const date2IsValid = dateCheck2 && regDateCheck2;
1398
- const timeSections = regTimeCheck ? sectionTime.split(':') : '';
1399
- return {
1400
- date,
1401
- date2,
1402
- timeSections,
1403
- dateIsValid,
1404
- date2IsValid,
1405
- rangeIsValid: dateIsValid && date2IsValid,
1406
- timeIsValid: regTimeCheck
1407
- };
1408
- }
1409
- /**
1410
- * @desc
1411
- */
1412
- getPrevMonth() {
1413
- this.setMonth(this.renderDate.getMonth() - 1);
1414
- }
1415
- /**
1416
- * @desc
1417
- */
1418
- getNextMonth() {
1419
- this.setMonth(this.renderDate.getMonth() + 1);
1420
- }
1421
- /**
1422
- * @desc
1423
- * @param idx
1424
- */
1425
- yearClick(idx) {
1426
- if (this.yearsDragger.busy)
1427
- return;
1428
- this.setDragSelection('years', this.years[idx], true, true);
1429
- }
1430
- /**
1431
- * @desc
1432
- * @param idx
1433
- */
1434
- hourClick(idx) {
1435
- if (this.hoursDragger.busy)
1436
- return;
1437
- if (!this.selectedDate) {
1438
- this.setTime();
1439
- }
1440
- this.setDragSelection('hours', this.hours[idx], true, true);
1441
- }
1442
- /**
1443
- * @desc
1444
- * @param idx
1445
- */
1446
- minuteClick(idx) {
1447
- if (this.minutesDragger.busy)
1448
- return;
1449
- if (!this.selectedDate) {
1450
- this.setTime();
1451
- }
1452
- this.setDragSelection('minutes', this.minutes[idx], true, true);
1453
- }
1454
- /**
1455
- * @desc
1456
- */
1457
- openPicker() {
1458
- if (this.disabled)
1459
- return;
1460
- !this._open && (this._open = true);
1461
- }
1462
- /**
1463
- * @desc
1464
- * @param date
1465
- */
1466
- handleDayNumber(date) {
1467
- if (this.type === Types.range
1468
- && this.selectedDate
1469
- && !this.selectedEndDate
1470
- && this.isSameDate(this.selectedDate, date))
1471
- return;
1472
- this.setDate(date, true);
1473
- }
1474
- /**
1475
- * @desc
1476
- * @param value
1477
- */
1478
- handleInputInput(value) {
1479
- this.setDataFromText(value, true);
1480
- }
1481
- /**
1482
- * @desc
1483
- * @param event -
1484
- */
1485
- handleInputChange(event) {
1486
- this.setDataFromText(this.inputElement.value, true, false);
1487
- event.stopPropagation();
1488
- }
1489
- /**
1490
- * @desc
1491
- */
1492
- async handleInputClear() {
1493
- this.selectedDate = null;
1494
- this.selectedEndDate = null;
1495
- this.emptyState = true;
1496
- this.renderDate = new Date();
1497
- this._open = false;
1498
- this.setValue(true);
1499
- this.setError();
1500
- this.getValueText();
1501
- await this.inputElement.setClear();
1502
- await delay(10);
1503
- return Promise.resolve();
1504
- }
1505
- /**
1506
- * @desc
1507
- * @param event
1508
- */
1509
- handleWheel(event) {
1510
- event.preventDefault();
1511
- }
1512
- /**
1513
- * @desc
1514
- * @param event
1515
- */
1516
- handleWindowClick(event) {
1517
- if (this._open) {
1518
- const list = document.getElementById(`picker-vp-${this._id}`);
1519
- const isClickInside = Generate.findEventPath(event, this.el);
1520
- const isClickList = list ? (Generate.findEventPath(event, list)) : false;
1521
- if (!isClickInside && !isClickList) {
1522
- this._open = false;
1523
- }
1524
- }
1525
- }
1526
- openToggle() {
1527
- if (this.disabled)
1528
- return;
1529
- this._open = !this._open;
1530
- }
1531
- /**
1532
- * @desc
1533
- */
1534
- async open() {
1535
- await delay(50);
1536
- this.openToggle();
1537
- }
1538
- /**
1539
- * @desc
1540
- */
1541
- async close() {
1542
- this._open = false;
1543
- }
1544
- /**
1545
- * @desc
1546
- */
1547
- async getValue() {
1548
- return this.value;
1549
- }
1550
- /**
1551
- * @param
1552
- * @param disabled
1553
- */
1554
- async setDisabled(disabled) {
1555
- this.disabled = disabled;
1556
- }
1557
- changeFormat(date, reverseDay = false) {
1558
- if (!date)
1559
- return;
1560
- const pad = (n) => n < 10 ? `0${n}` : n;
1561
- const day = pad(new Date(date).getDate());
1562
- const month = pad(new Date(date).getMonth() + 1);
1563
- const year = new Date(date).getFullYear();
1564
- const hours = pad(new Date(date).getHours());
1565
- const minutes = pad(new Date(date).getMinutes());
1566
- if (this.type == "range" || this.type == "date") {
1567
- return reverseDay ? `${month}/${day}/${year}` : `${day}/${month}/${year}`;
1568
- }
1569
- return reverseDay ? `${month}/${day}/${year} ${hours}:${minutes}` : `${day}/${month}/${year} ${hours}:${minutes}`;
1570
- }
1571
- isTime(value) {
1572
- return /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(value);
1573
- }
1574
- getHHMM(date) {
1575
- if (!date)
1576
- return;
1577
- const pad = (n) => n < 10 ? `0${n}` : n;
1578
- const hours = pad(new Date(date).getHours());
1579
- const minutes = pad(new Date(date).getMinutes());
1580
- return `${hours}:${minutes}`;
1581
- }
1582
- /**
1583
- * @desc
1584
- * @param dateOrTime
1585
- */
1586
- async set(dateOrTime) {
1587
- if (dateOrTime) {
1588
- if (typeof dateOrTime === "number") {
1589
- dateOrTime = new Date(dateOrTime);
1590
- }
1591
- if (this.type == "time") {
1592
- let time = dateOrTime;
1593
- if (!this.isTime(dateOrTime)) {
1594
- time = this.getHHMM(dateOrTime);
1595
- }
1596
- this.setDataFromText(time, true, false);
1597
- }
1598
- else {
1599
- const split = dateOrTime.toString().split('-');
1600
- const parseDate0 = Date.parse(split[0]);
1601
- if (split[0] && !isNaN(parseDate0)) {
1602
- var date = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[0]).getTime()));
1603
- if (split[1] && !isNaN(Date.parse(split[1]))) {
1604
- var date2 = this.changeFormat(DateTimeHelper.convertTimeStampToDate(new Date(split[1]).getTime()));
1605
- date = date + "-" + date2;
1606
- }
1607
- this.setDataFromText(date, true, false);
1608
- }
1609
- else {
1610
- this.setDataFromText('', true, false);
1611
- }
1612
- }
1613
- }
1614
- else {
1615
- this.setClear();
1616
- }
1617
- }
1618
- async get() {
1619
- var _a;
1620
- return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
1621
- }
1622
- async setClear() {
1623
- await this.handleInputClear();
1624
- return Promise.resolve();
1625
- }
1626
- /**
1627
- * @desc
1628
- */
1629
- async getInput() {
1630
- return this.inputElement;
1631
- }
1632
- /**
1633
- * @desc
1634
- * @returns
1635
- */
1636
- async isValid() {
1637
- return this.getError();
1638
- }
1639
- async resetCaption() {
1640
- await delay(10);
1641
- await this.inputElement.resetCaption();
1642
- this.captionType = 'default';
1643
- this.captionError = null;
1644
- await delay(10);
1645
- return Promise.resolve();
1646
- }
1647
- addZeroBefore(n) {
1648
- return (n < 10 ? '0' : '') + n;
1649
- }
1650
- formatDate(date, format) {
1651
- const map = {
1652
- mm: this.addZeroBefore(date.getMonth() + 1),
1653
- dd: this.addZeroBefore(date.getDate()),
1654
- yyyy: this.addZeroBefore(date.getFullYear()),
1655
- hh: this.addZeroBefore(date.getHours()),
1656
- mi: this.addZeroBefore(date.getMinutes()),
1657
- };
1658
- return format.replace(/mm|dd|yyyy|hh|mi/gi, matched => map[matched]);
1659
- }
1660
- handleResize() {
1661
- this.calculateLocation();
1662
- }
1663
- handleWheels(event) {
1664
- if (this._open) {
1665
- const list = document.querySelector(`#picker-vp-${this._id}`);
1666
- const isClickInside = list && Generate.findEventPath(event, list);
1667
- if (isClickInside) {
1668
- this.calculateLocation();
1669
- }
1670
- else {
1671
- this._open = false;
1672
- }
1673
- }
1674
- }
1675
- componentDidLoad() {
1676
- const picker = this.el.shadowRoot.querySelector(`#picker-vp-${this._id}`);
1677
- //move to body
1678
- if (picker) {
1679
- document.body.appendChild(picker);
1680
- this.calculateLocation();
1681
- }
1682
- }
1683
- disconnectedCallback() {
1684
- this.el.innerHTML = '';
1685
- const pickerBox = document.getElementById(`picker-vp-${this._id}`);
1686
- if (pickerBox) {
1687
- pickerBox.remove();
1688
- }
1689
- }
1690
- async calculateLocation() {
1691
- const pickerBox = document.getElementById(`picker-vp-${this._id}`);
1692
- const placementArray = this.placement.split('-');
1693
- if (this.alignment) {
1694
- this.placement = placementArray[0] + (this.alignment == "right" ? "-end" : "-start");
1695
- }
1696
- var placement = this.placement;
1697
- const targetElementId = this.linkedComponent ? this.linkedComponent : this._id;
1698
- const target = document.getElementById(targetElementId);
1699
- if (target) {
1700
- const targetElement = this.linkedComponent ? target : target.shadowRoot.querySelector(`#picker-input-${this._id}`) || target.shadowRoot.querySelector("bcm-datetime-picker").shadowRoot.querySelector(`#picker-input-${this._id}`);
1701
- if (pickerBox && targetElement) {
1702
- getPlacement(pickerBox, targetElement, placement, (place) => (placement = place));
1703
- await delay(10);
1704
- let pos = setPosition(placement, targetElement);
1705
- let captionAreaHeight = this.noCaption ? 0 : 20;
1706
- let labelAreaHeight = 0;
1707
- // if (this.fullWidth) {
1708
- // pickerBox.style.width = targetElement.offsetWidth + 'px';
1709
- // }
1710
- getPlacement(pickerBox, targetElement, placement, (place) => (placement = place));
1711
- await delay(10);
1712
- pos = setPosition(placement, targetElement);
1713
- if (this.linkedComponent) {
1714
- pickerBox.style.top = (placement.split('-')[0] == 'top' ? pos[0] - pickerBox.offsetHeight : pos[0]) + 'px';
1715
- }
1716
- else {
1717
- pickerBox.style.top = (placement.split('-')[0] == 'top' ? pos[0] - pickerBox.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
1718
- }
1719
- switch (placement.split('-')[1]) {
1720
- case "start":
1721
- pickerBox.style.left = pos[1] + 'px';
1722
- break;
1723
- case "center":
1724
- pickerBox.style.left = pos[1] - pickerBox.offsetWidth / 2 + 'px';
1725
- break;
1726
- case "end":
1727
- pickerBox.style.left = pos[1] - pickerBox.offsetWidth + 'px';
1728
- break;
1729
- }
1730
- pickerBox.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
1731
- }
1732
- }
1733
- }
1734
- handleKeyDown(ev) {
1735
- const keycode = ev.keyCode || ev.which;
1736
- if (keycode === Bcm.KeyCode.escape) {
1737
- if (this._open) {
1738
- this._open = false;
1739
- ev.preventDefault();
1740
- ev.stopPropagation();
1741
- ev.stopImmediatePropagation();
1742
- this.markForCheck();
1743
- }
1744
- }
1745
- }
1746
- render() {
1747
- const dayNumbersClasses = classnames('day-numbers');
1748
- const datetimePickerClasses = classnames('datetime-picker', 'datetime-picker-wrapper', {
1749
- 'open': this._open,
1750
- 'no-caption': this.noCaption,
1751
- });
1752
- const hostClasses = classnames(this.hidden ? 'hidden' : null, {
1753
- 'full-width': this.fullWidth,
1754
- 'linked-component': this.linkedComponent,
1755
- });
1756
- const toggleClasses = classnames('toggle', {
1757
- disabled: this.disabled
1758
- });
1759
- const clockIcon = `<svg style="fill: #595959; width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>`;
1760
- const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
1761
- const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
1762
- return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: true, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
1763
- // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
1764
- noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("bcm-tooltip", { placement: "top", message: this.errorText, trigger: "hover" }, h("bcm-icon", {
1765
- // slot="suffix"
1766
- // title={this.errorText}
1767
- icon: "far fa-exclamation-circle"
1768
- })))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
1769
- 'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
1770
- 'not-this-month': !day.thisMonth,
1771
- 'is-weekend': day.isWeekend,
1772
- 'today': day.today,
1773
- 'selected': this.getSelected(day.date),
1774
- 'selected-start': this.getSelected(day.date) && this.selectedEndDate && this.type === Types.range,
1775
- 'selected-end': this.getSelected(day.date, true) && this.type === Types.range,
1776
- 'range': this.getDateIsInRange(day.date) && this.type === Types.range
1777
- }, onClick: () => this.handleDayNumber(day.date) }, h("span", { class: "number" }, day.day))))))))), this.hasTimeModule && (h("div", { class: "time-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("div", { class: "month-year" }, h("span", { class: "month" }, this.getTimeText())), h("span", { class: "now", onClick: () => { this.setTime(), this.type == "time" && (this._open = false); } }, "Now")), h("div", { class: "bcm-datetime-picker__content", onDblClick: (e) => { this.HourContentDblClick(e); } }, h("div", { class: "hours", ref: el => (this.hoursWrapperElement = el) }, h("div", { class: "items", ref: el => (this.hoursElement = el) }, this.hours.map((hour, idx) => h("span", { class: this.currentDate.hour === hour ? 'selected' : '', onClick: () => this.hourClick(idx) }, (hour < 10 && '0') + hour)))), h("div", { class: "minutes", ref: el => (this.minutesWrapperElement = el) }, h("div", { class: "items", ref: el => (this.minutesElement = el) }, this.minutes.map((minute, idx) => h("span", { class: this.currentDate.minute === minute ? 'selected' : '', onClick: () => this.minuteClick(idx) }, (minute < 10 && '0') + minute)))), h("div", { class: "select-strip", ref: el => (this.timeStripElement = el) }))))))));
1778
- }
1779
- get el() { return getElement(this); }
1780
- static get watchers() { return {
1781
- "_open": ["openChanged", "openChange"],
1782
- "renderDate": ["renderDateChange"],
1783
- "value": ["valueChange"],
1784
- "disabledDates": ["disabledDatesChange"]
1785
- }; }
1786
- };
1787
- __decorate$5([
1788
- IsLoad()
1789
- ], BcmDatetimePicker.prototype, "el", void 0);
1790
- BcmDatetimePicker.style = datetimePickerCss;
1791
-
1792
- 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}";
1793
-
1794
- var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1795
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
1796
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
1797
- r = Reflect.decorate(decorators, target, key, desc);
1798
- else
1799
- for (var i = decorators.length - 1; i >= 0; i--)
1800
- if (d = decorators[i])
1801
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
1802
- return c > 3 && r && Object.defineProperty(target, key, r), r;
1803
- };
1804
- const BcmIcon = class {
1805
- constructor(hostRef) {
1806
- registerInstance(this, hostRef);
1807
- this.hidden = false;
1808
- }
1809
- render() {
1810
- const { icon, hidden } = this;
1811
- return (h(Host, { class: `bcm-icon fa ${hidden ? 'hidden' : ''}` }, h("i", { class: `${icon}` })));
1812
- }
1813
- get el() { return getElement(this); }
1814
- };
1815
- __decorate$4([
1816
- IsLoad()
1817
- ], BcmIcon.prototype, "el", void 0);
1818
- BcmIcon.style = iconCss;
1819
-
1820
- 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{--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)}";
1821
-
1822
- var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1823
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
1824
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
1825
- r = Reflect.decorate(decorators, target, key, desc);
1826
- else
1827
- for (var i = decorators.length - 1; i >= 0; i--)
1828
- if (d = decorators[i])
1829
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
1830
- return c > 3 && r && Object.defineProperty(target, key, r), r;
1831
- };
1832
- const BcmLabel = class {
1833
- constructor(hostRef) {
1834
- registerInstance(this, hostRef);
1835
- /** Props **/
1836
- this._id = Generate.UID();
1837
- this.required = false;
1838
- this.size = "medium";
1839
- this.hidden = false;
1840
- this.type = Bcm.Status.default;
1841
- }
1842
- render() {
1843
- const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
1844
- const hostClasses = classnames('bcm-label', { hidden });
1845
- const Label = (h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
1846
- return (h(Host, { class: hostClasses }, Label, tooltip && (h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, h("bcm-icon", { icon: "far fa-question-circle" })))));
1847
- }
1848
- get el() { return getElement(this); }
1849
- };
1850
- __decorate$3([
1851
- IsLoad()
1852
- ], BcmLabel.prototype, "el", void 0);
1853
- BcmLabel.style = labelCss;
1854
-
1855
- const modalCss = "@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{--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-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-sky-50);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-new-ds-color-blue-400);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
1856
-
1857
- var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1858
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
1859
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
1860
- r = Reflect.decorate(decorators, target, key, desc);
1861
- else
1862
- for (var i = decorators.length - 1; i >= 0; i--)
1863
- if (d = decorators[i])
1864
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
1865
- return c > 3 && r && Object.defineProperty(target, key, r), r;
1866
- };
1867
- const BcmModal = class {
1868
- constructor(hostRef) {
1869
- registerInstance(this, hostRef);
1870
- this.beforeOpen = createEvent(this, "beforeOpen", 7);
1871
- this.beforeClose = createEvent(this, "beforeClose", 7);
1872
- this.close = createEvent(this, "bcm-close", 7);
1873
- this.modalSlots = {};
1874
- this._id = Generate.UID();
1875
- this.isShow = false;
1876
- this.hidden = false;
1877
- this.size = Bcm.Size.medium;
1878
- this.backdrop = true;
1879
- this.fullWidth = false;
1880
- }
1881
- connectedCallback() {
1882
- const bcmSlots = this.el.querySelectorAll('bcm-modal-header, bcm-modal-footer');
1883
- if (bcmSlots) {
1884
- bcmSlots.forEach(el => {
1885
- let slotName = StringHelper.lowercase(StringHelper.split(el.nodeName, '-').pop());
1886
- el.slot = slotName;
1887
- el.classList.add(`bcm-modal__container-${slotName}-content`);
1888
- this.modalSlots[slotName] = el;
1889
- });
1890
- }
1891
- const disableScrollClass = `bcm-modal--disable-scroll-${this._id}`;
1892
- const styleId = `bcm-modal-style-${this._id}`;
1893
- let style = document.getElementById(styleId);
1894
- if (!style) {
1895
- style = document.createElement('style');
1896
- style.id = styleId;
1897
- style.innerHTML = `.${disableScrollClass} { overflow: hidden; }`;
1898
- document.head.appendChild(style);
1899
- }
1900
- }
1901
- componentWillLoad() {
1902
- // document.body.appendChild(this.el);
1903
- }
1904
- handleSubmit(e) {
1905
- const button = Generate.findEventPathWithNodeName(e, StringHelper.uppercase('bcm-button'));
1906
- if (button && button.dataDismiss) {
1907
- this.hide();
1908
- }
1909
- }
1910
- handleBackdrop() {
1911
- if (this.backdrop == true) {
1912
- this.hide();
1913
- }
1914
- }
1915
- async hide() {
1916
- this.beforeClose.emit(this.el);
1917
- this.isShow = false;
1918
- this.close.emit(this);
1919
- }
1920
- async show() {
1921
- this.beforeOpen.emit(this.el);
1922
- this.isShow = true;
1923
- }
1924
- keyboardNavigation(e) {
1925
- if (this.backdrop == true) {
1926
- const keyCode = e.keyCode || 0;
1927
- if (keyCode == Bcm.KeyCode.escape) {
1928
- e.preventDefault();
1929
- this.hide();
1930
- }
1931
- }
1932
- }
1933
- _openHandler() {
1934
- const disableScrollClass = `bcm-modal--disable-scroll-${this._id}`;
1935
- if (this.isShow) {
1936
- document.body.classList.add(disableScrollClass);
1937
- }
1938
- else {
1939
- document.body.classList.remove(disableScrollClass);
1940
- }
1941
- }
1942
- disconnectedCallback() {
1943
- const disableScrollClass = `bcm-modal--disable-scroll-${this._id}`;
1944
- document.body.classList.remove(disableScrollClass);
1945
- }
1946
- render() {
1947
- const { isShow, size, fullWidth, hidden, width, height } = this;
1948
- const bcmModalContainer = classnames('bcm-modal__container', size, {
1949
- 'custom-size': width || height,
1950
- 'full-width': fullWidth,
1951
- 'bcm-modal__show': isShow,
1952
- });
1953
- const bcmModalHostClasses = classnames('bcm-modal', {
1954
- hidden,
1955
- 'bcm-modal__show': isShow,
1956
- });
1957
- const mainClasses = classnames('bcm-modal__container-main', 'size-2');
1958
- const FooterTemplate = () => {
1959
- return (this.modalSlots['footer'] && (h("footer", { class: "bcm-modal__container-footer" }, h("slot", { name: "footer" }))));
1960
- };
1961
- const HeaderTemplate = () => {
1962
- return (this.modalSlots['header'] && (h("header", { class: "bcm-modal__container-header" }, h(SlotTemplate, { name: "header", className: 'full-width' }), h("div", { class: "bcm-modal__container-header-close", onClick: () => this.hide() }, h("bcm-icon", { icon: "far fa-times" })))));
1963
- };
1964
- const customStyle = Object.assign(Object.assign({}, (width && { width: width })), (height && { height: height }));
1965
- return (h(Host, { class: `tw-overscroll-contain ${bcmModalHostClasses}` }, h("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h("div", { class: bcmModalContainer, style: customStyle }, h(HeaderTemplate, null), h("main", { class: mainClasses }, h("article", null, h(SlotTemplate, null))), h(FooterTemplate, null))));
1966
- }
1967
- get el() { return getElement(this); }
1968
- static get watchers() { return {
1969
- "isShow": ["_openHandler"]
1970
- }; }
1971
- };
1972
- __decorate$2([
1973
- IsLoad()
1974
- ], BcmModal.prototype, "el", void 0);
1975
- BcmModal.style = modalCss;
1976
-
1977
- const oldInputCss = "@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{--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{--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{--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}.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}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-300)}.input-base.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.input-base.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.input-base:not(.disabled):hover .caret-container,.input-base:not(.disabled).focused .caret-container{opacity:1}.input-base:not(.disabled):hover .input-clear-button,.input-base:not(.disabled).focused .input-clear-button{opacity:1}.input-base:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.input-base:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{cursor:not-allowed}.input-base.readonly{cursor:default}.input-base.empty .input-clear-button{display:none}.input-base.invalid,.input-base.error{border-color:var(--bcm-new-ds-color-red-500)}.error .label{color:var(--bcm-new-ds-color-red-500) !important}.error .input-base{border-color:var(--bcm-new-ds-color-red-500) !important}.input-base input{color:var(--bcm-new-ds-color-slate-600);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-new-ds-color-slate-500)}.input-prefix ::slotted(*),.input-prefix>span{line-height:1;margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{line-height:1;margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;color:var(--bcm-new-ds-color-slate-600);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-space(\"xxxs\");border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.input-large{height:40px}.input-medium{height:32px}.input-small{height:24px}";
1978
-
1979
- var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1980
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
1981
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
1982
- r = Reflect.decorate(decorators, target, key, desc);
1983
- else
1984
- for (var i = decorators.length - 1; i >= 0; i--)
1985
- if (d = decorators[i])
1986
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
1987
- return c > 3 && r && Object.defineProperty(target, key, r), r;
1988
- };
1989
- let id = 0;
1990
- const defaultIcons = {
1991
- email: '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>',
1992
- tel: '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M476.5 22.9L382.3 1.2c-21.6-5-43.6 6.2-52.3 26.6l-43.5 101.5c-8 18.6-2.6 40.6 13.1 53.4l40 32.7C311 267.8 267.8 311 215.4 339.5l-32.7-40c-12.8-15.7-34.8-21.1-53.4-13.1L27.7 329.9c-20.4 8.7-31.5 30.7-26.6 52.3l21.7 94.2c4.8 20.9 23.2 35.5 44.6 35.5C312.3 512 512 313.7 512 67.5c0-21.4-14.6-39.8-35.5-44.6zM69.3 464l-20.9-90.7 98.2-42.1 55.7 68.1c98.8-46.4 150.6-98 197-197l-68.1-55.7 42.1-98.2L464 69.3C463 286.9 286.9 463 69.3 464z"/></svg>',
1993
- search: '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"/></svg>',
1994
- url: '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>'
1995
- };
1996
- const BcmOldInput = class {
1997
- constructor(hostRef) {
1998
- registerInstance(this, hostRef);
1999
- this.focus = createEvent(this, "bcm-focus", 7);
2000
- this.blur = createEvent(this, "bcm-blur", 7);
2001
- this.clear = createEvent(this, "bcm-clear", 7);
2002
- this.change = createEvent(this, "bcm-change", 7);
2003
- this.input = createEvent(this, "bcm-input", 7);
2004
- this.inputId = `input-${++id}`;
2005
- this.type = 'text';
2006
- this.value = '';
2007
- this.size = "medium";
2008
- this.noCaption = false;
2009
- this.noMargin = false;
2010
- this.captionType = 'default';
2011
- this.fullWidth = false;
2012
- this.disabled = false;
2013
- this.readonly = false;
2014
- this.clearable = false;
2015
- this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
2016
- this.unit = null;
2017
- this.unitPrefix = null;
2018
- this.min = null;
2019
- this.max = null;
2020
- this.step = null;
2021
- this.hidden = false;
2022
- this.required = false;
2023
- this.disableWatchValue = false;
2024
- this.maxLength = null;
2025
- this.inValid = false;
2026
- this.hasFocus = false;
2027
- this.isBlur = false;
2028
- this.isPasswordVisible = false;
2029
- }
2030
- async setFocus() {
2031
- this.inputElement.focus();
2032
- }
2033
- async removeFocus() {
2034
- this.inputElement.blur();
2035
- }
2036
- async select() {
2037
- return this.inputElement.select();
2038
- }
2039
- async setValue(value) {
2040
- this.inputElement.value = value;
2041
- this.value = value;
2042
- this.handleChange();
2043
- return value;
2044
- }
2045
- async setClear() {
2046
- this.inputElement.value = '';
2047
- this.value = '';
2048
- await delay(10);
2049
- return Promise.resolve();
2050
- }
2051
- async resetCaption() {
2052
- await delay(10);
2053
- this.caption = this.captionCache;
2054
- this.captionType = this.captionTypeCache;
2055
- this.captionError = null;
2056
- await delay(10);
2057
- return Promise.resolve();
2058
- }
2059
- async getValue() {
2060
- return this.value;
2061
- }
2062
- handleFocus() {
2063
- this.hasFocus = true;
2064
- this.focus.emit();
2065
- }
2066
- handleBlur() {
2067
- this.hasFocus = false;
2068
- this.isBlur = true;
2069
- if (this.type == "email") {
2070
- this.isEmailValid();
2071
- }
2072
- if (this.type == "tel") {
2073
- this.isTelValid();
2074
- }
2075
- this.blur.emit();
2076
- }
2077
- handleChange() {
2078
- this.value = this.inputElement.value;
2079
- this.change.emit(this.value);
2080
- }
2081
- handleInput() {
2082
- if (this.type == "number") {
2083
- if (this.decimal == "false") {
2084
- this.inputElement.value = this.inputElement.value.replace(/[^0-9-]/g, '');
2085
- }
2086
- else {
2087
- this.inputElement.value = this.inputElement.value.replace(/[^0-9.,-]/g, '');
2088
- }
2089
- this.inputElement.value = this.inputElement.value.replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1');
2090
- }
2091
- this.value = this.inputElement.value;
2092
- this.input.emit(this.value);
2093
- }
2094
- handleClear(e) {
2095
- this.inputElement.value = '';
2096
- this.value = '';
2097
- this.inputElement.focus();
2098
- this.change.emit(this.value);
2099
- this.clear.emit(e);
2100
- e.stopPropagation();
2101
- }
2102
- changePasswordVisibility() {
2103
- this.isPasswordVisible = !this.isPasswordVisible;
2104
- }
2105
- incrementNumber() {
2106
- if (!this.inValid && !this.disabled && !this.readonly) {
2107
- let step = this.getNumberStep();
2108
- let val = Number(this.value) + Number(step);
2109
- this.value = this.numberDecimal(val);
2110
- }
2111
- }
2112
- decrementNumber() {
2113
- if (!this.inValid && !this.disabled && !this.readonly) {
2114
- let step = this.getNumberStep();
2115
- let val = Number(this.value) - Number(step);
2116
- this.value = this.numberDecimal(val);
2117
- }
2118
- }
2119
- getNumberStep(step = Number(this.step)) {
2120
- let returnStep = 1;
2121
- if (step && Number(step) == step)
2122
- returnStep = step;
2123
- return Number(returnStep);
2124
- }
2125
- connectedCallback() {
2126
- this.changePasswordVisibility = this.changePasswordVisibility.bind(this);
2127
- this.handleChange = this.handleChange.bind(this);
2128
- this.handleBlur = this.handleBlur.bind(this);
2129
- this.handleFocus = this.handleFocus.bind(this);
2130
- this.handleInput = this.handleInput.bind(this);
2131
- this.handleClear = this.handleClear.bind(this);
2132
- this.incrementNumber = this.incrementNumber.bind(this);
2133
- this.decrementNumber = this.decrementNumber.bind(this);
2134
- this.valueCache = this.value;
2135
- this.captionCache = this.caption;
2136
- this.captionTypeCache = this.captionType;
2137
- }
2138
- validationRange(val = JSON.stringify({
2139
- "value": this.value,
2140
- "min": this.min,
2141
- "max": this.max
2142
- })) {
2143
- let cap = null;
2144
- let capType = null;
2145
- let returnValidation = true;
2146
- let item = JSON.parse(val);
2147
- let { length, value, min, max } = item;
2148
- length = parseFloat(length);
2149
- value = parseFloat(value);
2150
- min = parseFloat(min);
2151
- max = parseFloat(max);
2152
- length !== 0 && (value && (min && max && ((value < min || value > max) && (cap = "Please enter a value between " + min + " and " + max + ".",
2153
- capType = "error",
2154
- returnValidation = false)) || min && !max && (value < min && (cap = "Please enter a value greater than or equal to " + min + ".",
2155
- capType = "error",
2156
- returnValidation = false)) || !min && max && (value > max && (cap = "Please enter a value less than or equal to " + max + ".",
2157
- capType = "error",
2158
- returnValidation = false))));
2159
- this.setCaption(cap, capType);
2160
- return returnValidation;
2161
- }
2162
- setCaption(caption = null, captionType = null) {
2163
- this.caption = caption ? caption : this.captionCache;
2164
- this.captionType = captionType ? captionType : this.captionTypeCache;
2165
- this.captionError = captionType == "error" ? caption : null;
2166
- }
2167
- isEmailValid() {
2168
- const { value } = this;
2169
- const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
2170
- let cap = null;
2171
- let capType = null;
2172
- if (value && !regexp.test(value)) {
2173
- cap = "Please enter a valid email address.",
2174
- capType = "error",
2175
- this.inValid = true;
2176
- }
2177
- else {
2178
- this.inValid = false;
2179
- }
2180
- this.setCaption(cap, capType);
2181
- return this.inValid;
2182
- }
2183
- isTelValid() {
2184
- const { value } = this;
2185
- const regexp = new RegExp(/^(?=.*[0-9])[- +()0-9]+$/);
2186
- let cap = null;
2187
- let capType = null;
2188
- if (value && !regexp.test(value)) {
2189
- cap = "Please enter a valid phone number.",
2190
- capType = "error",
2191
- this.inValid = true;
2192
- }
2193
- else {
2194
- this.inValid = false;
2195
- }
2196
- this.setCaption(cap, capType);
2197
- return this.inValid;
2198
- }
2199
- isNumberValid(caption = "Invalid number", captionType = "error") {
2200
- const { value } = this;
2201
- if (value && Number(value) != value) {
2202
- this.inValid = true;
2203
- this.setCaption(caption, captionType);
2204
- return true;
2205
- }
2206
- this.inValid = false;
2207
- return false;
2208
- }
2209
- setNumberUnit() {
2210
- const { value, unit } = this;
2211
- if (Number(value) == value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !value)
2212
- this.value = 0;
2213
- }
2214
- numberDecimal(val = '') {
2215
- let decLen = this.getDecimalLength();
2216
- if (val && decLen)
2217
- return parseFloat(val).toFixed(decLen);
2218
- return val;
2219
- }
2220
- numberNotDecimal(val = 0) {
2221
- return Math.trunc(val);
2222
- }
2223
- getDecimalLength() {
2224
- const { step } = this;
2225
- let returnDecimalLength = 0, splitted, splitDec;
2226
- if (step && Number(step) == step) {
2227
- if (String(step).includes(".")) {
2228
- splitted = String(step).split('.');
2229
- splitDec = splitted[splitted.length - 1].length;
2230
- }
2231
- else {
2232
- splitDec = 0;
2233
- }
2234
- returnDecimalLength = splitDec;
2235
- }
2236
- return Number(returnDecimalLength);
2237
- }
2238
- componentWillRender() {
2239
- const { type } = this;
2240
- if (type == "number" && this.value) {
2241
- if (!this.isNumberValid()) {
2242
- this.validationRange();
2243
- }
2244
- }
2245
- if (this.isBlur) {
2246
- if (type == "email" && this.value) {
2247
- this.isEmailValid();
2248
- }
2249
- if (type == "tel" && this.value) {
2250
- this.isTelValid();
2251
- }
2252
- }
2253
- }
2254
- componentWillLoad() {
2255
- const { type, value } = this;
2256
- if (type == "number" && Number(value) == value) {
2257
- this.value = this.numberDecimal(value);
2258
- }
2259
- }
2260
- numberControl(e) {
2261
- if (!this.disabled && !this.readonly) {
2262
- if (this.type == "number") {
2263
- var which = e.which || 0;
2264
- var key = e.key;
2265
- which == 38 && ( // up arrow
2266
- e.preventDefault(),
2267
- this.incrementNumber());
2268
- which == 40 && ( // down arrow
2269
- e.preventDefault(),
2270
- this.decrementNumber());
2271
- key == "." && String(this.value).includes(".") && ( // dot: shouldn't be more than one
2272
- e.preventDefault());
2273
- if (which == 8 || //backspace / delete
2274
- which == 9 || //tab
2275
- which == 13 || //enter
2276
- which == 16 || //shift
2277
- which == 17 || //ctrl
2278
- which == 18 || //alt
2279
- which == 46 || //delete
2280
- (which == 110 && (this.type == 'number' && this.decimal != false)) || //decimal point
2281
- // (which == 188 && key == ",") || //comma
2282
- (which == 190 && key == "." && (this.type == 'number' && this.decimal != false)) || //period
2283
- (which == 189 && this.inputElement.value.length == 0) || //-
2284
- (which == 109 && this.inputElement.value.length == 0) || //-
2285
- (which >= 35 && which <= 40) || //end, home, left arrow, up arrow, right arrow, down arrow
2286
- (which >= 48 && which <= 57) || //0-9
2287
- (which >= 96 && which <= 105) //0-9(numpad)
2288
- )
2289
- return true;
2290
- e.preventDefault();
2291
- if (this.decimal == true) {
2292
- this.value = this.numberDecimal(this.value);
2293
- }
2294
- else if (this.decimal == false) {
2295
- this.value = this.numberNotDecimal(this.value);
2296
- }
2297
- }
2298
- }
2299
- }
2300
- whatchHasFocus() {
2301
- const { type, hasFocus, value, valueCache, inValid } = this;
2302
- if (type == "number") {
2303
- this.isNumberValid();
2304
- let inValidState = false;
2305
- if (hasFocus == true) {
2306
- if (inValid == true) {
2307
- this.value = '';
2308
- inValidState = true;
2309
- }
2310
- }
2311
- else {
2312
- if (this.value == '' && inValid == false) {
2313
- this.value = valueCache;
2314
- inValidState = true;
2315
- }
2316
- if (value != valueCache && inValid == false && inValidState == false) {
2317
- this.value = value ? this.numberDecimal(value) : '';
2318
- }
2319
- }
2320
- }
2321
- }
2322
- watchValue() {
2323
- if (!this.disableWatchValue && this.type != 'number') {
2324
- this.handleChange();
2325
- }
2326
- }
2327
- render() {
2328
- const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, hasFocus, unitPrefix, noCaption, required } = this;
2329
- const containerClasses = classnames('input-container', {
2330
- 'full-width': fullWidth,
2331
- 'error': captionType == 'error' ? true : false
2332
- });
2333
- const baseClasses = classnames('input-base', 'input-' + size, {
2334
- 'invalid': inValid,
2335
- 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
2336
- 'focused': hasFocus,
2337
- 'disabled': disabled,
2338
- 'readonly': readonly,
2339
- 'empty': (value === null || value === void 0 ? void 0 : value.length) < 1
2340
- });
2341
- const inputClass = size === 'large' ? 'size-3' : 'size-2';
2342
- const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
2343
- return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
2344
- type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
2345
- ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
2346
- : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h("button", { class: "input-clear-button", onClick: this.handleClear }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" })))), type === 'password' && passwordToggle && (h("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-invisible" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon", innerHTML: defaultIcons[type] })), type === 'number' && (h("div", { class: classnames('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h("bcm-icon", { icon: "far fa-caret-up" })), h("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h("bcm-icon", { icon: "far fa-caret-down" })))), type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption }))));
2347
- }
2348
- get el() { return getElement(this); }
2349
- static get watchers() { return {
2350
- "hasFocus": ["whatchHasFocus"],
2351
- "value": ["watchValue"]
2352
- }; }
2353
- };
2354
- __decorate$1([
2355
- IsLoad()
2356
- ], BcmOldInput.prototype, "el", void 0);
2357
- BcmOldInput.style = oldInputCss;
2358
-
2359
- var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
2360
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
2361
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
2362
- r = Reflect.decorate(decorators, target, key, desc);
2363
- else
2364
- for (var i = decorators.length - 1; i >= 0; i--)
2365
- if (d = decorators[i])
2366
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
2367
- return c > 3 && r && Object.defineProperty(target, key, r), r;
2368
- };
2369
- const BcmTooltip = class {
2370
- constructor(hostRef) {
2371
- registerInstance(this, hostRef);
2372
- this._id = Generate.UID();
2373
- this.message = '';
2374
- this.placement = Bcm$1.Placement.top;
2375
- this.trigger = Bcm$1.TriggerType.click;
2376
- this.open = false;
2377
- this.color = 'slate';
2378
- this.tooltip = new Tooltip({
2379
- targetId: this._id,
2380
- message: this.message,
2381
- placement: this.placement,
2382
- color: this.color,
2383
- trigger: this.trigger,
2384
- });
2385
- }
2386
- componentDidLoad() {
2387
- this.tooltip.listener();
2388
- }
2389
- componentDidRender() {
2390
- this.tooltip.message = this.message;
2391
- this.tooltip.placement = this.placement;
2392
- this.tooltip.color = this.color;
2393
- this.tooltip.trigger = this.trigger;
2394
- this.tooltip.update();
2395
- }
2396
- async show() {
2397
- this.tooltip.show();
2398
- }
2399
- async hide() {
2400
- this.tooltip.hide();
2401
- }
2402
- async toggle() {
2403
- this.tooltip.toggle();
2404
- }
2405
- render() {
2406
- return (h(Host, { "aria-describedby": "tooltip", tabindex: "-1", class: "tw-inline-flex tw-w-fit tw-h-fit" }, h("slot", null)));
2407
- }
2408
- get el() { return getElement(this); }
2409
- };
2410
- __decorate([
2411
- IsLoad()
2412
- ], BcmTooltip.prototype, "el", void 0);
2413
-
2414
- export { BcmButton as bcm_button, BcmDatetimePicker as bcm_datetime_picker, BcmIcon as bcm_icon, BcmLabel as bcm_label, BcmModal as bcm_modal, BcmOldInput as bcm_old_input, BcmTooltip as bcm_tooltip };