@syncfusion/ej2-splitbuttons 20.1.47 → 20.2.36

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 (109) hide show
  1. package/dist/ej2-splitbuttons.umd.min.js +2 -2
  2. package/dist/ej2-splitbuttons.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-splitbuttons.es2015.js +11 -3
  4. package/dist/es6/ej2-splitbuttons.es2015.js.map +1 -1
  5. package/dist/es6/ej2-splitbuttons.es5.js +11 -3
  6. package/dist/es6/ej2-splitbuttons.es5.js.map +1 -1
  7. package/dist/global/ej2-splitbuttons.min.js +2 -2
  8. package/dist/global/ej2-splitbuttons.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/dist/ts/button-group/button-group.ts +84 -0
  11. package/dist/ts/common/common.ts +203 -0
  12. package/dist/ts/drop-down-button/drop-down-button.ts +806 -0
  13. package/dist/ts/progress-button/progress-button.ts +689 -0
  14. package/dist/ts/split-button/split-button.ts +501 -0
  15. package/helpers/e2e/dropdownbuttonHelper.js +55 -38
  16. package/helpers/e2e/index.js +10 -8
  17. package/helpers/e2e/progressbuttonHelper.js +52 -35
  18. package/helpers/e2e/splitbuttonHelper.js +58 -41
  19. package/package.json +7 -7
  20. package/src/drop-down-button/drop-down-button.js +11 -3
  21. package/styles/bootstrap-dark.css +4 -338
  22. package/styles/bootstrap.css +4 -333
  23. package/styles/bootstrap4.css +12 -342
  24. package/styles/bootstrap5-dark.css +20 -331
  25. package/styles/bootstrap5.css +18 -329
  26. package/styles/button-group/_fusionnew-definition.scss +31 -0
  27. package/styles/button-group/_layout.scss +1 -1
  28. package/styles/button-group/_material3-definition.scss +31 -0
  29. package/styles/button-group/_theme.scss +48 -12
  30. package/styles/button-group/bootstrap-dark.css +1 -114
  31. package/styles/button-group/bootstrap.css +1 -108
  32. package/styles/button-group/bootstrap4.css +5 -119
  33. package/styles/button-group/bootstrap5-dark.css +15 -108
  34. package/styles/button-group/bootstrap5.css +13 -106
  35. package/styles/button-group/fabric-dark.css +1 -114
  36. package/styles/button-group/fabric.css +1 -114
  37. package/styles/button-group/fluent-dark.css +1 -114
  38. package/styles/button-group/fluent.css +1 -114
  39. package/styles/button-group/highcontrast-light.css +1 -114
  40. package/styles/button-group/highcontrast.css +1 -126
  41. package/styles/button-group/material-dark.css +1 -114
  42. package/styles/button-group/material.css +1 -115
  43. package/styles/button-group/tailwind-dark.css +9 -114
  44. package/styles/button-group/tailwind.css +9 -114
  45. package/styles/drop-down-button/_fusionnew-definition.scss +51 -0
  46. package/styles/drop-down-button/_layout.scss +4 -2
  47. package/styles/drop-down-button/_material3-definition.scss +51 -0
  48. package/styles/drop-down-button/bootstrap-dark.css +2 -36
  49. package/styles/drop-down-button/bootstrap.css +2 -36
  50. package/styles/drop-down-button/bootstrap4.css +3 -36
  51. package/styles/drop-down-button/bootstrap5-dark.css +4 -35
  52. package/styles/drop-down-button/bootstrap5.css +4 -35
  53. package/styles/drop-down-button/fabric-dark.css +2 -36
  54. package/styles/drop-down-button/fabric.css +2 -36
  55. package/styles/drop-down-button/fluent-dark.css +2 -36
  56. package/styles/drop-down-button/fluent.css +2 -36
  57. package/styles/drop-down-button/highcontrast-light.css +2 -36
  58. package/styles/drop-down-button/highcontrast.css +2 -36
  59. package/styles/drop-down-button/icons/_fusionnew.scss +10 -0
  60. package/styles/drop-down-button/icons/_material3.scss +10 -0
  61. package/styles/drop-down-button/material-dark.css +2 -36
  62. package/styles/drop-down-button/material.css +2 -36
  63. package/styles/drop-down-button/tailwind-dark.css +4 -36
  64. package/styles/drop-down-button/tailwind.css +4 -36
  65. package/styles/fabric-dark.css +4 -338
  66. package/styles/fabric.css +4 -338
  67. package/styles/fluent-dark.css +5 -339
  68. package/styles/fluent.css +5 -339
  69. package/styles/highcontrast-light.css +4 -338
  70. package/styles/highcontrast.css +4 -350
  71. package/styles/material-dark.css +4 -338
  72. package/styles/material.css +4 -339
  73. package/styles/progress-button/_fluent-definition.scss +1 -1
  74. package/styles/progress-button/_fusionnew-definition.scss +21 -0
  75. package/styles/progress-button/_material3-definition.scss +21 -0
  76. package/styles/progress-button/bootstrap-dark.css +3 -120
  77. package/styles/progress-button/bootstrap.css +3 -120
  78. package/styles/progress-button/bootstrap4.css +3 -120
  79. package/styles/progress-button/bootstrap5-dark.css +3 -124
  80. package/styles/progress-button/bootstrap5.css +3 -124
  81. package/styles/progress-button/fabric-dark.css +3 -120
  82. package/styles/progress-button/fabric.css +3 -120
  83. package/styles/progress-button/fluent-dark.css +4 -125
  84. package/styles/progress-button/fluent.css +4 -125
  85. package/styles/progress-button/highcontrast-light.css +3 -120
  86. package/styles/progress-button/highcontrast.css +3 -120
  87. package/styles/progress-button/material-dark.css +3 -120
  88. package/styles/progress-button/material.css +3 -120
  89. package/styles/progress-button/tailwind-dark.css +3 -124
  90. package/styles/progress-button/tailwind.css +3 -124
  91. package/styles/split-button/_fusionnew-definition.scss +25 -0
  92. package/styles/split-button/_material3-definition.scss +25 -0
  93. package/styles/split-button/bootstrap-dark.css +1 -71
  94. package/styles/split-button/bootstrap.css +1 -71
  95. package/styles/split-button/bootstrap4.css +4 -70
  96. package/styles/split-button/bootstrap5-dark.css +1 -67
  97. package/styles/split-button/bootstrap5.css +1 -67
  98. package/styles/split-button/fabric-dark.css +1 -71
  99. package/styles/split-button/fabric.css +1 -71
  100. package/styles/split-button/fluent-dark.css +1 -67
  101. package/styles/split-button/fluent.css +1 -67
  102. package/styles/split-button/highcontrast-light.css +1 -71
  103. package/styles/split-button/highcontrast.css +1 -71
  104. package/styles/split-button/material-dark.css +1 -71
  105. package/styles/split-button/material.css +1 -71
  106. package/styles/split-button/tailwind-dark.css +1 -71
  107. package/styles/split-button/tailwind.css +1 -71
  108. package/styles/tailwind-dark.css +14 -343
  109. package/styles/tailwind.css +14 -343
