@syncfusion/ej2-angular-dropdowns 21.2.10-ngcc → 22.1.34-ngcc

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 (101) hide show
  1. package/@syncfusion/ej2-angular-dropdowns.es5.js.map +1 -1
  2. package/@syncfusion/ej2-angular-dropdowns.js.map +1 -1
  3. package/CHANGELOG.md +9 -31
  4. package/README.md +203 -105
  5. package/dist/ej2-angular-dropdowns.umd.js +1 -1
  6. package/dist/ej2-angular-dropdowns.umd.js.map +1 -1
  7. package/dist/ej2-angular-dropdowns.umd.min.js +1 -1
  8. package/dist/ej2-angular-dropdowns.umd.min.js.map +1 -1
  9. package/license +10 -0
  10. package/package.json +8 -8
  11. package/schematics/utils/lib-details.d.ts +2 -2
  12. package/schematics/utils/lib-details.js +2 -2
  13. package/schematics/utils/lib-details.ts +2 -2
  14. package/src/auto-complete/autocomplete.component.d.ts +4 -0
  15. package/src/combo-box/combobox.component.d.ts +4 -0
  16. package/src/drop-down-list/dropdownlist.component.d.ts +5 -0
  17. package/src/drop-down-tree/dropdowntree.component.d.ts +12 -0
  18. package/src/list-box/listbox.component.d.ts +1 -0
  19. package/src/mention/mention.component.d.ts +2 -0
  20. package/src/multi-select/multiselect.component.d.ts +5 -0
  21. package/styles/auto-complete/material3-dark.css +198 -0
  22. package/styles/auto-complete/material3-dark.scss +2 -0
  23. package/styles/auto-complete/material3.css +254 -0
  24. package/styles/auto-complete/material3.scss +2 -0
  25. package/styles/bootstrap-dark.css +5 -1
  26. package/styles/bootstrap.css +5 -1
  27. package/styles/bootstrap4.css +5 -1
  28. package/styles/bootstrap5-dark.css +5 -1
  29. package/styles/bootstrap5.css +5 -1
  30. package/styles/combo-box/material3-dark.css +198 -0
  31. package/styles/combo-box/material3-dark.scss +2 -0
  32. package/styles/combo-box/material3.css +254 -0
  33. package/styles/combo-box/material3.scss +2 -0
  34. package/styles/drop-down-base/bootstrap-dark.css +4 -0
  35. package/styles/drop-down-base/bootstrap.css +4 -0
  36. package/styles/drop-down-base/bootstrap4.css +4 -0
  37. package/styles/drop-down-base/bootstrap5-dark.css +4 -0
  38. package/styles/drop-down-base/bootstrap5.css +4 -0
  39. package/styles/drop-down-base/fabric-dark.css +4 -0
  40. package/styles/drop-down-base/fabric.css +4 -0
  41. package/styles/drop-down-base/fluent-dark.css +4 -0
  42. package/styles/drop-down-base/fluent.css +4 -0
  43. package/styles/drop-down-base/highcontrast-light.css +4 -0
  44. package/styles/drop-down-base/highcontrast.css +4 -0
  45. package/styles/drop-down-base/material-dark.css +4 -0
  46. package/styles/drop-down-base/material.css +4 -0
  47. package/styles/drop-down-base/material3-dark.css +439 -0
  48. package/styles/drop-down-base/material3-dark.scss +2 -0
  49. package/styles/drop-down-base/material3.css +495 -0
  50. package/styles/drop-down-base/material3.scss +2 -0
  51. package/styles/drop-down-base/tailwind-dark.css +4 -0
  52. package/styles/drop-down-base/tailwind.css +4 -0
  53. package/styles/drop-down-list/material3-dark.css +503 -0
  54. package/styles/drop-down-list/material3-dark.scss +2 -0
  55. package/styles/drop-down-list/material3.css +559 -0
  56. package/styles/drop-down-list/material3.scss +2 -0
  57. package/styles/drop-down-tree/material3-dark.css +466 -0
  58. package/styles/drop-down-tree/material3-dark.scss +2 -0
  59. package/styles/drop-down-tree/material3.css +522 -0
  60. package/styles/drop-down-tree/material3.scss +2 -0
  61. package/styles/fabric-dark.css +5 -1
  62. package/styles/fabric.css +5 -1
  63. package/styles/fluent-dark.css +5 -1
  64. package/styles/fluent.css +5 -1
  65. package/styles/highcontrast-light.css +5 -1
  66. package/styles/highcontrast.css +5 -1
  67. package/styles/list-box/material3-dark.css +956 -0
  68. package/styles/list-box/material3-dark.scss +2 -0
  69. package/styles/list-box/material3.css +1012 -0
  70. package/styles/list-box/material3.scss +2 -0
  71. package/styles/material-dark.css +5 -1
  72. package/styles/material.css +5 -1
  73. package/styles/material3-dark.css +5057 -0
  74. package/styles/material3-dark.scss +9 -0
  75. package/styles/material3.css +5498 -0
  76. package/styles/material3.scss +9 -0
  77. package/styles/mention/material3-dark.css +87 -0
  78. package/styles/mention/material3-dark.scss +2 -0
  79. package/styles/mention/material3.css +143 -0
  80. package/styles/mention/material3.scss +2 -0
  81. package/styles/multi-select/bootstrap-dark.css +1 -1
  82. package/styles/multi-select/bootstrap.css +1 -1
  83. package/styles/multi-select/bootstrap4.css +1 -1
  84. package/styles/multi-select/bootstrap5-dark.css +1 -1
  85. package/styles/multi-select/bootstrap5.css +1 -1
  86. package/styles/multi-select/fabric-dark.css +1 -1
  87. package/styles/multi-select/fabric.css +1 -1
  88. package/styles/multi-select/fluent-dark.css +1 -1
  89. package/styles/multi-select/fluent.css +1 -1
  90. package/styles/multi-select/highcontrast-light.css +1 -1
  91. package/styles/multi-select/highcontrast.css +1 -1
  92. package/styles/multi-select/material-dark.css +1 -1
  93. package/styles/multi-select/material.css +1 -1
  94. package/styles/multi-select/material3-dark.css +2547 -0
  95. package/styles/multi-select/material3-dark.scss +2 -0
  96. package/styles/multi-select/material3.css +2603 -0
  97. package/styles/multi-select/material3.scss +2 -0
  98. package/styles/multi-select/tailwind-dark.css +1 -1
  99. package/styles/multi-select/tailwind.css +1 -1
  100. package/styles/tailwind-dark.css +5 -1
  101. package/styles/tailwind.css +5 -1
