@syncfusion/ej2-inputs 23.1.43 → 24.1.41

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 (156) hide show
  1. package/CHANGELOG.md +0 -31
  2. package/dist/ej2-inputs.min.js +2 -2
  3. package/dist/ej2-inputs.umd.min.js +2 -2
  4. package/dist/ej2-inputs.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-inputs.es2015.js +43 -5
  6. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  7. package/dist/es6/ej2-inputs.es5.js +43 -5
  8. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  9. package/dist/global/ej2-inputs.min.js +2 -2
  10. package/dist/global/ej2-inputs.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/color-picker/color-picker.d.ts +1 -0
  14. package/src/color-picker/color-picker.js +28 -0
  15. package/src/input/input.js +3 -5
  16. package/src/numerictextbox/numerictextbox.js +1 -0
  17. package/src/rating/rating.d.ts +1 -0
  18. package/src/rating/rating.js +11 -0
  19. package/styles/bootstrap-dark.css +263 -3
  20. package/styles/bootstrap-dark.scss +1 -0
  21. package/styles/bootstrap.css +263 -3
  22. package/styles/bootstrap.scss +1 -0
  23. package/styles/bootstrap4.css +263 -3
  24. package/styles/bootstrap4.scss +1 -0
  25. package/styles/bootstrap5-dark.css +276 -3
  26. package/styles/bootstrap5-dark.scss +1 -0
  27. package/styles/bootstrap5.css +276 -3
  28. package/styles/bootstrap5.scss +1 -0
  29. package/styles/color-picker/_layout.scss +36 -0
  30. package/styles/color-picker/bootstrap5-dark.css +13 -0
  31. package/styles/color-picker/bootstrap5.css +13 -0
  32. package/styles/color-picker/fabric.css +5 -0
  33. package/styles/color-picker/fluent-dark.css +13 -0
  34. package/styles/color-picker/fluent.css +13 -0
  35. package/styles/color-picker/material.css +13 -0
  36. package/styles/color-picker/material3-dark.css +18 -0
  37. package/styles/color-picker/material3.css +18 -0
  38. package/styles/color-picker/tailwind-dark.css +13 -0
  39. package/styles/color-picker/tailwind.css +13 -0
  40. package/styles/data-form/_all.scss +2 -0
  41. package/styles/data-form/_bootstrap-dark-definition.scss +42 -0
  42. package/styles/data-form/_bootstrap-definition.scss +41 -0
  43. package/styles/data-form/_bootstrap4-definition.scss +41 -0
  44. package/styles/data-form/_bootstrap5-dark-definition.scss +1 -0
  45. package/styles/data-form/_bootstrap5-definition.scss +41 -0
  46. package/styles/data-form/_fabric-dark-definition.scss +41 -0
  47. package/styles/data-form/_fabric-definition.scss +41 -0
  48. package/styles/data-form/_fluent-dark-definition.scss +1 -0
  49. package/styles/data-form/_fluent-definition.scss +41 -0
  50. package/styles/data-form/_fusionnew-definition.scss +41 -0
  51. package/styles/data-form/_highcontrast-definition.scss +41 -0
  52. package/styles/data-form/_highcontrast-light-definition.scss +41 -0
  53. package/styles/data-form/_layout.scss +223 -0
  54. package/styles/data-form/_material-dark-definition.scss +41 -0
  55. package/styles/data-form/_material-definition.scss +42 -0
  56. package/styles/data-form/_material3-dark-definition.scss +1 -0
  57. package/styles/data-form/_material3-definition.scss +41 -0
  58. package/styles/data-form/_tailwind-dark-definition.scss +1 -0
  59. package/styles/data-form/_tailwind-definition.scss +41 -0
  60. package/styles/data-form/_theme.scss +38 -0
  61. package/styles/data-form/bootstrap-dark.css +240 -0
  62. package/styles/data-form/bootstrap-dark.scss +3 -0
  63. package/styles/data-form/bootstrap.css +240 -0
  64. package/styles/data-form/bootstrap.scss +3 -0
  65. package/styles/data-form/bootstrap4.css +240 -0
  66. package/styles/data-form/bootstrap4.scss +3 -0
  67. package/styles/data-form/bootstrap5-dark.css +240 -0
  68. package/styles/data-form/bootstrap5-dark.scss +3 -0
  69. package/styles/data-form/bootstrap5.css +240 -0
  70. package/styles/data-form/bootstrap5.scss +3 -0
  71. package/styles/data-form/fabric-dark.css +240 -0
  72. package/styles/data-form/fabric-dark.scss +3 -0
  73. package/styles/data-form/fabric.css +240 -0
  74. package/styles/data-form/fabric.scss +3 -0
  75. package/styles/data-form/fluent-dark.css +240 -0
  76. package/styles/data-form/fluent-dark.scss +3 -0
  77. package/styles/data-form/fluent.css +240 -0
  78. package/styles/data-form/fluent.scss +3 -0
  79. package/styles/data-form/highcontrast-light.css +240 -0
  80. package/styles/data-form/highcontrast-light.scss +3 -0
  81. package/styles/data-form/highcontrast.css +240 -0
  82. package/styles/data-form/highcontrast.scss +3 -0
  83. package/styles/data-form/material-dark.css +240 -0
  84. package/styles/data-form/material-dark.scss +3 -0
  85. package/styles/data-form/material.css +240 -0
  86. package/styles/data-form/material.scss +3 -0
  87. package/styles/data-form/material3-dark.css +295 -0
  88. package/styles/data-form/material3-dark.scss +4 -0
  89. package/styles/data-form/material3.css +351 -0
  90. package/styles/data-form/material3.scss +4 -0
  91. package/styles/data-form/tailwind-dark.css +240 -0
  92. package/styles/data-form/tailwind-dark.scss +3 -0
  93. package/styles/data-form/tailwind.css +240 -0
  94. package/styles/data-form/tailwind.scss +3 -0
  95. package/styles/fabric-dark.css +263 -3
  96. package/styles/fabric-dark.scss +1 -0
  97. package/styles/fabric.css +268 -3
  98. package/styles/fabric.scss +1 -0
  99. package/styles/fluent-dark.css +276 -3
  100. package/styles/fluent-dark.scss +1 -0
  101. package/styles/fluent.css +276 -3
  102. package/styles/fluent.scss +1 -0
  103. package/styles/highcontrast-light.css +263 -3
  104. package/styles/highcontrast-light.scss +1 -0
  105. package/styles/highcontrast.css +263 -3
  106. package/styles/highcontrast.scss +1 -0
  107. package/styles/material-dark.css +275 -3
  108. package/styles/material-dark.scss +1 -0
  109. package/styles/material.css +288 -3
  110. package/styles/material.scss +1 -0
  111. package/styles/material3-dark.css +293 -3
  112. package/styles/material3-dark.scss +1 -0
  113. package/styles/material3.css +293 -3
  114. package/styles/material3.scss +1 -0
  115. package/styles/rating/_bootstrap-dark-definition.scss +4 -0
  116. package/styles/rating/_bootstrap-definition.scss +4 -0
  117. package/styles/rating/_bootstrap4-definition.scss +4 -0
  118. package/styles/rating/_bootstrap5-definition.scss +4 -0
  119. package/styles/rating/_fabric-dark-definition.scss +4 -0
  120. package/styles/rating/_fabric-definition.scss +4 -0
  121. package/styles/rating/_fluent-definition.scss +4 -0
  122. package/styles/rating/_fusionnew-definition.scss +4 -0
  123. package/styles/rating/_highcontrast-definition.scss +4 -0
  124. package/styles/rating/_highcontrast-light-definition.scss +4 -0
  125. package/styles/rating/_layout.scss +21 -7
  126. package/styles/rating/_material-dark-definition.scss +4 -0
  127. package/styles/rating/_material-definition.scss +4 -0
  128. package/styles/rating/_material3-definition.scss +4 -0
  129. package/styles/rating/_tailwind-definition.scss +4 -0
  130. package/styles/rating/_theme.scss +5 -2
  131. package/styles/rating/bootstrap-dark.css +22 -3
  132. package/styles/rating/bootstrap.css +22 -3
  133. package/styles/rating/bootstrap4.css +22 -3
  134. package/styles/rating/bootstrap5-dark.css +22 -3
  135. package/styles/rating/bootstrap5.css +22 -3
  136. package/styles/rating/fabric-dark.css +22 -3
  137. package/styles/rating/fabric.css +22 -3
  138. package/styles/rating/fluent-dark.css +22 -3
  139. package/styles/rating/fluent.css +22 -3
  140. package/styles/rating/highcontrast-light.css +22 -3
  141. package/styles/rating/highcontrast.css +22 -3
  142. package/styles/rating/material-dark.css +22 -3
  143. package/styles/rating/material.css +22 -3
  144. package/styles/rating/material3-dark.css +22 -3
  145. package/styles/rating/material3.css +22 -3
  146. package/styles/rating/tailwind-dark.css +22 -3
  147. package/styles/rating/tailwind.css +22 -3
  148. package/styles/slider/_layout.scss +4 -0
  149. package/styles/slider/material-dark.css +12 -0
  150. package/styles/slider/material.css +12 -0
  151. package/styles/slider/material3-dark.css +12 -0
  152. package/styles/slider/material3.css +12 -0
  153. package/styles/tailwind-dark.css +276 -3
  154. package/styles/tailwind-dark.scss +1 -0
  155. package/styles/tailwind.css +276 -3
  156. package/styles/tailwind.scss +1 -0
