@syncfusion/ej2-multicolumn-combobox 28.2.7 → 29.1.33

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 (145) hide show
  1. package/README.md +1 -1
  2. package/dist/ej2-multicolumn-combobox.umd.min.js +2 -2
  3. package/dist/ej2-multicolumn-combobox.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-multicolumn-combobox.es2015.js +103 -24
  5. package/dist/es6/ej2-multicolumn-combobox.es2015.js.map +1 -1
  6. package/dist/es6/ej2-multicolumn-combobox.es5.js +106 -24
  7. package/dist/es6/ej2-multicolumn-combobox.es5.js.map +1 -1
  8. package/dist/global/ej2-multicolumn-combobox.min.js +2 -2
  9. package/dist/global/ej2-multicolumn-combobox.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/memory-leak-samples/mccb.d.ts +1 -0
  12. package/memory-leak-samples/mccb.html +35 -0
  13. package/memory-leak-samples/mccb.js +109 -0
  14. package/package.json +8 -8
  15. package/src/multicolumn-combobox/multi-column-combo-box-model.d.ts +1 -1
  16. package/src/multicolumn-combobox/multi-column-combo-box.d.ts +5 -0
  17. package/src/multicolumn-combobox/multi-column-combo-box.js +105 -23
  18. package/styles/bds-lite.css +60 -1
  19. package/styles/bds-lite.scss +1 -0
  20. package/styles/bds.css +70 -1
  21. package/styles/bds.scss +1 -0
  22. package/styles/bootstrap-dark-lite.css +60 -1
  23. package/styles/bootstrap-dark-lite.scss +1 -0
  24. package/styles/bootstrap-dark.css +70 -1
  25. package/styles/bootstrap-dark.scss +1 -0
  26. package/styles/bootstrap-lite.css +60 -1
  27. package/styles/bootstrap-lite.scss +1 -0
  28. package/styles/bootstrap.css +70 -1
  29. package/styles/bootstrap.scss +1 -0
  30. package/styles/bootstrap4-lite.css +60 -1
  31. package/styles/bootstrap4-lite.scss +1 -0
  32. package/styles/bootstrap4.css +70 -1
  33. package/styles/bootstrap4.scss +1 -0
  34. package/styles/bootstrap5-dark-lite.css +61 -2
  35. package/styles/bootstrap5-dark-lite.scss +1 -0
  36. package/styles/bootstrap5-dark.css +71 -2
  37. package/styles/bootstrap5-dark.scss +1 -0
  38. package/styles/bootstrap5-lite.css +60 -1
  39. package/styles/bootstrap5-lite.scss +1 -0
  40. package/styles/bootstrap5.3-lite.css +60 -1
  41. package/styles/bootstrap5.3-lite.scss +1 -0
  42. package/styles/bootstrap5.3.css +70 -1
  43. package/styles/bootstrap5.3.scss +1 -0
  44. package/styles/bootstrap5.css +70 -1
  45. package/styles/bootstrap5.scss +1 -0
  46. package/styles/fabric-dark-lite.css +60 -1
  47. package/styles/fabric-dark-lite.scss +1 -0
  48. package/styles/fabric-dark.css +70 -1
  49. package/styles/fabric-dark.scss +1 -0
  50. package/styles/fabric-lite.css +60 -1
  51. package/styles/fabric-lite.scss +1 -0
  52. package/styles/fabric.css +70 -1
  53. package/styles/fabric.scss +1 -0
  54. package/styles/fluent-dark-lite.css +60 -1
  55. package/styles/fluent-dark-lite.scss +1 -0
  56. package/styles/fluent-dark.css +70 -1
  57. package/styles/fluent-dark.scss +1 -0
  58. package/styles/fluent-lite.css +60 -1
  59. package/styles/fluent-lite.scss +1 -0
  60. package/styles/fluent.css +70 -1
  61. package/styles/fluent.scss +1 -0
  62. package/styles/fluent2-lite.css +60 -1
  63. package/styles/fluent2-lite.scss +1 -0
  64. package/styles/fluent2.css +70 -1
  65. package/styles/fluent2.scss +1 -0
  66. package/styles/highcontrast-light-lite.css +60 -1
  67. package/styles/highcontrast-light-lite.scss +1 -0
  68. package/styles/highcontrast-light.css +70 -1
  69. package/styles/highcontrast-light.scss +1 -0
  70. package/styles/highcontrast-lite.css +60 -1
  71. package/styles/highcontrast-lite.scss +1 -0
  72. package/styles/highcontrast.css +70 -1
  73. package/styles/highcontrast.scss +1 -0
  74. package/styles/material-dark-lite.css +60 -1
  75. package/styles/material-dark-lite.scss +1 -0
  76. package/styles/material-dark.css +70 -1
  77. package/styles/material-dark.scss +1 -0
  78. package/styles/material-lite.css +60 -1
  79. package/styles/material-lite.scss +1 -0
  80. package/styles/material.css +70 -1
  81. package/styles/material.scss +1 -0
  82. package/styles/material3-dark-lite.css +60 -1
  83. package/styles/material3-dark-lite.scss +1 -0
  84. package/styles/material3-dark.css +70 -1
  85. package/styles/material3-dark.scss +1 -0
  86. package/styles/material3-lite.css +60 -1
  87. package/styles/material3-lite.scss +1 -0
  88. package/styles/material3.css +70 -1
  89. package/styles/material3.scss +1 -0
  90. package/styles/multicolumn-combobox/_bigger.scss +9 -0
  91. package/styles/multicolumn-combobox/_layout.scss +16 -1
  92. package/styles/multicolumn-combobox/bds.css +70 -1
  93. package/styles/multicolumn-combobox/bds.scss +1 -0
  94. package/styles/multicolumn-combobox/bootstrap-dark.css +70 -1
  95. package/styles/multicolumn-combobox/bootstrap-dark.scss +1 -0
  96. package/styles/multicolumn-combobox/bootstrap.css +70 -1
  97. package/styles/multicolumn-combobox/bootstrap.scss +1 -0
  98. package/styles/multicolumn-combobox/bootstrap4.css +70 -1
  99. package/styles/multicolumn-combobox/bootstrap4.scss +1 -0
  100. package/styles/multicolumn-combobox/bootstrap5-dark.css +71 -2
  101. package/styles/multicolumn-combobox/bootstrap5-dark.scss +1 -0
  102. package/styles/multicolumn-combobox/bootstrap5.3.css +70 -1
  103. package/styles/multicolumn-combobox/bootstrap5.3.scss +1 -0
  104. package/styles/multicolumn-combobox/bootstrap5.css +70 -1
  105. package/styles/multicolumn-combobox/bootstrap5.scss +1 -0
  106. package/styles/multicolumn-combobox/fabric-dark.css +70 -1
  107. package/styles/multicolumn-combobox/fabric-dark.scss +1 -0
  108. package/styles/multicolumn-combobox/fabric.css +70 -1
  109. package/styles/multicolumn-combobox/fabric.scss +1 -0
  110. package/styles/multicolumn-combobox/fluent-dark.css +70 -1
  111. package/styles/multicolumn-combobox/fluent-dark.scss +1 -0
  112. package/styles/multicolumn-combobox/fluent.css +70 -1
  113. package/styles/multicolumn-combobox/fluent.scss +1 -0
  114. package/styles/multicolumn-combobox/fluent2.css +70 -1
  115. package/styles/multicolumn-combobox/fluent2.scss +1 -0
  116. package/styles/multicolumn-combobox/highcontrast-light.css +70 -1
  117. package/styles/multicolumn-combobox/highcontrast-light.scss +1 -0
  118. package/styles/multicolumn-combobox/highcontrast.css +70 -1
  119. package/styles/multicolumn-combobox/highcontrast.scss +1 -0
  120. package/styles/multicolumn-combobox/material-dark.css +70 -1
  121. package/styles/multicolumn-combobox/material-dark.scss +1 -0
  122. package/styles/multicolumn-combobox/material.css +70 -1
  123. package/styles/multicolumn-combobox/material.scss +1 -0
  124. package/styles/multicolumn-combobox/material3-dark.css +70 -1
  125. package/styles/multicolumn-combobox/material3-dark.scss +1 -0
  126. package/styles/multicolumn-combobox/material3.css +70 -1
  127. package/styles/multicolumn-combobox/material3.scss +1 -0
  128. package/styles/multicolumn-combobox/tailwind-dark.css +72 -3
  129. package/styles/multicolumn-combobox/tailwind-dark.scss +1 -0
  130. package/styles/multicolumn-combobox/tailwind.css +70 -1
  131. package/styles/multicolumn-combobox/tailwind.scss +1 -0
  132. package/styles/multicolumn-combobox/tailwind3.css +70 -1
  133. package/styles/multicolumn-combobox/tailwind3.scss +1 -0
  134. package/styles/tailwind-dark-lite.css +62 -3
  135. package/styles/tailwind-dark-lite.scss +1 -0
  136. package/styles/tailwind-dark.css +72 -3
  137. package/styles/tailwind-dark.scss +1 -0
  138. package/styles/tailwind-lite.css +60 -1
  139. package/styles/tailwind-lite.scss +1 -0
  140. package/styles/tailwind.css +70 -1
  141. package/styles/tailwind.scss +1 -0
  142. package/styles/tailwind3-lite.css +60 -1
  143. package/styles/tailwind3-lite.scss +1 -0
  144. package/styles/tailwind3.css +70 -1
  145. package/styles/tailwind3.scss +1 -0
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 28.2.7
3
+ * version : 29.1.33
4
4
  * Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <title> MCCB MemoryLeak demo</title>