@@ -0,0 +1,9 @@
1
+
2
+ @import 'drop-down-base/material3.scss';
3
+ @import 'drop-down-list/material3.scss';
4
+ @import 'drop-down-tree/material3.scss';
5
+ @import 'combo-box/material3.scss';
6
+ @import 'auto-complete/material3.scss';
7
+ @import 'multi-select/material3.scss';
8
+ @import 'list-box/material3.scss';
9
+ @import 'mention/material3.scss';
@@ -0,0 +1,87 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
+ :root {
3
+ --color-sf-black: 0, 0, 0;
4
+ --color-sf-white: 255, 255, 255;
5
+ --color-sf-primary: 208, 188, 255;
6
+ --color-sf-primary-container: 79, 55, 139;
7
+ --color-sf-secondary: 204, 194, 220;
8
+ --color-sf-secondary-container: 74, 68, 88;
9
+ --color-sf-tertiary: 239, 184, 200;
10
+ --color-sf-tertiary-container: 99, 59, 72;
11
+ --color-sf-surface: 28, 27, 31;
12
+ --color-sf-surface-variant: 73, 69, 79;
13
+ --color-sf-background: var(--color-sf-surface);
14
+ --color-sf-on-primary: 55, 30, 115;
15
+ --color-sf-on-primary-container: 234, 221, 255;
16
+ --color-sf-on-secondary: 51, 45, 65;
17
+ --color-sf-on-secondary-container: 232, 222, 248;
18
+ --color-sf-on-tertiary: 73, 37, 50;
19
+ --color-sf-on-tertiary-containe: 255, 216, 228;
20
+ --color-sf-on-surface: 230, 225, 229;
21
+ --color-sf-on-surface-variant: 202, 196, 208;
22
+ --color-sf-on-background: 230, 225, 229;
23
+ --color-sf-outline: 147, 143, 153;
24
+ --color-sf-outline-variant: 68, 71, 70;
25
+ --color-sf-shadow: 0, 0, 0;
26
+ --color-sf-surface-tint-color: 208, 188, 255;
27
+ --color-sf-inverse-surface: 230, 225, 229;
28
+ --color-sf-inverse-on-surface: 49, 48, 51;
29
+ --color-sf-inverse-primary: 103, 80, 164;
30
+ --color-sf-scrim: 0, 0, 0;
31
+ --color-sf-error: 242, 184, 181;
32
+ --color-sf-error-container: 140, 29, 24;
33
+ --color-sf-on-error: 96, 20, 16;
34
+ --color-sf-on-error-container: 249, 222, 220;
35
+ --color-sf-success: 83, 202, 23;
36
+ --color-sf-success-container: 22, 62, 2;
37
+ --color-sf-on-success: 13, 39, 0;
38
+ --color-sf-on-success-container: 183, 250, 150;
39
+ --color-sf-info: 71, 172, 251;
40
+ --color-sf-info-container: 0, 67, 120;
41
+ --color-sf-on-info: 0, 51, 91;
42
+ --color-sf-on-info-container: 173, 219, 255;
43
+ --color-sf-warning: 245, 180, 130;
44
+ --color-sf-warning-container: 123, 65, 0;
45
+ --color-sf-on-warning: 99, 52, 0;
46
+ --color-sf-on-warning-container: 255, 220, 193;
47
+ --color-sf-spreadsheet-gridline: 231, 224, 236;
48
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
49
+ --color-sf-success-text: 0, 0, 0;
50
+ --color-sf-warning-text: 0, 0, 0;
51
+ --color-sf-info-text: 0, 0, 0;
52
+ --color-sf-danger-text: 0, 0, 0;
53
+ --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
54
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
55
+ }
56
+
57
+ /* stylelint-disable-line no-empty-source */
58
+ /* stylelint-disable property-no-vendor-prefix */
59
+ @keyframes material-spinner-rotate {
60
+ 0% {
61
+ transform: rotate(0deg);
62
+ }
63
+ 100% {
64
+ transform: rotate(360deg);
65
+ }
66
+ }
67
+ @keyframes fabric-spinner-rotate {
68
+ 0% {
69
+ transform: rotate(0deg);
70
+ }
71
+ 100% {
72
+ transform: rotate(360deg);
73
+ }
74
+ }
75
+ .e-dropdownbase .e-list-item .e-list-icon {
76
+ padding: 0 16px 0 0;
77
+ }
78
+
79
+ .e-small .e-dropdownbase .e-list-item .e-list-icon {
80
+ padding: 0 12px 0 0;
81
+ }
82
+
83
+ .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
84
+ padding: 0 16px 0 0;
85
+ }
86
+
87
+ /* stylelint-disable-line no-empty-source */
@@ -0,0 +1,2 @@
1
+ @import 'ej2-base/styles/material3-dark-definition.scss';
2
+ @import 'ej2-dropdowns/styles/mention/material3-dark.scss';
@@ -0,0 +1,143 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
+ :root {
3
+ --color-sf-black: 0, 0, 0;
4
+ --color-sf-white: 255, 255, 255;
5
+ --color-sf-primary: 103, 80, 164;
6
+ --color-sf-primary-container: 234, 221, 255;
7
+ --color-sf-secondary: 98, 91, 113;
8
+ --color-sf-secondary-container: 232, 222, 248;
9
+ --color-sf-tertiary: 125, 82, 96;
10
+ --color-sf-tertiary-container: 255, 216, 228;
11
+ --color-sf-surface: 255, 255, 255;
12
+ --color-sf-surface-variant: 231, 224, 236;
13
+ --color-sf-background: var(--color-sf-surface);
14
+ --color-sf-on-primary: 255, 255, 255;
15
+ --color-sf-on-primary-container: 33, 0, 94;
16
+ --color-sf-on-secondary: 255, 255, 255;
17
+ --color-sf-on-secondary-container: 30, 25, 43;
18
+ --color-sf-on-tertiary: 255, 255, 255;
19
+ --color-sf-on-tertiary-containe: 55, 11, 30;
20
+ --color-sf-on-surface: 28, 27, 31;
21
+ --color-sf-on-surface-variant: 73, 69, 78;
22
+ --color-sf-on-background: 28, 27, 31;
23
+ --color-sf-outline: 121, 116, 126;
24
+ --color-sf-outline-variant: 196, 199, 197;
25
+ --color-sf-shadow: 0, 0, 0;
26
+ --color-sf-surface-tint-color: 103, 80, 164;
27
+ --color-sf-inverse-surface: 49, 48, 51;
28
+ --color-sf-inverse-on-surface: 244, 239, 244;
29
+ --color-sf-inverse-primary: 208, 188, 255;
30
+ --color-sf-scrim: 0, 0, 0;
31
+ --color-sf-error: 179, 38, 30;
32
+ --color-sf-error-container: 249, 222, 220;
33
+ --color-sf-on-error: 255, 250, 250;
34
+ --color-sf-on-error-container: 65, 14, 11;
35
+ --color-sf-success: 32, 81, 7;
36
+ --color-sf-success-container: 209, 255, 186;
37
+ --color-sf-on-success: 244, 255, 239;
38
+ --color-sf-on-success-container: 13, 39, 0;
39
+ --color-sf-info: 1, 87, 155;
40
+ --color-sf-info-container: 233, 245, 255;
41
+ --color-sf-on-info: 250, 253, 255;
42
+ --color-sf-on-info-container: 0, 51, 91;
43
+ --color-sf-warning: 145, 76, 0;
44
+ --color-sf-warning-container: 254, 236, 222;
45
+ --color-sf-on-warning: 255, 255, 255;
46
+ --color-sf-on-warning-container: 47, 21, 0;
47
+ --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
48
+ --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
49
+ --color-sf-diagram-palette-background: --color-sf-white;
50
+ --color-sf-success-text: 255, 255, 255;
51
+ --color-sf-warning-text: 255, 255, 255;
52
+ --color-sf-danger-text: 255, 255, 255;
53
+ --color-sf-info-text: 255, 255, 255;
54
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
55
+ --color-sf-secondary-bg-color: var(--color-sf-surface);
56
+ }
57
+
58
+ .e-dark-mode {
59
+ --color-sf-black: 0, 0, 0;
60
+ --color-sf-white: 255, 255, 255;
61
+ --color-sf-primary: 208, 188, 255;
62
+ --color-sf-primary-container: 79, 55, 139;
63
+ --color-sf-secondary: 204, 194, 220;
64
+ --color-sf-secondary-container: 74, 68, 88;
65
+ --color-sf-tertiary: 239, 184, 200;
66
+ --color-sf-tertiary-container: 99, 59, 72;
67
+ --color-sf-surface: 28, 27, 31;
68
+ --color-sf-surface-variant: 28, 27, 31;
69
+ --color-sf-background: var(--color-sf-surface);
70
+ --color-sf-on-primary: 55, 30, 115;
71
+ --color-sf-on-primary-container: 234, 221, 255;
72
+ --color-sf-on-secondary: 51, 45, 65;
73
+ --color-sf-on-secondary-container: 232, 222, 248;
74
+ --color-sf-on-tertiary: 73, 37, 50;
75
+ --color-sf-on-tertiary-containe: 255, 216, 228;
76
+ --color-sf-on-surface: 230, 225, 229;
77
+ --color-sf-on-surface-variant: 202, 196, 208;
78
+ --color-sf-on-background: 230, 225, 229;
79
+ --color-sf-outline: 147, 143, 153;
80
+ --color-sf-outline-variant: 68, 71, 70;
81
+ --color-sf-shadow: 0, 0, 0;
82
+ --color-sf-surface-tint-color: 208, 188, 255;
83
+ --color-sf-inverse-surface: 230, 225, 229;
84
+ --color-sf-inverse-on-surface: 49, 48, 51;
85
+ --color-sf-inverse-primary: 103, 80, 164;
86
+ --color-sf-scrim: 0, 0, 0;
87
+ --color-sf-error: 242, 184, 181;
88
+ --color-sf-error-container: 140, 29, 24;
89
+ --color-sf-on-error: 96, 20, 16;
90
+ --color-sf-on-error-container: 249, 222, 220;
91
+ --color-sf-success: 83, 202, 23;
92
+ --color-sf-success-container: 22, 62, 2;
93
+ --color-sf-on-success: 13, 39, 0;
94
+ --color-sf-on-success-container: 183, 250, 150;
95
+ --color-sf-info: 71, 172, 251;
96
+ --color-sf-info-container: 0, 67, 120;
97
+ --color-sf-on-info: 0, 51, 91;
98
+ --color-sf-on-info-container: 173, 219, 255;
99
+ --color-sf-warning: 245, 180, 130;
100
+ --color-sf-warning-container: 123, 65, 0;
101
+ --color-sf-on-warning: 99, 52, 0;
102
+ --color-sf-on-warning-container: 255, 220, 193;
103
+ --color-sf-spreadsheet-gridline: 231, 224, 236;
104
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
105
+ --color-sf-success-text: 0, 0, 0;
106
+ --color-sf-warning-text: 0, 0, 0;
107
+ --color-sf-info-text: 0, 0, 0;
108
+ --color-sf-danger-text: 0, 0, 0;
109
+ --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
110
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
111
+ }
112
+
113
+ /* stylelint-disable-line no-empty-source */
114
+ /* stylelint-disable property-no-vendor-prefix */
115
+ @keyframes material-spinner-rotate {
116
+ 0% {
117
+ transform: rotate(0deg);
118
+ }
119
+ 100% {
120
+ transform: rotate(360deg);
121
+ }
122
+ }
123
+ @keyframes fabric-spinner-rotate {
124
+ 0% {
125
+ transform: rotate(0deg);
126
+ }
127
+ 100% {
128
+ transform: rotate(360deg);
129
+ }
130
+ }
131
+ .e-dropdownbase .e-list-item .e-list-icon {
132
+ padding: 0 16px 0 0;
133
+ }
134
+
135
+ .e-small .e-dropdownbase .e-list-item .e-list-icon {
136
+ padding: 0 12px 0 0;
137
+ }
138
+
139
+ .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
140
+ padding: 0 16px 0 0;
141
+ }
142
+
143
+ /* stylelint-disable-line no-empty-source */
@@ -0,0 +1,2 @@
1
+ @import 'ej2-base/styles/material3-definition.scss';
2
+ @import 'ej2-dropdowns/styles/mention/material3.scss';
@@ -337,8 +337,8 @@
337
337
  margin-top: -4em;