@@ -6788,7 +6788,8 @@ body.e-colorpicker-overflow {
6788
6788
  padding: 0;
6789
6789
  margin: 4px;
6790
6790
  }
6791
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
6791
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
6792
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
6792
6793
  outline: 1px solid;
6793
6794
  }
6794
6795
  .e-rating-container .e-rating-item-list:focus-visible {
@@ -6807,10 +6808,13 @@ body.e-colorpicker-overflow {
6807
6808
  min-height: calc(1em + 8px);
6808
6809
  position: relative;
6809
6810
  }
6811
+ .e-rating-container .e-rating-item-container:has(svg) {
6812
+ line-height: 9px;
6813
+ }
6810
6814
  .e-rating-container .e-rating-item-container .e-rating-item {
6811
6815
  display: block;
6812
6816
  }
6813
- .e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
6817
+ .e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
6814
6818
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
6815
6819
  transform: scale(1.4);
6816
6820
  pointer-events: none;
@@ -6900,6 +6904,10 @@ body.e-colorpicker-overflow {
6900
6904
  .e-small .e-rating-container .e-rating-item-container {
6901
6905
  font-size: 16px;
6902
6906
  }
6907
+ .e-small.e-rating-container .e-rating-item-container:has(svg),
6908
+ .e-small .e-rating-container .e-rating-item-container:has(svg) {
6909
+ line-height: 4px;
6910
+ }
6903
6911
  .e-small.e-rating-container .e-rating-label,
6904
6912
  .e-small .e-rating-container .e-rating-label {
6905
6913
  font-size: 10px;
@@ -6914,6 +6922,10 @@ body.e-colorpicker-overflow {
6914
6922
  .e-bigger .e-rating-container .e-rating-item-container {
6915
6923
  font-size: 32px;
6916
6924
  }
6925
+ .e-bigger.e-rating-container .e-rating-item-container:has(svg),
6926
+ .e-bigger .e-rating-container .e-rating-item-container:has(svg) {
6927
+ line-height: 16px;
6928
+ }
6917
6929
  .e-bigger.e-rating-container .e-rating-label,
6918
6930
  .e-bigger .e-rating-container .e-rating-label {
6919
6931
  font-size: 14px;
@@ -6930,6 +6942,12 @@ body.e-colorpicker-overflow {
6930
6942
  .e-small .e-bigger.e-rating-container .e-rating-item-container {
6931
6943
  font-size: 26px;
6932
6944
  }
6945
+ .e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
6946
+ .e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
6947
+ .e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
6948
+ .e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
6949
+ line-height: 9px;
6950
+ }
6933
6951
  .e-bigger.e-small.e-rating-container .e-rating-label,
6934
6952
  .e-bigger.e-small .e-rating-container .e-rating-label,
6935
6953
  .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -6944,7 +6962,8 @@ body.e-colorpicker-overflow {
6944
6962
  font-size: 24px;
6945
6963
  }
6946
6964
 
6947
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
6965
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
6966
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
6948
6967
  outline-color: #adadad;
6949
6968
  border-radius: 2px;
6950
6969
  }
@@ -7037,4 +7056,245 @@ body.e-colorpicker-overflow {
7037
7056
  /* stylelint-disable property-no-vendor-prefix */
7038
7057
  -webkit-background-clip: text;
7039
7058
  /* stylelint-enable property-no-vendor-prefix */
7059
+ }
7060
+
7061
+ /*! Form bootstrap theme wise override definitions and variables */
7062
+ /*! data-form layout */
7063
+ .e-data-form .e-form-label {
7064
+ font-size: 12px;
7065
+ margin-bottom: 4px;
7066
+ font-weight: 400;
7067
+ }
7068
+ .e-data-form .e-form-layout {
7069
+ display: -ms-grid;
7070
+ display: grid;
7071
+ }
7072
+ .e-data-form .e-grid-col-2 {
7073
+ -ms-grid-columns: (minmax(0, 1fr))[2];
7074
+ grid-template-columns: repeat(2, minmax(0, 1fr));
7075
+ }
7076
+ .e-data-form .e-grid-col-3 {
7077
+ -ms-grid-columns: (minmax(0, 1fr))[3];
7078
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7079
+ }
7080
+ .e-data-form .e-grid-col-4 {
7081
+ -ms-grid-columns: (minmax(0, 1fr))[4];
7082
+ grid-template-columns: repeat(4, minmax(0, 1fr));
7083
+ }
7084
+ .e-data-form .e-grid-col-5 {
7085
+ -ms-grid-columns: (minmax(0, 1fr))[5];
7086
+ grid-template-columns: repeat(5, minmax(0, 1fr));
7087
+ }
7088
+ .e-data-form .e-grid-col-6 {
7089
+ -ms-grid-columns: (minmax(0, 1fr))[6];
7090
+ grid-template-columns: repeat(6, minmax(0, 1fr));
7091
+ }
7092
+ .e-data-form .e-grid-col-7 {
7093
+ -ms-grid-columns: (minmax(0, 1fr))[7];
7094
+ grid-template-columns: repeat(7, minmax(0, 1fr));
7095
+ }
7096
+ .e-data-form .e-grid-col-8 {
7097
+ -ms-grid-columns: (minmax(0, 1fr))[8];
7098
+ grid-template-columns: repeat(8, minmax(0, 1fr));
7099
+ }
7100
+ .e-data-form .e-grid-col-9 {
7101
+ -ms-grid-columns: (minmax(0, 1fr))[9];
7102
+ grid-template-columns: repeat(9, minmax(0, 1fr));
7103
+ }
7104
+ .e-data-form .e-grid-col-10 {
7105
+ -ms-grid-columns: (minmax(0, 1fr))[10];
7106
+ grid-template-columns: repeat(10, minmax(0, 1fr));
7107
+ }
7108
+ .e-data-form .e-grid-col-11 {
7109
+ -ms-grid-columns: (minmax(0, 1fr))[11];
7110
+ grid-template-columns: repeat(11, minmax(0, 1fr));
7111
+ }
7112
+ .e-data-form .e-grid-col-12 {
7113
+ -ms-grid-columns: (minmax(0, 1fr))[12];
7114
+ grid-template-columns: repeat(12, minmax(0, 1fr));
7115
+ }
7116
+ .e-data-form .e-colspan-1 {
7117
+ -ms-grid-column-span: 1;
7118
+ -ms-grid-column: span 1;
7119
+ grid-column: span 1/span 1;
7120
+ }
7121
+ .e-data-form .e-colspan-2 {
7122
+ -ms-grid-column-span: 2;
7123
+ -ms-grid-column: span 2;
7124
+ grid-column: span 2/span 2;
7125
+ }
7126
+ .e-data-form .e-colspan-3 {
7127
+ -ms-grid-column-span: 3;
7128
+ -ms-grid-column: span 3;
7129
+ grid-column: span 3/span 3;
7130
+ }
7131
+ .e-data-form .e-colspan-4 {
7132
+ -ms-grid-column-span: 4;
7133
+ -ms-grid-column: span 4;
7134
+ grid-column: span 4/span 4;
7135
+ }
7136
+ .e-data-form .e-colspan-5 {
7137
+ -ms-grid-column-span: 5;
7138
+ -ms-grid-column: span 5;
7139
+ grid-column: span 5/span 5;
7140
+ }
7141
+ .e-data-form .e-colspan-6 {
7142
+ -ms-grid-column-span: 6;
7143
+ -ms-grid-column: span 6;
7144
+ grid-column: span 6/span 6;
7145
+ }
7146
+ .e-data-form .e-colspan-7 {
7147
+ -ms-grid-column-span: 7;
7148
+ -ms-grid-column: span 7;
7149
+ grid-column: span 7/span 7;
7150
+ }
7151
+ .e-data-form .e-colspan-8 {
7152
+ -ms-grid-column-span: 8;
7153
+ -ms-grid-column: span 8;
7154
+ grid-column: span 8/span 8;
7155
+ }
7156
+ .e-data-form .e-colspan-9 {
7157
+ -ms-grid-column-span: 9;
7158
+ -ms-grid-column: span 9;
7159
+ grid-column: span 9/span 9;
7160
+ }
7161
+ .e-data-form .e-colspan-10 {
7162
+ -ms-grid-column-span: 10;
7163
+ -ms-grid-column: span 10;
7164
+ grid-column: span 10/span 10;
7165
+ }
7166
+ .e-data-form .e-colspan-11 {
7167
+ -ms-grid-column-span: 11;
7168
+ -ms-grid-column: span 11;
7169
+ grid-column: span 11/span 11;
7170
+ }
7171
+ .e-data-form .e-colspan-12 {
7172
+ -ms-grid-column-span: 12;
7173
+ -ms-grid-column: span 12;
7174
+ grid-column: span 12/span 12;
7175
+ }
7176
+ .e-data-form .e-label-left .e-form-item-wrapper {
7177
+ -ms-flex: 1 1 auto;
7178
+ flex: 1 1 auto;
7179
+ max-width: calc(75% - 12px);
7180
+ }
7181
+ .e-data-form .e-label-left .e-form-label {
7182
+ margin-right: 12px;
7183
+ width: 25%;
7184
+ text-align: end;
7185
+ -ms-flex-direction: column;
7186
+ flex-direction: column;
7187
+ -ms-flex-align: end;
7188
+ align-items: flex-end;
7189
+ -ms-flex-pack: start;
7190
+ justify-content: flex-start;
7191
+ }
7192
+ .e-data-form .e-label-left .validation-message {
7193
+ display: -ms-flexbox;
7194
+ display: flex;
7195
+ }
7196
+ .e-data-form .e-form-group {
7197
+ border: none;
7198
+ padding: 0;
7199
+ margin: 0;
7200
+ }
7201
+ .e-data-form .e-form-group .e-group-title {
7202
+ position: relative;
7203
+ display: inline-block;
7204
+ padding-bottom: 8px;
7205
+ /* Gap between text and border */
7206
+ margin-bottom: 4px;
7207
+ font-size: 16px;
7208
+ }
7209
+ .e-data-form .e-form-group .e-group-title::after {
7210
+ content: "";
7211
+ position: absolute;
7212
+ bottom: 0;
7213
+ left: 0;
7214
+ width: 100%;
7215
+ height: 1px;
7216
+ border-bottom: 1px solid #000;
7217
+ }
7218
+ .e-data-form .e-label-top {
7219
+ display: -ms-flexbox;
7220
+ display: flex;
7221
+ -ms-flex-direction: column;
7222
+ flex-direction: column;
7223
+ margin-top: 20px;
7224
+ }
7225
+ .e-data-form .e-label-top .e-label-right {
7226
+ display: -ms-flexbox;
7227
+ display: flex;
7228
+ -ms-flex-align: center;
7229
+ align-items: center;
7230
+ }
7231
+ .e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
7232
+ margin-top: 3px;
7233
+ margin-left: 5px;
7234
+ }
7235
+ .e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
7236
+ margin-top: 5px;
7237
+ }
7238
+ .e-data-form .e-label-left {
7239
+ display: -ms-flexbox;
7240
+ display: flex;
7241
+ text-align: center;
7242
+ margin-top: 20px;
7243
+ }
7244
+ .e-data-form .e-button-left {
7245
+ -ms-flex-pack: start;
7246
+ justify-content: flex-start;
7247
+ }
7248
+ .e-data-form .e-button-right {
7249
+ -ms-flex-pack: end;
7250
+ justify-content: flex-end;
7251
+ }
7252
+ .e-data-form .e-button-center {
7253
+ -ms-flex-pack: center;
7254
+ justify-content: center;
7255
+ }
7256
+ .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
7257
+ margin-top: 24px;
7258
+ display: -ms-flexbox;
7259
+ display: flex;
7260
+ gap: 10px;
7261
+ }
7262
+ .e-data-form .e-button-left .e-btn, .e-data-form .e-button-right .e-btn, .e-data-form .e-button-center .e-btn, .e-data-form .e-button-stretch .e-btn {
7263
+ border-radius: 20px;
7264
+ padding: 7px 16px;
7265
+ }
7266
+ .e-data-form .e-button-stretch .e-btn {
7267
+ width: 100%;
7268
+ }
7269
+ .e-data-form > :first-child.e-form-layout {
7270
+ margin-top: 0;
7271
+ }
7272
+ .e-data-form .e-form-group-layout {
7273
+ display: -ms-grid;
7274
+ display: grid;
7275
+ }
7276
+
7277
+ /*! data-form theme */
7278
+ .e-data-form .e-form-label {
7279
+ color: var(--content-text-color-alt-1, #343a40);
7280
+ }
7281
+ .e-data-form .e-group-title {
7282
+ color: var(--fg-content-text-color-alt-2, #6b7280);
7283
+ }
7284
+ .e-data-form .validation-message {
7285
+ color: #a94442;
7286
+ font-size: 12px;
7287
+ font-style: italic;
7288
+ }
7289
+
7290
+ .e-tooltip-wrap.e-popup.e-error-tooltip {
7291
+ background-color: #f2dede;
7292
+ border: #f2dede;
7293
+ }
7294
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
7295
+ color: #a94442;
7296
+ }
7297
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-outer.e-tip-top, .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
7298
+ border-bottom-color: #f2dede;
7299
+ color: #f2dede;
7040
7300
  }
@@ -7,3 +7,4 @@
7
7
  @import 'uploader/bootstrap.scss';
8
8
  @import 'color-picker/bootstrap.scss';
9
9
  @import 'rating/bootstrap.scss';
10
+ @import 'data-form/bootstrap.scss';
@@ -6942,7 +6942,8 @@ body.e-colorpicker-overflow {
6942
6942
  padding: 0;
6943
6943
  margin: 4px;
6944
6944
  }
6945
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
6945
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
6946
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
6946
6947
  outline: 1px solid;
6947
6948
  }