6
+ <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <meta name="description" content="Typescript UI Controls" />
9
+ <meta name="author" content="Syncfusion" />
10
+ <link id="font" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
11
+ <link id="theme" href="../demos/themes/tailwind3.css" rel="stylesheet" />
12
+ <script>
13
+ window.require = {
14
+ config: function (json) {
15
+ window.rsConfig = json;
16
+ window.rsConfig.baseUrl = '';
17
+ }
18
+ };
19
+ </script>
20
+ <script src="../demos/multicolumn-combobox/demo-config.js"></script>
21
+ <script src="./../../node_modules/requirejs/require.js" data-main="default"></script>
22
+ <script>
23
+ require.config(window.rsConfig);
24
+ </script>
25
+ </head>
26
+
27
+ <body>
28
+ <div id="container" style="width: 500px; margin: 0 auto;">
29
+ <button id="render">renderMCCB</button>
30
+ <button id="destroy">destroyMCCB</button>
31
+ <div> Default </div> <br/>
32
+ <input type="text" tabindex="1" id="list" />
33
+ </div>
34
+ </body>
35
+ </html>
@@ -0,0 +1,109 @@
1
+ define(["require", "exports", "../src/multicolumn-combobox/index"], function (require, exports, index_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ var multiColObj;
5
+ var data = [
6
+ {
7
+ OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5),
8
+ ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
9
+ ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
10
+ },
11
+ {
12
+ OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6),
13
+ ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
14
+ ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
15
+ },
16
+ {
17
+ OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5),
18
+ ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
19
+ ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
20
+ },
21
+ {
22
+ OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5),
23
+ ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
24
+ ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
25
+ },
26
+ {
27
+ OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 2, OrderDate: new Date(8368506e5),
28
+ ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
29
+ ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
30
+ },
31
+ {
32
+ OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 7, OrderDate: new Date(836937e6),
33
+ ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
34
+ ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
35
+ },
36
+ {
37
+ OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5),
38
+ ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
39
+ ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
40
+ },
41
+ {
42
+ OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5),
43
+ ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
44
+ ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
45
+ },
46
+ {
47
+ OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6),
48
+ ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
49
+ ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
50
+ },
51
+ {
52
+ OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8374554e5),
53
+ ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
54
+ ShipRegion: 'Táchira', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
55
+ },
56
+ {
57
+ OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5),
58
+ ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
59
+ ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
60
+ },
61
+ {
62
+ OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5),
63
+ ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
64
+ ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
65
+ },
66
+ {
67
+ OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5),
68
+ ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
69
+ ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
70
+ },
71
+ {
72
+ OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5),
73
+ ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
74
+ ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
75
+ },
76
+ {
77
+ OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5),
78
+ ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
79
+ ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
80
+ }
81
+ ];
82
+ var columns = [
83
+ { field: 'OrderID', header: 'Order ID', width: 120 },
84
+ { field: 'CustomerID', width: 140, header: 'Customer ID' },
85
+ { field: 'Freight', header: 'Freight', width: 120 },
86
+ { field: 'OrderDate', header: 'Order Date', width: 140 }
87
+ ];
88
+ document.getElementById('render').addEventListener('click', renderMCCB);
89
+ document.getElementById('destroy').addEventListener('click', destoryMCCB);
90
+ function renderMCCB() {
91
+ multiColObj = new index_1.MultiColumnComboBox({
92
+ dataSource: data,
93
+ columns: columns,
94
+ allowFiltering: true,
95
+ fields: { text: 'CustomerID', value: 'OrderID' },
96
+ placeholder: 'Select a game',
97
+ popupHeight: '200px',
98
+ gridSettings: { rowHeight: 40, gridLines: 'Horizontal' },
99
+ allowSorting: true,
100
+ showClearButton: true
101
+ });
102
+ multiColObj.appendTo('#list');
103
+ }
104
+ function destoryMCCB() {
105
+ if (multiColObj && !multiColObj.isDestroyed) {
106
+ multiColObj.destroy();
107
+ }
108
+ }
109
+ });
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-multicolumn-combobox@*",
3
- "_id": "@syncfusion/ej2-multicolumn-combobox@28.2.3",
3
+ "_id": "@syncfusion/ej2-multicolumn-combobox@27.1.48",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-3PnmBMbBtRPL2/OPlcoDMJuOMq7gDbGUKAsvj5mUBZ4bq7d5FVyf2ZlwLoqNTFuoMh0A7fZlGi5Ui2EhPZ/5lA==",
5
+ "_integrity": "sha512-rAk6jU4D8iEFmdptP+Rf+qeQsE/S8WzgTuGQNXnmq5xfqiZIuVddJbYWLnHZnb6h9HUhpCosMPWLk5b30OGoIw==",
6
6
  "_location": "/@syncfusion/ej2-multicolumn-combobox",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -23,10 +23,10 @@