package/styles/button-group/_fusionnew-definition.scss ADDED
@@ -0,0 +1,31 @@
1
+ //layout variables
2
+ $btn-grp-margin: -1px !default;
3
+ $btn-grp-margin-left: -1px !default;
4
+ $btn-grp-wrapper-border: 4px !default;
5
+ $btn-grp-round-radius: 20px !default;
6
+ $btn-grp-icon-font-size: 16px !default;
7
+ $btn-grp-icon-font-size-bigger: 20px !default;
8
+
9
+ //Normal Outline GroupButton
10
+ $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
+ $btn-grp-outline-focus-color: inherit !default;
12
+
13
+ //Outline Primary
14
+ $btn-grp-outline-primary-focus-border-color: $primary !default;
15
+ $btn-grp-outline-focus-primary-color: inherit !default;
16
+
17
+ //Outline Success
18
+ $btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
19
+ $btn-grp-outline-focus-success-color: inherit !default;
20
+
21
+ //Outline Info
22
+ $btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
23
+ $btn-grp-outline-focus-info-color: inherit !default;
24
+
25
+ //Outline warning
26
+ $btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
27
+ $btn-grp-outline-focus-warning-color: inherit !default;
28
+
29
+ //Outline danger
30
+ $btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
31
+ $btn-grp-outline-focus-danger-color: inherit !default;
package/styles/button-group/_layout.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  input:focus+label.e-btn,
13
13
  .e-btn:focus,
