bromcom-ui 2.8.1-rc.1 → 2.8.1-rc.3

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 (220) hide show
  1. package/dist/bromcom-ui/bromcom-ui.css +1 -1
  2. package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
  3. package/dist/bromcom-ui/{p-70909443.entry.js → p-05852df3.entry.js} +1 -1
  4. package/dist/bromcom-ui/{p-02116d36.entry.js → p-1b1f82cf.entry.js} +1 -1
  5. package/dist/bromcom-ui/{p-63bff12e.entry.js → p-1c1f02a8.entry.js} +1 -1
  6. package/dist/bromcom-ui/{p-216c6fd5.entry.js → p-1d591e1e.entry.js} +1 -1
  7. package/dist/bromcom-ui/p-1eabd5dc.js +10 -0
  8. package/dist/bromcom-ui/{p-b40bb51f.entry.js → p-23b6f1b6.entry.js} +1 -1
  9. package/dist/bromcom-ui/{p-a3109200.entry.js → p-25e6e25d.entry.js} +1 -1
  10. package/dist/bromcom-ui/{p-426b7889.entry.js → p-2c93afb8.entry.js} +1 -1
  11. package/dist/bromcom-ui/{p-a6b9ac13.entry.js → p-2d1124ca.entry.js} +1 -1
  12. package/dist/bromcom-ui/{p-495b54be.entry.js → p-50b59f5f.entry.js} +1 -1
  13. package/dist/bromcom-ui/p-5358bb45.entry.js +5 -0
  14. package/dist/bromcom-ui/p-53658089.entry.js +13 -0
  15. package/dist/bromcom-ui/{p-7a89e7ae.entry.js → p-538a13af.entry.js} +1 -1
  16. package/dist/bromcom-ui/{p-48e2d5e5.js → p-594fbc80.js} +1 -1
  17. package/dist/bromcom-ui/p-59efe1da.js +5 -0
  18. package/dist/bromcom-ui/{p-e0855669.entry.js → p-5bb7e3b7.entry.js} +1 -1
  19. package/dist/bromcom-ui/{p-ea763cf4.entry.js → p-5bf4d697.entry.js} +1 -1
  20. package/dist/bromcom-ui/{p-c3da137b.entry.js → p-5c718986.entry.js} +1 -1
  21. package/dist/bromcom-ui/{p-bda1709b.entry.js → p-5e72a278.entry.js} +1 -1
  22. package/dist/bromcom-ui/{p-57c71c1f.entry.js → p-63608aaa.entry.js} +1 -1
  23. package/dist/bromcom-ui/{p-67ff8aa3.entry.js → p-6b988756.entry.js} +1 -1
  24. package/dist/bromcom-ui/{p-18a5c6ab.entry.js → p-6db0f8dd.entry.js} +1 -1
  25. package/dist/bromcom-ui/p-6eefda1d.entry.js +5 -0
  26. package/dist/bromcom-ui/{p-7ad7c6d7.entry.js → p-6f5bd54d.entry.js} +1 -1
  27. package/dist/bromcom-ui/{p-4bbdd324.entry.js → p-702a285b.entry.js} +1 -1
  28. package/dist/bromcom-ui/{p-cab8c1e0.entry.js → p-70b210af.entry.js} +1 -1
  29. package/dist/bromcom-ui/{p-6755089b.js → p-75a2820f.js} +1 -1
  30. package/dist/bromcom-ui/{p-3f9d992a.entry.js → p-76182c8b.entry.js} +1 -1
  31. package/dist/bromcom-ui/{p-b2d87a12.entry.js → p-78527fcd.entry.js} +1 -1
  32. package/dist/bromcom-ui/{p-b9ba70c3.entry.js → p-7baef152.entry.js} +1 -1
  33. package/dist/bromcom-ui/{p-5098fca3.entry.js → p-8aa4fee3.entry.js} +1 -1
  34. package/dist/bromcom-ui/{p-940cbe01.js → p-8e7a489e.js} +1 -1
  35. package/dist/bromcom-ui/{p-e6afe8b6.entry.js → p-962fee18.entry.js} +1 -1
  36. package/dist/bromcom-ui/{p-bf523f14.entry.js → p-97e22a22.entry.js} +1 -1
  37. package/dist/bromcom-ui/{p-ffec0a2b.js → p-9bc739ac.js} +1 -1
  38. package/dist/bromcom-ui/{p-748cefe3.entry.js → p-9c2f39ab.entry.js} +1 -1
  39. package/dist/bromcom-ui/{p-3ee818a8.entry.js → p-9d00bf3c.entry.js} +1 -1
  40. package/dist/bromcom-ui/{p-81f1dd1f.js → p-aea6f62f.js} +1 -1
  41. package/dist/bromcom-ui/{p-6fc52a85.entry.js → p-af81e5fa.entry.js} +1 -1
  42. package/dist/bromcom-ui/{p-406785b9.entry.js → p-b1b64c8b.entry.js} +1 -1
  43. package/dist/bromcom-ui/{p-a58c6ceb.entry.js → p-b29766b2.entry.js} +1 -1
  44. package/dist/bromcom-ui/{p-5b2b1352.entry.js → p-b4b06540.entry.js} +1 -1
  45. package/dist/bromcom-ui/{p-95351a23.entry.js → p-b685ca73.entry.js} +1 -1
  46. package/dist/bromcom-ui/{p-481f4962.entry.js → p-b7919ac8.entry.js} +1 -1
  47. package/dist/bromcom-ui/{p-6d8f018f.entry.js → p-bae55354.entry.js} +1 -1
  48. package/dist/bromcom-ui/{p-6de2deb5.entry.js → p-bbd80e20.entry.js} +1 -1
  49. package/dist/bromcom-ui/{p-0ae7d5fb.entry.js → p-c0bb9cfc.entry.js} +1 -1
  50. package/dist/bromcom-ui/{p-ffdc6086.entry.js → p-c4e92744.entry.js} +1 -1
  51. package/dist/bromcom-ui/{p-1f0ce7fa.entry.js → p-c863ba72.entry.js} +1 -1
  52. package/dist/bromcom-ui/{p-c2210caa.entry.js → p-d019f179.entry.js} +1 -1
  53. package/dist/bromcom-ui/{p-e0991d3a.entry.js → p-d497bc00.entry.js} +1 -1
  54. package/dist/bromcom-ui/{p-a8c8c9cf.entry.js → p-d9838751.entry.js} +1 -1
  55. package/dist/bromcom-ui/{p-7af21a10.entry.js → p-dd4c1650.entry.js} +1 -1
  56. package/dist/bromcom-ui/{p-773d6818.js → p-e1119ff2.js} +1 -1
  57. package/dist/bromcom-ui/{p-677153b5.entry.js → p-e1898d81.entry.js} +1 -1
  58. package/dist/bromcom-ui/p-ea6c32e1.entry.js +5 -0
  59. package/dist/bromcom-ui/{p-68868af9.entry.js → p-f1eefc73.entry.js} +1 -1
  60. package/dist/bromcom-ui/{p-44b18c6d.entry.js → p-f2699133.entry.js} +1 -1
  61. package/dist/bromcom-ui/{p-4b1cba4c.entry.js → p-f35d0fc2.entry.js} +1 -1
  62. package/dist/cjs/bcm-accordion.cjs.entry.js +1 -1
  63. package/dist/cjs/bcm-alert.cjs.entry.js +1 -1
  64. package/dist/cjs/bcm-attendance.cjs.entry.js +1 -1
  65. package/dist/cjs/bcm-avatar_2.cjs.entry.js +3 -3
  66. package/dist/cjs/bcm-breadcrumb.cjs.entry.js +1 -1
  67. package/dist/cjs/bcm-button-group.cjs.entry.js +1 -1
  68. package/dist/cjs/bcm-button_7.cjs.entry.js +4 -4
  69. package/dist/cjs/bcm-card.cjs.entry.js +1 -1
  70. package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +1 -1
  71. package/dist/cjs/bcm-chip.cjs.entry.js +1 -1
  72. package/dist/cjs/bcm-collapse.cjs.entry.js +1 -1
  73. package/dist/cjs/bcm-color-input.cjs.entry.js +3 -3
  74. package/dist/cjs/bcm-colorful_2.cjs.entry.js +15 -544
  75. package/dist/cjs/bcm-date-picker.cjs.entry.js +1 -1
  76. package/dist/cjs/bcm-datetime-picker.cjs.entry.js +1 -1
  77. package/dist/cjs/bcm-default.cjs.entry.js +1 -1
  78. package/dist/cjs/bcm-drawer.cjs.entry.js +3 -3
  79. package/dist/cjs/bcm-dropdown.cjs.entry.js +2 -2
  80. package/dist/cjs/bcm-expansion-panel.cjs.entry.js +1 -1
  81. package/dist/cjs/bcm-form-2.cjs.entry.js +1 -1
  82. package/dist/cjs/bcm-input-custom.cjs.entry.js +1 -1
  83. package/dist/cjs/bcm-input.cjs.entry.js +4 -4
  84. package/dist/cjs/bcm-item.cjs.entry.js +1 -1
  85. package/dist/cjs/bcm-items.cjs.entry.js +1 -1
  86. package/dist/cjs/bcm-list.cjs.entry.js +140 -328
  87. package/dist/cjs/bcm-menu.cjs.entry.js +4 -4
  88. package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +3 -3
  89. package/dist/cjs/bcm-modal-2-header.cjs.entry.js +3 -3
  90. package/dist/cjs/bcm-modal-2.cjs.entry.js +3 -3
  91. package/dist/cjs/bcm-modal.cjs.entry.js +1 -1
  92. package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +1 -1
  93. package/dist/cjs/bcm-popconfirm.cjs.entry.js +1 -1
  94. package/dist/cjs/bcm-popover.cjs.entry.js +3 -3
  95. package/dist/cjs/bcm-progress.cjs.entry.js +1 -1
  96. package/dist/cjs/bcm-radio-group.cjs.entry.js +3 -3
  97. package/dist/cjs/bcm-radio.cjs.entry.js +3 -3
  98. package/dist/cjs/bcm-range.cjs.entry.js +1 -1
  99. package/dist/cjs/bcm-rc-overflow_2.cjs.entry.js +2443 -0
  100. package/dist/cjs/bcm-skeleton.cjs.entry.js +1 -1
  101. package/dist/cjs/bcm-step.cjs.entry.js +2 -2
  102. package/dist/cjs/bcm-stepper.cjs.entry.js +4 -4
  103. package/dist/cjs/bcm-switch.cjs.entry.js +1 -1
  104. package/dist/cjs/bcm-tab-group.cjs.entry.js +3 -3
  105. package/dist/cjs/bcm-tab-item-header.cjs.entry.js +3 -3
  106. package/dist/cjs/bcm-tab-item.cjs.entry.js +3 -3
  107. package/dist/cjs/bcm-tag.cjs.entry.js +2 -2
  108. package/dist/cjs/bcm-textarea.cjs.entry.js +2 -2
  109. package/dist/cjs/bcm-time-picker.cjs.entry.js +1 -1
  110. package/dist/cjs/bcm-toast.cjs.entry.js +1 -1
  111. package/dist/cjs/bromcom-ui.cjs.js +1 -1
  112. package/dist/cjs/{generate-493daefd.js → generate-5564014f.js} +1 -1
  113. package/dist/cjs/index-906fb4e5.js +540 -0
  114. package/dist/cjs/{input-template-96af0058.js → input-template-b8eb3568.js} +1 -1
  115. package/dist/cjs/{json-parse-decarator-b5b0b23d.js → json-parse-decarator-c9d01873.js} +1 -1
  116. package/dist/cjs/loader.cjs.js +1 -1
  117. package/dist/cjs/{number-helper-051fe1ec.js → number-helper-57fc05a9.js} +1 -1
  118. package/dist/cjs/old-bcm-popover-box.cjs.entry.js +2 -2
  119. package/dist/cjs/old-bcm-popover.cjs.entry.js +1 -1
  120. package/dist/cjs/{stepper-states-efee4ad7.js → stepper-states-47bcb1a4.js} +1 -1
  121. package/dist/cjs/{tooltip-helper-a8734616.js → tooltip-helper-4ca7648e.js} +3 -3
  122. package/dist/cjs/{validators-50fd1ad1.js → validators-f1b75654.js} +1 -1
  123. package/dist/collection/collection-manifest.json +3 -2
  124. package/dist/collection/components/organism/list/list.css +4 -3
  125. package/dist/collection/components/organism/list/list.js +171 -176
  126. package/dist/collection/components/organism/states/bcm-list2.states.js +1 -1
  127. package/dist/collection/components/{molecules → third-parts}/colorful/colorful.css +1 -1
  128. package/dist/collection/components/third-parts/rc-overflow/rc-overflow.css +138 -0
  129. package/dist/collection/components/third-parts/rc-overflow/rc-overflow.js +194 -0
  130. package/dist/components/bcm-alert.js +1 -1
  131. package/dist/components/bcm-checkbox-group.js +1 -1
  132. package/dist/components/bcm-list.js +154 -329
  133. package/dist/components/bcm-rc-overflow.d.ts +11 -0
  134. package/dist/components/bcm-rc-overflow.js +10 -0
  135. package/dist/components/button.js +1 -1
  136. package/dist/components/colorful.js +2 -531
  137. package/dist/components/generate.js +1 -1
  138. package/dist/components/index.d.ts +2 -1
  139. package/dist/components/index.js +1 -0
  140. package/dist/components/index3.js +523 -177
  141. package/dist/components/index4.js +191 -0
  142. package/dist/components/rc-overflow.js +2238 -0
  143. package/dist/components/search.js +1 -1
  144. package/dist/components/step.js +1 -1
  145. package/dist/esm/bcm-accordion.entry.js +1 -1
  146. package/dist/esm/bcm-alert.entry.js +1 -1
  147. package/dist/esm/bcm-attendance.entry.js +1 -1
  148. package/dist/esm/bcm-avatar_2.entry.js +3 -3
  149. package/dist/esm/bcm-breadcrumb.entry.js +1 -1
  150. package/dist/esm/bcm-button-group.entry.js +1 -1
  151. package/dist/esm/bcm-button_7.entry.js +4 -4
  152. package/dist/esm/bcm-card.entry.js +1 -1
  153. package/dist/esm/bcm-checkbox-lite_9.entry.js +1 -1
  154. package/dist/esm/bcm-chip.entry.js +1 -1
  155. package/dist/esm/bcm-collapse.entry.js +1 -1
  156. package/dist/esm/bcm-color-input.entry.js +3 -3
  157. package/dist/esm/bcm-colorful_2.entry.js +5 -534
  158. package/dist/esm/bcm-date-picker.entry.js +1 -1
  159. package/dist/esm/bcm-datetime-picker.entry.js +1 -1
  160. package/dist/esm/bcm-default.entry.js +1 -1
  161. package/dist/esm/bcm-drawer.entry.js +3 -3
  162. package/dist/esm/bcm-dropdown.entry.js +2 -2
  163. package/dist/esm/bcm-expansion-panel.entry.js +1 -1
  164. package/dist/esm/bcm-form-2.entry.js +1 -1
  165. package/dist/esm/bcm-input-custom.entry.js +1 -1
  166. package/dist/esm/bcm-input.entry.js +4 -4
  167. package/dist/esm/bcm-item.entry.js +1 -1
  168. package/dist/esm/bcm-items.entry.js +1 -1
  169. package/dist/esm/bcm-list.entry.js +140 -328
  170. package/dist/esm/bcm-menu.entry.js +4 -4
  171. package/dist/esm/bcm-modal-2-footer.entry.js +3 -3
  172. package/dist/esm/bcm-modal-2-header.entry.js +3 -3
  173. package/dist/esm/bcm-modal-2.entry.js +3 -3
  174. package/dist/esm/bcm-modal.entry.js +1 -1
  175. package/dist/esm/bcm-popconfirm-box.entry.js +1 -1
  176. package/dist/esm/bcm-popconfirm.entry.js +1 -1
  177. package/dist/esm/bcm-popover.entry.js +3 -3
  178. package/dist/esm/bcm-progress.entry.js +1 -1
  179. package/dist/esm/bcm-radio-group.entry.js +3 -3
  180. package/dist/esm/bcm-radio.entry.js +3 -3
  181. package/dist/esm/bcm-range.entry.js +1 -1
  182. package/dist/esm/bcm-rc-overflow_2.entry.js +2438 -0
  183. package/dist/esm/bcm-skeleton.entry.js +1 -1
  184. package/dist/esm/bcm-step.entry.js +2 -2
  185. package/dist/esm/bcm-stepper.entry.js +4 -4
  186. package/dist/esm/bcm-switch.entry.js +1 -1
  187. package/dist/esm/bcm-tab-group.entry.js +3 -3
  188. package/dist/esm/bcm-tab-item-header.entry.js +3 -3
  189. package/dist/esm/bcm-tab-item.entry.js +3 -3
  190. package/dist/esm/bcm-tag.entry.js +2 -2
  191. package/dist/esm/bcm-textarea.entry.js +2 -2
  192. package/dist/esm/bcm-time-picker.entry.js +1 -1
  193. package/dist/esm/bcm-toast.entry.js +1 -1
  194. package/dist/esm/bromcom-ui.js +1 -1
  195. package/dist/esm/{generate-de5e04cf.js → generate-5684c743.js} +1 -1
  196. package/dist/esm/index-6310a048.js +537 -0
  197. package/dist/esm/{input-template-c5338e25.js → input-template-846cd4f3.js} +1 -1
  198. package/dist/esm/{json-parse-decarator-a417723b.js → json-parse-decarator-5cdef266.js} +1 -1
  199. package/dist/esm/loader.js +1 -1
  200. package/dist/esm/{number-helper-8de373ee.js → number-helper-3c971b4e.js} +1 -1
  201. package/dist/esm/old-bcm-popover-box.entry.js +2 -2
  202. package/dist/esm/old-bcm-popover.entry.js +1 -1
  203. package/dist/esm/{stepper-states-64ffef36.js → stepper-states-2f1dd0bd.js} +1 -1
  204. package/dist/esm/{tooltip-helper-096296d0.js → tooltip-helper-86b9b16e.js} +3 -3
  205. package/dist/esm/{validators-c8be2c83.js → validators-d6dd6432.js} +1 -1
  206. package/dist/types/components/organism/list/list.d.ts +9 -5
  207. package/dist/types/components/third-parts/rc-overflow/rc-overflow.d.ts +17 -0
  208. package/dist/types/components.d.ts +26 -0
  209. package/package.json +2 -1
  210. package/dist/bromcom-ui/p-2677dc60.entry.js +0 -10
  211. package/dist/bromcom-ui/p-6a842eb1.js +0 -5
  212. package/dist/bromcom-ui/p-a8b7d3cf.entry.js +0 -5
  213. package/dist/bromcom-ui/p-c0e58db2.entry.js +0 -5
  214. package/dist/bromcom-ui/p-efee3d33.entry.js +0 -5
  215. package/dist/cjs/bcm-search.cjs.entry.js +0 -245
  216. package/dist/collection/components/organism/list/list-tag-control.js +0 -173
  217. package/dist/esm/bcm-search.entry.js +0 -241
  218. package/dist/types/components/organism/list/list-tag-control.d.ts +0 -18
  219. /package/dist/collection/components/{molecules → third-parts}/colorful/colorful.js +0 -0
  220. /package/dist/types/components/{molecules → third-parts}/colorful/colorful.d.ts +0 -0