23
23
  "/@syncfusion/ej2-react-multicolumn-combobox",
24
24
  "/@syncfusion/ej2-vue-multicolumn-combobox"
25
25
  ],
26
- "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-28.2.3.tgz",
27
- "_shasum": "553b0a69101b525c89ca4b2b516fc3e131af8d0a",
26
+ "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-27.1.48.tgz",
27
+ "_shasum": "53fcabe317ee70c6b71d1ff7b5184860d822b382",
28
28
  "_spec": "@syncfusion/ej2-multicolumn-combobox@*",
29
- "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
29
+ "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
30
30
  "author": {
31
31
  "name": "Syncfusion Inc."
32
32
  },
@@ -35,8 +35,8 @@
35
35
  },
36
36
  "bundleDependencies": false,
37
37
  "dependencies": {
38
- "@syncfusion/ej2-base": "~28.2.5",
39
- "@syncfusion/ej2-grids": "~28.2.7"
38
+ "@syncfusion/ej2-base": "~29.1.33",
39
+ "@syncfusion/ej2-grids": "~29.1.33"
40
40
  },
41
41
  "deprecated": false,
42
42
  "description": "Essential JS 2 Component",
@@ -57,6 +57,6 @@
57
57
  "url": "git+https://github.com/syncfusion/ej2-multicolumn-combobox-component.git"