338
338
  position: absolute;
339
339
  right: 0;
340
- top: 100%;
341
340
  width: 40px;
341
+ top: 100%;
342
342
  }
343
343
 
344
344
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -335,8 +335,8 @@
335
335
  margin-top: -4em;
336
336
  position: absolute;
337
337
  right: 0;
338
- top: 100%;
339
338
  width: 40px;
339
+ top: 100%;
340
340
  }
341
341
 
342
342
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -408,8 +408,8 @@
408
408
  margin-top: -2.9em;
409
409
  position: absolute;
410
410
  right: 0;
411
- top: 100%;
412
411
  width: auto;
412
+ top: 100%;
413
413
  }
414
414
 
415
415
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -378,8 +378,8 @@
378
378
  margin-top: -2em;
379
379
  position: absolute;
380
380
  right: 5px;
381
- top: 100%;
382
381
  width: 24px;
382
+ top: 100%;
383
383
  }
384
384
 
385
385
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -378,8 +378,8 @@
378
378
  margin-top: -2em;
379
379
  position: absolute;
380
380
  right: 5px;
381
- top: 100%;
382
381
  width: 24px;
382
+ top: 100%;
383
383
  }
384
384
 
385
385
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -330,8 +330,8 @@
330
330
  margin-top: -3em;