6948
6949
  .e-rating-container .e-rating-item-list:focus-visible {
@@ -6961,10 +6962,13 @@ body.e-colorpicker-overflow {
6961
6962
  min-height: calc(1em + 8px);
6962
6963
  position: relative;
6963
6964
  }
6965
+ .e-rating-container .e-rating-item-container:has(svg) {
6966
+ line-height: 11px;
6967
+ }
6964
6968
  .e-rating-container .e-rating-item-container .e-rating-item {
6965
6969
  display: block;
6966
6970
  }
6967
- .e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
6971
+ .e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
6968
6972
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
6969
6973
  transform: scale(1.4);
6970
6974
  pointer-events: none;
@@ -7054,6 +7058,10 @@ body.e-colorpicker-overflow {
7054
7058
  .e-small .e-rating-container .e-rating-item-container {
7055
7059
  font-size: 16px;
7056
7060
  }
7061
+ .e-small.e-rating-container .e-rating-item-container:has(svg),
7062
+ .e-small .e-rating-container .e-rating-item-container:has(svg) {
7063
+ line-height: 4px;
7064
+ }
7057
7065
  .e-small.e-rating-container .e-rating-label,
7058
7066
  .e-small .e-rating-container .e-rating-label {
7059
7067
  font-size: 10px;
@@ -7068,6 +7076,10 @@ body.e-colorpicker-overflow {
7068
7076
  .e-bigger .e-rating-container .e-rating-item-container {
7069
7077
  font-size: 32px;
7070
7078
  }
7079
+ .e-bigger.e-rating-container .e-rating-item-container:has(svg),
7080
+ .e-bigger .e-rating-container .e-rating-item-container:has(svg) {
7081
+ line-height: 13px;
7082
+ }
7071
7083
  .e-bigger.e-rating-container .e-rating-label,
7072
7084
  .e-bigger .e-rating-container .e-rating-label {
7073
7085
  font-size: 14px;
@@ -7084,6 +7096,12 @@ body.e-colorpicker-overflow {
7084
7096
  .e-small .e-bigger.e-rating-container .e-rating-item-container {
7085
7097
  font-size: 24px;
7086
7098
  }
7099
+ .e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
7100
+ .e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
7101
+ .e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
7102
+ .e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
7103
+ line-height: 9px;
7104
+ }
7087
7105
  .e-bigger.e-small.e-rating-container .e-rating-label,
7088
7106
  .e-bigger.e-small .e-rating-container .e-rating-label,
7089
7107
  .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -7098,7 +7116,8 @@ body.e-colorpicker-overflow {
7098
7116
  font-size: 20px;
7099
7117
  }
7100
7118
 
7101
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
7119
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
7120
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
7102
7121
  outline-color: #007bff;
7103
7122
  border-radius: 4px;
7104
7123
  }
@@ -7191,4 +7210,245 @@ body.e-colorpicker-overflow {
7191
7210
  /* stylelint-disable property-no-vendor-prefix */
7192
7211
  -webkit-background-clip: text;
7193
7212
  /* stylelint-enable property-no-vendor-prefix */
7213
+ }
7214
+
7215
+ /*! Form bootstrap theme wise override definitions and variables */
7216
+ /*! data-form layout */
7217
+ .e-data-form .e-form-label {
7218
+ font-size: 12px;
7219
+ margin-bottom: 4px;
7220
+ font-weight: 400;
7221
+ }
7222
+ .e-data-form .e-form-layout {
7223
+ display: -ms-grid;
7224
+ display: grid;
7225
+ }
7226
+ .e-data-form .e-grid-col-2 {
7227
+ -ms-grid-columns: (minmax(0, 1fr))[2];
7228
+ grid-template-columns: repeat(2, minmax(0, 1fr));
7229
+ }
7230
+ .e-data-form .e-grid-col-3 {
7231
+ -ms-grid-columns: (minmax(0, 1fr))[3];
7232
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7233
+ }
7234
+ .e-data-form .e-grid-col-4 {
7235
+ -ms-grid-columns: (minmax(0, 1fr))[4];
7236
+ grid-template-columns: repeat(4, minmax(0, 1fr));
7237
+ }
7238
+ .e-data-form .e-grid-col-5 {
7239
+ -ms-grid-columns: (minmax(0, 1fr))[5];
7240
+ grid-template-columns: repeat(5, minmax(0, 1fr));
7241
+ }
7242
+ .e-data-form .e-grid-col-6 {
7243
+ -ms-grid-columns: (minmax(0, 1fr))[6];
7244
+ grid-template-columns: repeat(6, minmax(0, 1fr));
7245
+ }
7246
+ .e-data-form .e-grid-col-7 {
7247
+ -ms-grid-columns: (minmax(0, 1fr))[7];
7248
+ grid-template-columns: repeat(7, minmax(0, 1fr));
7249
+ }
7250
+ .e-data-form .e-grid-col-8 {
7251
+ -ms-grid-columns: (minmax(0, 1fr))[8];
7252
+ grid-template-columns: repeat(8, minmax(0, 1fr));
7253
+ }
7254
+ .e-data-form .e-grid-col-9 {
7255
+ -ms-grid-columns: (minmax(0, 1fr))[9];
7256
+ grid-template-columns: repeat(9, minmax(0, 1fr));
7257
+ }
7258
+ .e-data-form .e-grid-col-10 {
7259
+ -ms-grid-columns: (minmax(0, 1fr))[10];
7260
+ grid-template-columns: repeat(10, minmax(0, 1fr));
7261
+ }
7262
+ .e-data-form .e-grid-col-11 {
7263
+ -ms-grid-columns: (minmax(0, 1fr))[11];
7264
+ grid-template-columns: repeat(11, minmax(0, 1fr));
7265
+ }
7266
+ .e-data-form .e-grid-col-12 {
7267
+ -ms-grid-columns: (minmax(0, 1fr))[12];
7268
+ grid-template-columns: repeat(12, minmax(0, 1fr));
7269
+ }
7270
+ .e-data-form .e-colspan-1 {
7271
+ -ms-grid-column-span: 1;
7272
+ -ms-grid-column: span 1;
7273
+ grid-column: span 1/span 1;
7274
+ }
7275
+ .e-data-form .e-colspan-2 {
7276
+ -ms-grid-column-span: 2;
7277
+ -ms-grid-column: span 2;
7278
+ grid-column: span 2/span 2;
7279
+ }
7280
+ .e-data-form .e-colspan-3 {
7281
+ -ms-grid-column-span: 3;
7282
+ -ms-grid-column: span 3;
7283
+ grid-column: span 3/span 3;
7284
+ }
7285
+ .e-data-form .e-colspan-4 {
7286
+ -ms-grid-column-span: 4;
7287
+ -ms-grid-column: span 4;
7288
+ grid-column: span 4/span 4;
7289
+ }
7290
+ .e-data-form .e-colspan-5 {
7291
+ -ms-grid-column-span: 5;
7292
+ -ms-grid-column: span 5;
7293
+ grid-column: span 5/span 5;
7294
+ }
7295
+ .e-data-form .e-colspan-6 {
7296
+ -ms-grid-column-span: 6;
7297
+ -ms-grid-column: span 6;
7298
+ grid-column: span 6/span 6;
7299
+ }
7300
+ .e-data-form .e-colspan-7 {
7301
+ -ms-grid-column-span: 7;
7302
+ -ms-grid-column: span 7;
7303
+ grid-column: span 7/span 7;
7304
+ }
7305
+ .e-data-form .e-colspan-8 {
7306
+ -ms-grid-column-span: 8;
7307
+ -ms-grid-column: span 8;
7308
+ grid-column: span 8/span 8;
7309
+ }
7310
+ .e-data-form .e-colspan-9 {
7311
+ -ms-grid-column-span: 9;
7312
+ -ms-grid-column: span 9;
7313
+ grid-column: span 9/span 9;
7314
+ }
7315
+ .e-data-form .e-colspan-10 {
7316
+ -ms-grid-column-span: 10;
7317
+ -ms-grid-column: span 10;
7318
+ grid-column: span 10/span 10;
7319
+ }
7320
+ .e-data-form .e-colspan-11 {
7321
+ -ms-grid-column-span: 11;
7322
+ -ms-grid-column: span 11;
7323
+ grid-column: span 11/span 11;
7324
+ }
7325
+ .e-data-form .e-colspan-12 {
7326
+ -ms-grid-column-span: 12;
7327
+ -ms-grid-column: span 12;
7328
+ grid-column: span 12/span 12;
7329
+ }
7330
+ .e-data-form .e-label-left .e-form-item-wrapper {
7331
+ -ms-flex: 1 1 auto;
7332
+ flex: 1 1 auto;
7333
+ max-width: calc(75% - 12px);
7334
+ }
7335
+ .e-data-form .e-label-left .e-form-label {
7336
+ margin-right: 12px;
7337
+ width: 25%;
7338
+ text-align: end;
7339
+ -ms-flex-direction: column;
7340
+ flex-direction: column;
7341
+ -ms-flex-align: end;
7342
+ align-items: flex-end;
7343
+ -ms-flex-pack: start;
7344
+ justify-content: flex-start;
7345
+ }
7346
+ .e-data-form .e-label-left .validation-message {
7347
+ display: -ms-flexbox;
7348
+ display: flex;
7349
+ }
7350
+ .e-data-form .e-form-group {
7351
+ border: none;
7352
+ padding: 0;
7353
+ margin: 0;
7354
+ }
7355
+ .e-data-form .e-form-group .e-group-title {
7356
+ position: relative;
7357
+ display: inline-block;
7358
+ padding-bottom: 8px;
7359
+ /* Gap between text and border */
7360
+ margin-bottom: 4px;
7361
+ font-size: 16px;
7362
+ }
7363
+ .e-data-form .e-form-group .e-group-title::after {
7364
+ content: "";
7365
+ position: absolute;
7366
+ bottom: 0;
7367
+ left: 0;
7368
+ width: 100%;
7369
+ height: 1px;
7370
+ border-bottom: 1px solid #dee2e6;
7371
+ }
7372
+ .e-data-form .e-label-top {
7373
+ display: -ms-flexbox;
7374
+ display: flex;
7375
+ -ms-flex-direction: column;
7376
+ flex-direction: column;
7377
+ margin-top: 20px;
7378
+ }
7379
+ .e-data-form .e-label-top .e-label-right {
7380
+ display: -ms-flexbox;
7381
+ display: flex;
7382
+ -ms-flex-align: center;
7383
+ align-items: center;
7384
+ }
7385
+ .e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
7386
+ margin-top: 3px;
7387
+ margin-left: 5px;
7388
+ }
7389
+ .e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
7390
+ margin-top: 6px;
7391
+ }
7392
+ .e-data-form .e-label-left {
7393
+ display: -ms-flexbox;
7394
+ display: flex;
7395
+ text-align: center;
7396
+ margin-top: 20px;
7397
+ }
7398
+ .e-data-form .e-button-left {
7399
+ -ms-flex-pack: start;
7400
+ justify-content: flex-start;
7401
+ }
7402
+ .e-data-form .e-button-right {
7403
+ -ms-flex-pack: end;
7404
+ justify-content: flex-end;
7405
+ }
7406
+ .e-data-form .e-button-center {
7407
+ -ms-flex-pack: center;
7408
+ justify-content: center;
7409
+ }
7410
+ .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
7411
+ margin-top: 24px;
7412
+ display: -ms-flexbox;
7413
+ display: flex;
7414
+ gap: 10px;
7415
+ }
7416
+ .e-data-form .e-button-left .e-btn, .e-data-form .e-button-right .e-btn, .e-data-form .e-button-center .e-btn, .e-data-form .e-button-stretch .e-btn {
7417
+ border-radius: 20px;
7418
+ padding: 7px 16px;
7419
+ }
7420
+ .e-data-form .e-button-stretch .e-btn {
7421
+ width: 100%;
7422
+ }
7423
+ .e-data-form > :first-child.e-form-layout {
7424
+ margin-top: 0;
7425
+ }
7426
+ .e-data-form .e-form-group-layout {
7427
+ display: -ms-grid;
7428
+ display: grid;
7429
+ }
7430
+
7431
+ /*! data-form theme */
7432
+ .e-data-form .e-form-label {
7433
+ color: var(--content-text-color-alt-1, #343a40);
7434
+ }
7435
+ .e-data-form .e-group-title {
7436
+ color: var(--fg-content-text-color-alt-2, #6b7280);
7437
+ }
7438
+ .e-data-form .validation-message {
7439
+ color: #bd2130;
7440
+ font-size: 12px;
7441
+ font-style: italic;
7442
+ }
7443
+
7444
+ .e-tooltip-wrap.e-popup.e-error-tooltip {
7445
+ background-color: #fae3e5;
7446
+ border: #fae3e5;
7447
+ }
7448
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
7449
+ color: #bd2130;
7450
+ }
7451
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-outer.e-tip-top, .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
7452
+ border-bottom-color: #fae3e5;
7453
+ color: #fae3e5;
7194
7454
  }
@@ -7,3 +7,4 @@
7
7
  @import 'uploader/bootstrap4.scss';
8
8
  @import 'color-picker/bootstrap4.scss';
9
9
  @import 'rating/bootstrap4.scss';
10
+ @import 'data-form/bootstrap4.scss';