58
58
  },
59
59
  "typings": "index.d.ts",
60
- "version": "28.2.7",
60
+ "version": "29.1.33",
61
61
  "sideEffects": false
62
62
  }
@@ -1,4 +1,4 @@
1
- import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';import { formatUnit, addClass, removeClass, NumberFormatOptions, DateFormatOptions, Event, EmitType, AnimationModel, Animation, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DataManager, Query, Group } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { Grid, Resize, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
1
+ import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';import { formatUnit, addClass, removeClass, NumberFormatOptions, DateFormatOptions, Event, EmitType, AnimationModel, Animation, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DataManager, Query, Group } from '@syncfusion/ej2-data';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Grid, Resize, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
2
2
  import {TextAlign,GridLine,WrapMode,ResizeArgs,DataResult,FilterType,FloatLabelType,SortOrder,SortType,PopupEventArgs,FilteringEventArgs,SelectEventArgs,ChangeEventArgs} from "./multi-column-combo-box";
3
3
  import {ComponentModel} from '@syncfusion/ej2-base';
4
4
 
@@ -755,6 +755,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
755
755
  * @event change
756
756
  */
757
757
  change: EmitType<ChangeEventArgs>;
758
+ private dropdownElement;
758
759
  private inputEle;
759
760
  private inputObj;
760
761
  private inputWrapper;
@@ -780,6 +781,8 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
780
781
  private isInitialRender;
781
782
  private remoteDataLength;
782
783
  private selectedRowIndex;