331
331
  position: absolute;
332
332
  right: 0;
333
- top: 100%;
334
333
  width: auto;
334
+ top: 100%;
335
335
  }
336
336
 
337
337
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -330,8 +330,8 @@
330
330
  margin-top: -3em;
331
331
  position: absolute;
332
332
  right: 0;
333
- top: 100%;
334
333
  width: auto;
334
+ top: 100%;
335
335
  }
336
336
 
337
337
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -400,8 +400,8 @@
400
400
  margin-top: -2.4em;
401
401
  position: absolute;
402
402
  right: 6px;
403
- top: 100%;
404
403
  width: 24px;
404
+ top: 100%;
405
405
  }
406
406
 
407
407
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -400,8 +400,8 @@
400
400
  margin-top: -2.4em;
401
401
  position: absolute;
402
402
  right: 6px;
403
- top: 100%;
404
403
  width: 24px;
404
+ top: 100%;
405
405
  }
406
406
 
407
407
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -431,8 +431,8 @@
431
431
  margin-top: -3.2em;
432
432
  position: absolute;
433
433
  right: 0;
434
- top: 100%;
435
434
  width: 30px;
435
+ top: 100%;
436
436
  }
437
437
 
438
438
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -433,8 +433,8 @@
433
433
  margin-top: -3em;
434
434
  position: absolute;
435
435
  right: 0;
436
- top: 100%;
437
436
  width: auto;
437
+ top: 100%;
438
438
  }
439
439
 
440
440
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -876,8 +876,8 @@
876
876
  margin-top: -2.5em;
877
877
  position: absolute;
878
878
  right: 5px;
879
- top: 100%;
880
879
  width: 24px;
880
+ top: 100%;
881
881
  }
882
882
 
883
883
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -884,8 +884,8 @@
884
884
  margin-top: -2.5em;
885
885
  position: absolute;
886
886
  right: 5px;
887
- top: 100%;
888
887
  width: 24px;
888
+ top: 100%;
889
889
  }
890
890
 
891
891
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,