bromcom-ui 2.10.1-rc.8 → 2.10.1-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 (210) hide show
  1. package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
  2. package/dist/bromcom-ui/{p-4fa87784.entry.js → p-086cda42.entry.js} +1 -1
  3. package/dist/bromcom-ui/{p-959bd1f2.entry.js → p-0a7346a7.entry.js} +1 -1
  4. package/dist/bromcom-ui/{p-68783ef4.js → p-1c26a0c1.js} +1 -1
  5. package/dist/bromcom-ui/{p-158e239a.js → p-1e8ba7b1.js} +1 -1
  6. package/dist/bromcom-ui/{p-7e5c626f.entry.js → p-2f46157a.entry.js} +1 -1
  7. package/dist/bromcom-ui/{p-df3caf0b.entry.js → p-366262cb.entry.js} +1 -1
  8. package/dist/bromcom-ui/{p-8e1446c2.entry.js → p-377eec7f.entry.js} +1 -1
  9. package/dist/bromcom-ui/{p-55c2ceb3.entry.js → p-39134670.entry.js} +1 -1
  10. package/dist/bromcom-ui/p-48a57eb6.entry.js +5 -0
  11. package/dist/bromcom-ui/{p-6a95fe9c.entry.js → p-4bcb29c3.entry.js} +1 -1
  12. package/dist/bromcom-ui/{p-2b732ae9.entry.js → p-4c30ce4b.entry.js} +1 -1
  13. package/dist/bromcom-ui/{p-d524c5ad.entry.js → p-4e577842.entry.js} +1 -1
  14. package/dist/bromcom-ui/p-56655c71.js +5 -0
  15. package/dist/bromcom-ui/{p-fb68d2b9.entry.js → p-66929631.entry.js} +1 -1
  16. package/dist/bromcom-ui/{p-6ae3b6a6.entry.js → p-6a6c51e1.entry.js} +1 -1
  17. package/dist/bromcom-ui/{p-dab56656.entry.js → p-6bbedf32.entry.js} +1 -1
  18. package/dist/bromcom-ui/p-6fe10a4c.entry.js +21 -0
  19. package/dist/bromcom-ui/{p-0afd0de5.entry.js → p-73789dbb.entry.js} +1 -1
  20. package/dist/bromcom-ui/{p-bdc3dfe7.entry.js → p-761208cf.entry.js} +1 -1
  21. package/dist/bromcom-ui/{p-65e822e5.entry.js → p-769facbd.entry.js} +1 -1
  22. package/dist/bromcom-ui/{p-5e10c0d0.entry.js → p-78ace67b.entry.js} +1 -1
  23. package/dist/bromcom-ui/{p-8c059c8f.entry.js → p-7a2ea416.entry.js} +1 -1
  24. package/dist/bromcom-ui/{p-9a4ec5cd.entry.js → p-7b02eb85.entry.js} +1 -1
  25. package/dist/bromcom-ui/{p-8fc8465e.entry.js → p-7cf44256.entry.js} +1 -1
  26. package/dist/bromcom-ui/{p-ee7deb92.js → p-81a2c866.js} +1 -1
  27. package/dist/bromcom-ui/{p-287e0daf.entry.js → p-8348f7e8.entry.js} +1 -1
  28. package/dist/bromcom-ui/{p-e35d7cdb.entry.js → p-84ff5d64.entry.js} +1 -1
  29. package/dist/bromcom-ui/{p-a673ded0.entry.js → p-8839e454.entry.js} +1 -1
  30. package/dist/bromcom-ui/{p-5333b8a9.entry.js → p-8af69fbb.entry.js} +1 -1
  31. package/dist/bromcom-ui/{p-d60d61ef.entry.js → p-8d16573c.entry.js} +1 -1
  32. package/dist/bromcom-ui/{p-52ff9dba.entry.js → p-8ea1d342.entry.js} +1 -1
  33. package/dist/bromcom-ui/p-9f886bdd.js +5 -0
  34. package/dist/bromcom-ui/p-a0d60a3c.js +5 -0
  35. package/dist/bromcom-ui/{p-1217d1cc.entry.js → p-a55d0baf.entry.js} +1 -1
  36. package/dist/bromcom-ui/{p-46f050bf.entry.js → p-a9769aef.entry.js} +1 -1
  37. package/dist/bromcom-ui/{p-34b8c656.entry.js → p-b04dbde5.entry.js} +1 -1
  38. package/dist/bromcom-ui/{p-a1cf7a95.js → p-b4e67a0b.js} +1 -1
  39. package/dist/bromcom-ui/{p-1a78f916.entry.js → p-b50bee51.entry.js} +1 -1
  40. package/dist/bromcom-ui/{p-e5da6586.entry.js → p-bc0e11d2.entry.js} +1 -1
  41. package/dist/bromcom-ui/{p-b159de87.entry.js → p-c1b1c0b4.entry.js} +1 -1
  42. package/dist/bromcom-ui/{p-7a41aa71.entry.js → p-c285ac3e.entry.js} +1 -1
  43. package/dist/bromcom-ui/{p-14fd3758.entry.js → p-c40a820f.entry.js} +1 -1
  44. package/dist/bromcom-ui/{p-cc766928.entry.js → p-c658e7f0.entry.js} +1 -1
  45. package/dist/bromcom-ui/{p-90dab132.entry.js → p-cc556e65.entry.js} +1 -1
  46. package/dist/bromcom-ui/{p-0bfcafe6.entry.js → p-ce45a5a0.entry.js} +1 -1
  47. package/dist/bromcom-ui/{p-e2d8ea02.entry.js → p-d0c1fcc5.entry.js} +1 -1
  48. package/dist/bromcom-ui/{p-d44629f7.js → p-d2b358ae.js} +1 -1
  49. package/dist/bromcom-ui/{p-3ef0b082.entry.js → p-d65c93dd.entry.js} +1 -1
  50. package/dist/bromcom-ui/{p-3572e61d.entry.js → p-d706b0bd.entry.js} +1 -1
  51. package/dist/bromcom-ui/{p-fbcabfc4.entry.js → p-d82d0c57.entry.js} +1 -1
  52. package/dist/bromcom-ui/{p-8fa8e79c.entry.js → p-da0a6963.entry.js} +1 -1
  53. package/dist/bromcom-ui/{p-6019525e.entry.js → p-e32e4c09.entry.js} +1 -1
  54. package/dist/bromcom-ui/{p-14fe40fb.entry.js → p-ea18d38d.entry.js} +1 -1
  55. package/dist/bromcom-ui/{p-b93574f2.entry.js → p-eab01ad5.entry.js} +1 -1
  56. package/dist/bromcom-ui/{p-3ef14eb8.js → p-eb2c11e0.js} +1 -1
  57. package/dist/bromcom-ui/{p-773efa33.entry.js → p-ec2688a7.entry.js} +1 -1
  58. package/dist/bromcom-ui/{p-75e93eca.entry.js → p-ed3b97b0.entry.js} +1 -1
  59. package/dist/bromcom-ui/{p-38881f2d.entry.js → p-f0a6db76.entry.js} +1 -1
  60. package/dist/bromcom-ui/{p-6041dfd1.entry.js → p-f1829cae.entry.js} +1 -1
  61. package/dist/bromcom-ui/{p-60530295.entry.js → p-f327dd16.entry.js} +1 -1
  62. package/dist/bromcom-ui/{p-5f3a31ac.entry.js → p-f824e6bb.entry.js} +1 -1
  63. package/dist/bromcom-ui/{p-4e5c3c68.entry.js → p-fe585083.entry.js} +1 -1
  64. package/dist/cjs/bcm-accordion.cjs.entry.js +2 -2
  65. package/dist/cjs/bcm-alert.cjs.entry.js +2 -2
  66. package/dist/cjs/bcm-attendance.cjs.entry.js +2 -2
  67. package/dist/cjs/bcm-avatar_2.cjs.entry.js +4 -4
  68. package/dist/cjs/bcm-breadcrumb.cjs.entry.js +2 -2
  69. package/dist/cjs/bcm-button-group.cjs.entry.js +2 -2
  70. package/dist/cjs/{bcm-button_12.cjs.entry.js → bcm-button_15.cjs.entry.js} +5403 -772
  71. package/dist/cjs/bcm-caption.cjs.entry.js +5 -5
  72. package/dist/cjs/bcm-card.cjs.entry.js +2 -2
  73. package/dist/cjs/bcm-checkbox-group.cjs.entry.js +2 -2
  74. package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +2 -2
  75. package/dist/cjs/bcm-chip-group.cjs.entry.js +4 -4
  76. package/dist/cjs/bcm-chip.cjs.entry.js +2 -2
  77. package/dist/cjs/bcm-collapse.cjs.entry.js +2 -2
  78. package/dist/cjs/bcm-color-input.cjs.entry.js +4 -4
  79. package/dist/cjs/bcm-date-picker.cjs.entry.js +2 -2
  80. package/dist/cjs/bcm-datetime-picker.cjs.entry.js +2 -2
  81. package/dist/cjs/bcm-default.cjs.entry.js +2 -2
  82. package/dist/cjs/bcm-drawer.cjs.entry.js +4 -4
  83. package/dist/cjs/bcm-dropdown.cjs.entry.js +3 -3
  84. package/dist/cjs/bcm-expansion-panel.cjs.entry.js +2 -2
  85. package/dist/cjs/bcm-form-2.cjs.entry.js +2 -2
  86. package/dist/cjs/bcm-input-custom.cjs.entry.js +2 -2
  87. package/dist/cjs/bcm-input-dropdown.cjs.entry.js +4 -4
  88. package/dist/cjs/bcm-item.cjs.entry.js +2 -2
  89. package/dist/cjs/bcm-items.cjs.entry.js +2 -2
  90. package/dist/cjs/bcm-menu.cjs.entry.js +5 -5
  91. package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +4 -4
  92. package/dist/cjs/bcm-modal-2-header.cjs.entry.js +4 -4
  93. package/dist/cjs/bcm-modal-2.cjs.entry.js +4 -4
  94. package/dist/cjs/bcm-modal.cjs.entry.js +2 -2
  95. package/dist/cjs/bcm-number-input.cjs.entry.js +4 -4
  96. package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +2 -2
  97. package/dist/cjs/bcm-popconfirm.cjs.entry.js +2 -2
  98. package/dist/cjs/bcm-popover.cjs.entry.js +4 -4
  99. package/dist/cjs/bcm-progress.cjs.entry.js +2 -2
  100. package/dist/cjs/bcm-radio-group.cjs.entry.js +4 -4
  101. package/dist/cjs/bcm-radio.cjs.entry.js +4 -4
  102. package/dist/cjs/bcm-range.cjs.entry.js +2 -2
  103. package/dist/cjs/bcm-shortcut.cjs.entry.js +4 -4
  104. package/dist/cjs/bcm-skeleton.cjs.entry.js +4 -4
  105. package/dist/cjs/bcm-step.cjs.entry.js +3 -3
  106. package/dist/cjs/bcm-stepper.cjs.entry.js +5 -5
  107. package/dist/cjs/bcm-tab-group.cjs.entry.js +4 -4
  108. package/dist/cjs/bcm-tab-item-header.cjs.entry.js +4 -4
  109. package/dist/cjs/bcm-tab-item.cjs.entry.js +4 -4
  110. package/dist/cjs/bcm-table.cjs.entry.js +4 -4
  111. package/dist/cjs/bcm-tag.cjs.entry.js +3 -3
  112. package/dist/cjs/bcm-textarea.cjs.entry.js +3 -3
  113. package/dist/cjs/bcm-time-picker.cjs.entry.js +2 -2
  114. package/dist/cjs/bcm-toast.cjs.entry.js +2 -2
  115. package/dist/cjs/bromcom-ui.cjs.js +3 -3
  116. package/dist/cjs/{generate-519a6f60.js → generate-a89cbf95.js} +6 -1
  117. package/dist/cjs/{global-24e9cd51.js → global-12727d81.js} +1 -1
  118. package/dist/cjs/{input-template-ca9b1a22.js → input-template-aed0898b.js} +1 -1
  119. package/dist/cjs/{json-parse-decarator-317c4169.js → json-parse-decarator-f6d01750.js} +1 -1
  120. package/dist/cjs/loader.cjs.js +3 -3
  121. package/dist/cjs/{number-helper-2a2c064b.js → number-helper-ed1167a6.js} +1 -1
  122. package/dist/cjs/old-bcm-popover-box.cjs.entry.js +3 -3
  123. package/dist/cjs/old-bcm-popover.cjs.entry.js +2 -2
  124. package/dist/cjs/{package-ea2a6174.js → package-e3618032.js} +1 -1
  125. package/dist/cjs/{stepper-states-3728e4c6.js → stepper-states-5cde5a5b.js} +1 -1
  126. package/dist/cjs/{tooltip-helper-51fdcf10.js → tooltip-helper-8e999092.js} +3 -3
  127. package/dist/cjs/{validators-d3fdc836.js → validators-ca50c59e.js} +1 -1
  128. package/dist/collection/components/organism/list/list.js +3 -3
  129. package/dist/collection/helper/generate.js +5 -0
  130. package/dist/collection/templates/list-item-template.js +3 -2
  131. package/dist/components/bcm-caption.js +2 -2
  132. package/dist/components/generate.js +6 -1
  133. package/dist/components/list.js +6 -5
  134. package/dist/esm/bcm-accordion.entry.js +2 -2
  135. package/dist/esm/bcm-alert.entry.js +2 -2
  136. package/dist/esm/bcm-attendance.entry.js +2 -2
  137. package/dist/esm/bcm-avatar_2.entry.js +4 -4
  138. package/dist/esm/bcm-breadcrumb.entry.js +2 -2
  139. package/dist/esm/bcm-button-group.entry.js +2 -2
  140. package/dist/esm/{bcm-button_12.entry.js → bcm-button_15.entry.js} +4930 -302
  141. package/dist/esm/bcm-caption.entry.js +5 -5
  142. package/dist/esm/bcm-card.entry.js +2 -2
  143. package/dist/esm/bcm-checkbox-group.entry.js +2 -2
  144. package/dist/esm/bcm-checkbox-lite_9.entry.js +2 -2
  145. package/dist/esm/bcm-chip-group.entry.js +4 -4
  146. package/dist/esm/bcm-chip.entry.js +2 -2
  147. package/dist/esm/bcm-collapse.entry.js +2 -2
  148. package/dist/esm/bcm-color-input.entry.js +4 -4
  149. package/dist/esm/bcm-date-picker.entry.js +2 -2
  150. package/dist/esm/bcm-datetime-picker.entry.js +2 -2
  151. package/dist/esm/bcm-default.entry.js +2 -2
  152. package/dist/esm/bcm-drawer.entry.js +4 -4
  153. package/dist/esm/bcm-dropdown.entry.js +3 -3
  154. package/dist/esm/bcm-expansion-panel.entry.js +2 -2
  155. package/dist/esm/bcm-form-2.entry.js +2 -2
  156. package/dist/esm/bcm-input-custom.entry.js +2 -2
  157. package/dist/esm/bcm-input-dropdown.entry.js +4 -4
  158. package/dist/esm/bcm-item.entry.js +2 -2
  159. package/dist/esm/bcm-items.entry.js +2 -2
  160. package/dist/esm/bcm-menu.entry.js +5 -5
  161. package/dist/esm/bcm-modal-2-footer.entry.js +4 -4
  162. package/dist/esm/bcm-modal-2-header.entry.js +4 -4
  163. package/dist/esm/bcm-modal-2.entry.js +4 -4
  164. package/dist/esm/bcm-modal.entry.js +2 -2
  165. package/dist/esm/bcm-number-input.entry.js +4 -4
  166. package/dist/esm/bcm-popconfirm-box.entry.js +2 -2
  167. package/dist/esm/bcm-popconfirm.entry.js +2 -2
  168. package/dist/esm/bcm-popover.entry.js +4 -4
  169. package/dist/esm/bcm-progress.entry.js +2 -2
  170. package/dist/esm/bcm-radio-group.entry.js +4 -4
  171. package/dist/esm/bcm-radio.entry.js +4 -4
  172. package/dist/esm/bcm-range.entry.js +2 -2
  173. package/dist/esm/bcm-shortcut.entry.js +4 -4
  174. package/dist/esm/bcm-skeleton.entry.js +4 -4
  175. package/dist/esm/bcm-step.entry.js +3 -3
  176. package/dist/esm/bcm-stepper.entry.js +5 -5
  177. package/dist/esm/bcm-tab-group.entry.js +4 -4
  178. package/dist/esm/bcm-tab-item-header.entry.js +4 -4
  179. package/dist/esm/bcm-tab-item.entry.js +4 -4
  180. package/dist/esm/bcm-table.entry.js +4 -4
  181. package/dist/esm/bcm-tag.entry.js +3 -3
  182. package/dist/esm/bcm-textarea.entry.js +3 -3
  183. package/dist/esm/bcm-time-picker.entry.js +2 -2
  184. package/dist/esm/bcm-toast.entry.js +2 -2
  185. package/dist/esm/bromcom-ui.js +3 -3
  186. package/dist/esm/{generate-172d2481.js → generate-f51f2b02.js} +6 -1
  187. package/dist/esm/{global-d0158081.js → global-d1c1614b.js} +1 -1
  188. package/dist/esm/{input-template-6ce50c6f.js → input-template-43cf6972.js} +1 -1
  189. package/dist/esm/{json-parse-decarator-3847d8d6.js → json-parse-decarator-05d60871.js} +1 -1
  190. package/dist/esm/loader.js +3 -3
  191. package/dist/esm/{number-helper-36dd7ffd.js → number-helper-96513ada.js} +1 -1
  192. package/dist/esm/old-bcm-popover-box.entry.js +3 -3
  193. package/dist/esm/old-bcm-popover.entry.js +2 -2
  194. package/dist/esm/{package-1d2d00da.js → package-ebccec3c.js} +1 -1
  195. package/dist/esm/{stepper-states-d326813d.js → stepper-states-0860f554.js} +1 -1
  196. package/dist/esm/{tooltip-helper-f35ebea5.js → tooltip-helper-ab4dde34.js} +3 -3
  197. package/dist/esm/{validators-6ce73b32.js → validators-f9fdca63.js} +1 -1
  198. package/dist/types/helper/generate.d.ts +1 -0
  199. package/package.json +1 -1
  200. package/dist/bromcom-ui/p-3432a82d.js +0 -19
  201. package/dist/bromcom-ui/p-47e635a4.js +0 -5
  202. package/dist/bromcom-ui/p-521ee4d5.entry.js +0 -7
  203. package/dist/bromcom-ui/p-8d3b9190.entry.js +0 -5
  204. package/dist/bromcom-ui/p-b80edd2e.js +0 -5
  205. package/dist/bromcom-ui/p-d493a8eb.entry.js +0 -5
  206. package/dist/bromcom-ui/p-d85b6c3e.js +0 -5
  207. package/dist/cjs/bcm-list_3.cjs.entry.js +0 -2542
  208. package/dist/cjs/index-7eed931f.js +0 -2146
  209. package/dist/esm/bcm-list_3.entry.js +0 -2536
  210. package/dist/esm/index-e4b6a4ce.js +0 -2127