@@ -1,173 +0,0 @@
1
- /*!
2
- * Built with Stencil
3
- * Copyright (c) Bromcom.
4
- */
5
- import { Tooltip } from '@bcm/helpers';
6
- import snq from 'snq';
7
- import { StringHelper } from '../../../helper/string-helper';
8
- import { pluralize } from '../../../utils/utils';
9
- export class ListTagControl {
10
- constructor(containerId, values, listId, selectedOtherTag, clearable) {
11
- this.clearable = false;
12
- this.containerId = containerId;
13
- this.values = values;
14
- this.listId = listId;
15
- this.selectedOtherTag = selectedOtherTag;
16
- this.clearable = clearable;
17
- }
18
- getTooltip(id, text) {
19
- return new Tooltip({ message: text, targetId: id, placement: 'bottom' });
20
- }
21
- tagHtmlTemplate(tag, isOtherTag = false, otherTagIsSingle = false) {
22
- return `<span class="bcm-tag__content dismissable ${!otherTagIsSingle && isOtherTag && (this.selectedOtherTag ? 'checkable checked' : '')}">
23
- <span class="value">${tag.text}</span>
24
- ${otherTagIsSingle
25
- ? ''
26
- : `
27
- <span class="right close-button" bcm-list-tag-dismiss >
28
- <bcm-icon icon="fal fa-times"></bcm-icon>
29
- </span>`}
30
- </span>`;
31
- }
32
- getContainer() {
33
- return document.getElementById(this.containerId);
34
- }
35
- getContainerWidth() {
36
- let tagContainerWidth = snq(() => document.getElementById(this.containerId).clientWidth, 0);
37
- tagContainerWidth = (this.clearable ? tagContainerWidth - 20 : tagContainerWidth) - 20;
38
- return [tagContainerWidth < 130 ? 130 : tagContainerWidth - 20, tagContainerWidth];
39
- }
40
- isClickDismiss(e) {
41
- const path = e.path || (e.composedPath && e.composedPath());
42
- const tag = path.find(element => element.attributes && element.attributes['bcm-list-tag-dismiss']);
43
- return !!tag;
44
- }
45
- onClickControl(e, id, isOtherTag = false) {
46
- const isDismiss = this.isClickDismiss(e);
47
- let tooltipId = '';
48
- if (isDismiss) {
49
- this.onClickDismiss(id);
50
- tooltipId = isOtherTag ? `bcm-list-input-tag-${this.listId}-other-tag` : `list-${this.listId}-${id}`;
51
- this.getTooltip(tooltipId, '').hide();
52
- }
53
- else {
54
- isOtherTag ? this.onClickOtherTag(id) : this.onClickTag(id);
55
- }
56
- }
57
- calculateTags() {
58
- const containerWidth = this.getContainerWidth();
59
- const virtualDom = this.getContainer();
60
- if (virtualDom) {
61
- if (this.values && this.values.length > 0) {
62
- if (containerWidth[0] > 0 && virtualDom) {
63
- virtualDom.innerHTML = '';
64
- this.values.slice(0, 50).map(value => {
65
- const tag = document.createElement('div');
66
- tag.classList.add('bcm-tag');
67
- tag.id = `list-${this.listId}-${value.id}`;
68
- // tag.title = value.tagTitle || value.text || '';
69
- tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').show();
70
- tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').hide();
71
- tag.dataset.id = value.id;
72
- tag.onclick = e => this.onClickControl(e, value.id);
73
- tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, value), { text: StringHelper.textLimitter(value.text, 10) }));
74
- virtualDom.appendChild(tag);
75
- });
76
- let tags = virtualDom.querySelectorAll('.bcm-tag');
77
- let otherTags = [];
78
- let visibleTags = [];
79
- const checkControl = () => {
80
- const virtualDomTags = virtualDom.querySelectorAll('.bcm-tag');
81
- if (visibleTags.length === 1 && (virtualDomTags === null || virtualDomTags === void 0 ? void 0 : virtualDomTags.length) === 1) {
82
- visibleTags[0].innerHTML = this.tagHtmlTemplate({ text: '+1' }, false, true);
83
- }
84
- };
85
- let tagsWidth = Array.from(tags).reduce((acc, tag) => {
86
- const tagClientWidth = tag.clientWidth > 50 ? tag.clientWidth : 50;
87
- if (tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0]) {
88
- acc += tagClientWidth + 10;
89
- visibleTags.push(tag);
90
- const checkFreeSpace = tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0];
91
- !checkFreeSpace && containerWidth[1] < 70 && checkControl();
92
- }
93
- else {
94
- otherTags.push(tag);
95
- tag.remove();
96
- }
97
- return acc;
98
- }, 0);
99
- const otherTagElement = this.values.slice(visibleTags.length);
100
- const virtualDomLastElements = virtualDom.lastElementChild;
101
- const otherTagTextControl = args => {
102
- const { count, width } = args;
103
- if (count > 999)
104
- return '999+' + pluralize('item', count);
105
- if (width >= 100)
106
- return `${count} ` + pluralize('item', count) + ' selected';
107
- if (width < 100)
108
- return `+${count < 10 ? count : '9'}`;
109
- };
110
- if (otherTags && otherTags.length > 0 && virtualDomLastElements && virtualDomLastElements.id !== `bcm-list-input-tag-${this.listId}-other-tag`) {
111
- otherTags.push(virtualDomLastElements);
112
- if (otherTags.length > 0) {
113
- const otherCounter = otherTagElement.length + 1;
114
- const createOthertagElement = {
115
- id: `bcm-list-input-tag-${this.listId}-other-tag`,
116
- text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
117
- title: snq(() => otherTags
118
- .map(tag => this.values.find(value => value.id == tag.dataset.id))
119
- .sort((a, b) => +a.ct - +b.ct)
120
- .slice(0, 15)
121
- .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
122
- .toString()
123
- .split(',')
124
- .join('\r\n') + (otherTags.length > 15 ? ('\r\n...') : ''), '...'),
125
- };
126
- virtualDomLastElements.remove();
127
- visibleTags = visibleTags.filter(tag => tag.id !== virtualDomLastElements.id);
128
- const hiddenTags = this.values.filter(value => !visibleTags.find(tag => tag.dataset.id == value.id)).map(value => value.id);
129
- const otherTag = document.createElement('div');
130
- const otherTagIds = hiddenTags.join(',');
131
- const otherTagIsSingle = visibleTags.length === 0;
132
- otherTag.classList.add('bcm-tag');
133
- !otherTagIsSingle && otherTag.classList.add('bcm-tag--other');
134
- otherTag.id = createOthertagElement.id;
135
- // otherTag.title = createOthertagElement.title || false;
136
- if (createOthertagElement.title) {
137
- otherTag.onmouseenter = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).show();
138
- otherTag.onmouseleave = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).hide();
139
- }
140
- otherTag.onclick = e => this.onClickControl(e, otherTagIds, otherTagIsSingle ? false : true);
141
- otherTag.innerHTML = this.tagHtmlTemplate(createOthertagElement, true, otherTagIsSingle);
142
- otherTag.dataset.ids = hiddenTags.join(',');
143
- virtualDom.appendChild(otherTag);
144
- }
145
- }
146
- const otherTag = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
147
- const otherTagWidth = otherTag ? (otherTag.clientWidth && otherTag.clientWidth < 50 ? 50 : otherTag.clientWidth) : 200;
148
- const tagsPerRow = Math.floor(containerWidth[0] - tagsWidth);
149
- if (tagsPerRow > otherTagWidth) {
150
- if (otherTag) {
151
- const findElement = this.values.find(value => value.id == otherTag.dataset.ids.split(',')[0]);
152
- const tag = document.createElement('div');
153
- tag.classList.add('bcm-tag');
154
- tag.id = `list-${this.listId}-${findElement.id}`;
155
- // tag.title = findElement?.title || '';
156
- tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').show();
157
- tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').hide();
158
- tag.dataset.id = findElement.id;
159
- tag.onclick = e => this.onClickControl(e, findElement === null || findElement === void 0 ? void 0 : findElement.id);
160
- tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, findElement), { text: StringHelper.textLimitter(findElement.text, 10) }));
161
- const otherTagElement = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
162
- otherTagElement.remove();
163
- virtualDom.appendChild(tag);
164
- }
165
- }
166
- }
167
- }
168
- else {
169
- virtualDom.innerHTML = '';
170
- }
171
- }
172
- }
173
- }
@@ -1,241 +0,0 @@
1
- /*!
2
- * Built with Stencil
3
- * Copyright (c) Bromcom.
4
- */
5
- import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
6
- import { s as snq, G as Generate } from './generate-de5e04cf.js';
7
- import { B as Bcm } from './bcm-9f50af9c.js';
8
- import { I as InputTemplate } from './input-template-c5338e25.js';
9
- import { d as delay } from './utils-57652744.js';
10
- import { c as createStore } from './index-93e36fdb.js';
11
- import { S as StringHelper } from './string-helper-6bd24967.js';
12
- import './colors-44c95e7e.js';
13
- import './_commonjsHelpers-3016b722.js';
14
- import './types-6f06fa1a.js';
15
- import './index-ed9652af.js';
16
-
17
- const { state } = createStore({
18
- value: new Map(),
19
- });
20
- const setValue = val => {
21
- const { id, dataSource } = val;
22
- const data = {
23
- id: snq(() => id, Generate.UID),
24
- dataSource: dataSource && dataSource.length > 0 && recursive(dataSource),
25
- searchIsOnlyChilds: val.searchIsOnlyChilds,
26
- };
27
- state.value.set(data.id, data);
28
- };
29
- const recursive = (data, parentId) => {
30
- let recData = [];
31
- if (data) {
32
- recData = data.map(item => (Object.assign(Object.assign(Object.assign({}, item), { parentId: snq(() => parentId, null) }), (item.items && item.items.length > 0 && { items: snq(() => recursive(item.items, item.id), []) }))));
33
- }
34
- return recData;
35
- };
36
- const removeValue = _id => {
37
- state.value.delete(_id);
38
- };
39
- const getValue = id => snq(() => state.value.get(id), {});
40
- const getDataPagination = (id, limit = 3) => {
41
- let data = [];
42
- const value = getValue(id);
43
- if (value) {
44
- const { dataSource } = value;
45
- data = dataSource.slice(0, limit);
46
- }
47
- return data;
48
- };
49
- // //search treeview data by text
50
- // const searchData = (id, search, items?) => {
51
- // let dataSource
52
- // if (items && items.length > 0) {
53
- // dataSource = items
54
- // } else {
55
- // const value = getValue(id);
56
- // dataSource = value.dataSource;
57
- // }
58
- // let result = []
59
- // if (dataSource) {
60
- // dataSource.forEach(child => {
61
- // if (child.text.toLowerCase().includes(search.toLowerCase())) {
62
- // result.push(child)
63
- // }
64
- // result = result.concat(searchData(id, search, child.items))
65
- // })
66
- // };
67
- // return result
68
- // };
69
- //nested search
70
- const searchData = (id, searchText, items) => {
71
- let dataSource;
72
- if (items && items.length > 0) {
73
- dataSource = items;
74
- }
75
- else {
76
- const value = getValue(id);
77
- dataSource = value.dataSource;
78
- }
79
- let results = [];
80
- if (dataSource) {
81
- results.push(nestedSearch(id, dataSource, searchText));
82
- //return with their parents
83
- // dataSource.forEach(child => {
84
- // if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
85
- // results.push(child)
86
- // } else if (child.items && child.items.length > 0) {
87
- // child.items = nestedSearch(child.items, searchText)
88
- // if (child.items.length > 0) {
89
- // results.push(child)
90
- // }
91
- // }
92
- // })
93
- }
94
- return {
95
- result: snq(() => Generate.flatArray(results[0].result), []),
96
- matching: snq(() => results[0].matching, []),
97
- parentIndex: snq(() => results[0].parentIndex, []),
98
- nestedResult: snq(() => results[0].nestedResult, []),
99
- };
100
- };
101
- const nestedSearch = (id, items, searchText) => {
102
- let matching = [];
103
- let parentIndex = [];
104
- let result = [];
105
- let nestedResult = [];
106
- const { searchIsOnlyChilds } = getValue(id);
107
- if (items && items.length > 0) {
108
- items.forEach(child => {
109
- let isChild = searchIsOnlyChilds && child.parentId !== null;
110
- let isMatching = StringHelper.slugify(child.text).indexOf(StringHelper.slugify(searchText)) > -1 ||
111
- (child.keywords && StringHelper.slugify(child.keywords).indexOf(StringHelper.slugify(searchText)) > -1);
112
- if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
113
- result.push(child.id);
114
- matching.push(child.id);
115
- parentIndex.push(child.id);
116
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
117
- if (child.items && child.items.length > 0) {
118
- const found = nestedSearch(id, child.items, searchText);
119
- if (found.matching.length > 0) {
120
- found.matching.forEach(chi => {
121
- matching.push(chi);
122
- });
123
- }
124
- }
125
- }
126
- else if (child.items && child.items.length > 0) {
127
- const found = nestedSearch(id, child.items, searchText);
128
- if (found.result.length > 0) {
129
- found.result.forEach(chi => {
130
- result.push(chi);
131
- });
132
- result.push(child.id);
133
- parentIndex.push(child.id);
134
- nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
135
- }
136
- if (found.matching.length > 0) {
137
- matching.push(...found.matching);
138
- }
139
- }
140
- });
141
- }
142
- return { result, matching, parentIndex, nestedResult };
143
- };
144
- const searchState = {
145
- setValue,
146
- removeValue,
147
- getValue,
148
- getDataPagination,
149
- searchData,
150
- };
151
-
152
- const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea .bcm-input-element{white-space:normal}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
153
-
154
- const BcmSearch = class {
155
- constructor(hostRef) {
156
- registerInstance(this, hostRef);
157
- this.bcmOnSearch = createEvent(this, "bcm-on-search", 7);
158
- this.bcmOnSearchClear = createEvent(this, "bcm-on-search-clear", 7);
159
- this.debounceHandler = Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
160
- var _a, _b;
161
- 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;
162
- });
163
- this._id = Generate.UID();
164
- this.placeholder = "Search";
165
- this.disabled = false;
166
- this.readonly = false;
167
- this.clearable = true;
168
- this.size = Bcm.Size.medium;
169
- this.limit = 10;
170
- this.searchIsOnlyChilds = false;
171
- this.minSearchLength = 2;
172
- this.data = [];
173
- this.tick = {};
174
- this.isActiveClearable = false;
175
- }
176
- async componentDidLoad() {
177
- await this.initState();
178
- }
179
- async dataChanged(newValue, oldValue) {
180
- // console.log('data changed', newValue, oldValue)
181
- if (newValue !== oldValue) {
182
- await this.initState();
183
- }
184
- }
185
- async initState() {
186
- await searchState.setValue({
187
- id: this._id + "-input",
188
- dataSource: this.data,
189
- searchIsOnlyChilds: this.searchIsOnlyChilds,
190
- });
191
- await this.markForCheck();
192
- }
193
- markForCheck() {
194
- this.tick = Generate.UID();
195
- }
196
- handleInput() {
197
- // console.log("aheyya")
198
- }
199
- async onBcmFocus() {
200
- this.inputElement.focus();
201
- }
202
- async onBcmBlur() {
203
- this.inputElement.blur();
204
- }
205
- async onBcmSelect() {
206
- this.inputElement.select();
207
- }
208
- async setValue(newValue) {
209
- this.inputElement.value = newValue;
210
- }
211
- handleFocus() { }
212
- handleBlur() { }
213
- handleChange() { }
214
- async handleClear(eventEmit = true) {
215
- this.inputElement.value = '';
216
- const { value, id } = this.inputElement;
217
- searchState.searchData(id, value);
218
- this.isActiveClearable = false;
219
- this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
220
- this.bcmOnSearchClear.emit(eventEmit);
221
- await delay(10);
222
- return Promise.resolve();
223
- }
224
- onSearchValue(event, instance) {
225
- const { value, id } = event.target;
226
- const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
227
- const { bcmOnSearch, inputElement } = instance;
228
- 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 });
229
- }
230
- render() {
231
- const { _id, placeholder, disabled, readonly } = this;
232
- return h(Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h(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 }));
233
- }
234
- get el() { return getElement(this); }
235
- static get watchers() { return {
236
- "data": ["dataChanged"]
237
- }; }
238
- };
239
- BcmSearch.style = searchCss;
240
-
241
- export { BcmSearch as bcm_search };
@@ -1,18 +0,0 @@
1
- export declare class ListTagControl {
2
- private listId;
3
- private selectedOtherTag;
4
- private containerId;
5
- private values;
6
- private clearable;
7
- onClickOtherTag: (ids: any) => void;
8
- onClickTag: (id: any) => void;
9
- onClickDismiss: (id: any) => void;
10
- constructor(containerId: string, values?: any[], listId?: string, selectedOtherTag?: boolean, clearable?: boolean);
11
- private getTooltip;
12
- private tagHtmlTemplate;
13
- private getContainer;
14
- private getContainerWidth;
15
- private isClickDismiss;
16
- private onClickControl;
17
- calculateTags(): void;
18
- }