bromcom-ui 2.8.1-rc.4 → 2.8.1-rc.6

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 (202) hide show
  1. package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
  2. package/dist/bromcom-ui/{p-88021108.entry.js → p-025f4007.entry.js} +1 -1
  3. package/dist/bromcom-ui/{p-f22d15c0.entry.js → p-029ff228.entry.js} +1 -1
  4. package/dist/bromcom-ui/p-03a6d655.entry.js +5 -0
  5. package/dist/bromcom-ui/{p-8c00238d.entry.js → p-056b2ba2.entry.js} +1 -1
  6. package/dist/bromcom-ui/p-10ac60f3.entry.js +5 -0
  7. package/dist/bromcom-ui/{p-222167f4.entry.js → p-1173f223.entry.js} +1 -1
  8. package/dist/bromcom-ui/{p-f687b1cb.entry.js → p-1225fa3a.entry.js} +1 -1
  9. package/dist/bromcom-ui/{p-9c3505da.entry.js → p-17fce2b7.entry.js} +1 -1
  10. package/dist/bromcom-ui/{p-71735094.entry.js → p-183f5997.entry.js} +1 -1
  11. package/dist/bromcom-ui/{p-e4683d83.entry.js → p-19914e83.entry.js} +1 -1
  12. package/dist/bromcom-ui/{p-270db6a4.entry.js → p-2222fe4d.entry.js} +1 -1
  13. package/dist/bromcom-ui/{p-e046b9a3.entry.js → p-23e581c9.entry.js} +1 -1
  14. package/dist/bromcom-ui/{p-961cc5b6.js → p-2466f689.js} +1 -1
  15. package/dist/bromcom-ui/{p-eb722cdb.entry.js → p-29988de4.entry.js} +1 -1
  16. package/dist/bromcom-ui/p-2e496083.entry.js +5 -0
  17. package/dist/bromcom-ui/{p-7013ab26.entry.js → p-36150ba5.entry.js} +1 -1
  18. package/dist/bromcom-ui/{p-fb798a68.entry.js → p-40de862f.entry.js} +1 -1
  19. package/dist/bromcom-ui/{p-af0c9c25.js → p-40dfe399.js} +1 -1
  20. package/dist/bromcom-ui/{p-caa7277a.entry.js → p-44b33c12.entry.js} +1 -1
  21. package/dist/bromcom-ui/{p-f6f175b5.entry.js → p-44bf5a4e.entry.js} +1 -1
  22. package/dist/bromcom-ui/{p-f2c199a6.entry.js → p-4b0b321b.entry.js} +1 -1
  23. package/dist/bromcom-ui/{p-060debda.entry.js → p-519cad1c.entry.js} +1 -1
  24. package/dist/bromcom-ui/{p-6ab96c0d.entry.js → p-5cf1a724.entry.js} +1 -1
  25. package/dist/bromcom-ui/{p-5d7af92d.entry.js → p-5e6b8d68.entry.js} +1 -1
  26. package/dist/bromcom-ui/{p-0f680a2d.entry.js → p-60143ae9.entry.js} +1 -1
  27. package/dist/bromcom-ui/{p-94e09cd5.entry.js → p-61ea7f76.entry.js} +1 -1
  28. package/dist/bromcom-ui/{p-2f2649ac.entry.js → p-62db73c1.entry.js} +1 -1
  29. package/dist/bromcom-ui/{p-4575ec44.js → p-7047f1f8.js} +1 -1
  30. package/dist/bromcom-ui/{p-094de2bf.entry.js → p-7162bb72.entry.js} +1 -1
  31. package/dist/bromcom-ui/{p-49152a26.entry.js → p-72e668a3.entry.js} +1 -1
  32. package/dist/bromcom-ui/p-83130cb1.js +5 -0
  33. package/dist/bromcom-ui/{p-691340fe.entry.js → p-869cd6ac.entry.js} +1 -1
  34. package/dist/bromcom-ui/{p-941ba28a.entry.js → p-8a1a14eb.entry.js} +1 -1
  35. package/dist/bromcom-ui/{p-05e39d66.js → p-8f2f39d9.js} +1 -1
  36. package/dist/bromcom-ui/{p-73d05a02.entry.js → p-912afd99.entry.js} +1 -1
  37. package/dist/bromcom-ui/{p-deac277e.entry.js → p-933fb66c.entry.js} +1 -1
  38. package/dist/bromcom-ui/{p-423d6556.entry.js → p-954d2b72.entry.js} +1 -1
  39. package/dist/bromcom-ui/{p-2ebab6dd.entry.js → p-9afdbf06.entry.js} +1 -1
  40. package/dist/bromcom-ui/{p-08fa028a.entry.js → p-9fe7bdd5.entry.js} +1 -1
  41. package/dist/bromcom-ui/{p-e16e7a85.entry.js → p-a2305202.entry.js} +1 -1
  42. package/dist/bromcom-ui/{p-12448ed2.js → p-a45a0d2a.js} +1 -1
  43. package/dist/bromcom-ui/{p-090ace7a.entry.js → p-a56bd66e.entry.js} +1 -1
  44. package/dist/bromcom-ui/{p-fc2f0545.entry.js → p-b3973ea2.entry.js} +1 -1
  45. package/dist/bromcom-ui/{p-ebdfee04.js → p-b9c5e320.js} +1 -1
  46. package/dist/bromcom-ui/{p-71f11e80.entry.js → p-bd3fe613.entry.js} +1 -1
  47. package/dist/bromcom-ui/{p-45345880.entry.js → p-bd5b39f6.entry.js} +1 -1
  48. package/dist/bromcom-ui/{p-521d0db6.entry.js → p-bf73c4a0.entry.js} +1 -1
  49. package/dist/bromcom-ui/{p-f4b761d9.entry.js → p-c085373c.entry.js} +1 -1
  50. package/dist/bromcom-ui/p-c202f8fa.entry.js +5 -0
  51. package/dist/bromcom-ui/p-c62a2304.entry.js +5 -0
  52. package/dist/bromcom-ui/{p-4c49bacb.entry.js → p-cbb29318.entry.js} +1 -1
  53. package/dist/bromcom-ui/{p-0a4f8d28.entry.js → p-ced3725c.entry.js} +1 -1
  54. package/dist/bromcom-ui/{p-007e75cf.entry.js → p-cf8b8c22.entry.js} +1 -1
  55. package/dist/bromcom-ui/{p-8ee2ca71.entry.js → p-ddc5eb6d.entry.js} +1 -1
  56. package/dist/bromcom-ui/{p-ac3478fd.entry.js → p-e5236fa3.entry.js} +1 -1
  57. package/dist/bromcom-ui/{p-53fd7272.entry.js → p-e814a4e7.entry.js} +1 -1
  58. package/dist/bromcom-ui/{p-db1659d3.entry.js → p-f4b791c6.entry.js} +1 -1
  59. package/dist/bromcom-ui/{p-c6a997b5.entry.js → p-ff839593.entry.js} +1 -1
  60. package/dist/cjs/bcm-accordion.cjs.entry.js +1 -1
  61. package/dist/cjs/bcm-alert.cjs.entry.js +1 -1
  62. package/dist/cjs/bcm-attendance.cjs.entry.js +1 -1
  63. package/dist/cjs/bcm-avatar_2.cjs.entry.js +3 -3
  64. package/dist/cjs/bcm-breadcrumb.cjs.entry.js +1 -1
  65. package/dist/cjs/bcm-button-group.cjs.entry.js +1 -1
  66. package/dist/cjs/bcm-button_7.cjs.entry.js +4 -4
  67. package/dist/cjs/bcm-card.cjs.entry.js +1 -1
  68. package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +1 -1
  69. package/dist/cjs/bcm-chip.cjs.entry.js +1 -1
  70. package/dist/cjs/bcm-collapse.cjs.entry.js +1 -1
  71. package/dist/cjs/bcm-color-input.cjs.entry.js +3 -3
  72. package/dist/cjs/bcm-colorful_2.cjs.entry.js +3 -3
  73. package/dist/cjs/bcm-date-picker.cjs.entry.js +1 -1
  74. package/dist/cjs/bcm-datetime-picker.cjs.entry.js +4 -7
  75. package/dist/cjs/bcm-default.cjs.entry.js +1 -1
  76. package/dist/cjs/bcm-drawer.cjs.entry.js +3 -3
  77. package/dist/cjs/bcm-dropdown.cjs.entry.js +4 -3
  78. package/dist/cjs/bcm-expansion-panel.cjs.entry.js +1 -1
  79. package/dist/cjs/bcm-form-2.cjs.entry.js +1 -1
  80. package/dist/cjs/bcm-input-custom.cjs.entry.js +1 -1
  81. package/dist/cjs/bcm-input.cjs.entry.js +4 -4
  82. package/dist/cjs/bcm-item.cjs.entry.js +1 -1
  83. package/dist/cjs/bcm-items.cjs.entry.js +1 -1
  84. package/dist/cjs/bcm-list.cjs.entry.js +6 -6
  85. package/dist/cjs/bcm-menu.cjs.entry.js +10 -7
  86. package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +3 -3
  87. package/dist/cjs/bcm-modal-2-header.cjs.entry.js +3 -3
  88. package/dist/cjs/bcm-modal-2.cjs.entry.js +3 -3
  89. package/dist/cjs/bcm-modal.cjs.entry.js +34 -10
  90. package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +1 -1
  91. package/dist/cjs/bcm-popconfirm.cjs.entry.js +1 -1
  92. package/dist/cjs/bcm-popover.cjs.entry.js +3 -3
  93. package/dist/cjs/bcm-progress.cjs.entry.js +1 -1
  94. package/dist/cjs/bcm-radio-group.cjs.entry.js +3 -3
  95. package/dist/cjs/bcm-radio.cjs.entry.js +3 -3
  96. package/dist/cjs/bcm-range.cjs.entry.js +1 -1
  97. package/dist/cjs/bcm-rc-overflow_2.cjs.entry.js +4 -4
  98. package/dist/cjs/bcm-skeleton.cjs.entry.js +1 -1
  99. package/dist/cjs/bcm-step.cjs.entry.js +2 -2
  100. package/dist/cjs/bcm-stepper.cjs.entry.js +4 -4
  101. package/dist/cjs/bcm-switch.cjs.entry.js +1 -1
  102. package/dist/cjs/bcm-tab-group.cjs.entry.js +3 -3
  103. package/dist/cjs/bcm-tab-item-header.cjs.entry.js +3 -3
  104. package/dist/cjs/bcm-tab-item.cjs.entry.js +3 -3
  105. package/dist/cjs/bcm-tag.cjs.entry.js +2 -2
  106. package/dist/cjs/bcm-textarea.cjs.entry.js +2 -2
  107. package/dist/cjs/bcm-time-picker.cjs.entry.js +1 -1
  108. package/dist/cjs/bcm-toast.cjs.entry.js +1 -1
  109. package/dist/cjs/bromcom-ui.cjs.js +1 -1
  110. package/dist/cjs/{generate-63b8388c.js → generate-2f772b8c.js} +1 -1
  111. package/dist/cjs/{input-template-48c4195d.js → input-template-eb189d30.js} +1 -1
  112. package/dist/cjs/{json-parse-decarator-1ffdcf04.js → json-parse-decarator-b7915a46.js} +1 -1
  113. package/dist/cjs/loader.cjs.js +1 -1
  114. package/dist/cjs/{number-helper-cffbdcd9.js → number-helper-6497c99e.js} +1 -1
  115. package/dist/cjs/old-bcm-popover-box.cjs.entry.js +2 -2
  116. package/dist/cjs/old-bcm-popover.cjs.entry.js +1 -1
  117. package/dist/cjs/{stepper-states-2ebe3840.js → stepper-states-92effe49.js} +1 -1
  118. package/dist/cjs/{tooltip-helper-f4775a73.js → tooltip-helper-ca75dae7.js} +3 -3
  119. package/dist/cjs/{validators-557ce8f8.js → validators-c92cc70c.js} +1 -1
  120. package/dist/collection/components/molecules/dropdown/dropdown.js +20 -1
  121. package/dist/collection/components/molecules/menu/menu.css +23 -1
  122. package/dist/collection/components/molecules/menu/menu.js +41 -2
  123. package/dist/collection/components/molecules/modal/modal.js +59 -17
  124. package/dist/collection/components/organism/datetime-picker/datetime-picker.js +3 -6
  125. package/dist/collection/templates/list-template.js +2 -2
  126. package/dist/components/bcm-dropdown.js +3 -1
  127. package/dist/components/bcm-list.js +2 -2
  128. package/dist/components/bcm-modal.js +34 -10
  129. package/dist/components/datetime-picker.js +3 -6
  130. package/dist/components/generate.js +1 -1
  131. package/dist/components/menu.js +8 -3
  132. package/dist/esm/bcm-accordion.entry.js +1 -1
  133. package/dist/esm/bcm-alert.entry.js +1 -1
  134. package/dist/esm/bcm-attendance.entry.js +1 -1
  135. package/dist/esm/bcm-avatar_2.entry.js +3 -3
  136. package/dist/esm/bcm-breadcrumb.entry.js +1 -1
  137. package/dist/esm/bcm-button-group.entry.js +1 -1
  138. package/dist/esm/bcm-button_7.entry.js +4 -4
  139. package/dist/esm/bcm-card.entry.js +1 -1
  140. package/dist/esm/bcm-checkbox-lite_9.entry.js +1 -1
  141. package/dist/esm/bcm-chip.entry.js +1 -1
  142. package/dist/esm/bcm-collapse.entry.js +1 -1
  143. package/dist/esm/bcm-color-input.entry.js +3 -3
  144. package/dist/esm/bcm-colorful_2.entry.js +3 -3
  145. package/dist/esm/bcm-date-picker.entry.js +1 -1
  146. package/dist/esm/bcm-datetime-picker.entry.js +4 -7
  147. package/dist/esm/bcm-default.entry.js +1 -1
  148. package/dist/esm/bcm-drawer.entry.js +3 -3
  149. package/dist/esm/bcm-dropdown.entry.js +4 -3
  150. package/dist/esm/bcm-expansion-panel.entry.js +1 -1
  151. package/dist/esm/bcm-form-2.entry.js +1 -1
  152. package/dist/esm/bcm-input-custom.entry.js +1 -1
  153. package/dist/esm/bcm-input.entry.js +4 -4
  154. package/dist/esm/bcm-item.entry.js +1 -1
  155. package/dist/esm/bcm-items.entry.js +1 -1
  156. package/dist/esm/bcm-list.entry.js +6 -6
  157. package/dist/esm/bcm-menu.entry.js +10 -7
  158. package/dist/esm/bcm-modal-2-footer.entry.js +3 -3
  159. package/dist/esm/bcm-modal-2-header.entry.js +3 -3
  160. package/dist/esm/bcm-modal-2.entry.js +3 -3
  161. package/dist/esm/bcm-modal.entry.js +34 -10
  162. package/dist/esm/bcm-popconfirm-box.entry.js +1 -1
  163. package/dist/esm/bcm-popconfirm.entry.js +1 -1
  164. package/dist/esm/bcm-popover.entry.js +3 -3
  165. package/dist/esm/bcm-progress.entry.js +1 -1
  166. package/dist/esm/bcm-radio-group.entry.js +3 -3
  167. package/dist/esm/bcm-radio.entry.js +3 -3
  168. package/dist/esm/bcm-range.entry.js +1 -1
  169. package/dist/esm/bcm-rc-overflow_2.entry.js +4 -4
  170. package/dist/esm/bcm-skeleton.entry.js +1 -1
  171. package/dist/esm/bcm-step.entry.js +2 -2
  172. package/dist/esm/bcm-stepper.entry.js +4 -4
  173. package/dist/esm/bcm-switch.entry.js +1 -1
  174. package/dist/esm/bcm-tab-group.entry.js +3 -3
  175. package/dist/esm/bcm-tab-item-header.entry.js +3 -3
  176. package/dist/esm/bcm-tab-item.entry.js +3 -3
  177. package/dist/esm/bcm-tag.entry.js +2 -2
  178. package/dist/esm/bcm-textarea.entry.js +2 -2
  179. package/dist/esm/bcm-time-picker.entry.js +1 -1
  180. package/dist/esm/bcm-toast.entry.js +1 -1
  181. package/dist/esm/bromcom-ui.js +1 -1
  182. package/dist/esm/{generate-dab287b3.js → generate-4adaaf05.js} +1 -1
  183. package/dist/esm/{input-template-24404f0a.js → input-template-798b5684.js} +1 -1
  184. package/dist/esm/{json-parse-decarator-f52026c2.js → json-parse-decarator-20b52636.js} +1 -1
  185. package/dist/esm/loader.js +1 -1
  186. package/dist/esm/{number-helper-026bc937.js → number-helper-d1650a56.js} +1 -1
  187. package/dist/esm/old-bcm-popover-box.entry.js +2 -2
  188. package/dist/esm/old-bcm-popover.entry.js +1 -1
  189. package/dist/esm/{stepper-states-699bc7d9.js → stepper-states-d2276d34.js} +1 -1
  190. package/dist/esm/{tooltip-helper-6cbb0b45.js → tooltip-helper-5fdae0e3.js} +3 -3
  191. package/dist/esm/{validators-d525dbd6.js → validators-7d87bb83.js} +1 -1
  192. package/dist/types/components/molecules/dropdown/dropdown.d.ts +1 -0
  193. package/dist/types/components/molecules/menu/menu.d.ts +2 -0
  194. package/dist/types/components/molecules/modal/modal.d.ts +10 -4
  195. package/dist/types/components.d.ts +10 -4
  196. package/package.json +1 -1
  197. package/dist/bromcom-ui/p-479d7ec8.entry.js +0 -5
  198. package/dist/bromcom-ui/p-671febaf.entry.js +0 -5
  199. package/dist/bromcom-ui/p-69d1f3a9.entry.js +0 -5
  200. package/dist/bromcom-ui/p-bf2bd4aa.entry.js +0 -5
  201. package/dist/bromcom-ui/p-cf2242fa.entry.js +0 -5
  202. package/dist/bromcom-ui/p-f1474f14.js +0 -5