14
14
  .e-btn:hover {
15
- @if $skin-name != 'tailwind' and $skin-name != 'tailwind-dark' {
15
+ @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
16
16
  z-index: 2;
17
17
  }
18
18
  }
package/styles/button-group/_material3-definition.scss ADDED
@@ -0,0 +1,31 @@
1
+ //layout variables
2
+ $btn-grp-margin: -1px !default;
3
+ $btn-grp-margin-left: -1px !default;
4
+ $btn-grp-wrapper-border: 4px !default;
5
+ $btn-grp-round-radius: 20px !default;
6
+ $btn-grp-icon-font-size: 16px !default;
7
+ $btn-grp-icon-font-size-bigger: 20px !default;
8
+
9
+ //Normal Outline GroupButton
10
+ $btn-grp-outline-focus-border-color: $secondary-border-color !default;
11
+ $btn-grp-outline-focus-color: inherit !default;
12
+
13
+ //Outline Primary
14
+ $btn-grp-outline-primary-focus-border-color: $primary !default;
15
+ $btn-grp-outline-focus-primary-color: inherit !default;
16
+
17
+ //Outline Success
18
+ $btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
19
+ $btn-grp-outline-focus-success-color: inherit !default;
20
+
21
+ //Outline Info
22
+ $btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
23
+ $btn-grp-outline-focus-info-color: inherit !default;
24
+
25
+ //Outline warning
26
+ $btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
27
+ $btn-grp-outline-focus-warning-color: inherit !default;
28
+
29
+ //Outline danger
30
+ $btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
31
+ $btn-grp-outline-focus-danger-color: inherit !default;
package/styles/button-group/_theme.scss CHANGED
@@ -22,9 +22,12 @@
22
22
  .e-btn:focus,