784
+ private isShowSpinner;
785
+ private hiddenElement;
783
786
  /**
784
787
  * *Constructor for creating the component
785
788
  *
@@ -812,6 +815,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
812
815
  protected getPersistData(): string;
813
816
  private persistData;
814
817
  protected render(): void;
818
+ private setHiddenValue;
815
819
  private renderGrid;
816
820
  private handleActionComplete;
817
821
  private handleKeyPressed;
@@ -822,6 +826,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
822
826
  private getGridColumns;
823
827
  private updateGroupByField;
824
828
  private onDataBound;
829
+ private showHideSpinner;
825
830
  private onActionFailure;
826
831
  private renderInput;
827
832
  private setElementWidth;
@@ -57,7 +57,7 @@ import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndef
57
57
  import { formatUnit, addClass, removeClass, Event, Animation } from '@syncfusion/ej2-base';
58
58
  import { Input } from '@syncfusion/ej2-inputs';
59
59
  import { DataManager, Query } from '@syncfusion/ej2-data';
60
- import { Popup } from '@syncfusion/ej2-popups';
60
+ import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
61
61
  import { Grid, Resize, VirtualScroll, Group as GridGroup, Edit, Sort } from '@syncfusion/ej2-grids';
62
62
  var DROPDOWNICON = 'e-input-group-icon e-multicolumn-list-icon e-icons';
63
63
  var CONTENT = 'e-popup-content';
@@ -66,6 +66,7 @@ var NODATA = 'e-nodata';
66
66
  var DISABLED = 'e-disabled';
67
67
  var INPUTFOCUS = 'e-input-focus';
68
68
  var MULTICOLUMNLIST = 'e-multicolumn-list';
69
+ var HIDDENELEMENT = 'e-multicolumn-list-hidden';
69
70
  var MULTICOLUMNGRID = 'e-multicolumn-grid';
70
71
  var MultiColumnGrid = /** @class */ (function () {
71
72
  function MultiColumnGrid() {
@@ -270,6 +271,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
270
271
  function MultiColumnComboBox(options, element) {
271
272
  var _this = _super.call(this, options, element) || this;
272
273
  _this.gridInject = new MultiColumnGrid();
274
+ _this.isShowSpinner = true;
273
275
  _this.gridInject.InjectModules();
274
276
  return _this;
275
277
  }
@@ -329,14 +331,32 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
329
331
  }
330
332
  };
331
333
  MultiColumnComboBox.prototype.render = function () {
332
- this.renderGrid();
333
334
  this.renderInput();
335
+ this.renderGrid();
334
336
  this.popupDiv = this.createElement('div', { className: CONTENT });
335
337
  this.popupDiv.appendChild(this.gridEle);
336
338
  this.setHTMLAttributes();
337
339
  this.renderPopup();
338
340
  this.wireEvents();
339
341
  };
342
+ MultiColumnComboBox.prototype.setHiddenValue = function () {
343
+ if (isNOU(this.value)) {
344
+ this.hiddenElement.innerHTML = '';
345
+ return;
346
+ }
347
+ var existingOption = this.hiddenElement.querySelector('option');
348
+ if (!isNOU(existingOption)) {
349
+ existingOption.textContent = this.text;
350
+ existingOption.setAttribute('value', this.value.toString());
351
+ }
352
+ else if (!isNOU(this.hiddenElement)) {
353
+ var newOption = document.createElement('option');
354
+ newOption.text = this.text;
355
+ newOption.setAttribute('value', this.value.toString());
356
+ newOption.setAttribute('selected', '');
357
+ this.hiddenElement.appendChild(newOption);
358
+ }
359
+ };
340
360
  MultiColumnComboBox.prototype.renderGrid = function () {
341
361
  var _this = this;
342
362
  var gridColumns = this.getGridColumns();
@@ -359,6 +379,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
359
379
  allowResizing: this.gridSettings.allowResizing,
360
380
  allowMultiSorting: this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting,
361
381
  rowTemplate: this.itemTemplate,
382
+ beforeDataBound: function () {
383
+ if (_this.dataSource instanceof DataManager && _this.isShowSpinner) {
384
+ _this.showHideSpinner(true);
385
+ _this.isShowSpinner = false;
386
+ }
387
+ },
362
388
  dataBound: function () { _this.onDataBound(); },
363
389
  actionFailure: function (args) { _this.onActionFailure(args); },
364
390
  actionBegin: function (args) { _this.trigger('actionBegin', args); },
@@ -380,7 +406,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
380
406
  }
381
407
  }
382
408
  });
383
- this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
409
+ this.gridEle = this.createElement('div', { id: this.element.id + "_" + getUniqueID('grid'), className: MULTICOLUMNGRID });
384
410
  this.updateGroupByField();
385
411
  if (gridColumns.length > 0) {
386
412
  // Set first column as primary key to avoid PRIMARY KEY MISSING warning.
@@ -391,12 +417,28 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
391
417
  SortOrder.Ascending : SortOrder.Descending }] };
392
418
  }
393
419
  this.gridObj.appendTo(this.gridEle);
420
+ if (!isNOU(this.value) || !isNOU(this.text) || !isNOU(this.index)) {
421
+ this.initValue(null, null, true);
422
+ }
394
423
  };
