bromcom-ui 2.10.1-rc.7 → 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-83906a2b.entry.js → p-086cda42.entry.js} +1 -1
  3. package/dist/bromcom-ui/{p-0399256b.entry.js → p-0a7346a7.entry.js} +1 -1
  4. package/dist/bromcom-ui/{p-725b332a.js → p-1c26a0c1.js} +1 -1
  5. package/dist/bromcom-ui/{p-fa3430bc.js → p-1e8ba7b1.js} +1 -1
  6. package/dist/bromcom-ui/{p-d74d6934.entry.js → p-2f46157a.entry.js} +1 -1
  7. package/dist/bromcom-ui/{p-35455621.entry.js → p-366262cb.entry.js} +1 -1
  8. package/dist/bromcom-ui/{p-974604e0.entry.js → p-377eec7f.entry.js} +1 -1
  9. package/dist/bromcom-ui/{p-71871aa9.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-a2dc9f9d.entry.js → p-4bcb29c3.entry.js} +1 -1
  12. package/dist/bromcom-ui/{p-c88d7eac.entry.js → p-4c30ce4b.entry.js} +1 -1
  13. package/dist/bromcom-ui/{p-382a1cca.entry.js → p-4e577842.entry.js} +1 -1
  14. package/dist/bromcom-ui/p-56655c71.js +5 -0
  15. package/dist/bromcom-ui/{p-51c055b7.entry.js → p-66929631.entry.js} +1 -1
  16. package/dist/bromcom-ui/{p-116eb408.entry.js → p-6a6c51e1.entry.js} +1 -1
  17. package/dist/bromcom-ui/{p-573d87af.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-26f198fe.entry.js → p-73789dbb.entry.js} +1 -1
  20. package/dist/bromcom-ui/{p-d86bbb88.entry.js → p-761208cf.entry.js} +1 -1
  21. package/dist/bromcom-ui/{p-f06cd073.entry.js → p-769facbd.entry.js} +1 -1
  22. package/dist/bromcom-ui/{p-5c78d783.entry.js → p-78ace67b.entry.js} +1 -1
  23. package/dist/bromcom-ui/{p-7fd731e2.entry.js → p-7a2ea416.entry.js} +1 -1
  24. package/dist/bromcom-ui/{p-aea588a1.entry.js → p-7b02eb85.entry.js} +1 -1
  25. package/dist/bromcom-ui/{p-3d2aa52b.entry.js → p-7cf44256.entry.js} +1 -1
  26. package/dist/bromcom-ui/{p-2e2241e1.js → p-81a2c866.js} +1 -1
  27. package/dist/bromcom-ui/{p-78a7a0f5.entry.js → p-8348f7e8.entry.js} +1 -1
  28. package/dist/bromcom-ui/{p-9659d198.entry.js → p-84ff5d64.entry.js} +1 -1
  29. package/dist/bromcom-ui/{p-73b330cc.entry.js → p-8839e454.entry.js} +1 -1
  30. package/dist/bromcom-ui/{p-67cd5132.entry.js → p-8af69fbb.entry.js} +1 -1
  31. package/dist/bromcom-ui/{p-e270b902.entry.js → p-8d16573c.entry.js} +1 -1
  32. package/dist/bromcom-ui/{p-2312db4e.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-0a7a7585.entry.js → p-a55d0baf.entry.js} +1 -1
  36. package/dist/bromcom-ui/{p-c9522c4f.entry.js → p-a9769aef.entry.js} +1 -1
  37. package/dist/bromcom-ui/{p-131b3b56.entry.js → p-b04dbde5.entry.js} +1 -1
  38. package/dist/bromcom-ui/{p-efd19381.js → p-b4e67a0b.js} +1 -1
  39. package/dist/bromcom-ui/{p-b541f477.entry.js → p-b50bee51.entry.js} +1 -1
  40. package/dist/bromcom-ui/{p-019761a4.entry.js → p-bc0e11d2.entry.js} +1 -1
  41. package/dist/bromcom-ui/{p-902a56fd.entry.js → p-c1b1c0b4.entry.js} +1 -1
  42. package/dist/bromcom-ui/{p-ee1749c5.entry.js → p-c285ac3e.entry.js} +1 -1
  43. package/dist/bromcom-ui/{p-23fb226c.entry.js → p-c40a820f.entry.js} +1 -1
  44. package/dist/bromcom-ui/{p-7e339b22.entry.js → p-c658e7f0.entry.js} +1 -1
  45. package/dist/bromcom-ui/{p-c82e61cf.entry.js → p-cc556e65.entry.js} +1 -1
  46. package/dist/bromcom-ui/{p-2a37859a.entry.js → p-ce45a5a0.entry.js} +1 -1
  47. package/dist/bromcom-ui/{p-57e840f5.entry.js → p-d0c1fcc5.entry.js} +1 -1
  48. package/dist/bromcom-ui/{p-19d904a0.js → p-d2b358ae.js} +1 -1
  49. package/dist/bromcom-ui/{p-9967f29f.entry.js → p-d65c93dd.entry.js} +1 -1
  50. package/dist/bromcom-ui/{p-186dc56b.entry.js → p-d706b0bd.entry.js} +1 -1
  51. package/dist/bromcom-ui/{p-75664a73.entry.js → p-d82d0c57.entry.js} +1 -1
  52. package/dist/bromcom-ui/{p-c7b41ea8.entry.js → p-da0a6963.entry.js} +1 -1
  53. package/dist/bromcom-ui/{p-fe74bf5d.entry.js → p-e32e4c09.entry.js} +1 -1
  54. package/dist/bromcom-ui/{p-daa5d928.entry.js → p-ea18d38d.entry.js} +1 -1
  55. package/dist/bromcom-ui/{p-538bd402.entry.js → p-eab01ad5.entry.js} +1 -1
  56. package/dist/bromcom-ui/{p-c4c5ec74.js → p-eb2c11e0.js} +1 -1
  57. package/dist/bromcom-ui/{p-873571b0.entry.js → p-ec2688a7.entry.js} +1 -1
  58. package/dist/bromcom-ui/{p-bb12097e.entry.js → p-ed3b97b0.entry.js} +1 -1
  59. package/dist/bromcom-ui/{p-537f6134.entry.js → p-f0a6db76.entry.js} +1 -1
  60. package/dist/bromcom-ui/{p-cad23150.entry.js → p-f1829cae.entry.js} +1 -1
  61. package/dist/bromcom-ui/{p-d5b818b9.entry.js → p-f327dd16.entry.js} +1 -1
  62. package/dist/bromcom-ui/{p-bb7a53d7.entry.js → p-f824e6bb.entry.js} +1 -1
  63. package/dist/bromcom-ui/{p-36fb65c3.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-bd91dc15.js → generate-a89cbf95.js} +6 -1
  117. package/dist/cjs/{global-28e85645.js → global-12727d81.js} +1 -1
  118. package/dist/cjs/{input-template-2c693443.js → input-template-aed0898b.js} +1 -1
  119. package/dist/cjs/{json-parse-decarator-dc3d71a1.js → json-parse-decarator-f6d01750.js} +1 -1
  120. package/dist/cjs/loader.cjs.js +3 -3
  121. package/dist/cjs/{number-helper-79ccb483.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-6475c0ba.js → package-e3618032.js} +1 -1
  125. package/dist/cjs/{stepper-states-8e284e52.js → stepper-states-5cde5a5b.js} +1 -1
  126. package/dist/cjs/{tooltip-helper-24ad5741.js → tooltip-helper-8e999092.js} +3 -3
  127. package/dist/cjs/{validators-c0d78df5.js → validators-ca50c59e.js} +1 -1
  128. package/dist/collection/components/organism/list/list.js +7 -10
  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 +10 -12
  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-3de552d7.js → generate-f51f2b02.js} +6 -1
  187. package/dist/esm/{global-2c493fd8.js → global-d1c1614b.js} +1 -1
  188. package/dist/esm/{input-template-515d2ea4.js → input-template-43cf6972.js} +1 -1
  189. package/dist/esm/{json-parse-decarator-1b38480d.js → json-parse-decarator-05d60871.js} +1 -1
  190. package/dist/esm/loader.js +3 -3
  191. package/dist/esm/{number-helper-b0c38696.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-df823caa.js → package-ebccec3c.js} +1 -1
  195. package/dist/esm/{stepper-states-baa9adbc.js → stepper-states-0860f554.js} +1 -1
  196. package/dist/esm/{tooltip-helper-615069b8.js → tooltip-helper-ab4dde34.js} +3 -3
  197. package/dist/esm/{validators-c06bfc41.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-37a24b2f.js +0 -5
  202. package/dist/bromcom-ui/p-38e0832d.js +0 -5
  203. package/dist/bromcom-ui/p-3c79abc3.entry.js +0 -7
  204. package/dist/bromcom-ui/p-6dfefcd1.entry.js +0 -5
  205. package/dist/bromcom-ui/p-91264aaa.entry.js +0 -5
  206. package/dist/bromcom-ui/p-9b96a18d.js +0 -5
  207. package/dist/cjs/bcm-list_3.cjs.entry.js +0 -2545
  208. package/dist/cjs/index-7eed931f.js +0 -2146
  209. package/dist/esm/bcm-list_3.entry.js +0 -2539
  210. package/dist/esm/index-e4b6a4ce.js +0 -2127
@@ -1,2545 +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-dc3d71a1.js');
12
- require('./color-helper-c3a819ea.js');
13
- require('./datetime-helper-eaf4fadb.js');
14
- const generate = require('./generate-bd91dc15.js');
15
- const numberHelper = require('./number-helper-79ccb483.js');
16
- const stringHelper = require('./string-helper-3212f4ea.js');
17
- const validators = require('./validators-c0d78df5.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-2c693443.js');
29
- require('./colors-56282b00.js');
30
- require('./colors-078851ec.js');
31
- require('./_commonjsHelpers-ed84c3ca.js');
32
- require('./package-6475c0ba.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({
1028
- details: Object.assign(Object.assign({}, this.value), { shouldTriggerChange: this.shouldTriggerChange })
1029
- });
1030
- }
1031
- }
1032
- else {
1033
- if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
1034
- !this.disableChangeEvent && this.change.emit({
1035
- details: Object.assign(Object.assign({}, this.value), { shouldTriggerChange: this.shouldTriggerChange })
1036
- });
1037
- }
1038
- }
1039
- }
1040
- watchReturnFilterData(newVal) {
1041
- var _a;
1042
- const { checkedItems, visibledItems } = newVal;
1043
- if (checkedItems && visibledItems) {
1044
- this.handleIndeterminate(checkedItems.length, visibledItems.length);
1045
- }
1046
- else {
1047
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
1048
- }
1049
- }
1050
- async handleOpen() {
1051
- if (this.isOpen) {
1052
- this.detectClone();
1053
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1054
- const list = this.el.querySelector(`#bcm-list-${this._id}`);
1055
- if (list) {
1056
- const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
1057
- bcmOverlayContainer.appendChild(list);
1058
- }
1059
- }
1060
- this.open.emit();
1061
- this.calculateLocation();
1062
- this.onSelectSearch();
1063
- }
1064
- else {
1065
- this.listScrollToTop();
1066
- this.close.emit();
1067
- this.listClose.emit();
1068
- await utils.delay(100);
1069
- this.unSelectOther();
1070
- }
1071
- }
1072
- listScrollToTop() {
1073
- const list = document.querySelector(`#bcm-list-${this._id}`);
1074
- if (list) {
1075
- list.querySelector(".scrolling").scrollTop = 0;
1076
- }
1077
- }
1078
- async dataChanged(newValue, oldValue) {
1079
- if (!validators.Validators.compareTwoArrayIsSame(newValue, oldValue)) {
1080
- await this.initState();
1081
- }
1082
- }
1083
- isIntersecting(e) {
1084
- const target = e === null || e === void 0 ? void 0 : e.target;
1085
- if (target && target.id === this._id) {
1086
- this.listenResize();
1087
- }
1088
- }
1089
- handleSlotItems(e) {
1090
- var _a;
1091
- if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
1092
- this.data = e.detail;
1093
- }
1094
- }
1095
- handleChange(e) {
1096
- if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
1097
- e.stopImmediatePropagation();
1098
- }
1099
- }
1100
- handleResize() {
1101
- this.calculateLocation();
1102
- this.debounceHandler();
1103
- }
1104
- handleWheel(event) {
1105
- if (this.isOpen) {
1106
- const list = document.querySelector(`#bcm-list-${this._id}`);
1107
- const isClickInside = list && generate.Generate.findEventPath(event, list);
1108
- if (isClickInside) {
1109
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1110
- this.calculateLocation();
1111
- }
1112
- }
1113
- else {
1114
- this.hide();
1115
- }
1116
- }
1117
- }
1118
- clearAutocomplete() {
1119
- if (this.type == "autocomplete") {
1120
- const autocompleteInput = this.getAutoCompleteInput();
1121
- if (autocompleteInput) {
1122
- autocompleteInput.handleClear(false);
1123
- }
1124
- }
1125
- }
1126
- async handleSelectOtherTag(e) {
1127
- if (this.disabled)
1128
- return;
1129
- const { id, checked } = e.detail;
1130
- this.isSelectedOther = checked;
1131
- if (id) {
1132
- checked ? this.filterOtherList(id) : this.unSelectOther();
1133
- this.isOpen = true;
1134
- }
1135
- }
1136
- async handleDeleteTag(e) {
1137
- var _a;
1138
- if (this.disabled)
1139
- return;
1140
- const { id } = e.detail;
1141
- this.isSelectedOther && this.unSelectOther();
1142
- Array.isArray(id) ? listState.removeOtherTags(this._id, id) : listState.checkedItem(this._id, id);
1143
- this.value = (await this.getCheckedList()).checkedList;
1144
- this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
1145
- }
1146
- async handleSelectTag(_) {
1147
- if (this.disabled)
1148
- return;
1149
- this.clearAutocomplete();
1150
- this.onSelectSearch();
1151
- this.unSelectOther();
1152
- }
1153
- handleClick(event) {
1154
- var _a;
1155
- if (this.disabled)
1156
- return;
1157
- const list = document.querySelector(`#bcm-list-${this._id}`);
1158
- const isClickInside = generate.Generate.findEventPath(event, this.el) || (list && generate.Generate.findEventPath(event, list));
1159
- if (isClickInside) {
1160
- if (this.debounce !== null) {
1161
- event.preventDefault();
1162
- event.stopPropagation();
1163
- clearTimeout(this.debounce);
1164
- this.debounce = null;
1165
- }
1166
- this.debounce = setTimeout(() => {
1167
- this.debounce = null;
1168
- }, 300);
1169
- }
1170
- if (!isClickInside) {
1171
- if (this.type == "autocomplete") {
1172
- const autocompleteInput = this.getAutoCompleteInput();
1173
- if (autocompleteInput) {
1174
- if (this.checkboxes) {
1175
- autocompleteInput.setValue("");
1176
- }
1177
- else {
1178
- autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
1179
- }
1180
- }
1181
- }
1182
- }
1183
- const clickToTag = generate.Generate.findEventPathWithKey(event, "className", ["bcm-tag"]);
1184
- const clickToOtherTag = generate.Generate.findEventPathWithKey(event, "className", ["bcm-tag bcm-tag--other"]);
1185
- const clickToSelect = generate.Generate.findEventPathWithKey(event, "id", [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
1186
- const clickToTagDismiss = generate.Generate.findEventPathWithKey(event, "className", ["right close-button"]);
1187
- if (clickToSelect && !clickToTagDismiss && this.type != "autocomplete") {
1188
- this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
1189
- }
1190
- if (list) {
1191
- if (this.isOpen) {
1192
- if (!list.contains(event.target) && !this.el.contains(event.target)) {
1193
- this.isOpen = false;
1194
- // this.unSelectOther()
1195
- }
1196
- }
1197
- }
1198
- }
1199
- bcmOnSearchClear(event) {
1200
- var _a, _b;
1201
- if (this.type == "autocomplete") {
1202
- 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`) {
1203
- if (event.detail) {
1204
- this.setClear();
1205
- }
1206
- }
1207
- }
1208
- }
1209
- bcmOnSearch(event) {
1210
- var _a, _b, _c, _d, _e, _f;
1211
- 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`) {
1212
- this.searchGetParents = generate.snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
1213
- this.searchResultLimit = 10;
1214
- 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;
1215
- this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
1216
- if (this.searchFound > 0 && this.highlight) {
1217
- this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
1218
- }
1219
- if (this.type == "autocomplete") {
1220
- this.isOpen = true;
1221
- }
1222
- if (!event.detail.result) {
1223
- if (this.type == "autocomplete") {
1224
- this.isOpen = false;
1225
- }
1226
- else {
1227
- this.returnFilterData = {};
1228
- listState.filterData(this._id, null);
1229
- }
1230
- // this.isSelectedOther = false
1231
- this.searchResultLimit = null;
1232
- this.highlightText = null;
1233
- }
1234
- this.markForCheck();
1235
- }
1236
- }
1237
- //keyboard navigation
1238
- handleKeyDown(ev) {
1239
- const keycode = ev.keyCode || ev.which;
1240
- if (keycode === bcm.Bcm$1.KeyCode.escape) {
1241
- if (this.isOpen) {
1242
- this.isOpen = false;
1243
- ev.preventDefault();
1244
- ev.stopPropagation();
1245
- ev.stopImmediatePropagation();
1246
- }
1247
- }
1248
- if (this.keyControl) {
1249
- const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
1250
- keyboard.openGroup = openGroupId => {
1251
- this.openGroup(openGroupId);
1252
- };
1253
- keyboard.checkedItem = checkedItemId => {
1254
- this.checkedItem(checkedItemId);
1255
- };
1256
- keyboard.keyDown();
1257
- }
1258
- }
1259
- handleKeyUp(ev) {
1260
- if (this.keyControl) {
1261
- const focusedList = generate.Generate.findEventPath(ev, this.el);
1262
- if (focusedList) {
1263
- const list = document.getElementById(`bcm-list-${this._id}`);
1264
- if (list) {
1265
- const items = list.querySelectorAll(".bcm-list__item.focused");
1266
- if (items.length > 0) {
1267
- const main = list.querySelector("main");
1268
- const itemHeight = items[0].offsetHeight;
1269
- const listHeight = main.offsetHeight;
1270
- const itemTop = items[0].offsetTop;
1271
- if (itemTop > listHeight) {
1272
- main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
1273
- }
1274
- if (itemTop < listHeight) {
1275
- main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
1276
- }
1277
- }
1278
- }
1279
- }
1280
- }
1281
- }
1282
- async set(data, trigger = true) {
1283
- if (data) {
1284
- this.shouldTriggerChange = trigger;
1285
- if (Array.isArray(data)) {
1286
- this.addChecked(data);
1287
- }
1288
- if (typeof data === "string" || typeof data === "number") {
1289
- this.selectedItem(data);
1290
- }
1291
- }
1292
- else {
1293
- this.setClear();
1294
- }
1295
- }
1296
- async get() {
1297
- var _a, _b;
1298
- 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;
1299
- }
1300
- async getCheckedList() {
1301
- return Promise.resolve(listState.getCheckedList(this._id));
1302
- }
1303
- async getSelected() {
1304
- return Promise.resolve(listState.getSelected(this._id));
1305
- }
1306
- async getValue() {
1307
- return Promise.resolve(this.value);
1308
- }
1309
- async triggerChange(action) {
1310
- this.shouldTriggerChange = action;
1311
- }
1312
- async addChecked(ids = [], save = false, emit = true) {
1313
- if (ids && ids.length > 0) {
1314
- if (!save) {
1315
- listState.setClear(this._id);
1316
- await utils.delay(10);
1317
- }
1318
- await listState.addChecked(this._id, ids);
1319
- await utils.delay(10);
1320
- emit && (this.value = (await this.getCheckedList()).checkedList);
1321
- this.markForCheck();
1322
- }
1323
- return Promise.resolve(this.value);
1324
- }
1325
- async selected(id) {
1326
- if (id) {
1327
- return Promise.resolve(await this.selectedItem(id));
1328
- }
1329
- return false;
1330
- }
1331
- async setClear(e) {
1332
- listState.setClear(this._id);
1333
- this.value = null;
1334
- this.inputText = "";
1335
- this.isOpen = false;
1336
- this.selectAllItem.indeterminate = "uncheck";
1337
- this.markForCheck();
1338
- if (e) {
1339
- e.stopPropagation();
1340
- e.preventDefault();
1341
- }
1342
- await utils.delay(10);
1343
- return Promise.resolve();
1344
- }
1345
- async resetCaption() {
1346
- await utils.delay(10);
1347
- this.caption = this.captionCache;
1348
- this.captionType = this.captionTypeCache;
1349
- this.captionError = null;
1350
- await utils.delay(10);
1351
- return Promise.resolve();
1352
- }
1353
- detectClone() {
1354
- const list = document.querySelectorAll(`#bcm-list-${this._id}`);
1355
- if (list.length > 0) {
1356
- list.forEach((item) => {
1357
- const tempid = item.getAttribute("temp-id");
1358
- if (tempid !== `bcm-list-${this.tempId}`) {
1359
- console.warn(`[bcm-list] - Detected duplicate temp-id="${tempid}"`);
1360
- item.remove();
1361
- }
1362
- });
1363
- }
1364
- }
1365
- async show() {
1366
- this.isOpen = true;
1367
- return Promise.resolve();
1368
- }
1369
- async hide() {
1370
- this.isOpen = false;
1371
- return Promise.resolve();
1372
- }
1373
- updateOptions() {
1374
- listState.updateOptions(this._id, this);
1375
- }
1376
- handleIndeterminate(checkeds, total) {
1377
- 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 });
1378
- }
1379
- listenResize() {
1380
- this.calculateLocation();
1381
- this.markForCheck();
1382
- }
1383
- async unSelectOther() {
1384
- await this.onClearSearch();
1385
- this.isSelectedOther = false;
1386
- this.searchFound = null;
1387
- this.returnFilterData = {};
1388
- listState.filterData(this._id, null);
1389
- await utils.delay(10);
1390
- return Promise.resolve();
1391
- }
1392
- async onClearSearch() {
1393
- const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
1394
- if (searchInput) {
1395
- await searchInput.handleClear();
1396
- }
1397
- return Promise.resolve();
1398
- }
1399
- async onSelectSearch() {
1400
- const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
1401
- if (searchInput) {
1402
- await utils.delay(100);
1403
- searchInput.onBcmFocus();
1404
- searchInput.onBcmSelect();
1405
- }
1406
- }
1407
- async filterOtherList(ids) {
1408
- const checklist = (await this.getCheckedList()).nestedResult;
1409
- const filter = generate.Generate.convertIdsToNestedData(ids, checklist);
1410
- this.returnFilterData = await listState.filterData(this._id, filter, null, true);
1411
- this.searchFound = (ids === null || ids === void 0 ? void 0 : ids.length) || 0;
1412
- this.limit = 500;
1413
- this.searchGetParents = null;
1414
- await utils.delay(1000);
1415
- this.markForCheck();
1416
- }
1417
- async initState() {
1418
- var _a, _b, _c;
1419
- this.onClearSearch();
1420
- await listState.setValue({
1421
- id: this._id,
1422
- dataSource: this.data && generate.snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
1423
- options: this,
1424
- });
1425
- const { totalRoots, totalItems } = listState.getValue(this._id);
1426
- this.totalData = totalItems;
1427
- this.totalRootData = totalRoots;
1428
- this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
1429
- if (!this.checkboxes) {
1430
- this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
1431
- }
1432
- // checkli olan subparentların indeterminate kontrolü için
1433
- if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1434
- const checkedIDs = [];
1435
- this.value.forEach(item => {
1436
- if (!item.items || item.items.length === 0) {
1437
- checkedIDs.push(item.id);
1438
- }
1439
- });
1440
- await this.addChecked(checkedIDs, false, false);
1441
- }
1442
- await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
1443
- await this.markForCheck();
1444
- }
1445
- async markForCheck() {
1446
- await utils.delay(10);
1447
- this.tick = generate.Generate.UID();
1448
- }
1449
- getOptions() {
1450
- return generate.snq(() => listState.getValue(this._id).options, {});
1451
- }
1452
- getItems() {
1453
- if (this.isSelectedOther) {
1454
- return this.returnFilterData["checkedItems"];
1455
- }
1456
- return generate.snq(() => listState.getData(this._id), []);
1457
- }
1458
- getLimitedItems(ids) {
1459
- return generate.snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
1460
- }
1461
- openGroup(parentId) {
1462
- listState.openGroup(this._id, parentId);
1463
- this.markForCheck();
1464
- }
1465
- focusItem(e) {
1466
- if (e.target.classList.contains("bcm-list__item")) {
1467
- const item = e.target;
1468
- const list = document.getElementById(`bcm-list-${this._id}`);
1469
- if (list) {
1470
- const items = list.querySelectorAll(".bcm-list__item");
1471
- if (items.length > 0) {
1472
- const selectedItem = list.querySelector(".bcm-list__item.focused");
1473
- if (selectedItem) {
1474
- selectedItem.classList.remove("focused");
1475
- }
1476
- item.classList.add("focused");
1477
- }
1478
- }
1479
- }
1480
- }
1481
- async selectedItem(itemId) {
1482
- var _a;
1483
- if (!this.checkboxes) {
1484
- this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
1485
- this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
1486
- this.isOpen = false;
1487
- this.markForCheck();
1488
- if (this.type == "autocomplete" && this.value) {
1489
- // await delay(100)
1490
- // this.resetCaption()
1491
- const autocompleteInput = this.getAutoCompleteInput();
1492
- if (autocompleteInput) {
1493
- setTimeout(() => {
1494
- var _a;
1495
- autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
1496
- this.isOpen = false;
1497
- }, 100);
1498
- }
1499
- }
1500
- }
1501
- return Promise.resolve(this.value);
1502
- }
1503
- async checkedItem(itemId) {
1504
- const isCheckSelectAll = itemId === "select-all";
1505
- if (!isCheckSelectAll) {
1506
- listState.checkedItem(this._id, itemId);
1507
- }
1508
- else {
1509
- listState.selectAll(this._id, !this.selectAllItem.checked);
1510
- }
1511
- this.value = (await this.getCheckedList()).checkedList;
1512
- this.changeVisibleCheckeds();
1513
- this.markForCheck();
1514
- }
1515
- changeVisibleCheckeds() {
1516
- const { visibledItems } = this.returnFilterData;
1517
- this.returnFilterData = {
1518
- visibledItems,
1519
- checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
1520
- };
1521
- }
1522
- getAutoCompleteInput() {
1523
- return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
1524
- }
1525
- dataScrollEvent(event) {
1526
- let count = 0;
1527
- let io = new IntersectionObserver((data) => {
1528
- if (count === 0) {
1529
- count++;
1530
- if (data[0].isIntersecting) {
1531
- this.limit += 15;
1532
- this.searchResultLimit += 15;
1533
- io.disconnect();
1534
- io = null;
1535
- }
1536
- }
1537
- }, this.options);
1538
- io.observe(event.target.lastElementChild);
1539
- }
1540
- async calculateLocation() {
1541
- var _a, _b;
1542
- if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
1543
- const list = document.getElementById(`bcm-list-${this._id}`);
1544
- // list && (list.style.height = '256px') //sebebi neydi ki!
1545
- var placement = this.placement;
1546
- const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
1547
- const targetElement = document.getElementById(targetElementId);
1548
- if (list && targetElement) {
1549
- popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
1550
- await utils.delay(10);
1551
- let pos = popoverPlacement.setPosition(placement, targetElement);
1552
- let captionAreaHeight = 0;
1553
- let labelAreaHeight = 0;
1554
- if (this.linkedComponent) {
1555
- const linked = document.getElementById(this.linkedComponent);
1556
- if (linked) {
1557
- if (!linked["noCaption"]) {
1558
- const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".bcm-caption-area")) || linked.querySelector(".bcm-caption-area");
1559
- if (captionArea) {
1560
- captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
1561
- }
1562
- }
1563
- const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".bcm-label")) || linked.querySelector(".bcm-label");
1564
- if (labelArea) {
1565
- labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
1566
- }
1567
- }
1568
- }
1569
- if (this.fullWidth) {
1570
- list.style.width = targetElement.offsetWidth + "px";
1571
- }
1572
- else {
1573
- list.style.width = this.width || "auto";
1574
- }
1575
- if (this.height.indexOf("%") > -1) {
1576
- list.style.height = numberHelper.NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
1577
- }
1578
- else {
1579
- list.style.height = this.height;
1580
- }
1581
- list.style.minHeight = this.minHeight;
1582
- // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
1583
- const calculatedMaxHeight = placement.split("-")[0] == "top" ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
1584
- if (this.maxHeight.indexOf("%") > -1) {
1585
- list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + "px";
1586
- }
1587
- else {
1588
- list.style.maxHeight = numberHelper.NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + "px";
1589
- }
1590
- popoverPlacement.getPlacement(list, targetElement, placement, (place) => (placement = place));
1591
- await utils.delay(10);
1592
- pos = popoverPlacement.setPosition(placement, targetElement);
1593
- list.style.top = (placement.split("-")[0] == "top" ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + "px";
1594
- // list.style.left = pos[1] + 'px';
1595
- list.style.left = placement.split("-")[1] == "end" ? pos[1] - list.offsetWidth + "px" : pos[1] + "px";
1596
- list.classList.toggle("bcm-list--top", placement.split("-")[0] == "top");
1597
- this.calculatedViewport = true;
1598
- }
1599
- }
1600
- }
1601
- handleTransitionEnd(e) {
1602
- const { isOpen, type } = this;
1603
- const propertName = e === null || e === void 0 ? void 0 : e.propertyName;
1604
- if (isOpen && type == "select" && propertName == "transform") {
1605
- this.listOpen.emit();
1606
- }
1607
- }
1608
- render() {
1609
- const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
1610
- const hostClasses = index.classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
1611
- "error": this.captionType == bcm.Bcm$1.Status.error,
1612
- "full-width": fullWidth,
1613
- "bcm-list__linked": this.linkedComponent,
1614
- hidden,
1615
- readonly,
1616
- disabled,
1617
- });
1618
- const bcmListContainer = index.classnames("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
1619
- "is-open": this.isOpen && this.calculatedViewport,
1620
- "error": this.captionType == bcm.Bcm$1.Status.error,
1621
- "full-width": fullWidth,
1622
- hidden,
1623
- readonly,
1624
- disabled,
1625
- });
1626
- const bcmListInput = index.classnames("bcm-list__input");
1627
- const openedType = this.type == "select" || this.type == "autocomplete" || this.linkedComponent;
1628
- return (index$1.h(index$1.Host, { class: hostClasses, tabindex: "0", style: {
1629
- "--width": fullWidth ? "100%" : this.width,
1630
- "--height": openedType ? "100%" : this.height,
1631
- "--max-height": openedType ? "inherit" : this.maxHeight,
1632
- "--min-height": openedType ? "inherit" : this.minHeight,
1633
- } }, 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", {
1634
- disabled: disabled,
1635
- }) }, 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 })));
1636
- }
1637
- get el() { return index$1.getElement(this); }
1638
- static get watchers() { return {
1639
- "_id": ["watchId"],
1640
- "value": ["handleValueChange"],
1641
- "returnFilterData": ["watchReturnFilterData"],
1642
- "isOpen": ["handleOpen"],
1643
- "data": ["dataChanged"]
1644
- }; }
1645
- };
1646
- __decorate([
1647
- isLoadDecorator.IsLoad()
1648
- ], BcmList.prototype, "el", void 0);
1649
- __decorate([
1650
- jsonParseDecarator.JsonParse("data", true)
1651
- ], BcmList.prototype, "dataChanged", null);
1652
- BcmList.style = listCss;
1653
-
1654
- function _extends() {
1655
- _extends = Object.assign ? Object.assign.bind() : function (target) {
1656
- for (var i = 1; i < arguments.length; i++) {
1657
- var source = arguments[i];
1658
- for (var key in source) {
1659
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1660
- target[key] = source[key];
1661
- }
1662
- }
1663
- }
1664
- return target;
1665
- };
1666
- return _extends.apply(this, arguments);
1667
- }
1668
-
1669
- function _typeof(obj) {
1670
- "@babel/helpers - typeof";
1671
-
1672
- return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
1673
- return typeof obj;
1674
- } : function (obj) {
1675
- return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
1676
- }, _typeof(obj);
1677
- }
1678
-
1679
- function _toPrimitive(input, hint) {
1680
- if (_typeof(input) !== "object" || input === null) return input;
1681
- var prim = input[Symbol.toPrimitive];
1682
- if (prim !== undefined) {
1683
- var res = prim.call(input, hint || "default");
1684
- if (_typeof(res) !== "object") return res;
1685
- throw new TypeError("@@toPrimitive must return a primitive value.");
1686
- }
1687
- return (hint === "string" ? String : Number)(input);
1688
- }
1689
-
1690
- function _toPropertyKey(arg) {
1691
- var key = _toPrimitive(arg, "string");
1692
- return _typeof(key) === "symbol" ? key : String(key);
1693
- }
1694
-
1695
- function _defineProperty(obj, key, value) {
1696
- key = _toPropertyKey(key);
1697
- if (key in obj) {
1698
- Object.defineProperty(obj, key, {
1699
- value: value,
1700
- enumerable: true,
1701
- configurable: true,
1702
- writable: true
1703
- });
1704
- } else {
1705
- obj[key] = value;
1706
- }
1707
- return obj;
1708
- }
1709
-
1710
- function ownKeys(object, enumerableOnly) {
1711
- var keys = Object.keys(object);
1712
- if (Object.getOwnPropertySymbols) {
1713
- var symbols = Object.getOwnPropertySymbols(object);
1714
- enumerableOnly && (symbols = symbols.filter(function (sym) {
1715
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
1716
- })), keys.push.apply(keys, symbols);
1717
- }
1718
- return keys;
1719
- }
1720
- function _objectSpread2(target) {
1721
- for (var i = 1; i < arguments.length; i++) {
1722
- var source = null != arguments[i] ? arguments[i] : {};
1723
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
1724
- _defineProperty(target, key, source[key]);
1725
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
1726
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
1727
- });
1728
- }
1729
- return target;
1730
- }
1731
-
1732
- function _arrayWithHoles(arr) {
1733
- if (Array.isArray(arr)) return arr;
1734
- }
1735
-
1736
- function _iterableToArrayLimit(arr, i) {
1737
- var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
1738
- if (null != _i) {
1739
- var _s,
1740
- _e,
1741
- _x,
1742
- _r,
1743
- _arr = [],
1744
- _n = !0,
1745
- _d = !1;
1746
- try {
1747
- if (_x = (_i = _i.call(arr)).next, 0 === i) {
1748
- if (Object(_i) !== _i) return;
1749
- _n = !1;
1750
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
1751
- } catch (err) {
1752
- _d = !0, _e = err;
1753
- } finally {
1754
- try {
1755
- if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
1756
- } finally {
1757
- if (_d) throw _e;
1758
- }
1759
- }
1760
- return _arr;
1761
- }
1762
- }
1763
-
1764
- function _arrayLikeToArray(arr, len) {
1765
- if (len == null || len > arr.length) len = arr.length;
1766
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
1767
- return arr2;
1768
- }
1769
-
1770
- function _unsupportedIterableToArray(o, minLen) {
1771
- if (!o) return;
1772
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
1773
- var n = Object.prototype.toString.call(o).slice(8, -1);
1774
- if (n === "Object" && o.constructor) n = o.constructor.name;
1775
- if (n === "Map" || n === "Set") return Array.from(o);
1776
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
1777
- }
1778
-
1779
- function _nonIterableRest() {
1780
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1781
- }
1782
-
1783
- function _slicedToArray(arr, i) {
1784
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
1785
- }
1786
-
1787
- function _objectWithoutPropertiesLoose(source, excluded) {
1788
- if (source == null) return {};
1789
- var target = {};
1790
- var sourceKeys = Object.keys(source);
1791
- var key, i;
1792
- for (i = 0; i < sourceKeys.length; i++) {
1793
- key = sourceKeys[i];
1794
- if (excluded.indexOf(key) >= 0) continue;
1795
- target[key] = source[key];
1796
- }
1797
- return target;
1798
- }
1799
-
1800
- function _objectWithoutProperties(source, excluded) {
1801
- if (source == null) return {};
1802
- var target = _objectWithoutPropertiesLoose(source, excluded);
1803
- var key, i;
1804
- if (Object.getOwnPropertySymbols) {
1805
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
1806
- for (i = 0; i < sourceSymbolKeys.length; i++) {
1807
- key = sourceSymbolKeys[i];
1808
- if (excluded.indexOf(key) >= 0) continue;
1809
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
1810
- target[key] = source[key];
1811
- }
1812
- }
1813
- return target;
1814
- }
1815
-
1816
- var _excluded$2 = ["prefixCls", "invalidate", "item", "renderItem", "responsive", "responsiveDisabled", "registerSize", "itemKey", "className", "style", "children", "display", "order", "component"];
1817
- // Use shared variable to save bundle size
1818
- var UNDEFINED = undefined;
1819
- function InternalItem(props, ref) {
1820
- var prefixCls = props.prefixCls,
1821
- invalidate = props.invalidate,
1822
- item = props.item,
1823
- renderItem = props.renderItem,
1824
- responsive = props.responsive,
1825
- responsiveDisabled = props.responsiveDisabled,
1826
- registerSize = props.registerSize,
1827
- itemKey = props.itemKey,
1828
- className = props.className,
1829
- style = props.style,
1830
- children = props.children,
1831
- display = props.display,
1832
- order = props.order,
1833
- _props$component = props.component,
1834
- Component = _props$component === void 0 ? 'div' : _props$component,
1835
- restProps = _objectWithoutProperties(props, _excluded$2);
1836
- var mergedHidden = responsive && !display;
1837
- // ================================ Effect ================================
1838
- function internalRegisterSize(width) {
1839
- registerSize(itemKey, width);
1840
- }
1841
- index$3.react.useEffect(function () {
1842
- return function () {
1843
- internalRegisterSize(null);
1844
- };
1845
- }, []);
1846
- // ================================ Render ================================
1847
- var childNode = renderItem && item !== UNDEFINED ? renderItem(item) : children;
1848
- var overflowStyle;
1849
- if (!invalidate) {
1850
- overflowStyle = {
1851
- opacity: mergedHidden ? 0 : 1,
1852
- height: mergedHidden ? 0 : UNDEFINED,
1853
- overflowY: mergedHidden ? 'hidden' : UNDEFINED,
1854
- order: responsive ? order : UNDEFINED,
1855
- pointerEvents: mergedHidden ? 'none' : UNDEFINED,
1856
- position: mergedHidden ? 'absolute' : UNDEFINED
1857
- };
1858
- }
1859
- var overflowProps = {};
1860
- if (mergedHidden) {
1861
- overflowProps['aria-hidden'] = true;
1862
- }
1863
- var itemNode = /*#__PURE__*/index$3.react.createElement(Component, _extends({
1864
- className: index.classnames(!invalidate && prefixCls, className),
1865
- style: _objectSpread2(_objectSpread2({}, overflowStyle), style)
1866
- }, overflowProps, restProps, {
1867
- ref: ref
1868
- }), childNode);
1869
- if (responsive) {
1870
- itemNode = /*#__PURE__*/index$3.react.createElement(index$3.RefResizeObserver, {
1871
- onResize: function onResize(_ref) {
1872
- var offsetWidth = _ref.offsetWidth;
1873
- internalRegisterSize(offsetWidth);
1874
- },
1875
- disabled: responsiveDisabled
1876
- }, itemNode);
1877
- }
1878
- return itemNode;
1879
- }
1880
- var Item = /*#__PURE__*/index$3.react.forwardRef(InternalItem);
1881
- Item.displayName = 'Item';
1882
-
1883
- function channelUpdate(callback) {
1884
- if (typeof MessageChannel === 'undefined') {
1885
- index$3.wrapperRaf(callback);
1886
- } else {
1887
- var channel = new MessageChannel();
1888
- channel.port1.onmessage = function () {
1889
- return callback();
1890
- };
1891
- channel.port2.postMessage(undefined);
1892
- }
1893
- }
1894
-
1895
- /**
1896
- * Batcher for record any `useEffectState` need update.
1897
- */
1898
- function useBatcher() {
1899
- // Updater Trigger
1900
- var updateFuncRef = index$3.react.useRef(null);
1901
- // Notify update
1902
- var notifyEffectUpdate = function notifyEffectUpdate(callback) {
1903
- if (!updateFuncRef.current) {
1904
- updateFuncRef.current = [];
1905
- channelUpdate(function () {
1906
- index$3.reactDom.unstable_batchedUpdates(function () {
1907
- updateFuncRef.current.forEach(function (fn) {
1908
- fn();
1909
- });
1910
- updateFuncRef.current = null;
1911
- });
1912
- });
1913
- }
1914
- updateFuncRef.current.push(callback);
1915
- };
1916
- return notifyEffectUpdate;
1917
- }
1918
- /**
1919
- * Trigger state update by `useLayoutEffect` to save perf.
1920
- */
1921
- function useEffectState(notifyEffectUpdate, defaultValue) {
1922
- // Value
1923
- var _React$useState = index$3.react.useState(defaultValue),
1924
- _React$useState2 = _slicedToArray(_React$useState, 2),
1925
- stateValue = _React$useState2[0],
1926
- setStateValue = _React$useState2[1];
1927
- // Set State
1928
- var setEffectVal = index$3.useEvent(function (nextValue) {
1929
- notifyEffectUpdate(function () {
1930
- setStateValue(nextValue);
1931
- });
1932
- });
1933
- return [stateValue, setEffectVal];
1934
- }
1935
-
1936
- var OverflowContext = /*#__PURE__*/index$3.react.createContext(null);
1937
-
1938
- var _excluded$1 = ["component"],
1939
- _excluded2 = ["className"],
1940
- _excluded3 = ["className"];
1941
- var InternalRawItem = function InternalRawItem(props, ref) {
1942
- var context = index$3.react.useContext(OverflowContext);
1943
- // Render directly when context not provided
1944
- if (!context) {
1945
- var _props$component = props.component,
1946
- Component = _props$component === void 0 ? 'div' : _props$component,
1947
- _restProps = _objectWithoutProperties(props, _excluded$1);
1948
- return /*#__PURE__*/index$3.react.createElement(Component, _extends({}, _restProps, {
1949
- ref: ref
1950
- }));
1951
- }
1952
- var contextClassName = context.className,
1953
- restContext = _objectWithoutProperties(context, _excluded2);
1954
- var className = props.className,
1955
- restProps = _objectWithoutProperties(props, _excluded3);
1956
- // Do not pass context to sub item to avoid multiple measure
1957
- return /*#__PURE__*/index$3.react.createElement(OverflowContext.Provider, {
1958
- value: null
1959
- }, /*#__PURE__*/index$3.react.createElement(Item, _extends({
1960
- ref: ref,
1961
- className: index.classnames(contextClassName, className)
1962
- }, restContext, restProps)));
1963
- };
1964
- var RawItem = /*#__PURE__*/index$3.react.forwardRef(InternalRawItem);
1965
- RawItem.displayName = 'RawItem';
1966
-
1967
- var _excluded = ["prefixCls", "data", "renderItem", "renderRawItem", "itemKey", "itemWidth", "ssr", "style", "className", "maxCount", "renderRest", "renderRawRest", "suffix", "component", "itemComponent", "onVisibleChange"];
1968
- var RESPONSIVE = 'responsive';
1969
- var INVALIDATE = 'invalidate';
1970
- function defaultRenderRest(omittedItems) {
1971
- return "+ ".concat(omittedItems.length, " ...");
1972
- }
1973
- function Overflow(props, ref) {
1974
- var _props$prefixCls = props.prefixCls,
1975
- prefixCls = _props$prefixCls === void 0 ? 'rc-overflow' : _props$prefixCls,
1976
- _props$data = props.data,
1977
- data = _props$data === void 0 ? [] : _props$data,
1978
- renderItem = props.renderItem,
1979
- renderRawItem = props.renderRawItem,
1980
- itemKey = props.itemKey,
1981
- _props$itemWidth = props.itemWidth,
1982
- itemWidth = _props$itemWidth === void 0 ? 10 : _props$itemWidth,
1983
- ssr = props.ssr,
1984
- style = props.style,
1985
- className = props.className,
1986
- maxCount = props.maxCount,
1987
- renderRest = props.renderRest,
1988
- renderRawRest = props.renderRawRest,
1989
- suffix = props.suffix,
1990
- _props$component = props.component,
1991
- Component = _props$component === void 0 ? 'div' : _props$component,
1992
- itemComponent = props.itemComponent,
1993
- onVisibleChange = props.onVisibleChange,
1994
- restProps = _objectWithoutProperties(props, _excluded);
1995
- var fullySSR = ssr === 'full';
1996
- var notifyEffectUpdate = useBatcher();
1997
- var _useEffectState = useEffectState(notifyEffectUpdate, null),
1998
- _useEffectState2 = _slicedToArray(_useEffectState, 2),
1999
- containerWidth = _useEffectState2[0],
2000
- setContainerWidth = _useEffectState2[1];
2001
- var mergedContainerWidth = containerWidth || 0;
2002
- var _useEffectState3 = useEffectState(notifyEffectUpdate, new Map()),
2003
- _useEffectState4 = _slicedToArray(_useEffectState3, 2),
2004
- itemWidths = _useEffectState4[0],
2005
- setItemWidths = _useEffectState4[1];
2006
- var _useEffectState5 = useEffectState(notifyEffectUpdate, 0),
2007
- _useEffectState6 = _slicedToArray(_useEffectState5, 2),
2008
- prevRestWidth = _useEffectState6[0],
2009
- setPrevRestWidth = _useEffectState6[1];
2010
- var _useEffectState7 = useEffectState(notifyEffectUpdate, 0),
2011
- _useEffectState8 = _slicedToArray(_useEffectState7, 2),
2012
- restWidth = _useEffectState8[0],
2013
- setRestWidth = _useEffectState8[1];
2014
- var _useEffectState9 = useEffectState(notifyEffectUpdate, 0),
2015
- _useEffectState10 = _slicedToArray(_useEffectState9, 2),
2016
- suffixWidth = _useEffectState10[0],
2017
- setSuffixWidth = _useEffectState10[1];
2018
- var _useState = index$3.react.useState(null),
2019
- _useState2 = _slicedToArray(_useState, 2),
2020
- suffixFixedStart = _useState2[0],
2021
- setSuffixFixedStart = _useState2[1];
2022
- var _useState3 = index$3.react.useState(null),
2023
- _useState4 = _slicedToArray(_useState3, 2),
2024
- displayCount = _useState4[0],
2025
- setDisplayCount = _useState4[1];
2026
- var mergedDisplayCount = index$3.react.useMemo(function () {
2027
- if (displayCount === null && fullySSR) {
2028
- return Number.MAX_SAFE_INTEGER;
2029
- }
2030
- return displayCount || 0;
2031
- }, [displayCount, containerWidth]);
2032
- var _useState5 = index$3.react.useState(false),
2033
- _useState6 = _slicedToArray(_useState5, 2),
2034
- restReady = _useState6[0],
2035
- setRestReady = _useState6[1];
2036
- var itemPrefixCls = "".concat(prefixCls, "-item");
2037
- // Always use the max width to avoid blink
2038
- var mergedRestWidth = Math.max(prevRestWidth, restWidth);
2039
- // ================================= Data =================================
2040
- var isResponsive = maxCount === RESPONSIVE;
2041
- var shouldResponsive = data.length && isResponsive;
2042
- var invalidate = maxCount === INVALIDATE;
2043
- /**
2044
- * When is `responsive`, we will always render rest node to get the real width of it for calculation
2045
- */
2046
- var showRest = shouldResponsive || typeof maxCount === 'number' && data.length > maxCount;
2047
- var mergedData = index$3.react.useMemo(function () {
2048
- var items = data;
2049
- if (shouldResponsive) {
2050
- if (containerWidth === null && fullySSR) {
2051
- items = data;
2052
- } else {
2053
- items = data.slice(0, Math.min(data.length, mergedContainerWidth / itemWidth));
2054
- }
2055
- } else if (typeof maxCount === 'number') {
2056
- items = data.slice(0, maxCount);
2057
- }
2058
- return items;
2059
- }, [data, itemWidth, containerWidth, maxCount, shouldResponsive]);
2060
- var omittedItems = index$3.react.useMemo(function () {
2061
- if (shouldResponsive) {
2062
- return data.slice(mergedDisplayCount + 1);
2063
- }
2064
- return data.slice(mergedData.length);
2065
- }, [data, mergedData, shouldResponsive, mergedDisplayCount]);
2066
- // ================================= Item =================================
2067
- var getKey = index$3.react.useCallback(function (item, index) {
2068
- var _ref;
2069
- if (typeof itemKey === 'function') {
2070
- return itemKey(item);
2071
- }
2072
- return (_ref = itemKey && (item === null || item === void 0 ? void 0 : item[itemKey])) !== null && _ref !== void 0 ? _ref : index;
2073
- }, [itemKey]);
2074
- var mergedRenderItem = index$3.react.useCallback(renderItem || function (item) {
2075
- return item;
2076
- }, [renderItem]);
2077
- function updateDisplayCount(count, suffixFixedStartVal, notReady) {
2078
- // React 18 will sync render even when the value is same in some case.
2079
- // We take `mergedData` as deps which may cause dead loop if it's dynamic generate.
2080
- // ref: https://github.com/ant-design/ant-design/issues/36559
2081
- if (displayCount === count && (suffixFixedStartVal === undefined || suffixFixedStartVal === suffixFixedStart)) {
2082
- return;
2083
- }
2084
- setDisplayCount(count);
2085
- if (!notReady) {
2086
- setRestReady(count < data.length - 1);
2087
- onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(count);
2088
- }
2089
- if (suffixFixedStartVal !== undefined) {
2090
- setSuffixFixedStart(suffixFixedStartVal);
2091
- }
2092
- }
2093
- // ================================= Size =================================
2094
- function onOverflowResize(_, element) {
2095
- setContainerWidth(element.clientWidth);
2096
- }
2097
- function registerSize(key, width) {
2098
- setItemWidths(function (origin) {
2099
- var clone = new Map(origin);
2100
- if (width === null) {
2101
- clone.delete(key);
2102
- } else {
2103
- clone.set(key, width);
2104
- }
2105
- return clone;
2106
- });
2107
- }
2108
- function registerOverflowSize(_, width) {
2109
- setRestWidth(width);
2110
- setPrevRestWidth(restWidth);
2111
- }
2112
- function registerSuffixSize(_, width) {
2113
- setSuffixWidth(width);
2114
- }
2115
- // ================================ Effect ================================
2116
- function getItemWidth(index) {
2117
- return itemWidths.get(getKey(mergedData[index], index));
2118
- }
2119
- index$3.useLayoutEffect(function () {
2120
- if (mergedContainerWidth && typeof mergedRestWidth === 'number' && mergedData) {
2121
- var totalWidth = suffixWidth;
2122
- var len = mergedData.length;
2123
- var lastIndex = len - 1;
2124
- // When data count change to 0, reset this since not loop will reach
2125
- if (!len) {
2126
- updateDisplayCount(0, null);
2127
- return;
2128
- }
2129
- for (var i = 0; i < len; i += 1) {
2130
- var currentItemWidth = getItemWidth(i);
2131
- // Fully will always render
2132
- if (fullySSR) {
2133
- currentItemWidth = currentItemWidth || 0;
2134
- }
2135
- // Break since data not ready
2136
- if (currentItemWidth === undefined) {
2137
- updateDisplayCount(i - 1, undefined, true);
2138
- break;
2139
- }
2140
- // Find best match
2141
- totalWidth += currentItemWidth;
2142
- if (
2143
- // Only one means `totalWidth` is the final width
2144
- lastIndex === 0 && totalWidth <= mergedContainerWidth ||
2145
- // Last two width will be the final width
2146
- i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex) <= mergedContainerWidth) {
2147
- // Additional check if match the end
2148
- updateDisplayCount(lastIndex, null);
2149
- break;
2150
- } else if (totalWidth + mergedRestWidth > mergedContainerWidth) {
2151
- // Can not hold all the content to show rest
2152
- updateDisplayCount(i - 1, totalWidth - currentItemWidth - suffixWidth + restWidth);
2153
- break;
2154
- }
2155
- }
2156
- if (suffix && getItemWidth(0) + suffixWidth > mergedContainerWidth) {
2157
- setSuffixFixedStart(null);
2158
- }
2159
- }
2160
- }, [mergedContainerWidth, itemWidths, restWidth, suffixWidth, getKey, mergedData]);
2161
- // ================================ Render ================================
2162
- var displayRest = restReady && !!omittedItems.length;
2163
- var suffixStyle = {};
2164
- if (suffixFixedStart !== null && shouldResponsive) {
2165
- suffixStyle = {
2166
- position: 'absolute',
2167
- left: suffixFixedStart,
2168
- top: 0
2169
- };
2170
- }
2171
- var itemSharedProps = {
2172
- prefixCls: itemPrefixCls,
2173
- responsive: shouldResponsive,
2174
- component: itemComponent,
2175
- invalidate: invalidate
2176
- };
2177
- // >>>>> Choice render fun by `renderRawItem`
2178
- var internalRenderItemNode = renderRawItem ? function (item, index) {
2179
- var key = getKey(item, index);
2180
- return /*#__PURE__*/index$3.react.createElement(OverflowContext.Provider, {
2181
- key: key,
2182
- value: _objectSpread2(_objectSpread2({}, itemSharedProps), {}, {
2183
- order: index,
2184
- item: item,
2185
- itemKey: key,
2186
- registerSize: registerSize,
2187
- display: index <= mergedDisplayCount
2188
- })
2189
- }, renderRawItem(item, index));
2190
- } : function (item, index) {
2191
- var key = getKey(item, index);
2192
- return /*#__PURE__*/index$3.react.createElement(Item, _extends({}, itemSharedProps, {
2193
- order: index,
2194
- key: key,
2195
- item: item,
2196
- renderItem: mergedRenderItem,
2197
- itemKey: key,
2198
- registerSize: registerSize,
2199
- display: index <= mergedDisplayCount
2200
- }));
2201
- };
2202
- // >>>>> Rest node
2203
- var restNode;
2204
- var restContextProps = {
2205
- order: displayRest ? mergedDisplayCount : Number.MAX_SAFE_INTEGER,
2206
- className: "".concat(itemPrefixCls, "-rest"),
2207
- registerSize: registerOverflowSize,
2208
- display: displayRest
2209
- };
2210
- if (!renderRawRest) {
2211
- var mergedRenderRest = renderRest || defaultRenderRest;
2212
- restNode = /*#__PURE__*/index$3.react.createElement(Item, _extends({}, itemSharedProps, restContextProps), typeof mergedRenderRest === 'function' ? mergedRenderRest(omittedItems) : mergedRenderRest);
2213
- } else if (renderRawRest) {
2214
- restNode = /*#__PURE__*/index$3.react.createElement(OverflowContext.Provider, {
2215
- value: _objectSpread2(_objectSpread2({}, itemSharedProps), restContextProps)
2216
- }, renderRawRest(omittedItems));
2217
- }
2218
- var overflowNode = /*#__PURE__*/index$3.react.createElement(Component, _extends({
2219
- className: index.classnames(!invalidate && prefixCls, className),
2220
- style: style,
2221
- ref: ref
2222
- }, restProps), mergedData.map(internalRenderItemNode), showRest ? restNode : null, suffix && /*#__PURE__*/index$3.react.createElement(Item, _extends({}, itemSharedProps, {
2223
- responsive: isResponsive,
2224
- responsiveDisabled: !shouldResponsive,
2225
- order: mergedDisplayCount,
2226
- className: "".concat(itemPrefixCls, "-suffix"),
2227
- registerSize: registerSuffixSize,
2228
- display: true,
2229
- style: suffixStyle
2230
- }), suffix));
2231
- if (isResponsive) {
2232
- overflowNode = /*#__PURE__*/index$3.react.createElement(index$3.RefResizeObserver, {
2233
- onResize: onOverflowResize,
2234
- disabled: !shouldResponsive
2235
- }, overflowNode);
2236
- }
2237
- return overflowNode;
2238
- }
2239
- var ForwardOverflow = /*#__PURE__*/index$3.react.forwardRef(Overflow);
2240
- ForwardOverflow.displayName = 'Overflow';
2241
- ForwardOverflow.Item = RawItem;
2242
- ForwardOverflow.RESPONSIVE = RESPONSIVE;
2243
- ForwardOverflow.INVALIDATE = INVALIDATE;
2244
-
2245
- 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}";
2246
-
2247
- const BcmRcOverflow = class {
2248
- constructor(hostRef) {
2249
- index$1.registerInstance(this, hostRef);
2250
- this.selectOtherTag = index$1.createEvent(this, "bcm-select-other-tag", 7);
2251
- this.selectTag = index$1.createEvent(this, "bcm-select-tag", 7);
2252
- this.deleteTag = index$1.createEvent(this, "bcm-delete-tag", 7);
2253
- this.renderItem = item => {
2254
- return index$3.react.createElement("bcm-tooltip", {
2255
- placement: "bottom",
2256
- message: item.text,
2257
- trigger: "hover",
2258
- }, index$3.react.createElement("div", {
2259
- id: item.value + "-tag",
2260
- className: "bcm-tag",
2261
- onClick: ({ target }) => this.onClickControl(target, item, false),
2262
- }, index$3.react.createElement("span", { className: "bcm-tag__content dismissable" },
2263
- // .bcm-tag__content span {
2264
- // display: block;
2265
- // max-width: 38px;
2266
- // white-space: nowrap;
2267
- // overflow: hidden;
2268
- // text-overflow: ellipsis;
2269
- 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", {
2270
- className: "right close-button",
2271
- }, index$3.react.createElement("bcm-icon", {
2272
- icon: "fa fa-times",
2273
- })))));
2274
- };
2275
- this.renderRest = items => {
2276
- 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..." : "");
2277
- return index$3.react.createElement("bcm-tooltip", {
2278
- placement: "bottom",
2279
- message: titles,
2280
- trigger: "hover",
2281
- }, index$3.react.createElement("div", {
2282
- className: "bcm-tag bcm-tag--other",
2283
- onClick: ({ target }) => this.onClickControl(target, items, true),
2284
- }, 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", {
2285
- icon: "fa fa-times",
2286
- })))));
2287
- };
2288
- this._id = generate.Generate.UID();
2289
- this.maxCount = 1;
2290
- this.data = [];
2291
- this.checked = false;
2292
- }
2293
- isClickDismiss(e) {
2294
- return e["s-hn"] === "BCM-ICON";
2295
- }
2296
- onClickControl(e, item, isOtherTag = false) {
2297
- const isClickClose = this.isClickDismiss(e);
2298
- isClickClose && this.deleteTag.emit({ id: Array.isArray(item) ? item.map(i => i.value) : item.value }) && this.checked && (this.checked = false);
2299
- !isOtherTag && this.selectTag.emit({ id: item.value }) && this.checked && (this.checked = false);
2300
- if (isOtherTag && !isClickClose) {
2301
- this.checked = !this.checked;
2302
- this.selectOtherTag.emit({ id: item === null || item === void 0 ? void 0 : item.map(i => i.value), checked: this.checked });
2303
- }
2304
- }
2305
- componentWillRender() {
2306
- const { data, renderItem, renderRest, maxCount } = this;
2307
- this.overflowInstance = index$3.react.createElement(ForwardOverflow, {
2308
- data,
2309
- renderItem,
2310
- renderRest,
2311
- maxCount,
2312
- });
2313
- index$3.reactDom.render(this.overflowInstance, this.el);
2314
- }
2315
- get el() { return index$1.getElement(this); }
2316
- };
2317
- BcmRcOverflow.style = rcOverflowCss;
2318
-
2319
- const { state } = index$2.createStore({
2320
- value: new Map(),
2321
- });
2322
- const setValue = val => {
2323
- const { id, dataSource } = val;
2324
- const data = {
2325
- id: generate.snq(() => id, generate.Generate.UID),
2326
- dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
2327
- searchIsOnlyChilds: val.searchIsOnlyChilds,
2328
- };
2329
- state.value.set(data.id, data);
2330
- };
2331
- const recursive = (data, parentId) => {
2332
- let recData = [];
2333
- if (data) {
2334
- 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), []) }))));
2335
- }
2336
- return recData;
2337
- };
2338
- const removeValue = _id => {
2339
- state.value.delete(_id);
2340
- };
2341
- const getValue = id => generate.snq(() => state.value.get(id), {});
2342
- const getDataPagination = (id, limit = 3) => {
2343
- let data = [];
2344
- const value = getValue(id);
2345
- if (value) {
2346
- const { dataSource } = value;
2347
- data = dataSource.slice(0, limit);
2348
- }
2349
- return data;
2350
- };
2351
- // //search treeview data by text
2352
- // const searchData = (id, search, items?) => {
2353
- // let dataSource
2354
- // if (items && items.length > 0) {
2355
- // dataSource = items
2356
- // } else {
2357
- // const value = getValue(id);
2358
- // dataSource = value.dataSource;
2359
- // }
2360
- // let result = []
2361
- // if (dataSource) {
2362
- // dataSource.forEach(child => {
2363
- // if (child.text.toLowerCase().includes(search.toLowerCase())) {
2364
- // result.push(child)
2365
- // }
2366
- // result = result.concat(searchData(id, search, child.items))
2367
- // })
2368
- // };
2369
- // return result
2370
- // };
2371
- //nested search
2372
- const searchData = (id, searchText, items) => {
2373
- let dataSource;
2374
- if (items && items.length > 0) {
2375
- dataSource = items;
2376
- }
2377
- else {
2378
- const value = getValue(id);
2379
- dataSource = value.dataSource;
2380
- }
2381
- let results = [];
2382
- if (dataSource) {
2383
- results.push(nestedSearch(id, dataSource, searchText));
2384
- //return with their parents
2385
- // dataSource.forEach(child => {
2386
- // if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
2387
- // results.push(child)
2388
- // } else if (child.items && child.items.length > 0) {
2389
- // child.items = nestedSearch(child.items, searchText)
2390
- // if (child.items.length > 0) {
2391
- // results.push(child)
2392
- // }
2393
- // }
2394
- // })
2395
- }
2396
- return {
2397
- result: generate.snq(() => generate.Generate.flatArray(results[0].result), []),
2398
- matching: generate.snq(() => results[0].matching, []),
2399
- parentIndex: generate.snq(() => results[0].parentIndex, []),
2400
- nestedResult: generate.snq(() => results[0].nestedResult, []),
2401
- };
2402
- };
2403
- const nestedSearch = (id, items, searchText) => {
2404
- let matching = [];
2405
- let parentIndex = [];
2406
- let result = [];
2407
- let nestedResult = [];
2408
- const { searchIsOnlyChilds } = getValue(id);
2409
- if (items && items.length > 0) {
2410
- items.forEach(child => {
2411
- let isChild = searchIsOnlyChilds && child.parentId !== null;
2412
- let isMatching = (child.text && stringHelper.StringHelper.slugify(child.text).includes(stringHelper.StringHelper.slugify(searchText))) ||
2413
- (child.keywords && stringHelper.StringHelper.slugify(child.keywords).includes(stringHelper.StringHelper.slugify(searchText)));
2414
- if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
2415
- result.push(child.id);
2416
- matching.push(child.id);
2417
- parentIndex.push(child.id);
2418
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
2419
- if (child.items && child.items.length > 0) {
2420
- const found = nestedSearch(id, child.items, searchText);
2421
- if (found.matching.length > 0) {
2422
- found.matching.forEach(chi => {
2423
- matching.push(chi);
2424
- });
2425
- }
2426
- }
2427
- }
2428
- else if (child.items && child.items.length > 0) {
2429
- const found = nestedSearch(id, child.items, searchText);
2430
- if (found.result.length > 0) {
2431
- found.result.forEach(chi => {
2432
- result.push(chi);
2433
- });
2434
- result.push(child.id);
2435
- parentIndex.push(child.id);
2436
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
2437
- }
2438
- if (found.matching.length > 0) {
2439
- matching.push(...found.matching);
2440
- }
2441
- }
2442
- });
2443
- }
2444
- return { result, matching, parentIndex, nestedResult };
2445
- };
2446
- const searchState = {
2447
- setValue,
2448
- removeValue,
2449
- getValue,
2450
- getDataPagination,
2451
- searchData,
2452
- };
2453
-
2454
- 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}";
2455
-
2456
- const BcmSearch = class {
2457
- constructor(hostRef) {
2458
- index$1.registerInstance(this, hostRef);
2459
- this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
2460
- this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
2461
- this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
2462
- var _a, _b;
2463
- 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;
2464
- });
2465
- this._id = generate.Generate.UID();
2466
- this.placeholder = "Search";
2467
- this.disabled = false;
2468
- this.readonly = false;
2469
- this.clearable = true;
2470
- this.size = bcm.Bcm.Size.medium;
2471
- this.limit = 10;
2472
- this.searchIsOnlyChilds = false;
2473
- this.minSearchLength = 2;
2474
- this.data = [];
2475
- this.tick = {};
2476
- this.isActiveClearable = false;
2477
- }
2478
- async componentDidLoad() {
2479
- await this.initState();
2480
- }
2481
- async dataChanged(newValue, oldValue) {
2482
- // console.log('data changed', newValue, oldValue)
2483
- if (newValue !== oldValue) {
2484
- await this.initState();
2485
- }
2486
- }
2487
- async initState() {
2488
- await searchState.setValue({
2489
- id: this._id + "-input",
2490
- dataSource: this.data,
2491
- searchIsOnlyChilds: this.searchIsOnlyChilds,
2492
- });
2493
- await this.markForCheck();
2494
- }
2495
- markForCheck() {
2496
- this.tick = generate.Generate.UID();
2497
- }
2498
- handleInput() {
2499
- // console.log("aheyya")
2500
- }
2501
- async onBcmFocus() {
2502
- this.inputElement.focus();
2503
- }
2504
- async onBcmBlur() {
2505
- this.inputElement.blur();
2506
- }
2507
- async onBcmSelect() {
2508
- this.inputElement.select();
2509
- }
2510
- async setValue(newValue) {
2511
- this.inputElement.value = newValue;
2512
- }
2513
- handleFocus() { }
2514
- handleBlur() { }
2515
- handleChange() { }
2516
- async handleClear(eventEmit = true) {
2517
- this.inputElement.value = '';
2518
- const { value, id } = this.inputElement;
2519
- searchState.searchData(id, value);
2520
- this.isActiveClearable = false;
2521
- this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
2522
- this.bcmOnSearchClear.emit(eventEmit);
2523
- await utils.delay(10);
2524
- return Promise.resolve();
2525
- }
2526
- onSearchValue(event, instance) {
2527
- const { value, id } = event.target;
2528
- const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
2529
- const { bcmOnSearch, inputElement } = instance;
2530
- 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 });
2531
- }
2532
- render() {
2533
- const { _id, placeholder, disabled, readonly } = this;
2534
- 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 }));
2535
- }
2536
- get el() { return index$1.getElement(this); }
2537
- static get watchers() { return {
2538
- "data": ["dataChanged"]
2539
- }; }
2540
- };
2541
- BcmSearch.style = searchCss;
2542
-
2543
- exports.bcm_list = BcmList;
2544
- exports.bcm_rc_overflow = BcmRcOverflow;
2545
- exports.bcm_search = BcmSearch;