@@ -54,14 +54,20 @@ export class BcmModal {
54
54
  this.hide();
55
55
  }
56
56
  }
57
- async hide() {
58
- this.beforeClose.emit(this.el);
59
- this.isShow = false;
60
- this.close.emit(this);
57
+ async hide(obj = { force: false }) {
58
+ if (obj === null || obj === void 0 ? void 0 : obj.force) {
59
+ this.isShow = false;
60
+ this.close.emit(); // Deprecated
61
+ return;
62
+ }
63
+ this.modalBeforeClose.emit(this.el);
61
64
  }
62
- async show() {
63
- this.beforeOpen.emit(this.el);
64
- this.isShow = true;
65
+ async show(obj = { force: false }) {
66
+ if (obj === null || obj === void 0 ? void 0 : obj.force) {
67
+ this.isShow = true;
68
+ return;
69
+ }
70
+ this.modalBeforeOpen.emit(this.el);
65
71
  }
66
72
  keyboardNavigation(e) {
67
73
  if (this.backdrop == true) {
@@ -72,6 +78,24 @@ export class BcmModal {
72
78
  }
73
79
  }
74
80
  }
81
+ async showModal(e) {
82
+ if (e.defaultPrevented) {
83
+ return;
84
+ }
85
+ if (e.target === this.el) {
86
+ this.isShow = true;
87
+ // document.body.appendChild(this.el); A solution must be found for this.
88
+ }
89
+ }
90
+ async hideModal(e) {
91
+ if (e.defaultPrevented) {
92
+ return;
93
+ }
94
+ if (e.target === this.el) {
95
+ this.isShow = false;
96
+ this.close.emit(); // Deprecated
97
+ }
98
+ }
75
99
  _openHandler() {
76
100
  const disableScrollClass = `bcm-modal--disable-scroll-${this._id}`;
77
101
  if (this.isShow) {
@@ -265,8 +289,8 @@ export class BcmModal {
265
289
  }
266
290
  static get events() {
267
291
  return [{
268
- "method": "beforeOpen",
269
- "name": "beforeOpen",
292
+ "method": "close",
293
+ "name": "bcm-close",
270
294
  "bubbles": true,
271
295
  "cancelable": true,
272
296
  "composed": true,
@@ -280,8 +304,8 @@ export class BcmModal {
280
304
  "references": {}
281
305
  }
282
306
  }, {
283
- "method": "beforeClose",
284
- "name": "beforeClose",
307
+ "method": "modalBeforeClose",
308
+ "name": "bcm-modal-before-close",
285
309
  "bubbles": true,
286
310
  "cancelable": true,
287
311
  "composed": true,
@@ -295,8 +319,8 @@ export class BcmModal {
295
319
  "references": {}
296
320
  }
297
321
  }, {
298
- "method": "close",
299
- "name": "bcm-close",
322
+ "method": "modalBeforeOpen",
323
+ "name": "bcm-modal-before-open",
300
324
  "bubbles": true,
301
325
  "cancelable": true,
302
326
  "composed": true,
@@ -315,8 +339,11 @@ export class BcmModal {
315
339
  return {
316
340
  "hide": {
317
341
  "complexType": {
318
- "signature": "() => Promise<void>",
319
- "parameters": [],
342
+ "signature": "(obj?: { force: boolean; }) => Promise<void>",
343
+ "parameters": [{
344
+ "tags": [],
345
+ "text": ""
346
+ }],
320
347
  "references": {
321
348
  "Promise": {
322
349
  "location": "global"
@@ -331,8 +358,11 @@ export class BcmModal {
331
358
  },
332
359
  "show": {
333
360
  "complexType": {
334
- "signature": "() => Promise<void>",
335
- "parameters": [],
361
+ "signature": "(obj?: { force: boolean; }) => Promise<void>",
362
+ "parameters": [{
363
+ "tags": [],
364
+ "text": ""
365
+ }],
336
366
  "references": {
337
367
  "Promise": {
338
368
  "location": "global"
@@ -367,6 +397,18 @@ export class BcmModal {
367
397
  "target": "document",
368
398
  "capture": false,
369
399
  "passive": false
400
+ }, {
401
+ "name": "bcm-modal-before-open",
402
+ "method": "showModal",
403
+ "target": "document",
404
+ "capture": false,
405
+ "passive": false
406
+ }, {
407
+ "name": "bcm-modal-before-close",
408
+ "method": "hideModal",
409
+ "target": "document",
410
+ "capture": false,
411
+ "passive": false
370
412
  }];
371
413
  }
372
414
  }
@@ -795,7 +795,7 @@ export class BcmDatetimePicker {
795
795
  if (text) {
796
796
  this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
797
797
  (this.type === Types.range && 'invalid date range') ||
798
- (this.type === Types.date && 'invalid date') ||
798
+ (this.type === Types.date && 'The selected date is not allowed.') ||
799
799
  (this.type === Types.time && 'invalid time'));
800
800
  }
801
801
  this.setValue(true);
@@ -1355,14 +1355,11 @@ export class BcmDatetimePicker {
1355
1355
  });
1356
1356
  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>`;
1357
1357
  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>`;
1358
+ const errorIcon = `<svg style="fill: #ef4444; 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 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
1358
1359
  const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
1359
1360
  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: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
1360
1361
  // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
1361
- 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", {
1362
- // slot="suffix"
1363
- // title={this.errorText}
1364
- icon: "far fa-exclamation-circle"
1365
- })))), 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: {
1362
+ noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), 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: {
1366
1363
  'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
1367
1364
  'not-this-month': !day.thisMonth,
1368
1365
  'is-weekend': day.isWeekend,
@@ -9,8 +9,8 @@ export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treev
9
9
  const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
10
10
  const setScrollHeight = () => {
11
11
  const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
12
- const itemCount = searchFound >= 0 || (treeview ? items.length : totalData);
13
- let scrollHeight = itemCount * itemHeight || 0;
12
+ const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
13
+ const scrollHeight = itemCount * itemHeight || 0;
14
14
  return {
15
15
  'min-height': `${scrollHeight}px`,
16
16
  'overscroll-behavior': 'none',
@@ -57,6 +57,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
57
57
  this.minHeight = '50px';
58
58
  this.stopDeepClean = false;
59
59
  this.selectable = true;
60
+ this.gap = '4px';
60
61
  this.color = undefined;
61
62
  this.activeItem = null;
62
63
  this.data = [];
@@ -105,7 +106,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
105
106
  'bcm-dropdown__icon--open': isOpen,
106
107
  });
107
108
  const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
108
- return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e) }))));
109
+ return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e), gap: this.gap, dropdown: true }))));
109
110
  }
110
111
  get el() { return this; }
111
112
  static get watchers() { return {
@@ -139,6 +140,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
139
140
  "minHeight": [1, "min-height"],
140
141
  "stopDeepClean": [4, "stop-deep-clean"],
141
142
  "selectable": [4],
143
+ "gap": [1],
142
144
  "color": [8],
143
145
  "data": [1032],
144
146
  "activeItem": [32],
@@ -116,8 +116,8 @@ const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, ch
116
116
  const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
117
117
  const setScrollHeight = () => {
118
118
  const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
119
- const itemCount = searchFound >= 0 || (treeview ? items.length : totalData);
120
- let scrollHeight = itemCount * itemHeight || 0;
119
+ const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
120
+ const scrollHeight = itemCount * itemHeight || 0;
121
121
  return {
122
122
  'min-height': `${scrollHeight}px`,
123
123
  'overscroll-behavior': 'none',
@@ -16,9 +16,9 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
16
16
  constructor() {
17
17
  super();
18
18
  this.__registerHost();
19
- this.beforeOpen = createEvent(this, "beforeOpen", 7);
20
- this.beforeClose = createEvent(this, "beforeClose", 7);
21
19
  this.close = createEvent(this, "bcm-close", 7);
20
+ this.modalBeforeClose = createEvent(this, "bcm-modal-before-close", 7);
21
+ this.modalBeforeOpen = createEvent(this, "bcm-modal-before-open", 7);
22
22
  this.modalSlots = {};
23
23
  this._id = Generate.UID();
24
24
  this.isShow = false;
@@ -63,14 +63,20 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
63
63
  this.hide();
64
64
  }
65
65
  }
66
- async hide() {
67
- this.beforeClose.emit(this.el);
68
- this.isShow = false;
69
- this.close.emit(this);
66
+ async hide(obj = { force: false }) {
67
+ if (obj === null || obj === void 0 ? void 0 : obj.force) {
68
+ this.isShow = false;
69
+ this.close.emit(); // Deprecated
70
+ return;
71
+ }
72
+ this.modalBeforeClose.emit(this.el);
70
73
  }
71
- async show() {
72
- this.beforeOpen.emit(this.el);
73
- this.isShow = true;
74
+ async show(obj = { force: false }) {
75
+ if (obj === null || obj === void 0 ? void 0 : obj.force) {
76
+ this.isShow = true;
77
+ return;
78
+ }
79
+ this.modalBeforeOpen.emit(this.el);
74
80
  }
75
81
  keyboardNavigation(e) {
76
82
  if (this.backdrop == true) {
@@ -81,6 +87,24 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
81
87
  }
82
88
  }
83
89
  }
90
+ async showModal(e) {
91
+ if (e.defaultPrevented) {
92
+ return;
93
+ }
94
+ if (e.target === this.el) {
95
+ this.isShow = true;
96
+ // document.body.appendChild(this.el); A solution must be found for this.
97
+ }
98
+ }
99
+ async hideModal(e) {
100
+ if (e.defaultPrevented) {
101
+ return;
102
+ }
103
+ if (e.target === this.el) {
104
+ this.isShow = false;
105
+ this.close.emit(); // Deprecated
106
+ }
107
+ }
84
108
  _openHandler() {
85
109
  const disableScrollClass = `bcm-modal--disable-scroll-${this._id}`;
86
110
  if (this.isShow) {
@@ -131,7 +155,7 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
131
155
  "fullWidth": [1028, "full-width"],
132
156
  "hide": [64],
133
157
  "show": [64]
134
- }, [[8, "click", "handleSubmit"], [4, "keydown", "keyboardNavigation"]]]);
158
+ }, [[8, "click", "handleSubmit"], [4, "keydown", "keyboardNavigation"], [4, "bcm-modal-before-open", "showModal"], [4, "bcm-modal-before-close", "hideModal"]]]);
135
159
  function defineCustomElement$1() {
136
160
  if (typeof customElements === "undefined") {
137
161
  return;
@@ -843,7 +843,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
843
843
  if (text) {
844
844
  this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
845
845
  (this.type === Types.range && 'invalid date range') ||
846
- (this.type === Types.date && 'invalid date') ||
846
+ (this.type === Types.date && 'The selected date is not allowed.') ||
847
847
  (this.type === Types.time && 'invalid time'));
848
848
  }
849
849
  this.setValue(true);
@@ -1401,14 +1401,11 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
1401
1401
  });
1402
1402
  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>`;
1403
1403
  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>`;
1404
+ const errorIcon = `<svg style="fill: #ef4444; 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 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
1404
1405
  const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
1405
1406
  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: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
1406
1407
  // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
1407
- 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", {
1408
- // slot="suffix"
1409
- // title={this.errorText}
1410
- icon: "far fa-exclamation-circle"
1411
- })))), 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: {
1408
+ noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), 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: {
1412
1409
  'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
1413
1410
  'not-this-month': !day.thisMonth,
1414
1411
  'is-weekend': day.isWeekend,
@@ -25,7 +25,7 @@ var TypeProps;
25
25
  TypeProps["basic"] = "basic";
26
26
  })(TypeProps || (TypeProps = {}));
27
27
 
28
- const version = "2.8.1-rc.4";
28
+ const version = "2.8.1-rc.6";
29
29
 
30
30
  function snq(callback, defaultValue) {
31
31
  try {
@@ -14,7 +14,7 @@ import './element-dragger.js';
14
14
  import './bcm.js';
15
15
  import { I as IsLoad } from './is-load-decorator.js';
16
16
 
17
- const menuCss = "@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}*{box-sizing:border-box}.bcm-menu{--bcm-menu-color-default:var(--bcm-new-ds-color-slate-700);--bcm-menu-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-default:var(--bcm-new-ds-color-slate-600);--bcm-menu-color-hover:var(--bcm-new-ds-color-slate-800);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-menu-icon-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-menu-color-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active:var(--bcm-color-primary-500);--bcm-menu-icon-color-active:var(--bcm-new-ds-color-white);--bcm-menu-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-focus-visible:var(--bcm-color-primary-600);--bcm-menu-icon-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-menu-icon-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-hover:var(--bcm-color-primary-400);--bcm-menu-icon-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-focus-visible:var(--bcm-color-primary-700);--bcm-menu-icon-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-active-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-active:var(--bcm-color-primary-800);--bcm-menu-icon-color-active-active:var(--bcm-new-ds-color-white);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;position:relative;width:210px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);transition:background-color 0.1s ease-in-out, width 0.3s ease-in-out}.bcm-menu__container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:16px}.bcm-menu__item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;font:inherit;cursor:pointer;color:inherit;background-color:inherit;padding:0;margin:0;border:none;outline:none;text-decoration:none}.bcm-menu__item:hover,.bcm-menu__item:focus,.bcm-menu__item:active{outline:none;text-decoration:none}.bcm-menu__item--is-sub{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover);border-radius:4px}.bcm-menu__item--is-sub .bcm-menu__item-link-icon,.bcm-menu__item--is-sub .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:4px;transition:background-color 0.1s ease-in-out, padding 0.3s ease-in-out;color:var(--bcm-menu-color-default);background-color:var(--bcm-menu-background-color-default)}.bcm-menu__item-link-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;min-width:24px;max-width:24px}.bcm-menu__item-link-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bcm-menu__item-link-text--collapse{opacity:0}.bcm-menu__item-link-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:10px;height:100%;order:0;width:24px;transform:rotate(0deg);transition:transform 0.2s ease-in-out;margin-right:-8px}.bcm-menu__item-link-toggle--collapse{transform:rotate(-180deg)}.bcm-menu__item-link .bcm-menu__item-link-icon,.bcm-menu__item-link .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-default)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-focus-visible)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-active)}.bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-submenu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:12px;display:none}.bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu__item-submenu--open{display:flex}.bcm-menu__size-small{padding:8px;font-size:12px;line-height:calc(14px + 8px)}.bcm-menu__size-medium{padding:16px;font-size:14px;line-height:calc(16px + 8px)}.bcm-menu__size-large{padding:16px;font-size:16px;line-height:calc(18px + 8px)}.bcm-menu__collapse-button{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active);display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:14px;border-radius:100px;position:absolute;top:23px;right:-8px;width:18px;height:18px;cursor:pointer;transition:background-color 0.1s ease-in-out, transform 0.3s ease}.bcm-menu__collapse-button:hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__collapse-button:focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__collapse-button:active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__collapse-button--collapsed{transform:rotate(-180deg)}.bcm-menu__collapse{width:64px}.bcm-menu__collapse .bcm-menu__item-link{padding:4px}.bcm-menu--linked{position:absolute;z-index:10800;top:0;left:0;opacity:0;visibility:hidden;width:fit-content;min-height:50px;max-height:500px;height:auto;overflow-y:auto;padding:12px}.bcm-menu--linked.bcm-menu__open{opacity:1;visibility:visible}.bcm-menu--linked .bcm-menu__container{gap:4px}.bcm-menu--linked .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item .bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}";
17
+ const menuCss = "@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}*{box-sizing:border-box}.bcm-menu{--bcm-menu-color-default:var(--bcm-new-ds-color-slate-700);--bcm-menu-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-default:var(--bcm-new-ds-color-slate-600);--bcm-menu-color-hover:var(--bcm-new-ds-color-slate-800);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-menu-icon-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-menu-color-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active:var(--bcm-color-primary-500);--bcm-menu-icon-color-active:var(--bcm-new-ds-color-white);--bcm-menu-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-focus-visible:var(--bcm-color-primary-600);--bcm-menu-icon-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-menu-icon-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-color-dropdownDisabled:var(--bcm-new-ds-color-slate-400);--bcm-menu-background-color-dropdownDisabled:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-dropdownDisabled:var(--bcm-new-ds-color-slate-400);--bcm-menu-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-hover:var(--bcm-color-primary-400);--bcm-menu-icon-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-focus-visible:var(--bcm-color-primary-700);--bcm-menu-icon-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-active-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-active:var(--bcm-color-primary-800);--bcm-menu-icon-color-active-active:var(--bcm-new-ds-color-white);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;position:relative;width:210px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);transition:background-color 0.1s ease-in-out, width 0.3s ease-in-out}.bcm-menu__container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap}.bcm-menu__item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;font:inherit;cursor:pointer;color:inherit;background-color:inherit;padding:0;margin:0;border:none;outline:none;text-decoration:none}.bcm-menu__item:hover,.bcm-menu__item:focus,.bcm-menu__item:active{outline:none;text-decoration:none}.bcm-menu__item--is-sub{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover);border-radius:4px}.bcm-menu__item--is-sub .bcm-menu__item-link-icon,.bcm-menu__item--is-sub .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:4px;transition:background-color 0.1s ease-in-out, padding 0.3s ease-in-out;color:var(--bcm-menu-color-default);background-color:var(--bcm-menu-background-color-default)}.bcm-menu__item-link-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;min-width:24px;max-width:24px}.bcm-menu__item-link-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bcm-menu__item-link-text--collapse{opacity:0}.bcm-menu__item-link-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:10px;height:100%;order:0;width:24px;transform:rotate(0deg);transition:transform 0.2s ease-in-out;margin-right:-8px}.bcm-menu__item-link-toggle--collapse{transform:rotate(-180deg)}.bcm-menu__item-link .bcm-menu__item-link-icon,.bcm-menu__item-link .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-default)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-focus-visible)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-dropdownDisabled);background-color:var(--bcm-menu-background-color-dropdownDisabled)}.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-dropdownDisabled)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-active)}.bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-submenu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:12px;display:none}.bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu__item-submenu--open{display:flex}.bcm-menu__size-small{padding:8px;font-size:12px;line-height:calc(14px + 8px)}.bcm-menu__size-medium{padding:16px;font-size:14px;line-height:calc(16px + 8px)}.bcm-menu__size-large{padding:16px;font-size:16px;line-height:calc(18px + 8px)}.bcm-menu__collapse-button{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active);display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:14px;border-radius:100px;position:absolute;top:23px;right:-8px;width:18px;height:18px;cursor:pointer;transition:background-color 0.1s ease-in-out, transform 0.3s ease}.bcm-menu__collapse-button:hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__collapse-button:focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__collapse-button:active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__collapse-button--collapsed{transform:rotate(-180deg)}.bcm-menu__collapse{width:64px}.bcm-menu__collapse .bcm-menu__item-link{padding:4px}.bcm-menu--linked{position:absolute;z-index:10800;top:0;left:0;opacity:0;visibility:hidden;width:fit-content;min-height:50px;max-height:500px;height:auto;overflow-y:auto;padding:12px}.bcm-menu--linked.bcm-menu__open{opacity:1;visibility:visible}.bcm-menu--linked .bcm-menu__container{gap:4px}.bcm-menu--linked .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item .bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__dropdown{width:auto;max-width:210px}.bcm-menu__dropdown .bcm-menu__item-link--disabled{color:var(--bcm-menu-color-dropdownDisabled);background-color:var(--bcm-menu-background-color-dropdownDisabled)}.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-dropdownDisabled)}";
18
18
 
19
19
  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
20
20
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -45,6 +45,8 @@ const BcmMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
45
45
  this.maxHeight = '500px';
46
46
  this.minHeight = '150px';
47
47
  this.selectable = true;
48
+ this.gap = "16px";
49
+ this.dropdown = false;
48
50
  this.placement = 'bottom-start';
49
51
  this.activeItemId = undefined;
50
52
  this.data = [];
@@ -92,7 +94,8 @@ const BcmMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
92
94
  render() {
93
95
  const { data, collapsible, collapse } = this;
94
96
  const hostClasses = classnames('bcm-menu', `bcm-menu__size-${this.size}`, {
95
- 'bcm-menu__collapse': collapse
97
+ 'bcm-menu__collapse': collapse,
98
+ 'bcm-menu__dropdown': this.dropdown,
96
99
  });
97
100
  const MenuLinkTemplate = (item, index) => {
98
101
  if (!item.text)
@@ -120,7 +123,7 @@ const BcmMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
120
123
  'bcm-menu__item-submenu--open': item.isOpen,
121
124
  }) }, item.items.map((subItem, subIndex) => MenuLinkTemplate(subItem, subIndex))))));
122
125
  };
123
- return (h(Host, { class: hostClasses, disabled: this.disabled }, h("div", { class: "bcm-menu__container" }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: classnames('bcm-menu__collapse-button', {
126
+ return (h(Host, { class: hostClasses, disabled: this.disabled }, h("div", { class: "bcm-menu__container", style: { gap: this.gap } }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: classnames('bcm-menu__collapse-button', {
124
127
  'bcm-menu__collapse-button--collapsed': collapse,
125
128
  }), onClick: () => {
126
129
  this.collapse = !collapse;
@@ -142,6 +145,8 @@ const BcmMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
142
145
  "maxHeight": [1025, "max-height"],
143
146
  "minHeight": [1025, "min-height"],
144
147
  "selectable": [4],
148
+ "gap": [1],
149
+ "dropdown": [4],
145
150
  "placement": [1025],
146
151
  "data": [1032],
147
152
  "activeItemId": [32],
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
5
  import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
6
- import { G as Generate } from './generate-dab287b3.js';
6
+ import { G as Generate } from './generate-4adaaf05.js';
7
7
  import './colors-44c95e7e.js';
8
8
  import './_commonjsHelpers-3016b722.js';
9
9
 
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
5
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
6
- import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-dab287b3.js';
6
+ import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-4adaaf05.js';
7
7
  import { c as classnames } from './index-ed9652af.js';
8
8
  import { c as createStore } from './index-93e36fdb.js';
9
9
  import { S as StringHelper } from './string-helper-6bd24967.js';
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
5
  import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
6
- import { G as Generate } from './generate-dab287b3.js';
6
+ import { G as Generate } from './generate-4adaaf05.js';
7
7
  import './colors-44c95e7e.js';
8
8
  import './_commonjsHelpers-3016b722.js';
9
9
 
@@ -5,10 +5,10 @@
5
5
  import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
6
6
  import { C as ColorHelper } from './color-helper-e8ce23d7.js';
7
7
  import './datetime-helper-df25808a.js';
8
- import { G as Generate } from './generate-dab287b3.js';
9
- import { N as NumberHelper } from './number-helper-026bc937.js';
8
+ import { G as Generate } from './generate-4adaaf05.js';
9
+ import { N as NumberHelper } from './number-helper-d1650a56.js';
10
10
  import './string-helper-6bd24967.js';
11
- import './validators-d525dbd6.js';
11
+ import './validators-7d87bb83.js';
12
12
  import './element-dragger-89bb52fd.js';
13
13
  import { a as Bcm } from './bcm-9f50af9c.js';
14
14
  import { c as classnames } from './index-ed9652af.js';
@@ -4,7 +4,7 @@
4
4
  */
5
5
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
6
6
  import { c as classnames } from './index-ed9652af.js';
7
- import { G as Generate } from './generate-dab287b3.js';
7
+ import { G as Generate } from './generate-4adaaf05.js';
8
8
  import './_commonjsHelpers-3016b722.js';
9
9
  import './colors-44c95e7e.js';
10
10
 
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
5
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
6
- import { G as Generate, s as snq } from './generate-dab287b3.js';
6
+ import { G as Generate, s as snq } from './generate-4adaaf05.js';
7
7
  import { B as Bcm } from './bcm-9f50af9c.js';
8
8
  import { c as classnames } from './index-ed9652af.js';
9
9
  import { S as StringHelper } from './string-helper-6bd24967.js';
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
5
  import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-39133086.js';
6
- import { s as snq, G as Generate } from './generate-dab287b3.js';
6
+ import { s as snq, G as Generate } from './generate-4adaaf05.js';
7
7
  import { B as Bcm, a as Bcm$1 } from './bcm-9f50af9c.js';
8
8
  import { c as classnames } from './index-ed9652af.js';
9
9
  import { c as createStore } from './index-93e36fdb.js';
@@ -15,9 +15,9 @@ import { I as IsLoad } from './is-load-decorator-bc14ec4b.js';
15
15
  import { L as LabelTemplate } from './label-template-d74fe788.js';
16
16
  import { S as StringHelper } from './string-helper-6bd24967.js';
17
17
  import './datetime-helper-df25808a.js';
18
- import './number-helper-026bc937.js';
19
- import './validators-d525dbd6.js';
20
- import { T as Tooltip } from './tooltip-helper-6cbb0b45.js';
18
+ import './number-helper-d1650a56.js';
19
+ import './validators-7d87bb83.js';
20
+ import { T as Tooltip } from './tooltip-helper-5fdae0e3.js';
21
21
  import './element-dragger-89bb52fd.js';
22
22
  import './colors-44c95e7e.js';
23
23
  import './_commonjsHelpers-3016b722.js';
@@ -5,7 +5,7 @@
5
5
  import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
6
6
  import { c as classnames } from './index-ed9652af.js';
7
7
  import { C as ColorHelper } from './color-helper-e8ce23d7.js';
8
- import { G as Generate } from './generate-dab287b3.js';
8
+ import { G as Generate } from './generate-4adaaf05.js';
9
9
  import { S as StringHelper } from './string-helper-6bd24967.js';
10
10
  import { S as SlotTemplate } from './slot-template-5b2db362.js';
11
11
  import './_commonjsHelpers-3016b722.js';
@@ -4,7 +4,7 @@
4
4
  */
5
5
  import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-39133086.js';
6
6
  import { c as classnames } from './index-ed9652af.js';
7
- import { G as Generate } from './generate-dab287b3.js';
7
+ import { G as Generate } from './generate-4adaaf05.js';
8
8
  import { B as Bcm } from './bcm-9f50af9c.js';
9
9
  import { c as getChilds, d as delay } from './utils-57652744.js';
10
10
  import './_commonjsHelpers-3016b722.js';
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) Bromcom.
4
4
  */
5
5
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
6
- import { G as Generate } from './generate-dab287b3.js';
6
+ import { G as Generate } from './generate-4adaaf05.js';
7
7
  import { c as classnames } from './index-ed9652af.js';
8
8
  import { C as ColorHelper } from './color-helper-e8ce23d7.js';
9
9
  import './colors-44c95e7e.js';
@@ -4,7 +4,7 @@
4
4
  */
5
5
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
6
6
  import { c as classnames } from './index-ed9652af.js';
7
- import { G as Generate } from './generate-dab287b3.js';
7
+ import { G as Generate } from './generate-4adaaf05.js';
8
8
  import './_commonjsHelpers-3016b722.js';
9
9
  import './colors-44c95e7e.js';
10
10
 
@@ -5,10 +5,10 @@
5
5
  import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-39133086.js';
6
6
  import './color-helper-e8ce23d7.js';
7
7
  import './datetime-helper-df25808a.js';
8
- import { G as Generate } from './generate-dab287b3.js';
9
- import './number-helper-026bc937.js';
8
+ import { G as Generate } from './generate-4adaaf05.js';
9
+ import './number-helper-d1650a56.js';
10
10
  import './string-helper-6bd24967.js';
11
- import './validators-d525dbd6.js';
11
+ import './validators-7d87bb83.js';
12
12
  import './element-dragger-89bb52fd.js';
13
13
  import './bcm-9f50af9c.js';
14
14
  import './colors-1d7854ea.js';
@@ -7,10 +7,10 @@ import { r as react, a as reactDom } from './index-6310a048.js';
7
7
  import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-3016b722.js';
8
8
  import './color-helper-e8ce23d7.js';
9
9
  import './datetime-helper-df25808a.js';
10
- import { G as Generate } from './generate-dab287b3.js';
11
- import './number-helper-026bc937.js';
10
+ import { G as Generate } from './generate-4adaaf05.js';
11
+ import './number-helper-d1650a56.js';
12
12
  import './string-helper-6bd24967.js';
13
- import './validators-d525dbd6.js';
13
+ import './validators-7d87bb83.js';
14
14
  import './element-dragger-89bb52fd.js';
15
15
  import { d as delay } from './utils-57652744.js';
16
16
  import { F as FloatingUI } from './floating-ui-e7341329.js';