23
23
  input:focus+label.e-btn {
24
24
  @include button-focus;
25
- @if $skin-name != 'bootstrap5' {
25
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
26
26
  box-shadow: none;
27
27
  }
28
+ @if $skin-name == 'bootstrap5' {
29
+ border-color: $btn-focus-bgcolor;
30
+ }
28
31
  outline-color: $btn-grp-outline-focus-color;
29
32
  @if $skin-name == 'fabric' {
30
33
  outline-offset: -2px;
@@ -36,9 +39,12 @@
36
39
 
37
40
  &.e-primary {
38
41
  @include primary-focus;
39
- @if $skin-name != 'bootstrap5' {
42
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
40
43
  box-shadow: none;
41
44
  }
45
+ @if $skin-name == 'bootstrap5' {
46
+ border-color: $btn-primary-focus-bgcolor;
47
+ }
42
48
  outline-color: $btn-grp-outline-focus-primary-color;
43
49
  @if $skin-name == 'fabric' {
44
50
  border-color: transparent;
@@ -47,9 +53,12 @@
47
53
 
48
54
  &.e-success {
49
55
  @include success-focus;
50
- @if $skin-name != 'bootstrap5' {
56
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
51
57
  box-shadow: none;
52
58
  }
59
+ @if $skin-name == 'bootstrap5' {
60
+ border-color: $btn-success-focus-bgcolor;
61
+ }
53
62
  outline-color: $btn-grp-outline-focus-success-color;
54
63
  @if $skin-name == 'fabric' {
55
64
  border-color: transparent;
@@ -58,9 +67,12 @@
58
67
 
59
68
  &.e-info {
60
69
  @include info-focus;
61
- @if $skin-name != 'bootstrap5' {
70
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
62
71
  box-shadow: none;
63
72
  }
73
+ @if $skin-name == 'bootstrap5' {
74
+ border-color: $btn-info-focus-bgcolor;
75
+ }
64
76
  outline-color: $btn-grp-outline-focus-info-color;
65
77
  @if $skin-name == 'fabric' {
66
78
  border-color: transparent;
@@ -69,9 +81,12 @@
69
81
 
70
82
  &.e-warning {
71
83
  @include warning-focus;
72
- @if $skin-name != 'bootstrap5' {
84
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
73
85
  box-shadow: none;
74
86
  }
87
+ @if $skin-name == 'bootstrap5' {
88
+ border-color: $btn-warning-focus-bgcolor;
89
+ }
75
90
  outline-color: $btn-grp-outline-focus-warning-color;
76
91
  @if $skin-name == 'fabric' {
77
92
  border-color: transparent;
@@ -80,9 +95,12 @@
80
95
 
81
96
  &.e-danger {
82
97
  @include danger-focus;
83
- @if $skin-name != 'bootstrap5' {
98
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
84
99
  box-shadow: none;
85
100
  }
101
+ @if $skin-name == 'bootstrap5' {
102
+ border-color: $btn-danger-focus-bgcolor;
103
+ }
86
104
  outline-color: $btn-grp-outline-focus-danger-color;
87
105
  @if $skin-name == 'fabric' {
88
106
  border-color: transparent;
@@ -99,43 +117,61 @@
99
117
 
100
118
  &.e-outline {
101
119
  @include outline-focus;
102
- @if $skin-name != 'bootstrap5' {
120
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
103
121
  box-shadow: none;
104
122
  }
123
+ @if $skin-name == 'bootstrap5' {
124
+ border-color: $btn-outline-focus-bgcolor;
125
+ }
105
126
 
106
127
  &.e-primary {
107
128
  @include outline-primary-focus;
108
- @if $skin-name != 'bootstrap5' {
129
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
109
130
  box-shadow: none;
110
131
  }
132
+ @if $skin-name == 'bootstrap5' {
133
+ border-color: $btn-outline-primary-focus-bgcolor;
134
+ }
111
135
  }
112
136
 
113
137
  &.e-success {
114
138
  @include outline-success-focus;
115
- @if $skin-name != 'bootstrap5' {
139
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
116
140
  box-shadow: none;
117
141
  }
142
+ @if $skin-name == 'bootstrap5' {
143
+ border-color: $btn-success-focus-bgcolor;
144
+ }
118
145
  }
119
146
 
120
147
  &.e-info {
121
148
  @include outline-info-focus;
122
- @if $skin-name != 'bootstrap5' {
149
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
123
150
  box-shadow: none;
124
151
  }
152
+ @if $skin-name == 'bootstrap5' {
153
+ border-color: $btn-info-hover-bgcolor;
154
+ }
125
155
  }
126
156
 
127
157
  &.e-warning {
128
158
  @include outline-warning-focus;
129
- @if $skin-name != 'bootstrap5' {
159
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
130
160
  box-shadow: none;
131
161
  }
162
+ @if $skin-name == 'bootstrap5' {
163
+ border-color: $btn-warning-hover-bgcolor;
164
+ }
132
165
  }
133
166
 
134
167
  &.e-danger {
135
168
  @include outline-danger-focus;
136
- @if $skin-name != 'bootstrap5' {
169
+ @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
137
170
  box-shadow: none;
138
171
  }
172
+ @if $skin-name == 'bootstrap5' {
173
+ border-color: $btn-danger-hover-bgcolor;
174
+ }
139
175
  }
140
176
  }
141
177
  }