@@ -1,2542 +0,0 @@
1
- /*!
2
- * Built with Stencil
3
- * Copyright (c) Bromcom.
4
- */
5
- 'use strict';
6
-
7
- Object.defineProperty(exports, '__esModule', { value: true });
8
-
9
- const index$1 = require('./index-c591ecec.js');
10
- const isLoadDecorator = require('./is-load-decorator-15036f37.js');
11
- const jsonParseDecarator = require('./json-parse-decarator-317c4169.js');
12
- require('./color-helper-c3a819ea.js');
13
- require('./datetime-helper-eaf4fadb.js');
14
- const generate = require('./generate-519a6f60.js');
15
- const numberHelper = require('./number-helper-2a2c064b.js');
16
- const stringHelper = require('./string-helper-3212f4ea.js');
17
- const validators = require('./validators-d3fdc836.js');
18
- require('./element-dragger-a8562f82.js');
19
- const popoverPlacement = require('./popover-placement-9b4b4153.js');
20
- const utils = require('./utils-fc077139.js');
21
- const bcm = require('./bcm-3c58a6d5.js');
22
- const captionTemplate = require('./caption-template-6f535b93.js');
23
- const index = require('./index-95ae50d0.js');
24
- require('./types-cc4adee7.js');
25
- require('./types-7523fd99.js');
26
- const index$2 = require('./index-d321de96.js');
27
- const index$3 = require('./index-7eed931f.js');
28
- const inputTemplate = require('./input-template-ca9b1a22.js');
29
- require('./colors-56282b00.js');
30
- require('./colors-078851ec.js');
31
- require('./_commonjsHelpers-ed84c3ca.js');
32
- require('./package-ea2a6174.js');
33
-
34
- const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
35
- // if ( indeterminate ) {
36
- // checked = indeterminate == 'determinate' ? true : false
37
- // }
38
- const hostClasses = index.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
39
- // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
40
- // 'size-3': optionType === 'button' && size === Bcm.Size.large,
41
- 'error': captionType == bcm.Bcm.Status.error,
42
- hidden,
43
- checked,
44
- disabled,
45
- required,
46
- readonly,
47
- });
48
- const bcmCheckboxIconClass = index.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
49
- 'bcm-checkbox__label-icon-checked': checked,
50
- });
51
- const bcmCheckboxLabelClass = index.classnames('bcm-checkbox__label');
52
- return (index$1.h("div", { class: hostClasses },
53
- index$1.h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
54
- index$1.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
55
- index$1.h("span", { class: bcmCheckboxIconClass },
56
- index$1.h("bcm-icon", { icon: "far fa-check" })))));
57
- };
58
-
59
- const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
60
- total = total || 0;
61
- variableText = variableText ? utils.pluralize(variableText, total) : 'items';
62
- return (index$1.h("footer", { class: "bcm-info-footer" },
63
- index$1.h("bcm-text", { scale: "size-1", color: "grey-8" },
64
- (multiple && selected > 0) && ` ( ${selected} selected ) `,
65
- ` Total ${total} `,
66
- found != null && ` / ${found} `,
67
- ` ${variableText} found. `)));
68
- };
69
-
70
- const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
71
- const isHaveChildren = item.items && item.items.length > 0;
72
- var text = stringHelper.StringHelper.htmlEntities(item.text);
73
- let intersection = [];
74
- if (highlight && stringHelper.StringHelper.slugify(text).includes(stringHelper.StringHelper.slugify(highlight))) {
75
- if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
76
- text = stringHelper.StringHelper.highlight(text, highlight);
77
- }
78
- }
79
- if (item.type != 'group' && item.template) {
80
- const match = item.template
81
- .replace(/\s/g, '')
82
- .match(/\{{[^}}]+\}/g)
83
- .map(x => x.replace(/[{}]/g, ''));
84
- const keys = Object.keys(item.itemObject);
85
- intersection = match.filter(x => keys.includes(x));
86
- }
87
- text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? stringHelper.StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
88
- const unClickable = !treeview && item.type == "group" && !item.clickable;
89
- const disabled = item.disabled;
90
- const readonly = item.readonly;
91
- const itemClick = (event) => {
92
- let path = event.path || event.composedPath();
93
- if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
94
- return;
95
- }
96
- if (readonly) {
97
- collapseClick();
98
- }
99
- !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
100
- };
101
- const collapseClick = () => {
102
- item.open = item.isSearching;
103
- openGroup(item.id);
104
- };
105
- return (index$1.h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), class: index.classnames('bcm-list__item',
106
- // size === 'large' ? 'size-3' : 'size-2',
107
- 'bcm-list__item-' + size, {
108
- 'bcm-list__item--group': !treeview && item.type == 'group',
109
- 'bcm-list__item--readonly': readonly,
110
- }) },
111
- index$1.h("div", { class: index.classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled: disabled }) },
112
- treeview && (index$1.h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && index$1.h("bcm-icon", { icon: index.classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
113
- index$1.h("div", { class: index.classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
114
- checkboxes && (treeview || (!treeview && item.type != 'group')) && (index$1.h("div", { class: "bcm-list__item-content-text-checkbox" },
115
- index$1.h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
116
- index$1.h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
117
- (treeview || !treeview && item.type == "group") && isHaveChildren && (index$1.h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
118
- item.items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
119
- };
120
-
121
- const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
122
- const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
123
- const setScrollHeight = () => {
124
- const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
125
- const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
126
- const scrollHeight = itemCount * itemHeight || 0;
127
- return {
128
- 'min-height': `${scrollHeight}px`,
129
- 'overscroll-behavior': 'none',
130
- 'height': '100%',
131
- 'display': 'flex',
132
- 'flex-direction': 'column',
133
- };
134
- };
135
- return (index$1.h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
136
- data && searchable && (index$1.h("section", { class: "bcm-list__container-search" },
137
- index$1.h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
138
- index$1.h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } },
139
- index$1.h("div", { style: setScrollHeight() },
140
- checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (index$1.h("section", { class: "bcm-list__container-select-all" },
141
- index$1.h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
142
- items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
143
- (!items || items.length === 0) && searchFound != 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
144
- index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
145
- index$1.h("span", { innerHTML: emptyText || 'No data' })))),
146
- searchFound == 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
147
- index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
148
- index$1.h("span", { innerHTML: emptyText || 'No Data Found' })))))),
149
- infoFooter && data && data.length > 0 && (index$1.h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
150
- };
151
-
152
- const { state: state$1 } = index$2.createStore({
153
- value: new Map(),
154
- });
155
- const setValue$1 = val => {
156
- const { id, dataSource, options } = val;
157
- const { type, treeview, checkboxes, searchable, value, name, label, size, disabled, readonly, highlight, required, hidden, fullWidth, height, maxHeight, minHeight, width, infoFooter, variableText, template, allOpen, keyControl, checkAll, linkedComponent, placeholder, searchPlaceholder, searchIsOnlyChilds, clearable, caption, noCaption, captionType, captionError, placement, } = options;
158
- const itemOptions = { size, checkboxes, template, allOpen, highlight, treeview };
159
- const data = {
160
- id: generate.snq(() => id, generate.Generate.UID),
161
- dataSource: dataSource && dataSource.length > 0 && recursive$1(dataSource, itemOptions),
162
- options: {
163
- type,
164
- treeview,
165
- checkboxes,
166
- searchable,
167
- value,
168
- name,
169
- label,
170
- size,
171
- disabled,
172
- readonly,
173
- highlight,
174
- required,
175
- hidden,
176
- fullWidth,
177
- height,
178
- maxHeight,
179
- minHeight,
180
- width,
181
- infoFooter,
182
- variableText,
183
- template,
184
- allOpen,
185
- keyControl,
186
- checkAll,
187
- linkedComponent,
188
- placeholder,
189
- searchPlaceholder,
190
- searchIsOnlyChilds,
191
- clearable,
192
- caption,
193
- noCaption,
194
- captionType,
195
- captionError,
196
- placement,
197
- },
198
- totalItems: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && calculateTotalItems(dataSource, options.treeview),
199
- totalRoots: dataSource === null || dataSource === void 0 ? void 0 : dataSource.length,
200
- };
201
- state$1.value.set(data.id, data);
202
- };
203
- const recursive$1 = (data, options, parentId, parentIndex = "0.") => {
204
- let recData = [];
205
- if (data && data.length > 0) {
206
- recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: generate.snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
207
- ? { items: generate.snq(() => recursive$1(item.items, options, item.id, `${parentIndex}${index}`), []) }
208
- : { items: [] })), { ct: `${parentIndex}${index}` })));
209
- }
210
- return recData;
211
- };
212
- const removeValue$1 = _id => {
213
- state$1.value.delete(_id);
214
- };
215
- const getValue$1 = id => generate.snq(() => state$1.value.get(id), {});
216
- const calculateTotalItems = (dataSource, treeview) => {
217
- let total = 0;
218
- dataSource.forEach(item => {
219
- if (treeview || (!treeview && item.type != "group")) {
220
- total += 1;
221
- }
222
- if ((treeview || (!treeview && item.type == "group")) && item.items) {
223
- total += calculateTotalItems(item.items, treeview);
224
- }
225
- });
226
- return total;
227
- };
228
- const getData = id => {
229
- let data = [];
230
- const value = getValue$1(id);
231
- if (value) {
232
- const { dataSource } = value;
233
- data = dataSource;
234
- }
235
- return data;
236
- };
237
- const getDataPagination$1 = (id, limit = 3, ids) => {
238
- let data = [];
239
- const value = getValue$1(id);
240
- if (value) {
241
- const { dataSource } = value;
242
- data = !ids ? dataSource.slice(0, limit) : dataSource.filter(item => ids.indexOf(item.id) > -1).slice(0, limit);
243
- }
244
- return data;
245
- };
246
- const openGroup = (id, groupId, items, status) => {
247
- let dataSource;
248
- if (items) {
249
- dataSource = items;
250
- }
251
- else {
252
- const value = getValue$1(id);
253
- dataSource = value.dataSource;
254
- }
255
- if (dataSource) {
256
- dataSource.forEach(item => {
257
- if (status != undefined) {
258
- item.open = status;
259
- }
260
- else if (item.id == groupId) {
261
- item.open = !item.open;
262
- item.isSearching = item.open;
263
- if (!item.open && item.items) {
264
- openGroup(id, groupId, item.items, false);
265
- }
266
- }
267
- else if (item.items) {
268
- openGroup(id, groupId, item.items);
269
- }
270
- });
271
- }
272
- };
273
- const removeOtherTags = (id, ids, items) => {
274
- ids = Array.isArray(ids) ? ids : [ids];
275
- let dataSource;
276
- if (items) {
277
- dataSource = items;
278
- }
279
- else {
280
- const value = getValue$1(id);
281
- dataSource = value.dataSource;
282
- }
283
- if (dataSource) {
284
- ids.forEach(otherTagIds => {
285
- dataSource.forEach(child => {
286
- if (child.id == otherTagIds) {
287
- child.checked = false;
288
- child.itemObject.checked = false;
289
- }
290
- else if (child.items) {
291
- onRemoveItems(id, otherTagIds, child.items);
292
- }
293
- });
294
- });
295
- }
296
- };
297
- const onRemoveItems = (id, itemId, items) => {
298
- if (items) {
299
- items.forEach(item => {
300
- if (item.id == itemId) {
301
- item.checked = false;
302
- item.itemObject.checked = false;
303
- indeterminateStatus(id, item.parentId);
304
- }
305
- else if (item.items) {
306
- onRemoveItems(id, itemId, item.items);
307
- }
308
- });
309
- }
310
- };
311
- const addChecked = (id, ids) => {
312
- const value = getValue$1(id);
313
- if (value) {
314
- ids.forEach(item => {
315
- checkedItem(id, item);
316
- });
317
- }
318
- };
319
- const checkedItem = (id, itemId) => {
320
- findItem(id, itemId);
321
- };
322
- const findItem = (id, itemId, items) => {
323
- itemId = Array.isArray(itemId) ? itemId : [itemId];
324
- let dataSource;
325
- if (items) {
326
- dataSource = items;
327
- }
328
- else {
329
- const value = getValue$1(id);
330
- dataSource = value.dataSource;
331
- }
332
- if (dataSource) {
333
- dataSource.forEach(item => {
334
- if (itemId.includes(item.id)) {
335
- checkedProcess(id, item);
336
- if (item.parentId) {
337
- indeterminateStatus(id, item.parentId);
338
- }
339
- }
340
- else if (item.items) {
341
- findItem(id, itemId, item.items);
342
- }
343
- });
344
- }
345
- };
346
- const checkedProcess = (id, item, status) => {
347
- const value = getValue$1(id);
348
- if (value) {
349
- const treeview = value.options.treeview;
350
- if (item) {
351
- // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
352
- if (treeview || (!treeview && item.type != "group")) {
353
- if (!item.disabled) {
354
- if (status != undefined) {
355
- item.checked = status;
356
- }
357
- else {
358
- item.checked = !item.checked;
359
- }
360
- item.itemObject.checked = item.checked;
361
- item.indeterminate = item.checked ? "determinate" : "uncheck";
362
- }
363
- }
364
- if (item.items) {
365
- item.items.forEach(child => {
366
- checkedProcess(id, child, status == undefined ? item.checked : status);
367
- });
368
- }
369
- }
370
- }
371
- };
372
- const indeterminateStatus = (id, itemId, items) => {
373
- let dataSource;
374
- if (items) {
375
- dataSource = items;
376
- }
377
- else {
378
- const value = getValue$1(id);
379
- dataSource = value.dataSource;
380
- }
381
- if (dataSource) {
382
- dataSource.forEach(item => {
383
- if (item.id == itemId) {
384
- let allChecked = true;
385
- let allUnchecked = true;
386
- if (item.items) {
387
- item.items.map(child => {
388
- (child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
389
- !child.checked && (allChecked = false);
390
- });
391
- }
392
- const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
393
- item.indeterminate = indeterminateState;
394
- item.checked = indeterminateState == "determinate" ? true : false;
395
- item.itemObject.checked = item.checked;
396
- if (item.parentId) {
397
- indeterminateStatus(id, item.parentId);
398
- }
399
- }
400
- else if (item.items) {
401
- indeterminateStatus(id, itemId, item.items);
402
- }
403
- });
404
- }
405
- };
406
- const filterData = (id, ids, items, searchOtherTag) => {
407
- let checkeds = [];
408
- let visibled = [];
409
- getValue$1(id).isSearchOtherTag = searchOtherTag;
410
- let dataSource;
411
- if (items) {
412
- dataSource = items;
413
- }
414
- else {
415
- const value = getValue$1(id);
416
- dataSource = value.dataSource;
417
- }
418
- if (dataSource) {
419
- dataSource.forEach(item => {
420
- if (ids) {
421
- item.hidden = true;
422
- // const filter = ids.find((find) => find.id === item.id)
423
- var filter;
424
- for (let index = 0; index < ids.length; index++) {
425
- if (ids[index].id === item.id) {
426
- filter = ids[index];
427
- break;
428
- }
429
- }
430
- if (filter) {
431
- item.hidden = false;
432
- if (!getValue$1(id).isSearchOtherTag) {
433
- item.isSearching = true;
434
- }
435
- visibled.push(item);
436
- if (item.checked) {
437
- checkeds.push(item);
438
- }
439
- if (filter.items) {
440
- const { checkedItems, visibledItems } = filterData(id, filter.items, item.items, searchOtherTag);
441
- if (checkedItems) {
442
- checkeds = [...new Set([...checkeds, ...checkedItems])];
443
- }
444
- if (visibledItems) {
445
- visibled = [...new Set([...visibled, ...visibledItems])];
446
- }
447
- }
448
- }
449
- }
450
- else {
451
- item.hidden = false;
452
- if (item.items) {
453
- filterData(id, null, item.items);
454
- }
455
- visibled.push(item);
456
- item.isSearching = false;
457
- }
458
- });
459
- }
460
- return { checkedItems: checkeds !== null && checkeds !== void 0 ? checkeds : [], visibledItems: visibled !== null && visibled !== void 0 ? visibled : [] };
461
- };
462
- const getSelected = (id, items) => {
463
- let dataSource;
464
- let selected = null;
465
- if (items) {
466
- dataSource = items;
467
- }
468
- else {
469
- const value = getValue$1(id);
470
- dataSource = value.dataSource;
471
- }
472
- if (dataSource) {
473
- dataSource.forEach(item => {
474
- if (item.selected) {
475
- selected = item.itemObject;
476
- }
477
- else if (item.items) {
478
- const found = getSelected(id, item.items);
479
- if (found) {
480
- selected = found;
481
- }
482
- }
483
- });
484
- }
485
- return selected;
486
- };
487
- const getCheckedList = (id, items) => {
488
- let dataSource;
489
- let checkedList = [];
490
- let nestedResult = [];
491
- if (items) {
492
- dataSource = items;
493
- }
494
- else {
495
- const value = getValue$1(id);
496
- dataSource = value.dataSource;
497
- }
498
- if (dataSource) {
499
- dataSource.forEach(item => {
500
- var _a;
501
- const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
502
- let foundChild = [];
503
- let foundItem = [];
504
- if (item.checked) {
505
- checkedList.push(newItem);
506
- foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
507
- }
508
- if (item.items) {
509
- const found = getCheckedList(id, item.items);
510
- if (((_a = found === null || found === void 0 ? void 0 : found.checkedList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
511
- checkedList = [...checkedList, ...found.checkedList];
512
- }
513
- if (found.nestedResult.length > 0) {
514
- foundChild = found.nestedResult;
515
- }
516
- }
517
- if (foundChild.length > 0) {
518
- if (foundItem.length == 0) {
519
- foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
520
- }
521
- foundItem[0].items = foundChild;
522
- nestedResult.push(foundItem[0]);
523
- }
524
- else {
525
- if (foundItem.length > 0) {
526
- foundItem[0].items = foundChild;
527
- nestedResult.push(foundItem[0]);
528
- }
529
- }
530
- });
531
- }
532
- return { checkedList: (checkedList === null || checkedList === void 0 ? void 0 : checkedList.length) > 0 ? checkedList : null, nestedResult: nestedResult };
533
- };
534
- const selectedItem = (id, itemId, items) => {
535
- let dataSource;
536
- let selected = [];
537
- if (items) {
538
- dataSource = items;
539
- }
540
- else {
541
- const value = getValue$1(id);
542
- dataSource = value.dataSource;
543
- }
544
- if (dataSource) {
545
- dataSource.forEach(item => {
546
- if (itemId) {
547
- if (item.id == itemId) {
548
- // if (!item.selected){
549
- item.selected = true;
550
- item.itemObject.selected = item.selected;
551
- // }
552
- }
553
- else {
554
- if (item.selected) {
555
- item.selected = false;
556
- item.itemObject.selected = item.selected;
557
- }
558
- }
559
- }
560
- if (item.items) {
561
- const found = selectedItem(id, itemId, item.items);
562
- if ((found === null || found === void 0 ? void 0 : found.length) > 0) {
563
- selected = [...selected, ...found];
564
- }
565
- }
566
- if (item.selected) {
567
- selected.push(item.itemObject);
568
- }
569
- });
570
- }
571
- return selected && selected.length > 0 ? selected : null;
572
- };
573
- const setClear = (id, items) => {
574
- let dataSource;
575
- if (items) {
576
- dataSource = items;
577
- }
578
- else {
579
- const value = getValue$1(id);
580
- dataSource = value.dataSource;
581
- }
582
- if (dataSource) {
583
- dataSource.forEach(item => {
584
- var _a, _b, _c;
585
- item.checked && (item.checked = false);
586
- item.selected && (item.selected = false);
587
- item.indeterminate && (item.indeterminate = "uncheck");
588
- ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
589
- ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
590
- ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
591
- if (item.items) {
592
- setClear(id, item.items);
593
- }
594
- });
595
- }
596
- };
597
- const selectAll = (id, status) => {
598
- const dataSource = getValue$1(id).dataSource;
599
- if (dataSource) {
600
- dataSource.forEach(item => {
601
- checkedProcess(id, item, status);
602
- });
603
- }
604
- };
605
- const updateOptions = (id, options) => {
606
- Object.keys(getValue$1(id).options).forEach(key => {
607
- getValue$1(id).options[key] = options[key];
608
- });
609
- };
610
- const removeState = id => {
611
- return Promise.resolve(state$1.value.delete(id));
612
- };
613
- const listState = {
614
- setValue: setValue$1,
615
- removeValue: removeValue$1,
616
- getValue: getValue$1,
617
- getData,
618
- getDataPagination: getDataPagination$1,
619
- openGroup,
620
- checkedItem,
621
- filterData,
622
- getSelected,
623
- getCheckedList,
624
- selectedItem,
625
- addChecked,
626
- setClear,
627
- selectAll,
628
- removeOtherTags,
629
- onRemoveItems,
630
- updateOptions,
631
- removeState,
632
- };
633
-
634
- class KeyControl {
635
- constructor(keyCode, element, elementName, childElementName) {
636
- this.elementName = '';
637
- this.childElementName = '';
638
- this.keyCode = keyCode;
639
- this.element = element;
640
- this.elementName = elementName;
641
- this.childElementName = childElementName;
642
- }
643
- getKeyCode() {
644
- return this.keyCode;
645
- }
646
- getElementName() {
647
- return this.elementName;
648
- }
649
- getChildElementName() {
650
- return this.childElementName;
651
- }
652
- getFocusedElementName() {
653
- return this.getElementName() + '.focused';
654
- }
655
- getFocusedElement() {
656
- return this.element.querySelectorAll(this.getFocusedElementName())[0] || null;
657
- }
658
- getFirstElement() {
659
- return this.element.querySelectorAll(this.getElementName())[0] || null;
660
- }
661
- getNextElement() {
662
- var _a;
663
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) || this.getFirstElement();
664
- }
665
- getPreviousElement() {
666
- var _a;
667
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.getFirstElement();
668
- }
669
- getChildElement() {
670
- var _a;
671
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName())[0]) || null;
672
- }
673
- getParentElement(element) {
674
- if (element && element) {
675
- const isRootElement = element && element.attributes['data-isroot'];
676
- if (isRootElement) {
677
- return element;
678
- }
679
- return this.getParentElement(element.parentNode);
680
- }
681
- }
682
- focusElementIsOpen() {
683
- var _a;
684
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.classList.contains('bcm-list__item--open')) || false;
685
- }
686
- isRootElement() {
687
- var _a;
688
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName()).length) > 0;
689
- }
690
- isRootElementIsOpen() {
691
- return this.getFocusedElement().classList.contains('bcm-list__item--open');
692
- }
693
- getFocusedChildElement() {
694
- var _a;
695
- return ((_a = this.getChildElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.focused')[0]) || null;
696
- }
697
- isLastElement() {
698
- var _a;
699
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null;
700
- }
701
- focusParentElementFirstChild() {
702
- var _a, _b;
703
- return this.setFocus((_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
704
- }
705
- isFirstElement() {
706
- var _a;
707
- return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null;
708
- }
709
- focusRootElement() {
710
- var _a, _b, _c;
711
- return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.firstChild);
712
- }
713
- nextRootElement() {
714
- var _a, _b, _c;
715
- return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.nextElementSibling);
716
- }
717
- findFocusElementParent() {
718
- return this.getFocusedElement().parentNode.querySelectorAll('.bcm-list__item--open');
719
- }
720
- getLastElement() {
721
- return this.element.querySelectorAll(this.getElementName())[this.element.querySelectorAll(this.getElementName()).length - 1] || null;
722
- }
723
- setFocus(element) {
724
- element.focus();
725
- }
726
- }
727
-
728
- class ListKeyControl extends KeyControl {
729
- constructor(keyCode, element, treeview, checkBoxes) {
730
- super(keyCode, element, '.bcm-list__item', '.bcm-list__item-childs');
731
- this.isTreeview = false;
732
- this.isCheckBoxes = false;
733
- this.isTreeview = treeview;
734
- this.isCheckBoxes = checkBoxes;
735
- }
736
- keyUpControl() {
737
- if (this.isTreeview) {
738
- this.keyUpTreeview();
739
- }
740
- else {
741
- if (this.isFirstElement()) {
742
- this.setFocus(this.getLastElement());
743
- }
744
- else {
745
- this.setFocus(this.getPreviousElement());
746
- }
747
- }
748
- }
749
- keyDownTreeView() {
750
- var _a;
751
- if (this.isTreeview) {
752
- if (this.isRootElement() && this.isRootElementIsOpen()) {
753
- const childs = this.getChildElement();
754
- if (childs) {
755
- this.setFocus(childs.firstChild);
756
- }
757
- }
758
- else {
759
- if (this.isLastElement() && this.getParentElement(this.getFocusedElement())) {
760
- this.setFocus((_a = this.getParentElement(this.getFocusedElement())) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
761
- }
762
- else {
763
- this.setFocus(this.getNextElement());
764
- }
765
- }
766
- }
767
- }
768
- keyUpTreeview() {
769
- if (this.isFirstElement()) {
770
- const parent = this.getParentElement(this.getFocusedElement());
771
- this.setFocus(parent);
772
- }
773
- else {
774
- const previousElement = this.getPreviousElement();
775
- if (previousElement) {
776
- if (previousElement.classList.contains('bcm-list__item--open')) {
777
- const getChildElement = previousElement.querySelectorAll(this.getChildElementName())[0];
778
- console.log({ getChildElement });
779
- this.setFocus(getChildElement.lastChild);
780
- }
781
- else {
782
- this.setFocus(previousElement);
783
- }
784
- }
785
- }
786
- }
787
- keyDownControl() {
788
- if (this.isTreeview) {
789
- this.keyDownTreeView();
790
- }
791
- else {
792
- if (this.isLastElement()) {
793
- this.setFocus(this.getFirstElement());
794
- }
795
- else {
796
- this.setFocus(this.getNextElement());
797
- }
798
- }
799
- }
800
- keyRightControl() {
801
- if (this.isTreeview) {
802
- if (!this.isRootElementIsOpen() && this.isRootElement()) {
803
- const { id } = this.getFocusedElement();
804
- this.openGroup(id);
805
- }
806
- }
807
- }
808
- keyLeftControl() {
809
- if (this.isTreeview) {
810
- if (this.isRootElementIsOpen() && this.isRootElement()) {
811
- const { id } = this.getFocusedElement();
812
- this.openGroup(id);
813
- }
814
- }
815
- }
816
- keyEnterControl() { }
817
- keySpaceControl() {
818
- if (this.isCheckBoxes) {
819
- const { id } = this.getFocusedElement();
820
- this.checkedItem(id);
821
- }
822
- }
823
- keyDown() {
824
- switch (this.getKeyCode()) {
825
- case bcm.Bcm.KeyCode.up:
826
- this.keyUpControl();
827
- break;
828
- case bcm.Bcm.KeyCode.down:
829
- this.keyDownControl();
830
- break;
831
- case bcm.Bcm.KeyCode.left:
832
- this.keyLeftControl();
833
- break;
834
- case bcm.Bcm.KeyCode.right:
835
- this.keyRightControl();
836
- break;
837
- case bcm.Bcm.KeyCode.enter:
838
- this.keyEnterControl();
839
- break;
840
- case bcm.Bcm.KeyCode.space:
841
- this.keySpaceControl();
842
- break;
843
- }
844
- }
845
- keyUp() { }
846
- }
847
-
848
- const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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-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}*{box-sizing:border-box}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{scroll-behavior:smooth;padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{display:none;opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800;transition:visibility 0s linear 400ms, opacity 100ms, transform 200ms}.bcm-list__container.bcm-list__type-linked-component.bcm-list--top,.bcm-list__container.bcm-list__type-select.bcm-list--top,.bcm-list__container.bcm-list__type-autocomplete.bcm-list--top{transform:translateY(-10%)}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{display:flex;opacity:1;transform:translateY(0);visibility:visible;transition:visibility 0s linear 0s, opacity 100ms, transform 100ms}.bcm-list__container.bcm-list__type-linked-component{margin-top:2px}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{flex:1;display:block;overflow:hidden}.bcm-list__input-container.value-empty{color:var(--bcm-color-grey-6)}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-color-grey-6)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 4px 0 4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-50);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);user-select:none;cursor:not-allowed}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--readonly:focus>.bcm-list__item-content:not(.disabled),.bcm-list__item--readonly.focused>.bcm-list__item-content:not(.disabled){color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content{color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content:hover,.bcm-list__item--readonly>.bcm-list__item-content:focus{color:var(--bcm-color-grey-7)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
849
-
850
- var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
851
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
852
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
853
- r = Reflect.decorate(decorators, target, key, desc);
854
- else
855
- for (var i = decorators.length - 1; i >= 0; i--)
856
- if (d = decorators[i])
857
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
858
- return c > 3 && r && Object.defineProperty(target, key, r), r;
859
- };
860
- const BcmList = class {
861
- constructor(hostRef) {
862
- index$1.registerInstance(this, hostRef);
863
- this.bcmChecklist = index$1.createEvent(this, "bcm-checklist", 7);
864
- this.bcmSelected = index$1.createEvent(this, "bcm-selected", 7);
865
- this.change = index$1.createEvent(this, "bcm-change", 7);
866
- this.open = index$1.createEvent(this, "bcm-open", 3);
867
- this.close = index$1.createEvent(this, "bcm-close", 3);
868
- this.listClose = index$1.createEvent(this, "bcm-list-close", 7);
869
- this.listOpen = index$1.createEvent(this, "bcm-list-open", 7);
870
- this.debounce = null;
871
- this.debounceHandler = generate.Generate.debounceInput(() => this.listenResize(), 300, false);
872
- this._id = generate.Generate.UID();
873
- this.tempId = generate.Generate.UID();
874
- this.type = bcm.Bcm$1.ListType.listbox;
875
- this.treeview = false;
876
- this.checkboxes = false;
877
- this.searchable = false;
878
- this.value = null;
879
- this.inputText = undefined;
880
- this.name = undefined;
881
- this.label = undefined;
882
- this.size = bcm.Bcm$1.Size.medium;
883
- this.disabled = false;
884
- this.readonly = false;
885
- this.highlight = false;
886
- this.highlightText = undefined;
887
- this.required = false;
888
- this.hidden = false;
889
- this.fullWidth = false;
890
- this.height = "256px";
891
- this.maxHeight = "500px";
892
- this.minHeight = "150px";
893
- this.width = "256px";
894
- this.tooltip = undefined;
895
- this.infoFooter = false;
896
- this.variableText = "item";
897
- this.template = undefined;
898
- this.allOpen = false;
899
- this.keyControl = false;
900
- this.checkAll = true;
901
- this.stopDeepClean = false;
902
- this.openIntersecting = false;
903
- this.linkedComponent = undefined;
904
- this.isOpen = false;
905
- this.calculatedViewport = false;
906
- this.isSelectedOther = false;
907
- this.isHaveOtherTag = false;
908
- this.placeholder = "Choose an option";
909
- this.searchPlaceholder = "Search";
910
- this.searchIsOnlyChilds = false;
911
- this.minSearchLength = 2;
912
- this.clearable = false;
913
- this.caption = undefined;
914
- this.noCaption = false;
915
- this.captionType = bcm.Bcm$1.Status.default;
916
- this.captionError = undefined;
917
- this.emptyText = undefined;
918
- this.emptyIcon = "fad fa-folder-open";
919
- this.captionCache = undefined;
920
- this.captionTypeCache = undefined;
921
- this.tick = {};
922
- this.totalData = 0;
923
- this.totalRootData = 0;
924
- this.limit = 20;
925
- this.searchGetParents = undefined;
926
- this.searchResultLimit = 20;
927
- this.searchFound = null;
928
- this.returnFilterData = {};
929
- this.returnOtherData = {};
930
- this.options = {
931
- rootMargin: "30px",
932
- };
933
- this.tagContainerWidth = 0;
934
- this.selectAllItem = {
935
- id: "select-all",
936
- text: "Select All",
937
- value: "select-all",
938
- checked: false,
939
- disabled: false,
940
- icon: "",
941
- status: bcm.Bcm$1.Status.default,
942
- indeterminate: "uncheck",
943
- };
944
- this.shouldTriggerChange = true;
945
- this.placement = bcm.Bcm$1.Placement["bottom-start"];
946
- this.disableChangeEvent = false;
947
- this.data = [];
948
- window.addEventListener("scroll", this.handleWheel.bind(this), true);
949
- window.addEventListener("wheel", this.handleWheel.bind(this), true);
950
- window.addEventListener("resize", this.handleResize.bind(this), true);
951
- }
952
- connectedCallback() {
953
- if (this.height != "256px") {
954
- if (this.height.indexOf("px") > -1) {
955
- this.limit = Math.floor(+this.height.replace("px", "") / 10);
956
- }
957
- else {
958
- this.limit = Math.floor(+(window.innerHeight / 10));
959
- }
960
- this.searchResultLimit = this.limit;
961
- this.markForCheck();
962
- }
963
- const checkElementWithDom = document.querySelectorAll(`#bcm-list-${this._id}`);
964
- (checkElementWithDom === null || checkElementWithDom === void 0 ? void 0 : checkElementWithDom.length) > 1 && checkElementWithDom.forEach((item, index) => index > 0 && item.remove());
965
- }
966
- componentWillRender() {
967
- this.calculateLocation();
968
- }
969
- componentShouldUpdate(newVal, oldVal, propName) {
970
- if (Object.keys(this.getOptions()).indexOf(propName) > -1 && newVal !== oldVal) {
971
- this.updateOptions();
972
- }
973
- }
974
- get containerWidth() {
975
- var _a, _b;
976
- return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width;
977
- }
978
- get tagCount() {
979
- return this.containerWidth > 0 ? Math.floor(+(this.containerWidth - 100) / 85) : 0;
980
- }
981
- get tagData() {
982
- return generate.snq(() => {
983
- var _a;
984
- return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map(item => ({
985
- value: item.id,
986
- label: stringHelper.StringHelper.textLimitter(item.text, 7),
987
- text: item.tooltipMessage || item.tagTitle || item.text,
988
- }));
989
- }, []);
990
- }
991
- async componentDidLoad() {
992
- await this.initState();
993
- // if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
994
- // const list = this.el.querySelector(`#bcm-list-${this._id}`);
995
- // if (list) {
996
- // document.body.appendChild(list);
997
- // }
998
- // }
999
- }
1000
- disconnectedCallback() {
1001
- this.isOpen = false;
1002
- if (this.stopDeepClean)
1003
- return;
1004
- listState.removeState(this._id);
1005
- this.el.innerHTML = "";
1006
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1007
- const list = document.querySelectorAll(`#bcm-list-${this._id}`);
1008
- if (list === null || list === void 0 ? void 0 : list.length) {
1009
- list.forEach(item => item.remove());
1010
- this.el.remove();
1011
- }
1012
- }
1013
- }
1014
- watchId(_, oldVal) {
1015
- // console.info('Changed component id:', oldVal + ' -> ' + newVal);
1016
- listState.removeState(oldVal);
1017
- this.initState();
1018
- }
1019
- handleValueChange(newVal, oldVal) {
1020
- var _a;
1021
- if (generate.Generate.objectIsEmpty(this.returnFilterData)) {
1022
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
1023
- }
1024
- if (this.checkboxes) {
1025
- if (!validators.Validators.compareTwoArrayIsSame(newVal, oldVal)) {
1026
- this.bcmChecklist.emit(this.value);
1027
- !this.disableChangeEvent && this.change.emit([...this.value, { shouldTriggerChange: this.shouldTriggerChange }]);
1028
- }
1029
- }
1030
- else {
1031
- if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
1032
- !this.disableChangeEvent &&
1033
- this.change.emit(Object.assign(Object.assign({}, this.value), { shouldTriggerChange: this.shouldTriggerChange }));
1034
- }
1035
- }
1036
- }
1037
- watchReturnFilterData(newVal) {
1038
- var _a;
1039
- const { checkedItems, visibledItems } = newVal;
1040
- if (checkedItems && visibledItems) {
1041
- this.handleIndeterminate(checkedItems.length, visibledItems.length);
1042
- }
1043
- else {
1044
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
1045
- }
1046
- }
1047
- async handleOpen() {
1048
- if (this.isOpen) {
1049
- this.detectClone();
1050
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1051
- const list = this.el.querySelector(`#bcm-list-${this._id}`);
1052
- if (list) {
1053
- const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
1054
- bcmOverlayContainer.appendChild(list);
1055
- }
1056
- }
1057
- this.open.emit();
1058
- this.calculateLocation();
1059
- this.onSelectSearch();
1060
- }
1061
- else {
1062
- this.listScrollToTop();
1063
- this.close.emit();
1064
- this.listClose.emit();
1065
- await utils.delay(100);
1066
- this.unSelectOther();
1067
- }
1068
- }
1069
- listScrollToTop() {
1070
- const list = document.querySelector(`#bcm-list-${this._id}`);
1071
- if (list) {
1072
- list.querySelector(".scrolling").scrollTop = 0;
1073
- }
1074
- }
1075
- async dataChanged(newValue, oldValue) {
1076
- if (!validators.Validators.compareTwoArrayIsSame(newValue, oldValue)) {
1077
- await this.initState();
1078
- }
1079
- }
1080
- isIntersecting(e) {
1081
- const target = e === null || e === void 0 ? void 0 : e.target;
1082
- if (target && target.id === this._id) {
1083
- this.listenResize();
1084
- }
1085
- }
1086
- handleSlotItems(e) {
1087
- var _a;
1088
- if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1089
- this.data = e.detail;
1090
- }
1091
- }
1092
- handleChange(e) {
1093
- if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
1094
- e.stopImmediatePropagation();
1095
- }
1096
- }
1097
- handleResize() {
1098
- this.calculateLocation();
1099
- this.debounceHandler();
1100
- }
1101
- handleWheel(event) {
1102
- if (this.isOpen) {
1103
- const list = document.querySelector(`#bcm-list-${this._id}`);
1104
- const isClickInside = list && generate.Generate.findEventPath(event, list);
1105
- if (isClickInside) {
1106
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1107
- this.calculateLocation();
1108
- }
1109
- }
1110
- else {
1111
- this.hide();
1112
- }
1113
- }
1114
- }
1115
- clearAutocomplete() {
1116
- if (this.type == "autocomplete") {
1117
- const autocompleteInput = this.getAutoCompleteInput();
1118
- if (autocompleteInput) {
1119
- autocompleteInput.handleClear(false);
1120
- }
1121
- }
1122
- }
1123
- async handleSelectOtherTag(e) {
1124
- if (this.disabled)
1125
- return;
1126
- const { id, checked } = e.detail;
1127
- this.isSelectedOther = checked;
1128
- if (id) {
1129
- checked ? this.filterOtherList(id) : this.unSelectOther();
1130
- this.isOpen = true;
1131
- }
1132
- }
1133
- async handleDeleteTag(e) {
1134
- var _a;
1135
- if (this.disabled)
1136
- return;
1137
- const { id } = e.detail;
1138
- this.isSelectedOther && this.unSelectOther();
1139
- Array.isArray(id) ? listState.removeOtherTags(this._id, id) : listState.checkedItem(this._id, id);
1140
- this.value = (await this.getCheckedList()).checkedList;
1141
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
1142
- }
1143
- async handleSelectTag(_) {
1144
- if (this.disabled)
1145
- return;
1146
- this.clearAutocomplete();
1147
- this.onSelectSearch();
1148
- this.unSelectOther();
1149
- }
1150
- handleClick(event) {
1151
- var _a;
1152
- if (this.disabled)
1153
- return;
1154
- const list = document.querySelector(`#bcm-list-${this._id}`);
1155
- const isClickInside = generate.Generate.findEventPath(event, this.el) || (list && generate.Generate.findEventPath(event, list));
1156
- if (isClickInside) {
1157
- if (this.debounce !== null) {
1158
- event.preventDefault();
1159
- event.stopPropagation();
1160
- clearTimeout(this.debounce);
1161
- this.debounce = null;
1162
- }
1163
- this.debounce = setTimeout(() => {
1164
- this.debounce = null;
1165
- }, 300);
1166
- }
1167
- if (!isClickInside) {
1168
- if (this.type == "autocomplete") {
1169
- const autocompleteInput = this.getAutoCompleteInput();
1170
- if (autocompleteInput) {
1171
- if (this.checkboxes) {
1172
- autocompleteInput.setValue("");
1173
- }
1174
- else {
1175
- autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
1176
- }
1177
- }
1178
- }
1179
- }
1180
- const clickToTag = generate.Generate.findEventPathWithKey(event, "className", ["bcm-tag"]);
1181
- const clickToOtherTag = generate.Generate.findEventPathWithKey(event, "className", ["bcm-tag bcm-tag--other"]);
1182
- const clickToSelect = generate.Generate.findEventPathWithKey(event, "id", [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
1183
- const clickToTagDismiss = generate.Generate.findEventPathWithKey(event, "className", ["right close-button"]);
1184
- if (clickToSelect && !clickToTagDismiss && this.type != "autocomplete") {
1185
- this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
1186
- }
1187
- if (list) {
1188
- if (this.isOpen) {
1189
- if (!list.contains(event.target) && !this.el.contains(event.target)) {
1190
- this.isOpen = false;
1191
- // this.unSelectOther()
1192
- }
1193
- }
1194
- }
1195
- }
1196
- bcmOnSearchClear(event) {
1197
- var _a, _b;
1198
- if (this.type == "autocomplete") {
1199
- if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
1200
- if (event.detail) {
1201
- this.setClear();
1202
- }
1203
- }
1204
- }
1205
- }
1206
- bcmOnSearch(event) {
1207
- var _a, _b, _c, _d, _e, _f;
1208
- if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
1209
- this.searchGetParents = generate.snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
1210
- this.searchResultLimit = 10;
1211
- this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
1212
- this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
1213
- if (this.searchFound > 0 && this.highlight) {
1214
- this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
1215
- }
1216
- if (this.type == "autocomplete") {
1217
- this.isOpen = true;
1218
- }
1219
- if (!event.detail.result) {
1220
- if (this.type == "autocomplete") {
1221
- this.isOpen = false;
1222
- }
1223
- else {
1224
- this.returnFilterData = {};
1225
- listState.filterData(this._id, null);
1226
- }
1227
- // this.isSelectedOther = false
1228
- this.searchResultLimit = null;
1229
- this.highlightText = null;
1230
- }
1231
- this.markForCheck();
1232
- }
1233
- }
1234
- //keyboard navigation
1235
- handleKeyDown(ev) {
1236
- const keycode = ev.keyCode || ev.which;
1237
- if (keycode === bcm.Bcm$1.KeyCode.escape) {
1238
- if (this.isOpen) {
1239
- this.isOpen = false;
1240
- ev.preventDefault();
1241
- ev.stopPropagation();
1242
- ev.stopImmediatePropagation();
1243
- }
1244
- }
1245
- if (this.keyControl) {
1246
- const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
1247
- keyboard.openGroup = openGroupId => {
1248
- this.openGroup(openGroupId);
1249
- };
1250
- keyboard.checkedItem = checkedItemId => {
1251
- this.checkedItem(checkedItemId);
1252
- };
1253
- keyboard.keyDown();
1254
- }
1255
- }
1256
- handleKeyUp(ev) {
1257
- if (this.keyControl) {
1258
- const focusedList = generate.Generate.findEventPath(ev, this.el);
1259
- if (focusedList) {
1260
- const list = document.getElementById(`bcm-list-${this._id}`);
1261
- if (list) {
1262
- const items = list.querySelectorAll(".bcm-list__item.focused");
1263
- if (items.length > 0) {
1264
- const main = list.querySelector("main");
1265
- const itemHeight = items[0].offsetHeight;
1266
- const listHeight = main.offsetHeight;
1267
- const itemTop = items[0].offsetTop;
1268
- if (itemTop > listHeight) {
1269
- main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
1270
- }
1271
- if (itemTop < listHeight) {
1272
- main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
1273
- }
1274
- }
1275
- }
1276
- }
1277
- }
1278
- }
1279
- async set(data, trigger = true) {
1280
- if (data) {
1281
- this.shouldTriggerChange = trigger;
1282
- if (Array.isArray(data)) {
1283
- this.addChecked(data);
1284
- }
1285
- if (typeof data === "string" || typeof data === "number") {
1286
- this.selectedItem(data);
1287
- }
1288
- }
1289
- else {
1290
- this.setClear();
1291
- }
1292
- }
1293
- async get() {
1294
- var _a, _b;
1295
- return this.value ? (this.checkboxes ? (_b = (_a = ((await this.getCheckedList()))) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.map(item => item.id) : this.value.id) : null;
1296
- }
1297
- async getCheckedList() {
1298
- return Promise.resolve(listState.getCheckedList(this._id));
1299
- }
1300
- async getSelected() {
1301
- return Promise.resolve(listState.getSelected(this._id));
1302
- }
1303
- async getValue() {
1304
- return Promise.resolve(this.value);
1305
- }
1306
- async triggerChange(action) {
1307
- this.shouldTriggerChange = action;
1308
- }
1309
- async addChecked(ids = [], save = false, emit = true) {
1310
- if (ids && ids.length > 0) {
1311
- if (!save) {
1312
- listState.setClear(this._id);
1313
- await utils.delay(10);
1314
- }
1315
- await listState.addChecked(this._id, ids);
1316
- await utils.delay(10);
1317
- emit && (this.value = (await this.getCheckedList()).checkedList);
1318
- this.markForCheck();
1319
- }
1320
- return Promise.resolve(this.value);
1321
- }
1322
- async selected(id) {
1323
- if (id) {
1324
- return Promise.resolve(await this.selectedItem(id));
1325
- }
1326
- return false;
1327
- }
1328
- async setClear(e) {
1329
- listState.setClear(this._id);
1330
- this.value = null;
1331
- this.inputText = "";
1332
- this.isOpen = false;
1333
- this.selectAllItem.indeterminate = "uncheck";
1334
- this.markForCheck();
1335
- if (e) {
1336
- e.stopPropagation();
1337
- e.preventDefault();
1338
- }
1339
- await utils.delay(10);
1340
- return Promise.resolve();
1341
- }
1342
- async resetCaption() {
1343
- await utils.delay(10);
1344
- this.caption = this.captionCache;
1345
- this.captionType = this.captionTypeCache;
1346
- this.captionError = null;
1347
- await utils.delay(10);
1348
- return Promise.resolve();
1349
- }
1350
- detectClone() {
1351
- const list = document.querySelectorAll(`#bcm-list-${this._id}`);
1352
- if (list.length > 0) {
1353
- list.forEach((item) => {
1354
- const tempid = item.getAttribute("temp-id");
1355
- if (tempid !== `bcm-list-${this.tempId}`) {
1356
- console.warn(`[bcm-list] - Detected duplicate temp-id="${tempid}"`);
1357
- item.remove();
1358
- }
1359
- });
1360
- }
1361
- }
1362
- async show() {
1363
- this.isOpen = true;
1364
- return Promise.resolve();
1365
- }
1366
- async hide() {
1367
- this.isOpen = false;
1368
- return Promise.resolve();
1369
- }
1370
- updateOptions() {
1371
- listState.updateOptions(this._id, this);
1372
- }
1373
- handleIndeterminate(checkeds, total) {
1374
- this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? "check" : "indeterminate") : "uncheck", checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
1375
- }
1376
- listenResize() {
1377
- this.calculateLocation();
1378
- this.markForCheck();
1379
- }
1380
- async unSelectOther() {
1381
- await this.onClearSearch();
1382
- this.isSelectedOther = false;
1383
- this.searchFound = null;
1384
- this.returnFilterData = {};
1385
- listState.filterData(this._id, null);
1386
- await utils.delay(10);
1387
- return Promise.resolve();
1388
- }
1389
- async onClearSearch() {
1390
- const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
1391
- if (searchInput) {
1392
- await searchInput.handleClear();
1393
- }
1394
- return Promise.resolve();
1395
- }
1396
- async onSelectSearch() {
1397
- const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
1398
- if (searchInput) {
1399
- await utils.delay(100);
1400
- searchInput.onBcmFocus();
1401
- searchInput.onBcmSelect();
1402
- }
1403
- }
1404
- async filterOtherList(ids) {
1405
- const checklist = (await this.getCheckedList()).nestedResult;
1406
- const filter = generate.Generate.convertIdsToNestedData(ids, checklist);
1407
- this.returnFilterData = await listState.filterData(this._id, filter, null, true);
1408
- this.searchFound = (ids === null || ids === void 0 ? void 0 : ids.length) || 0;
1409
- this.limit = 500;
1410
- this.searchGetParents = null;
1411
- await utils.delay(1000);
1412
- this.markForCheck();
1413
- }
1414
- async initState() {
1415
- var _a, _b, _c;
1416
- this.onClearSearch();
1417
- await listState.setValue({
1418
- id: this._id,
1419
- dataSource: this.data && generate.snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
1420
- options: this,
1421
- });
1422
- const { totalRoots, totalItems } = listState.getValue(this._id);
1423
- this.totalData = totalItems;
1424
- this.totalRootData = totalRoots;
1425
- this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
1426
- if (!this.checkboxes) {
1427
- this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
1428
- }
1429
- // checkli olan subparentların indeterminate kontrolü için
1430
- if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1431
- const checkedIDs = [];
1432
- this.value.forEach(item => {
1433
- if (!item.items || item.items.length === 0) {
1434
- checkedIDs.push(item.id);
1435
- }
1436
- });
1437
- await this.addChecked(checkedIDs, false, false);
1438
- }
1439
- await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
1440
- await this.markForCheck();
1441
- }
1442
- async markForCheck() {
1443
- await utils.delay(10);
1444
- this.tick = generate.Generate.UID();
1445
- }
1446
- getOptions() {
1447
- return generate.snq(() => listState.getValue(this._id).options, {});
1448
- }
1449
- getItems() {
1450
- if (this.isSelectedOther) {
1451
- return this.returnFilterData["checkedItems"];
1452
- }
1453
- return generate.snq(() => listState.getData(this._id), []);
1454
- }
1455
- getLimitedItems(ids) {
1456
- return generate.snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
1457
- }
1458
- openGroup(parentId) {
1459
- listState.openGroup(this._id, parentId);
1460
- this.markForCheck();
1461
- }
1462
- focusItem(e) {
1463
- if (e.target.classList.contains("bcm-list__item")) {
1464
- const item = e.target;
1465
- const list = document.getElementById(`bcm-list-${this._id}`);
1466
- if (list) {
1467
- const items = list.querySelectorAll(".bcm-list__item");
1468
- if (items.length > 0) {
1469
- const selectedItem = list.querySelector(".bcm-list__item.focused");
1470
- if (selectedItem) {
1471
- selectedItem.classList.remove("focused");
1472
- }
1473
- item.classList.add("focused");
1474
- }
1475
- }
1476
- }
1477
- }
1478
- async selectedItem(itemId) {
1479
- var _a;
1480
- if (!this.checkboxes) {
1481
- this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
1482
- this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
1483
- this.isOpen = false;
1484
- this.markForCheck();
1485
- if (this.type == "autocomplete" && this.value) {
1486
- // await delay(100)
1487
- // this.resetCaption()
1488
- const autocompleteInput = this.getAutoCompleteInput();
1489
- if (autocompleteInput) {
1490
- setTimeout(() => {
1491
- var _a;
1492
- autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
1493
- this.isOpen = false;
1494
- }, 100);
1495
- }
1496
- }
1497
- }
1498
- return Promise.resolve(this.value);
1499
- }
1500
- async checkedItem(itemId) {
1501
- const isCheckSelectAll = itemId === "select-all";
1502
- if (!isCheckSelectAll) {
1503
- listState.checkedItem(this._id, itemId);
1504
- }
1505
- else {
1506
- listState.selectAll(this._id, !this.selectAllItem.checked);
1507
- }
1508
- this.value = (await this.getCheckedList()).checkedList;
1509
- this.changeVisibleCheckeds();
1510
- this.markForCheck();
1511
- }
1512
- changeVisibleCheckeds() {
1513
- const { visibledItems } = this.returnFilterData;
1514
- this.returnFilterData = {
1515
- visibledItems,
1516
- checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
1517
- };
1518
- }
1519
- getAutoCompleteInput() {
1520
- return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
1521
- }
1522
- dataScrollEvent(event) {
1523
- let count = 0;
1524
- let io = new IntersectionObserver((data) => {
1525
- if (count === 0) {
1526
- count++;
1527
- if (data[0].isIntersecting) {
1528
- this.limit += 15;
1529
- this.searchResultLimit += 15;
1530
- io.disconnect();
1531
- io = null;
1532
- }
1533
- }
1534
- }, this.options);
1535
- io.observe(event.target.lastElementChild);
1536
- }
1537
- async calculateLocation() {
1538
- var _a, _b;
1539
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1540
- const list = document.getElementById(`bcm-list-${this._id}`);
1541
- // list && (list.style.height = '256px') //sebebi neydi ki!
1542
- var placement = this.placement;
1543
- const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
1544
- const targetElement = document.getElementById(targetElementId);
1545
- if (list && targetElement) {
1546
- popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
1547
- await utils.delay(10);
1548
- let pos = popoverPlacement.setPosition(placement, targetElement);
1549
- let captionAreaHeight = 0;
1550
- let labelAreaHeight = 0;
1551
- if (this.linkedComponent) {
1552
- const linked = document.getElementById(this.linkedComponent);
1553
- if (linked) {
1554
- if (!linked["noCaption"]) {
1555
- const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".bcm-caption-area")) || linked.querySelector(".bcm-caption-area");
1556
- if (captionArea) {
1557
- captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
1558
- }
1559
- }
1560
- const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".bcm-label")) || linked.querySelector(".bcm-label");
1561
- if (labelArea) {
1562
- labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
1563
- }
1564
- }
1565
- }
1566
- if (this.fullWidth) {
1567
- list.style.width = targetElement.offsetWidth + "px";
1568
- }
1569
- else {
1570
- list.style.width = this.width || "auto";
1571
- }
1572
- if (this.height.indexOf("%") > -1) {
1573
- list.style.height = numberHelper.NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
1574
- }
1575
- else {
1576
- list.style.height = this.height;
1577
- }
1578
- list.style.minHeight = this.minHeight;
1579
- // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
1580
- const calculatedMaxHeight = placement.split("-")[0] == "top" ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
1581
- if (this.maxHeight.indexOf("%") > -1) {
1582
- list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + "px";
1583
- }
1584
- else {
1585
- list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + "px";
1586
- }
1587
- popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
1588
- await utils.delay(10);
1589
- pos = popoverPlacement.setPosition(placement, targetElement);
1590
- list.style.top = (placement.split("-")[0] == "top" ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + "px";
1591
- // list.style.left = pos[1] + 'px';
1592
- list.style.left = placement.split("-")[1] == "end" ? pos[1] - list.offsetWidth + "px" : pos[1] + "px";
1593
- list.classList.toggle("bcm-list--top", placement.split("-")[0] == "top");
1594
- this.calculatedViewport = true;
1595
- }
1596
- }
1597
- }
1598
- handleTransitionEnd(e) {
1599
- const { isOpen, type } = this;
1600
- const propertName = e === null || e === void 0 ? void 0 : e.propertyName;
1601
- if (isOpen && type == "select" && propertName == "transform") {
1602
- this.listOpen.emit();
1603
- }
1604
- }
1605
- render() {
1606
- const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
1607
- const hostClasses = index.classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
1608
- "error": this.captionType == bcm.Bcm$1.Status.error,
1609
- "full-width": fullWidth,
1610
- "bcm-list__linked": this.linkedComponent,
1611
- hidden,
1612
- readonly,
1613
- disabled,
1614
- });
1615
- const bcmListContainer = index.classnames("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
1616
- "is-open": this.isOpen && this.calculatedViewport,
1617
- "error": this.captionType == bcm.Bcm$1.Status.error,
1618
- "full-width": fullWidth,
1619
- hidden,
1620
- readonly,
1621
- disabled,
1622
- });
1623
- const bcmListInput = index.classnames("bcm-list__input");
1624
- const openedType = this.type == "select" || this.type == "autocomplete" || this.linkedComponent;
1625
- return (index$1.h(index$1.Host, { class: hostClasses, tabindex: "0", style: {
1626
- "--width": fullWidth ? "100%" : this.width,
1627
- "--height": openedType ? "100%" : this.height,
1628
- "--max-height": openedType ? "inherit" : this.maxHeight,
1629
- "--min-height": openedType ? "inherit" : this.minHeight,
1630
- } }, index$1.h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (index$1.h("div", null, index$1.h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, index$1.h("span", { class: index.classnames("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (index$1.h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), index$1.h("span", { class: index.classnames("bcm-list__input-buttons", {
1631
- disabled: disabled,
1632
- }) }, this.clearable && this.value && (index$1.h("div", { class: "bcm-list__input-buttons-button" }, index$1.h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), index$1.h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, index$1.h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: index.classnames(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, index$1.h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && index$1.h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), index$1.h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), index$1.h(ListTemplate, { highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
1633
- }
1634
- get el() { return index$1.getElement(this); }
1635
- static get watchers() { return {
1636
- "_id": ["watchId"],
1637
- "value": ["handleValueChange"],
1638
- "returnFilterData": ["watchReturnFilterData"],
1639
- "isOpen": ["handleOpen"],
1640
- "data": ["dataChanged"]
1641
- }; }
1642
- };
1643
- __decorate([
1644
- isLoadDecorator.IsLoad()
1645
- ], BcmList.prototype, "el", void 0);
1646
- __decorate([
1647
- jsonParseDecarator.JsonParse("data", true)
1648
- ], BcmList.prototype, "dataChanged", null);
1649
- BcmList.style = listCss;
1650
-
1651
- function _extends() {
1652
- _extends = Object.assign ? Object.assign.bind() : function (target) {
1653
- for (var i = 1; i < arguments.length; i++) {
1654
- var source = arguments[i];
1655
- for (var key in source) {
1656
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1657
- target[key] = source[key];
1658
- }
1659
- }
1660
- }
1661
- return target;
1662
- };
1663
- return _extends.apply(this, arguments);
1664
- }
1665
-
1666
- function _typeof(obj) {
1667
- "@babel/helpers - typeof";
1668
-
1669
- return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
1670
- return typeof obj;
1671
- } : function (obj) {
1672
- return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
1673
- }, _typeof(obj);
1674
- }
1675
-
1676
- function _toPrimitive(input, hint) {
1677
- if (_typeof(input) !== "object" || input === null) return input;
1678
- var prim = input[Symbol.toPrimitive];
1679
- if (prim !== undefined) {
1680
- var res = prim.call(input, hint || "default");
1681
- if (_typeof(res) !== "object") return res;
1682
- throw new TypeError("@@toPrimitive must return a primitive value.");
1683
- }
1684
- return (hint === "string" ? String : Number)(input);
1685
- }
1686
-
1687
- function _toPropertyKey(arg) {
1688
- var key = _toPrimitive(arg, "string");
1689
- return _typeof(key) === "symbol" ? key : String(key);
1690
- }
1691
-
1692
- function _defineProperty(obj, key, value) {
1693
- key = _toPropertyKey(key);
1694
- if (key in obj) {
1695
- Object.defineProperty(obj, key, {
1696
- value: value,
1697
- enumerable: true,
1698
- configurable: true,
1699
- writable: true
1700
- });
1701
- } else {
1702
- obj[key] = value;
1703
- }
1704
- return obj;
1705
- }
1706
-
1707
- function ownKeys(object, enumerableOnly) {
1708
- var keys = Object.keys(object);
1709
- if (Object.getOwnPropertySymbols) {
1710
- var symbols = Object.getOwnPropertySymbols(object);
1711
- enumerableOnly && (symbols = symbols.filter(function (sym) {
1712
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
1713
- })), keys.push.apply(keys, symbols);
1714
- }
1715
- return keys;
1716
- }
1717
- function _objectSpread2(target) {
1718
- for (var i = 1; i < arguments.length; i++) {
1719
- var source = null != arguments[i] ? arguments[i] : {};
1720
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
1721
- _defineProperty(target, key, source[key]);
1722
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
1723
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
1724
- });
1725
- }
1726
- return target;
1727
- }
1728
-
1729
- function _arrayWithHoles(arr) {
1730
- if (Array.isArray(arr)) return arr;
1731
- }
1732
-
1733
- function _iterableToArrayLimit(arr, i) {
1734
- var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
1735
- if (null != _i) {
1736
- var _s,
1737
- _e,
1738
- _x,
1739
- _r,
1740
- _arr = [],
1741
- _n = !0,
1742
- _d = !1;
1743
- try {
1744
- if (_x = (_i = _i.call(arr)).next, 0 === i) {
1745
- if (Object(_i) !== _i) return;
1746
- _n = !1;
1747
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
1748
- } catch (err) {
1749
- _d = !0, _e = err;
1750
- } finally {
1751
- try {
1752
- if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
1753
- } finally {
1754
- if (_d) throw _e;
1755
- }
1756
- }
1757
- return _arr;
1758
- }
1759
- }
1760
-
1761
- function _arrayLikeToArray(arr, len) {
1762
- if (len == null || len > arr.length) len = arr.length;
1763
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
1764
- return arr2;
1765
- }
1766
-
1767
- function _unsupportedIterableToArray(o, minLen) {
1768
- if (!o) return;
1769
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
1770
- var n = Object.prototype.toString.call(o).slice(8, -1);
1771
- if (n === "Object" && o.constructor) n = o.constructor.name;
1772
- if (n === "Map" || n === "Set") return Array.from(o);
1773
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
1774
- }
1775
-
1776
- function _nonIterableRest() {
1777
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1778
- }
1779
-
1780
- function _slicedToArray(arr, i) {
1781
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
1782
- }
1783
-
1784
- function _objectWithoutPropertiesLoose(source, excluded) {
1785
- if (source == null) return {};
1786
- var target = {};
1787
- var sourceKeys = Object.keys(source);
1788
- var key, i;
1789
- for (i = 0; i < sourceKeys.length; i++) {
1790
- key = sourceKeys[i];
1791
- if (excluded.indexOf(key) >= 0) continue;
1792
- target[key] = source[key];
1793
- }
1794
- return target;
1795
- }
1796
-
1797
- function _objectWithoutProperties(source, excluded) {
1798
- if (source == null) return {};
1799
- var target = _objectWithoutPropertiesLoose(source, excluded);
1800
- var key, i;
1801
- if (Object.getOwnPropertySymbols) {
1802
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
1803
- for (i = 0; i < sourceSymbolKeys.length; i++) {
1804
- key = sourceSymbolKeys[i];
1805
- if (excluded.indexOf(key) >= 0) continue;
1806
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
1807
- target[key] = source[key];
1808
- }
1809
- }
1810
- return target;
1811
- }
1812
-
1813
- var _excluded$2 = ["prefixCls", "invalidate", "item", "renderItem", "responsive", "responsiveDisabled", "registerSize", "itemKey", "className", "style", "children", "display", "order", "component"];
1814
- // Use shared variable to save bundle size
1815
- var UNDEFINED = undefined;
1816
- function InternalItem(props, ref) {
1817
- var prefixCls = props.prefixCls,
1818
- invalidate = props.invalidate,
1819
- item = props.item,
1820
- renderItem = props.renderItem,
1821
- responsive = props.responsive,
1822
- responsiveDisabled = props.responsiveDisabled,
1823
- registerSize = props.registerSize,
1824
- itemKey = props.itemKey,
1825
- className = props.className,
1826
- style = props.style,
1827
- children = props.children,
1828
- display = props.display,
1829
- order = props.order,
1830
- _props$component = props.component,
1831
- Component = _props$component === void 0 ? 'div' : _props$component,
1832
- restProps = _objectWithoutProperties(props, _excluded$2);
1833
- var mergedHidden = responsive && !display;
1834
- // ================================ Effect ================================
1835
- function internalRegisterSize(width) {
1836
- registerSize(itemKey, width);
1837
- }
1838
- index$3.react.useEffect(function () {
1839
- return function () {
1840
- internalRegisterSize(null);
1841
- };
1842
- }, []);
1843
- // ================================ Render ================================
1844
- var childNode = renderItem && item !== UNDEFINED ? renderItem(item) : children;
1845
- var overflowStyle;
1846
- if (!invalidate) {
1847
- overflowStyle = {
1848
- opacity: mergedHidden ? 0 : 1,
1849
- height: mergedHidden ? 0 : UNDEFINED,
1850
- overflowY: mergedHidden ? 'hidden' : UNDEFINED,
1851
- order: responsive ? order : UNDEFINED,
1852
- pointerEvents: mergedHidden ? 'none' : UNDEFINED,
1853
- position: mergedHidden ? 'absolute' : UNDEFINED
1854
- };
1855
- }
1856
- var overflowProps = {};
1857
- if (mergedHidden) {
1858
- overflowProps['aria-hidden'] = true;
1859
- }
1860
- var itemNode = /*#__PURE__*/index$3.react.createElement(Component, _extends({
1861
- className: index.classnames(!invalidate && prefixCls, className),
1862
- style: _objectSpread2(_objectSpread2({}, overflowStyle), style)
1863
- }, overflowProps, restProps, {
1864
- ref: ref
1865
- }), childNode);
1866
- if (responsive) {
1867
- itemNode = /*#__PURE__*/index$3.react.createElement(index$3.RefResizeObserver, {
1868
- onResize: function onResize(_ref) {
1869
- var offsetWidth = _ref.offsetWidth;
1870
- internalRegisterSize(offsetWidth);
1871
- },
1872
- disabled: responsiveDisabled
1873
- }, itemNode);
1874
- }
1875
- return itemNode;
1876
- }
1877
- var Item = /*#__PURE__*/index$3.react.forwardRef(InternalItem);
1878
- Item.displayName = 'Item';
1879
-
1880
- function channelUpdate(callback) {
1881
- if (typeof MessageChannel === 'undefined') {
1882
- index$3.wrapperRaf(callback);
1883
- } else {
1884
- var channel = new MessageChannel();
1885
- channel.port1.onmessage = function () {
1886
- return callback();
1887
- };
1888
- channel.port2.postMessage(undefined);
1889
- }
1890
- }
1891
-
1892
- /**
1893
- * Batcher for record any `useEffectState` need update.
1894
- */
1895
- function useBatcher() {
1896
- // Updater Trigger
1897
- var updateFuncRef = index$3.react.useRef(null);
1898
- // Notify update
1899
- var notifyEffectUpdate = function notifyEffectUpdate(callback) {
1900
- if (!updateFuncRef.current) {
1901
- updateFuncRef.current = [];
1902
- channelUpdate(function () {
1903
- index$3.reactDom.unstable_batchedUpdates(function () {
1904
- updateFuncRef.current.forEach(function (fn) {
1905
- fn();
1906
- });
1907
- updateFuncRef.current = null;
1908
- });
1909
- });
1910
- }
1911
- updateFuncRef.current.push(callback);
1912
- };
1913
- return notifyEffectUpdate;
1914
- }
1915
- /**
1916
- * Trigger state update by `useLayoutEffect` to save perf.
1917
- */
1918
- function useEffectState(notifyEffectUpdate, defaultValue) {
1919
- // Value
1920
- var _React$useState = index$3.react.useState(defaultValue),
1921
- _React$useState2 = _slicedToArray(_React$useState, 2),
1922
- stateValue = _React$useState2[0],
1923
- setStateValue = _React$useState2[1];
1924
- // Set State
1925
- var setEffectVal = index$3.useEvent(function (nextValue) {
1926
- notifyEffectUpdate(function () {
1927
- setStateValue(nextValue);
1928
- });
1929
- });
1930
- return [stateValue, setEffectVal];
1931
- }
1932
-
1933
- var OverflowContext = /*#__PURE__*/index$3.react.createContext(null);
1934
-
1935
- var _excluded$1 = ["component"],
1936
- _excluded2 = ["className"],
1937
- _excluded3 = ["className"];
1938
- var InternalRawItem = function InternalRawItem(props, ref) {
1939
- var context = index$3.react.useContext(OverflowContext);
1940
- // Render directly when context not provided
1941
- if (!context) {
1942
- var _props$component = props.component,
1943
- Component = _props$component === void 0 ? 'div' : _props$component,
1944
- _restProps = _objectWithoutProperties(props, _excluded$1);
1945
- return /*#__PURE__*/index$3.react.createElement(Component, _extends({}, _restProps, {
1946
- ref: ref
1947
- }));
1948
- }
1949
- var contextClassName = context.className,
1950
- restContext = _objectWithoutProperties(context, _excluded2);
1951
- var className = props.className,
1952
- restProps = _objectWithoutProperties(props, _excluded3);
1953
- // Do not pass context to sub item to avoid multiple measure
1954
- return /*#__PURE__*/index$3.react.createElement(OverflowContext.Provider, {
1955
- value: null
1956
- }, /*#__PURE__*/index$3.react.createElement(Item, _extends({
1957
- ref: ref,
1958
- className: index.classnames(contextClassName, className)
1959
- }, restContext, restProps)));
1960
- };
1961
- var RawItem = /*#__PURE__*/index$3.react.forwardRef(InternalRawItem);
1962
- RawItem.displayName = 'RawItem';
1963
-
1964
- var _excluded = ["prefixCls", "data", "renderItem", "renderRawItem", "itemKey", "itemWidth", "ssr", "style", "className", "maxCount", "renderRest", "renderRawRest", "suffix", "component", "itemComponent", "onVisibleChange"];
1965
- var RESPONSIVE = 'responsive';
1966
- var INVALIDATE = 'invalidate';
1967
- function defaultRenderRest(omittedItems) {
1968
- return "+ ".concat(omittedItems.length, " ...");
1969
- }
1970
- function Overflow(props, ref) {
1971
- var _props$prefixCls = props.prefixCls,
1972
- prefixCls = _props$prefixCls === void 0 ? 'rc-overflow' : _props$prefixCls,
1973
- _props$data = props.data,
1974
- data = _props$data === void 0 ? [] : _props$data,
1975
- renderItem = props.renderItem,
1976
- renderRawItem = props.renderRawItem,
1977
- itemKey = props.itemKey,
1978
- _props$itemWidth = props.itemWidth,
1979
- itemWidth = _props$itemWidth === void 0 ? 10 : _props$itemWidth,
1980
- ssr = props.ssr,
1981
- style = props.style,
1982
- className = props.className,
1983
- maxCount = props.maxCount,
1984
- renderRest = props.renderRest,
1985
- renderRawRest = props.renderRawRest,
1986
- suffix = props.suffix,
1987
- _props$component = props.component,
1988
- Component = _props$component === void 0 ? 'div' : _props$component,
1989
- itemComponent = props.itemComponent,
1990
- onVisibleChange = props.onVisibleChange,
1991
- restProps = _objectWithoutProperties(props, _excluded);
1992
- var fullySSR = ssr === 'full';
1993
- var notifyEffectUpdate = useBatcher();
1994
- var _useEffectState = useEffectState(notifyEffectUpdate, null),
1995
- _useEffectState2 = _slicedToArray(_useEffectState, 2),
1996
- containerWidth = _useEffectState2[0],
1997
- setContainerWidth = _useEffectState2[1];
1998
- var mergedContainerWidth = containerWidth || 0;
1999
- var _useEffectState3 = useEffectState(notifyEffectUpdate, new Map()),
2000
- _useEffectState4 = _slicedToArray(_useEffectState3, 2),
2001
- itemWidths = _useEffectState4[0],
2002
- setItemWidths = _useEffectState4[1];
2003
- var _useEffectState5 = useEffectState(notifyEffectUpdate, 0),
2004
- _useEffectState6 = _slicedToArray(_useEffectState5, 2),
2005
- prevRestWidth = _useEffectState6[0],
2006
- setPrevRestWidth = _useEffectState6[1];
2007
- var _useEffectState7 = useEffectState(notifyEffectUpdate, 0),
2008
- _useEffectState8 = _slicedToArray(_useEffectState7, 2),
2009
- restWidth = _useEffectState8[0],
2010
- setRestWidth = _useEffectState8[1];
2011
- var _useEffectState9 = useEffectState(notifyEffectUpdate, 0),
2012
- _useEffectState10 = _slicedToArray(_useEffectState9, 2),
2013
- suffixWidth = _useEffectState10[0],
2014
- setSuffixWidth = _useEffectState10[1];
2015
- var _useState = index$3.react.useState(null),
2016
- _useState2 = _slicedToArray(_useState, 2),
2017
- suffixFixedStart = _useState2[0],
2018
- setSuffixFixedStart = _useState2[1];
2019
- var _useState3 = index$3.react.useState(null),
2020
- _useState4 = _slicedToArray(_useState3, 2),
2021
- displayCount = _useState4[0],
2022
- setDisplayCount = _useState4[1];
2023
- var mergedDisplayCount = index$3.react.useMemo(function () {
2024
- if (displayCount === null && fullySSR) {
2025
- return Number.MAX_SAFE_INTEGER;
2026
- }
2027
- return displayCount || 0;
2028
- }, [displayCount, containerWidth]);
2029
- var _useState5 = index$3.react.useState(false),
2030
- _useState6 = _slicedToArray(_useState5, 2),
2031
- restReady = _useState6[0],
2032
- setRestReady = _useState6[1];
2033
- var itemPrefixCls = "".concat(prefixCls, "-item");
2034
- // Always use the max width to avoid blink
2035
- var mergedRestWidth = Math.max(prevRestWidth, restWidth);
2036
- // ================================= Data =================================
2037
- var isResponsive = maxCount === RESPONSIVE;
2038
- var shouldResponsive = data.length && isResponsive;
2039
- var invalidate = maxCount === INVALIDATE;
2040
- /**
2041
- * When is `responsive`, we will always render rest node to get the real width of it for calculation
2042
- */
2043
- var showRest = shouldResponsive || typeof maxCount === 'number' && data.length > maxCount;
2044
- var mergedData = index$3.react.useMemo(function () {
2045
- var items = data;
2046
- if (shouldResponsive) {
2047
- if (containerWidth === null && fullySSR) {
2048
- items = data;
2049
- } else {
2050
- items = data.slice(0, Math.min(data.length, mergedContainerWidth / itemWidth));
2051
- }
2052
- } else if (typeof maxCount === 'number') {
2053
- items = data.slice(0, maxCount);
2054
- }
2055
- return items;
2056
- }, [data, itemWidth, containerWidth, maxCount, shouldResponsive]);
2057
- var omittedItems = index$3.react.useMemo(function () {
2058
- if (shouldResponsive) {
2059
- return data.slice(mergedDisplayCount + 1);
2060
- }
2061
- return data.slice(mergedData.length);
2062
- }, [data, mergedData, shouldResponsive, mergedDisplayCount]);
2063
- // ================================= Item =================================
2064
- var getKey = index$3.react.useCallback(function (item, index) {
2065
- var _ref;
2066
- if (typeof itemKey === 'function') {
2067
- return itemKey(item);
2068
- }
2069
- return (_ref = itemKey && (item === null || item === void 0 ? void 0 : item[itemKey])) !== null && _ref !== void 0 ? _ref : index;
2070
- }, [itemKey]);
2071
- var mergedRenderItem = index$3.react.useCallback(renderItem || function (item) {
2072
- return item;
2073
- }, [renderItem]);
2074
- function updateDisplayCount(count, suffixFixedStartVal, notReady) {
2075
- // React 18 will sync render even when the value is same in some case.
2076
- // We take `mergedData` as deps which may cause dead loop if it's dynamic generate.
2077
- // ref: https://github.com/ant-design/ant-design/issues/36559
2078
- if (displayCount === count && (suffixFixedStartVal === undefined || suffixFixedStartVal === suffixFixedStart)) {
2079
- return;
2080
- }
2081
- setDisplayCount(count);
2082
- if (!notReady) {
2083
- setRestReady(count < data.length - 1);
2084
- onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(count);
2085
- }
2086
- if (suffixFixedStartVal !== undefined) {
2087
- setSuffixFixedStart(suffixFixedStartVal);
2088
- }
2089
- }
2090
- // ================================= Size =================================
2091
- function onOverflowResize(_, element) {
2092
- setContainerWidth(element.clientWidth);
2093
- }
2094
- function registerSize(key, width) {
2095
- setItemWidths(function (origin) {
2096
- var clone = new Map(origin);
2097
- if (width === null) {
2098
- clone.delete(key);
2099
- } else {
2100
- clone.set(key, width);
2101
- }
2102
- return clone;
2103
- });
2104
- }
2105
- function registerOverflowSize(_, width) {
2106
- setRestWidth(width);
2107
- setPrevRestWidth(restWidth);
2108
- }
2109
- function registerSuffixSize(_, width) {
2110
- setSuffixWidth(width);
2111
- }
2112
- // ================================ Effect ================================
2113
- function getItemWidth(index) {
2114
- return itemWidths.get(getKey(mergedData[index], index));
2115
- }
2116
- index$3.useLayoutEffect(function () {
2117
- if (mergedContainerWidth && typeof mergedRestWidth === 'number' && mergedData) {
2118
- var totalWidth = suffixWidth;
2119
- var len = mergedData.length;
2120
- var lastIndex = len - 1;
2121
- // When data count change to 0, reset this since not loop will reach
2122
- if (!len) {
2123
- updateDisplayCount(0, null);
2124
- return;
2125
- }
2126
- for (var i = 0; i < len; i += 1) {
2127
- var currentItemWidth = getItemWidth(i);
2128
- // Fully will always render
2129
- if (fullySSR) {
2130
- currentItemWidth = currentItemWidth || 0;
2131
- }
2132
- // Break since data not ready
2133
- if (currentItemWidth === undefined) {
2134
- updateDisplayCount(i - 1, undefined, true);
2135
- break;
2136
- }
2137
- // Find best match
2138
- totalWidth += currentItemWidth;
2139
- if (
2140
- // Only one means `totalWidth` is the final width
2141
- lastIndex === 0 && totalWidth <= mergedContainerWidth ||
2142
- // Last two width will be the final width
2143
- i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex) <= mergedContainerWidth) {
2144
- // Additional check if match the end
2145
- updateDisplayCount(lastIndex, null);
2146
- break;
2147
- } else if (totalWidth + mergedRestWidth > mergedContainerWidth) {
2148
- // Can not hold all the content to show rest
2149
- updateDisplayCount(i - 1, totalWidth - currentItemWidth - suffixWidth + restWidth);
2150
- break;
2151
- }
2152
- }
2153
- if (suffix && getItemWidth(0) + suffixWidth > mergedContainerWidth) {
2154
- setSuffixFixedStart(null);
2155
- }
2156
- }
2157
- }, [mergedContainerWidth, itemWidths, restWidth, suffixWidth, getKey, mergedData]);
2158
- // ================================ Render ================================
2159
- var displayRest = restReady && !!omittedItems.length;
2160
- var suffixStyle = {};
2161
- if (suffixFixedStart !== null && shouldResponsive) {
2162
- suffixStyle = {
2163
- position: 'absolute',
2164
- left: suffixFixedStart,
2165
- top: 0
2166
- };
2167
- }
2168
- var itemSharedProps = {
2169
- prefixCls: itemPrefixCls,
2170
- responsive: shouldResponsive,
2171
- component: itemComponent,
2172
- invalidate: invalidate
2173
- };
2174
- // >>>>> Choice render fun by `renderRawItem`
2175
- var internalRenderItemNode = renderRawItem ? function (item, index) {
2176
- var key = getKey(item, index);
2177
- return /*#__PURE__*/index$3.react.createElement(OverflowContext.Provider, {
2178
- key: key,
2179
- value: _objectSpread2(_objectSpread2({}, itemSharedProps), {}, {
2180
- order: index,
2181
- item: item,
2182
- itemKey: key,
2183
- registerSize: registerSize,
2184
- display: index <= mergedDisplayCount
2185
- })
2186
- }, renderRawItem(item, index));
2187
- } : function (item, index) {
2188
- var key = getKey(item, index);
2189
- return /*#__PURE__*/index$3.react.createElement(Item, _extends({}, itemSharedProps, {
2190
- order: index,
2191
- key: key,
2192
- item: item,
2193
- renderItem: mergedRenderItem,
2194
- itemKey: key,
2195
- registerSize: registerSize,
2196
- display: index <= mergedDisplayCount
2197
- }));
2198
- };
2199
- // >>>>> Rest node
2200
- var restNode;
2201
- var restContextProps = {
2202
- order: displayRest ? mergedDisplayCount : Number.MAX_SAFE_INTEGER,
2203
- className: "".concat(itemPrefixCls, "-rest"),
2204
- registerSize: registerOverflowSize,
2205
- display: displayRest
2206
- };
2207
- if (!renderRawRest) {
2208
- var mergedRenderRest = renderRest || defaultRenderRest;
2209
- restNode = /*#__PURE__*/index$3.react.createElement(Item, _extends({}, itemSharedProps, restContextProps), typeof mergedRenderRest === 'function' ? mergedRenderRest(omittedItems) : mergedRenderRest);
2210
- } else if (renderRawRest) {
2211
- restNode = /*#__PURE__*/index$3.react.createElement(OverflowContext.Provider, {
2212
- value: _objectSpread2(_objectSpread2({}, itemSharedProps), restContextProps)
2213
- }, renderRawRest(omittedItems));
2214
- }
2215
- var overflowNode = /*#__PURE__*/index$3.react.createElement(Component, _extends({
2216
- className: index.classnames(!invalidate && prefixCls, className),
2217
- style: style,
2218
- ref: ref
2219
- }, restProps), mergedData.map(internalRenderItemNode), showRest ? restNode : null, suffix && /*#__PURE__*/index$3.react.createElement(Item, _extends({}, itemSharedProps, {
2220
- responsive: isResponsive,
2221
- responsiveDisabled: !shouldResponsive,
2222
- order: mergedDisplayCount,
2223
- className: "".concat(itemPrefixCls, "-suffix"),
2224
- registerSize: registerSuffixSize,
2225
- display: true,
2226
- style: suffixStyle
2227
- }), suffix));
2228
- if (isResponsive) {
2229
- overflowNode = /*#__PURE__*/index$3.react.createElement(index$3.RefResizeObserver, {
2230
- onResize: onOverflowResize,
2231
- disabled: !shouldResponsive
2232
- }, overflowNode);
2233
- }
2234
- return overflowNode;
2235
- }
2236
- var ForwardOverflow = /*#__PURE__*/index$3.react.forwardRef(Overflow);
2237
- ForwardOverflow.displayName = 'Overflow';
2238
- ForwardOverflow.Item = RawItem;
2239
- ForwardOverflow.RESPONSIVE = RESPONSIVE;
2240
- ForwardOverflow.INVALIDATE = INVALIDATE;
2241
-
2242
- const rcOverflowCss = "@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}.rc-overflow{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.rc-overflow-item{transition:all 0.3s ease;padding:0 2px;display:flex;align-items:center;justify-content:center}";
2243
-
2244
- const BcmRcOverflow = class {
2245
- constructor(hostRef) {
2246
- index$1.registerInstance(this, hostRef);
2247
- this.selectOtherTag = index$1.createEvent(this, "bcm-select-other-tag", 7);
2248
- this.selectTag = index$1.createEvent(this, "bcm-select-tag", 7);
2249
- this.deleteTag = index$1.createEvent(this, "bcm-delete-tag", 7);
2250
- this.renderItem = item => {
2251
- return index$3.react.createElement("bcm-tooltip", {
2252
- placement: "bottom",
2253
- message: item.text,
2254
- trigger: "hover",
2255
- }, index$3.react.createElement("div", {
2256
- id: item.value + "-tag",
2257
- className: "bcm-tag",
2258
- onClick: ({ target }) => this.onClickControl(target, item, false),
2259
- }, index$3.react.createElement("span", { className: "bcm-tag__content dismissable" },
2260
- // .bcm-tag__content span {
2261
- // display: block;
2262
- // max-width: 38px;
2263
- // white-space: nowrap;
2264
- // overflow: hidden;
2265
- // text-overflow: ellipsis;
2266
- index$3.react.createElement("div", { className: "value tw-block tw-max-w-[38px] tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap" }, item.text), index$3.react.createElement("span", {
2267
- className: "right close-button",
2268
- }, index$3.react.createElement("bcm-icon", {
2269
- icon: "fa fa-times",
2270
- })))));
2271
- };
2272
- this.renderRest = items => {
2273
- const titles = (items === null || items === void 0 ? void 0 : items.sort((a, b) => +a.ct - +b.ct).slice(0, 15).map(item => stringHelper.StringHelper.textLimitter(item.text, 40, true)).toString().split(",").join("\r\n")) + (items.length > 15 ? "\r\n..." : "");
2274
- return index$3.react.createElement("bcm-tooltip", {
2275
- placement: "bottom",
2276
- message: titles,
2277
- trigger: "hover",
2278
- }, index$3.react.createElement("div", {
2279
- className: "bcm-tag bcm-tag--other",
2280
- onClick: ({ target }) => this.onClickControl(target, items, true),
2281
- }, index$3.react.createElement("span", { className: `bcm-tag__content dismissable ${this.checked ? "checkable checked" : ""}` }, index$3.react.createElement("span", { className: "value" }, `+${items === null || items === void 0 ? void 0 : items.length}`), index$3.react.createElement("span", { className: "right close-button" }, index$3.react.createElement("bcm-icon", {
2282
- icon: "fa fa-times",
2283
- })))));
2284
- };
2285
- this._id = generate.Generate.UID();
2286
- this.maxCount = 1;
2287
- this.data = [];
2288
- this.checked = false;
2289
- }
2290
- isClickDismiss(e) {
2291
- return e["s-hn"] === "BCM-ICON";
2292
- }
2293
- onClickControl(e, item, isOtherTag = false) {
2294
- const isClickClose = this.isClickDismiss(e);
2295
- isClickClose && this.deleteTag.emit({ id: Array.isArray(item) ? item.map(i => i.value) : item.value }) && this.checked && (this.checked = false);
2296
- !isOtherTag && this.selectTag.emit({ id: item.value }) && this.checked && (this.checked = false);
2297
- if (isOtherTag && !isClickClose) {
2298
- this.checked = !this.checked;
2299
- this.selectOtherTag.emit({ id: item === null || item === void 0 ? void 0 : item.map(i => i.value), checked: this.checked });
2300
- }
2301
- }
2302
- componentWillRender() {
2303
- const { data, renderItem, renderRest, maxCount } = this;
2304
- this.overflowInstance = index$3.react.createElement(ForwardOverflow, {
2305
- data,
2306
- renderItem,
2307
- renderRest,
2308
- maxCount,
2309
- });
2310
- index$3.reactDom.render(this.overflowInstance, this.el);
2311
- }
2312
- get el() { return index$1.getElement(this); }
2313
- };
2314
- BcmRcOverflow.style = rcOverflowCss;
2315
-
2316
- const { state } = index$2.createStore({
2317
- value: new Map(),
2318
- });
2319
- const setValue = val => {
2320
- const { id, dataSource } = val;
2321
- const data = {
2322
- id: generate.snq(() => id, generate.Generate.UID),
2323
- dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
2324
- searchIsOnlyChilds: val.searchIsOnlyChilds,
2325
- };
2326
- state.value.set(data.id, data);
2327
- };
2328
- const recursive = (data, parentId) => {
2329
- let recData = [];
2330
- if (data) {
2331
- recData = data.map(item => (Object.assign(Object.assign(Object.assign({}, item), { parentId: generate.snq(() => parentId, null) }), (item.items && item.items.length > 0 && { items: generate.snq(() => recursive(item.items, item.id), []) }))));
2332
- }
2333
- return recData;
2334
- };
2335
- const removeValue = _id => {
2336
- state.value.delete(_id);
2337
- };
2338
- const getValue = id => generate.snq(() => state.value.get(id), {});
2339
- const getDataPagination = (id, limit = 3) => {
2340
- let data = [];
2341
- const value = getValue(id);
2342
- if (value) {
2343
- const { dataSource } = value;
2344
- data = dataSource.slice(0, limit);
2345
- }
2346
- return data;
2347
- };
2348
- // //search treeview data by text
2349
- // const searchData = (id, search, items?) => {
2350
- // let dataSource
2351
- // if (items && items.length > 0) {
2352
- // dataSource = items
2353
- // } else {
2354
- // const value = getValue(id);
2355
- // dataSource = value.dataSource;
2356
- // }
2357
- // let result = []
2358
- // if (dataSource) {
2359
- // dataSource.forEach(child => {
2360
- // if (child.text.toLowerCase().includes(search.toLowerCase())) {
2361
- // result.push(child)
2362
- // }
2363
- // result = result.concat(searchData(id, search, child.items))
2364
- // })
2365
- // };
2366
- // return result
2367
- // };
2368
- //nested search
2369
- const searchData = (id, searchText, items) => {
2370
- let dataSource;
2371
- if (items && items.length > 0) {
2372
- dataSource = items;
2373
- }
2374
- else {
2375
- const value = getValue(id);
2376
- dataSource = value.dataSource;
2377
- }
2378
- let results = [];
2379
- if (dataSource) {
2380
- results.push(nestedSearch(id, dataSource, searchText));
2381
- //return with their parents
2382
- // dataSource.forEach(child => {
2383
- // if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
2384
- // results.push(child)
2385
- // } else if (child.items && child.items.length > 0) {
2386
- // child.items = nestedSearch(child.items, searchText)
2387
- // if (child.items.length > 0) {
2388
- // results.push(child)
2389
- // }
2390
- // }
2391
- // })
2392
- }
2393
- return {
2394
- result: generate.snq(() => generate.Generate.flatArray(results[0].result), []),
2395
- matching: generate.snq(() => results[0].matching, []),
2396
- parentIndex: generate.snq(() => results[0].parentIndex, []),
2397
- nestedResult: generate.snq(() => results[0].nestedResult, []),
2398
- };
2399
- };
2400
- const nestedSearch = (id, items, searchText) => {
2401
- let matching = [];
2402
- let parentIndex = [];
2403
- let result = [];
2404
- let nestedResult = [];
2405
- const { searchIsOnlyChilds } = getValue(id);
2406
- if (items && items.length > 0) {
2407
- items.forEach(child => {
2408
- let isChild = searchIsOnlyChilds && child.parentId !== null;
2409
- let isMatching = (child.text && stringHelper.StringHelper.slugify(child.text).includes(stringHelper.StringHelper.slugify(searchText))) ||
2410
- (child.keywords && stringHelper.StringHelper.slugify(child.keywords).includes(stringHelper.StringHelper.slugify(searchText)));
2411
- if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
2412
- result.push(child.id);
2413
- matching.push(child.id);
2414
- parentIndex.push(child.id);
2415
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
2416
- if (child.items && child.items.length > 0) {
2417
- const found = nestedSearch(id, child.items, searchText);
2418
- if (found.matching.length > 0) {
2419
- found.matching.forEach(chi => {
2420
- matching.push(chi);
2421
- });
2422
- }
2423
- }
2424
- }
2425
- else if (child.items && child.items.length > 0) {
2426
- const found = nestedSearch(id, child.items, searchText);
2427
- if (found.result.length > 0) {
2428
- found.result.forEach(chi => {
2429
- result.push(chi);
2430
- });
2431
- result.push(child.id);
2432
- parentIndex.push(child.id);
2433
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
2434
- }
2435
- if (found.matching.length > 0) {
2436
- matching.push(...found.matching);
2437
- }
2438
- }
2439
- });
2440
- }
2441
- return { result, matching, parentIndex, nestedResult };
2442
- };
2443
- const searchState = {
2444
- setValue,
2445
- removeValue,
2446
- getValue,
2447
- getDataPagination,
2448
- searchData,
2449
- };
2450
-
2451
- const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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-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}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
2452
-
2453
- const BcmSearch = class {
2454
- constructor(hostRef) {
2455
- index$1.registerInstance(this, hostRef);
2456
- this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
2457
- this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
2458
- this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
2459
- var _a, _b;
2460
- this.isActiveClearable = ((_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.clearable;
2461
- });
2462
- this._id = generate.Generate.UID();
2463
- this.placeholder = "Search";
2464
- this.disabled = false;
2465
- this.readonly = false;
2466
- this.clearable = true;
2467
- this.size = bcm.Bcm.Size.medium;
2468
- this.limit = 10;
2469
- this.searchIsOnlyChilds = false;
2470
- this.minSearchLength = 2;
2471
- this.data = [];
2472
- this.tick = {};
2473
- this.isActiveClearable = false;
2474
- }
2475
- async componentDidLoad() {
2476
- await this.initState();
2477
- }
2478
- async dataChanged(newValue, oldValue) {
2479
- // console.log('data changed', newValue, oldValue)
2480
- if (newValue !== oldValue) {
2481
- await this.initState();
2482
- }
2483
- }
2484
- async initState() {
2485
- await searchState.setValue({
2486
- id: this._id + "-input",
2487
- dataSource: this.data,
2488
- searchIsOnlyChilds: this.searchIsOnlyChilds,
2489
- });
2490
- await this.markForCheck();
2491
- }
2492
- markForCheck() {
2493
- this.tick = generate.Generate.UID();
2494
- }
2495
- handleInput() {
2496
- // console.log("aheyya")
2497
- }
2498
- async onBcmFocus() {
2499
- this.inputElement.focus();
2500
- }
2501
- async onBcmBlur() {
2502
- this.inputElement.blur();
2503
- }
2504
- async onBcmSelect() {
2505
- this.inputElement.select();
2506
- }
2507
- async setValue(newValue) {
2508
- this.inputElement.value = newValue;
2509
- }
2510
- handleFocus() { }
2511
- handleBlur() { }
2512
- handleChange() { }
2513
- async handleClear(eventEmit = true) {
2514
- this.inputElement.value = '';
2515
- const { value, id } = this.inputElement;
2516
- searchState.searchData(id, value);
2517
- this.isActiveClearable = false;
2518
- this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
2519
- this.bcmOnSearchClear.emit(eventEmit);
2520
- await utils.delay(10);
2521
- return Promise.resolve();
2522
- }
2523
- onSearchValue(event, instance) {
2524
- const { value, id } = event.target;
2525
- const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
2526
- const { bcmOnSearch, inputElement } = instance;
2527
- bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
2528
- }
2529
- render() {
2530
- const { _id, placeholder, disabled, readonly } = this;
2531
- return index$1.h(index$1.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index$1.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
2532
- }
2533
- get el() { return index$1.getElement(this); }
2534
- static get watchers() { return {
2535
- "data": ["dataChanged"]
2536
- }; }
2537
- };
2538
- BcmSearch.style = searchCss;
2539
-
2540
- exports.bcm_list = BcmList;
2541
- exports.bcm_rc_overflow = BcmRcOverflow;
2542
- exports.bcm_search = BcmSearch;