395
424
  MultiColumnComboBox.prototype.handleActionComplete = function (args) {
425
+ var _this = this;
396
426
  this.trigger('actionComplete', args);
397
427
  if (args.requestType === 'sorting') {
398
428
  this.updateRowSelection(args);
399
429
  }
430
+ if (Array.isArray(args.rows) && this.isDataFiltered) {
431
+ var rows = args.rows;
432
+ var rowHeight_1 = 0;
433
+ rows.forEach(function (row) {
434
+ var rowElement = _this.gridObj.getRowElementByUID(row.uid);
435
+ if (rowElement) {
436
+ rowHeight_1 += rowElement.getBoundingClientRect().height;
437
+ }
438
+ });
439
+ this.popupRowHeight = rowHeight_1 || parseFloat(this.popupHeight);
440
+ this.updateGridHeight(true, true);
441
+ }
400
442
  this.popupObj.refreshPosition();
401
443
  this.gridObj.element.querySelector('.e-content').scrollTop = 0;
402
444
  };
@@ -505,6 +547,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
505
547
  }
506
548
  };
507
549
  MultiColumnComboBox.prototype.onDataBound = function () {
550
+ var _this = this;
508
551
  var dataCount = this.dataSource.length;
509
552
  var popupChild = this.popupDiv.querySelector('.' + MULTICOLUMNGRID);
510
553
  var hasNoDataClass = this.popupDiv.classList.contains(NODATA);
@@ -535,6 +578,19 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
535
578
  var firstRowEle = rowElements[0];
536
579
  firstRowEle.classList.add('e-row-focus');
537
580
  }
581
+ if (this.dataSource instanceof DataManager) {
582
+ setTimeout(function () {
583
+ _this.showHideSpinner(false);
584
+ });
585
+ }
586
+ };
587
+ MultiColumnComboBox.prototype.showHideSpinner = function (isShow) {
588
+ if (isShow) {
589
+ showSpinner(this.dropdownElement);
590
+ }
591
+ else {
592
+ hideSpinner(this.dropdownElement);
593
+ }
538
594
  };
539
595
  MultiColumnComboBox.prototype.onActionFailure = function (args) {
540
596
  this.trigger('actionFailure', args);
@@ -590,13 +646,28 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
590
646
  this.inputWrapper = this.inputObj.container;
591
647
  this.inputWrapper.classList.add(MULTICOLUMNLIST);
592
648
  this.inputWrapper.setAttribute('spellcheck', 'false');
649
+ this.hiddenElement = this.createElement('select', {
650
+ attrs: {
651
+ 'aria-hidden': 'true',
652
+ 'tabindex': '-1',
653
+ 'class': HIDDENELEMENT
654
+ }
655
+ });
656
+ prepend([this.hiddenElement], this.inputWrapper);
657
+ var name = this.inputEle.getAttribute('name') ? this.inputEle.getAttribute('name') : this.inputEle.getAttribute('id');
658
+ this.hiddenElement.setAttribute('name', name);
659
+ this.inputEle.removeAttribute('name');
660
+ if (!this.hiddenElement.hasAttribute('aria-label')) {
661
+ this.hiddenElement.setAttribute('aria-label', this.getModuleName());
662
+ }
593
663
  if (this.element.tagName === this.getDirective()) {
594
664
  this.element.appendChild(this.inputWrapper);
595
665
  }
596
666
  this.setElementWidth(this.width);
597
- if (!isNOU(this.value) || !isNOU(this.text) || !isNOU(this.index)) {
598
- this.initValue(null, null, true);
599
- }
667
+ this.dropdownElement = this.inputWrapper.querySelector('.e-input-group-icon.e-multicolumn-list-icon.e-icons');
668
+ createSpinner({
669
+ target: this.dropdownElement
670
+ });
600
671
  };
601
672
  MultiColumnComboBox.prototype.setElementWidth = function (inputWidth) {
602
673
  if (isNOU(inputWidth)) {
@@ -611,6 +682,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
611
682
  }
612
683
  };
613
684
  MultiColumnComboBox.prototype.setHTMLAttributes = function () {
685
+ var _this = this;
614
686
  var htmlAttributes = this.htmlAttributes;
615
687
  var inputEle = this.inputEle;
616
688
  if (Object.keys(htmlAttributes).length) {
@@ -628,12 +700,26 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
628
700
  this.setProperties({ readonly: true }, true);
629
701
  this.dataBind();
630
702
  break;
631
- case 'style':
632
- this.inputWrapper.setAttribute('style', htmlAttributes[htmlAttr]);
703
+ case 'style': {
704
+ var styles = htmlAttributes[htmlAttr];
705
+ this.inputWrapper.style.cssText = '';
706
+ if (styles) {
707
+ styles.split(';').forEach(function (styleProperty) {
708
+ var _a = styleProperty.split(':').map(function (part) { return part.trim(); }), property = _a[0], value = _a[1];
709
+ if (property && value) {
710
+ _this.inputWrapper.style.setProperty(property, value);
711
+ }
712
+ });
713
+ }
633
714
  break;
715
+ }
634
716
  default: {
635
717
  var defaultAttr = ['title', 'id', 'placeholder', 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
636
- if (defaultAttr.indexOf(htmlAttr) > -1) {
718
+ var validateAttr = ['name', 'required'];
719
+ if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {
720
+ this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
721
+ }
722
+ else if (defaultAttr.indexOf(htmlAttr) > -1) {
637
723
  if (htmlAttr === 'placeholder') {
638
724
  Input.setPlaceholder(htmlAttributes[htmlAttr], inputEle);
639
725
  }
@@ -808,7 +894,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
808
894
  var popupHeight = this.getSize(false);
809
895
  this.popupEle.style.maxHeight = popupHeight;
810
896
  if (this.footerTemplate) {
811
- this.footer = this.footer ? this.footer : this.popupEle.querySelector('.e-popup-footer');
812
897
  var height = Math.round(this.footer.getBoundingClientRect().height);
813
898
  popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
814
899
  }
@@ -817,16 +902,15 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
817
902
  this.popupEle.style.visibility = 'hidden';
818
903
  this.isInitialRender = true;
819
904
  };
820
- MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight, dataSourceCount) {
905
+ MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight) {
821
906
  var height;
822
907
  if (isFilter) {
823
908
  var gridContentEle = this.gridObj.getContent().querySelector('.e-content');
824
909
  var scrollBarHeight = gridContentEle.offsetHeight - gridContentEle.clientHeight;
825
- var totalRowHeight = dataSourceCount * this.popupRowHeight;
826
910
  if (this.fields.groupBy !== '' && !isNOU(this.fields.groupBy)) {
827
- totalRowHeight += this.popupRowHeight;
911
+ this.popupRowHeight += this.popupRowHeight;
828
912
  }
829
- height = autoHeight ? (totalRowHeight < this.prevGridHeight ? (totalRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
913
+ height = autoHeight ? (this.popupRowHeight < this.prevGridHeight ? (this.popupRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
830
914
  }
831
915
  else {
832
916
  this.prevGridHeight = this.popupDiv.getBoundingClientRect().height - this.popupDiv.querySelector('.e-gridheader').getBoundingClientRect().height;
@@ -983,6 +1067,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
983
1067
  _this.updateValues(selectedRecords ? dataValue : '', selectedRecords ? dataText : '', _this.gridObj.selectedRowIndex, ChangeEventArgs);
984
1068
  }
985
1069
  Input.setValue(selectedRecords ? dataText : '', _this.inputEle, _this.floatLabelType, _this.showClearButton);
1070
+ _this.setHiddenValue();
986
1071
  if (!isKeyNav || (isKeyNav && isUpdateVal)) {
987
1072
  _this.hidePopup(e);
988
1073
  }
@@ -997,6 +1082,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
997
1082
  this.value = value || this.value;
998
1083
  this.index = this.selectedRowIndex = !isNOU(index) ? index : this.index;
999
1084
  this.isProtectedOnChange = prevOnChange;
1085
+ this.setHiddenValue();
1000
1086
  if (!isInitial) {
1001
1087
  this.triggerChangeEvent(eventArgs);
1002
1088
  }
@@ -1124,9 +1210,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
1124
1210
  dataSource.executeQuery(query).then(function (e) {
1125
1211
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1126
1212
  var dataLists = e.result;
1127
- var dataLength = dataLists.length;
1128
1213
  filteredData = dataLists.filter(function (item) { return _this.filterData(item, filterType, inputValue, fields); });
1129
- _this.updateGridDataSource(filteredData, dataLength);
1214
+ _this.updateGridDataSource(filteredData);
1130
1215
  });
1131
1216
  };
1132
1217
  MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
@@ -1143,12 +1228,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
1143
1228
  return false;
1144
1229
  }
1145
1230
  };
1146
- MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource, dataLength) {
1147
- var autoHeight = true;
1231
+ MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource) {
1148
1232
  if (dataSource.length > 0) {
1149
- var length_1 = this.dataSource instanceof DataManager ? dataLength
1150
- : this.dataSource.length;
1151
- autoHeight = length_1 !== dataSource.length;
1152
1233
  removeClass([this.popupDiv], [NODATA]);
1153
1234
  var noRecordEle = this.popupDiv.querySelector('.e-no-records');
1154
1235
  if (noRecordEle) {
@@ -1161,7 +1242,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
1161
1242
  this.l10nUpdate();
1162
1243
  addClass([this.popupDiv], [NODATA]);
1163
1244
  }
1164
- this.updateGridHeight(true, autoHeight, dataSource.length);
1165
1245
  };
1166
1246
  MultiColumnComboBox.prototype.wireEvents = function () {
1167
1247
  if (!isNOU(this.inputObj.buttons[0])) {
@@ -1443,6 +1523,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
1443
1523
  MultiColumnComboBox.prototype.updateDynamicDataSource = function (newDataSource, oldDataSource) {
1444
1524
  if (this.gridObj) {
1445
1525
  var dataLength_1;
1526
+ this.isShowSpinner = true;
1446
1527
  this.gridObj.dataSource = newDataSource;
1447
1528
  var isRemoteData = oldDataSource instanceof DataManager;
1448
1529
  if (isRemoteData) {
@@ -1522,7 +1603,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
1522
1603
  if ((_this.value || _this.text || _this.index)) {
1523
1604
  _this.gridObj.selectRow(_this.selectedRowIndex);
1524
1605
  }
1525
- _this.focusIn(e);
1526
1606
  }
1527
1607
  var contentEle = _this.gridObj.getContent();
1528
1608
  if (contentEle) {
@@ -1681,6 +1761,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
1681
1761
  this.popupEle = null;
1682
1762
  this.footer = null;
1683
1763
  this.noRecord = null;
1764
+ this.hiddenElement = null;
1765
+ this.dropdownElement = null;
1684
1766
  _super.prototype.destroy.call(this);
1685
1767
  };
1686
1768
  /**
@@ -210,11 +210,61 @@
210
210
  min-width: 300px !important;
211
211
  }
212
212
 
213
+ /* stylelint-disable property-no-vendor-prefix */
214
+ @-webkit-keyframes material-spinner-rotate {
215
+ 0% {
216
+ -webkit-transform: rotate(0);
217
+ transform: rotate(0);
218
+ }
219
+ 100% {
220
+ -webkit-transform: rotate(360deg);
221
+ transform: rotate(360deg);
222
+ }
223
+ }
224
+ @keyframes material-spinner-rotate {
225
+ 0% {
226
+ -webkit-transform: rotate(0);
227
+ transform: rotate(0);
228
+ }
229
+ 100% {
230
+ -webkit-transform: rotate(360deg);
231
+ transform: rotate(360deg);
232
+ }
233
+ }
234
+ @-webkit-keyframes fabric-spinner-rotate {
235
+ 0% {
236
+ -webkit-transform: rotate(0);
237
+ transform: rotate(0);
238
+ }
239
+ 100% {
240
+ -webkit-transform: rotate(360deg);
241
+ transform: rotate(360deg);
242
+ }
243
+ }
244
+ @keyframes fabric-spinner-rotate {
245
+ 0% {
246
+ -webkit-transform: rotate(0);
247
+ transform: rotate(0);
248
+ }
249
+ 100% {
250
+ -webkit-transform: rotate(360deg);
251
+ transform: rotate(360deg);
252
+ }
253
+ }
213
254
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
214
255
  content: "\e729";
215
256
  font-family: "e-icons";
216
257
  }
217
258
 
259
+ .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
260
+ /* stylelint-disable declaration-no-important */
261
+ height: 20px !important;
262
+ width: 20px !important;
263
+ -webkit-transform-origin: 10px 10px 10px !important;
264
+ transform-origin: 10px 10px 10px !important;
265
+ /* stylelint-enable declaration-no-important */
266
+ }
267
+
218
268
  .e-multicolumn-grid tr.e-groupcaptionrow {
219
269
  position: sticky;
220
270
  top: 0;
@@ -255,6 +305,14 @@
255
305
  border-radius: 0 0 4px 4px;
256
306
  }
257
307
 
308
+ .e-multicolumn-list .e-multicolumn-list-hidden {
309
+ border: 0;
310
+ height: 0;
311
+ padding: 0;
312
+ visibility: hidden;
313
+ width: 0;
314
+ }
315
+
258
316
  .e-multicolumn-grid.e-grid {
259
317
  border-width: 0;
260
318
  border-radius: 4px;
@@ -336,7 +394,8 @@
336
394
  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
337
395
  }
338
396
 
339
- .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
397
+ .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
398
+ .e-multicolumn-list.e-input-group .e-input-group-icon {
340
399
  position: relative;
341
400
  }
342
401
 
@@ -5,6 +5,7 @@
5
5
  @import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
6
6
  @import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
7
7
  @import 'ej2-grids/styles/grid/bds-definition.scss';
8
+ @import 'ej2-popups/styles/spinner/bds-definition.scss';
8
9
  @import 'multicolumn-combobox/bds-definition.scss';
9
10
  @import 'multicolumn-combobox/icons/bds.scss';
10
11
  @import 'multicolumn-combobox/all.scss';