@syncfusion/ej2-inputs 23.2.4 → 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 -33
  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
@@ -7054,7 +7054,8 @@ body.e-colorpicker-overflow {
7054
7054
  padding: 0;
7055
7055
  margin: 4px;
7056
7056
  }
7057
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
7057
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
7058
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
7058
7059
  outline: 1px solid;
7059
7060
  }
7060
7061
  .e-rating-container .e-rating-item-list:focus-visible {
@@ -7073,10 +7074,13 @@ body.e-colorpicker-overflow {
7073
7074
  min-height: calc(1em + 8px);
7074
7075
  position: relative;
7075
7076
  }
7077
+ .e-rating-container .e-rating-item-container:has(svg) {
7078
+ line-height: 13px;
7079
+ }
7076
7080
  .e-rating-container .e-rating-item-container .e-rating-item {
7077
7081
  display: block;
7078
7082
  }
7079
- .e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
7083
+ .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 {
7080
7084
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
7081
7085
  transform: scale(1.4);
7082
7086
  pointer-events: none;
@@ -7166,6 +7170,10 @@ body.e-colorpicker-overflow {
7166
7170
  .e-small .e-rating-container .e-rating-item-container {
7167
7171
  font-size: 16px;
7168
7172
  }
7173
+ .e-small.e-rating-container .e-rating-item-container:has(svg),
7174
+ .e-small .e-rating-container .e-rating-item-container:has(svg) {
7175
+ line-height: 13px;
7176
+ }
7169
7177
  .e-small.e-rating-container .e-rating-label,
7170
7178
  .e-small .e-rating-container .e-rating-label {
7171
7179
  font-size: 10px;
@@ -7180,6 +7188,10 @@ body.e-colorpicker-overflow {
7180
7188
  .e-bigger .e-rating-container .e-rating-item-container {
7181
7189
  font-size: 28px;
7182
7190
  }
7191
+ .e-bigger.e-rating-container .e-rating-item-container:has(svg),
7192
+ .e-bigger .e-rating-container .e-rating-item-container:has(svg) {
7193
+ line-height: 21px;
7194
+ }
7183
7195
  .e-bigger.e-rating-container .e-rating-label,
7184
7196
  .e-bigger .e-rating-container .e-rating-label {
7185
7197
  font-size: 14px;
@@ -7196,6 +7208,12 @@ body.e-colorpicker-overflow {
7196
7208
  .e-small .e-bigger.e-rating-container .e-rating-item-container {
7197
7209
  font-size: 24px;
7198
7210
  }
7211
+ .e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
7212
+ .e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
7213
+ .e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
7214
+ .e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
7215
+ line-height: 19px;
7216
+ }
7199
7217
  .e-bigger.e-small.e-rating-container .e-rating-label,
7200
7218
  .e-bigger.e-small .e-rating-container .e-rating-label,
7201
7219
  .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -7210,7 +7228,8 @@ body.e-colorpicker-overflow {
7210
7228
  font-size: 20px;
7211
7229
  }
7212
7230
 
7213
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
7231
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
7232
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
7214
7233
  outline-color: #000;
7215
7234
  border-radius: 0;
7216
7235
  }
@@ -7303,4 +7322,245 @@ body.e-colorpicker-overflow {
7303
7322
  /* stylelint-disable property-no-vendor-prefix */
7304
7323
  -webkit-background-clip: text;
7305
7324
  /* stylelint-enable property-no-vendor-prefix */
7325
+ }
7326
+
7327
+ /*! FileManager's highcontrast theme wise override definitions and variables */
7328
+ /*! data-form layout */
7329
+ .e-data-form .e-form-label {
7330
+ font-size: 14px;
7331
+ margin-bottom: 4px;
7332
+ font-weight: 600;
7333
+ }
7334
+ .e-data-form .e-form-layout {
7335
+ display: -ms-grid;
7336
+ display: grid;
7337
+ }
7338
+ .e-data-form .e-grid-col-2 {
7339
+ -ms-grid-columns: (minmax(0, 1fr))[2];
7340
+ grid-template-columns: repeat(2, minmax(0, 1fr));
7341
+ }
7342
+ .e-data-form .e-grid-col-3 {
7343
+ -ms-grid-columns: (minmax(0, 1fr))[3];
7344
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7345
+ }
7346
+ .e-data-form .e-grid-col-4 {
7347
+ -ms-grid-columns: (minmax(0, 1fr))[4];
7348
+ grid-template-columns: repeat(4, minmax(0, 1fr));
7349
+ }
7350
+ .e-data-form .e-grid-col-5 {
7351
+ -ms-grid-columns: (minmax(0, 1fr))[5];
7352
+ grid-template-columns: repeat(5, minmax(0, 1fr));
7353
+ }
7354
+ .e-data-form .e-grid-col-6 {
7355
+ -ms-grid-columns: (minmax(0, 1fr))[6];
7356
+ grid-template-columns: repeat(6, minmax(0, 1fr));
7357
+ }
7358
+ .e-data-form .e-grid-col-7 {
7359
+ -ms-grid-columns: (minmax(0, 1fr))[7];
7360
+ grid-template-columns: repeat(7, minmax(0, 1fr));
7361
+ }
7362
+ .e-data-form .e-grid-col-8 {
7363
+ -ms-grid-columns: (minmax(0, 1fr))[8];
7364
+ grid-template-columns: repeat(8, minmax(0, 1fr));
7365
+ }
7366
+ .e-data-form .e-grid-col-9 {
7367
+ -ms-grid-columns: (minmax(0, 1fr))[9];
7368
+ grid-template-columns: repeat(9, minmax(0, 1fr));
7369
+ }
7370
+ .e-data-form .e-grid-col-10 {
7371
+ -ms-grid-columns: (minmax(0, 1fr))[10];
7372
+ grid-template-columns: repeat(10, minmax(0, 1fr));
7373
+ }
7374
+ .e-data-form .e-grid-col-11 {
7375
+ -ms-grid-columns: (minmax(0, 1fr))[11];
7376
+ grid-template-columns: repeat(11, minmax(0, 1fr));
7377
+ }
7378
+ .e-data-form .e-grid-col-12 {
7379
+ -ms-grid-columns: (minmax(0, 1fr))[12];
7380
+ grid-template-columns: repeat(12, minmax(0, 1fr));
7381
+ }
7382
+ .e-data-form .e-colspan-1 {
7383
+ -ms-grid-column-span: 1;
7384
+ -ms-grid-column: span 1;
7385
+ grid-column: span 1/span 1;
7386
+ }
7387
+ .e-data-form .e-colspan-2 {
7388
+ -ms-grid-column-span: 2;
7389
+ -ms-grid-column: span 2;
7390
+ grid-column: span 2/span 2;
7391
+ }
7392
+ .e-data-form .e-colspan-3 {
7393
+ -ms-grid-column-span: 3;
7394
+ -ms-grid-column: span 3;
7395
+ grid-column: span 3/span 3;
7396
+ }
7397
+ .e-data-form .e-colspan-4 {
7398
+ -ms-grid-column-span: 4;
7399
+ -ms-grid-column: span 4;
7400
+ grid-column: span 4/span 4;
7401
+ }
7402
+ .e-data-form .e-colspan-5 {
7403
+ -ms-grid-column-span: 5;
7404
+ -ms-grid-column: span 5;
7405
+ grid-column: span 5/span 5;
7406
+ }
7407
+ .e-data-form .e-colspan-6 {
7408
+ -ms-grid-column-span: 6;
7409
+ -ms-grid-column: span 6;
7410
+ grid-column: span 6/span 6;
7411
+ }
7412
+ .e-data-form .e-colspan-7 {
7413
+ -ms-grid-column-span: 7;
7414
+ -ms-grid-column: span 7;
7415
+ grid-column: span 7/span 7;
7416
+ }
7417
+ .e-data-form .e-colspan-8 {
7418
+ -ms-grid-column-span: 8;
7419
+ -ms-grid-column: span 8;
7420
+ grid-column: span 8/span 8;
7421
+ }
7422
+ .e-data-form .e-colspan-9 {
7423
+ -ms-grid-column-span: 9;
7424
+ -ms-grid-column: span 9;
7425
+ grid-column: span 9/span 9;
7426
+ }
7427
+ .e-data-form .e-colspan-10 {
7428
+ -ms-grid-column-span: 10;
7429
+ -ms-grid-column: span 10;
7430
+ grid-column: span 10/span 10;
7431
+ }
7432
+ .e-data-form .e-colspan-11 {
7433
+ -ms-grid-column-span: 11;
7434
+ -ms-grid-column: span 11;
7435
+ grid-column: span 11/span 11;
7436
+ }
7437
+ .e-data-form .e-colspan-12 {
7438
+ -ms-grid-column-span: 12;
7439
+ -ms-grid-column: span 12;
7440
+ grid-column: span 12/span 12;
7441
+ }
7442
+ .e-data-form .e-label-left .e-form-item-wrapper {
7443
+ -ms-flex: 1 1 auto;
7444
+ flex: 1 1 auto;
7445
+ max-width: calc(75% - 12px);
7446
+ }
7447
+ .e-data-form .e-label-left .e-form-label {
7448
+ margin-right: 12px;
7449
+ width: 25%;
7450
+ text-align: end;
7451
+ -ms-flex-direction: column;
7452
+ flex-direction: column;
7453
+ -ms-flex-align: end;
7454
+ align-items: flex-end;
7455
+ -ms-flex-pack: start;
7456
+ justify-content: flex-start;
7457
+ }
7458
+ .e-data-form .e-label-left .validation-message {
7459
+ display: -ms-flexbox;
7460
+ display: flex;
7461
+ }
7462
+ .e-data-form .e-form-group {
7463
+ border: none;
7464
+ padding: 0;
7465
+ margin: 0;
7466
+ }
7467
+ .e-data-form .e-form-group .e-group-title {
7468
+ position: relative;
7469
+ display: inline-block;
7470
+ padding-bottom: 8px;
7471
+ /* Gap between text and border */
7472
+ margin-bottom: 0;
7473
+ font-size: 16px;
7474
+ }
7475
+ .e-data-form .e-form-group .e-group-title::after {
7476
+ content: "";
7477
+ position: absolute;
7478
+ bottom: 0;
7479
+ left: 0;
7480
+ width: 100%;
7481
+ height: 1px;
7482
+ border-bottom: 1px solid #dee2e6;
7483
+ }
7484
+ .e-data-form .e-label-top {
7485
+ display: -ms-flexbox;
7486
+ display: flex;
7487
+ -ms-flex-direction: column;
7488
+ flex-direction: column;
7489
+ margin-top: 20px;
7490
+ }
7491
+ .e-data-form .e-label-top .e-label-right {
7492
+ display: -ms-flexbox;
7493
+ display: flex;
7494
+ -ms-flex-align: center;
7495
+ align-items: center;
7496
+ }
7497
+ .e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
7498
+ margin-top: 3px;
7499
+ margin-left: 5px;
7500
+ }
7501
+ .e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
7502
+ margin-top: 3px;
7503
+ }
7504
+ .e-data-form .e-label-left {
7505
+ display: -ms-flexbox;
7506
+ display: flex;
7507
+ text-align: center;
7508
+ margin-top: 20px;
7509
+ }
7510
+ .e-data-form .e-button-left {
7511
+ -ms-flex-pack: start;
7512
+ justify-content: flex-start;
7513
+ }
7514
+ .e-data-form .e-button-right {
7515
+ -ms-flex-pack: end;
7516
+ justify-content: flex-end;
7517
+ }
7518
+ .e-data-form .e-button-center {
7519
+ -ms-flex-pack: center;
7520
+ justify-content: center;
7521
+ }
7522
+ .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
7523
+ margin-top: 24px;
7524
+ display: -ms-flexbox;
7525
+ display: flex;
7526
+ gap: 10px;
7527
+ }
7528
+ .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 {
7529
+ border-radius: 20px;
7530
+ padding: 7px 16px;
7531
+ }
7532
+ .e-data-form .e-button-stretch .e-btn {
7533
+ width: 100%;
7534
+ }
7535
+ .e-data-form > :first-child.e-form-layout {
7536
+ margin-top: 0;
7537
+ }
7538
+ .e-data-form .e-form-group-layout {
7539
+ display: -ms-grid;
7540
+ display: grid;
7541
+ }
7542
+
7543
+ /*! data-form theme */
7544
+ .e-data-form .e-form-label {
7545
+ color: #000;
7546
+ }
7547
+ .e-data-form .e-group-title {
7548
+ color: #000;
7549
+ }
7550
+ .e-data-form .validation-message {
7551
+ color: #fff;
7552
+ font-size: 14px;
7553
+ font-style: italic;
7554
+ }
7555
+
7556
+ .e-tooltip-wrap.e-popup.e-error-tooltip {
7557
+ background-color: #b30900;
7558
+ border: #b30900;
7559
+ }
7560
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
7561
+ color: #fff;
7562
+ }
7563
+ .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 {
7564
+ border-bottom-color: #b30900;
7565
+ color: #b30900;
7306
7566
  }
@@ -7,3 +7,4 @@
7
7
  @import 'uploader/highcontrast-light.scss';
8
8
  @import 'color-picker/highcontrast-light.scss';
9
9
  @import 'rating/highcontrast-light.scss';
10
+ @import 'data-form/highcontrast-light.scss';
@@ -7054,7 +7054,8 @@ body.e-colorpicker-overflow {
7054
7054
  padding: 0;
7055
7055
  margin: 4px;
7056
7056
  }
7057
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
7057
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
7058
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
7058
7059
  outline: 1px solid;
7059
7060
  }
7060
7061
  .e-rating-container .e-rating-item-list:focus-visible {
@@ -7073,10 +7074,13 @@ body.e-colorpicker-overflow {
7073
7074
  min-height: calc(1em + 8px);
7074
7075
  position: relative;
7075
7076
  }
7077
+ .e-rating-container .e-rating-item-container:has(svg) {
7078
+ line-height: 13px;
7079
+ }
7076
7080
  .e-rating-container .e-rating-item-container .e-rating-item {
7077
7081
  display: block;
7078
7082
  }
7079
- .e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
7083
+ .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 {
7080
7084
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
7081
7085
  transform: scale(1.4);
7082
7086
  pointer-events: none;
@@ -7166,6 +7170,10 @@ body.e-colorpicker-overflow {
7166
7170
  .e-small .e-rating-container .e-rating-item-container {
7167
7171
  font-size: 16px;
7168
7172
  }
7173
+ .e-small.e-rating-container .e-rating-item-container:has(svg),
7174
+ .e-small .e-rating-container .e-rating-item-container:has(svg) {
7175
+ line-height: 13px;
7176
+ }
7169
7177
  .e-small.e-rating-container .e-rating-label,
7170
7178
  .e-small .e-rating-container .e-rating-label {
7171
7179
  font-size: 10px;
@@ -7180,6 +7188,10 @@ body.e-colorpicker-overflow {
7180
7188
  .e-bigger .e-rating-container .e-rating-item-container {
7181
7189
  font-size: 28px;
7182
7190
  }
7191
+ .e-bigger.e-rating-container .e-rating-item-container:has(svg),
7192
+ .e-bigger .e-rating-container .e-rating-item-container:has(svg) {
7193
+ line-height: 21px;
7194
+ }
7183
7195
  .e-bigger.e-rating-container .e-rating-label,
7184
7196
  .e-bigger .e-rating-container .e-rating-label {
7185
7197
  font-size: 14px;
@@ -7196,6 +7208,12 @@ body.e-colorpicker-overflow {
7196
7208
  .e-small .e-bigger.e-rating-container .e-rating-item-container {
7197
7209
  font-size: 24px;
7198
7210
  }
7211
+ .e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
7212
+ .e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
7213
+ .e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
7214
+ .e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
7215
+ line-height: 19px;
7216
+ }
7199
7217
  .e-bigger.e-small.e-rating-container .e-rating-label,
7200
7218
  .e-bigger.e-small .e-rating-container .e-rating-label,
7201
7219
  .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -7210,7 +7228,8 @@ body.e-colorpicker-overflow {
7210
7228
  font-size: 20px;
7211
7229
  }
7212
7230
 
7213
- .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
7231
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
7232
+ .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
7214
7233
  outline-color: #fff;
7215
7234
  border-radius: 0;
7216
7235
  }
@@ -7303,4 +7322,245 @@ body.e-colorpicker-overflow {
7303
7322
  /* stylelint-disable property-no-vendor-prefix */
7304
7323
  -webkit-background-clip: text;
7305
7324
  /* stylelint-enable property-no-vendor-prefix */
7325
+ }
7326
+
7327
+ /*! FileManager's highcontrast theme wise override definitions and variables */
7328
+ /*! data-form layout */
7329
+ .e-data-form .e-form-label {
7330
+ font-size: 14px;
7331
+ margin-bottom: 4px;
7332
+ font-weight: 600;
7333
+ }
7334
+ .e-data-form .e-form-layout {
7335
+ display: -ms-grid;
7336
+ display: grid;
7337
+ }
7338
+ .e-data-form .e-grid-col-2 {
7339
+ -ms-grid-columns: (minmax(0, 1fr))[2];
7340
+ grid-template-columns: repeat(2, minmax(0, 1fr));
7341
+ }
7342
+ .e-data-form .e-grid-col-3 {
7343
+ -ms-grid-columns: (minmax(0, 1fr))[3];
7344
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7345
+ }
7346
+ .e-data-form .e-grid-col-4 {
7347
+ -ms-grid-columns: (minmax(0, 1fr))[4];
7348
+ grid-template-columns: repeat(4, minmax(0, 1fr));
7349
+ }
7350
+ .e-data-form .e-grid-col-5 {
7351
+ -ms-grid-columns: (minmax(0, 1fr))[5];
7352
+ grid-template-columns: repeat(5, minmax(0, 1fr));
7353
+ }
7354
+ .e-data-form .e-grid-col-6 {
7355
+ -ms-grid-columns: (minmax(0, 1fr))[6];
7356
+ grid-template-columns: repeat(6, minmax(0, 1fr));
7357
+ }
7358
+ .e-data-form .e-grid-col-7 {
7359
+ -ms-grid-columns: (minmax(0, 1fr))[7];
7360
+ grid-template-columns: repeat(7, minmax(0, 1fr));
7361
+ }
7362
+ .e-data-form .e-grid-col-8 {
7363
+ -ms-grid-columns: (minmax(0, 1fr))[8];
7364
+ grid-template-columns: repeat(8, minmax(0, 1fr));
7365
+ }
7366
+ .e-data-form .e-grid-col-9 {
7367
+ -ms-grid-columns: (minmax(0, 1fr))[9];
7368
+ grid-template-columns: repeat(9, minmax(0, 1fr));
7369
+ }
7370
+ .e-data-form .e-grid-col-10 {
7371
+ -ms-grid-columns: (minmax(0, 1fr))[10];
7372
+ grid-template-columns: repeat(10, minmax(0, 1fr));
7373
+ }
7374
+ .e-data-form .e-grid-col-11 {
7375
+ -ms-grid-columns: (minmax(0, 1fr))[11];
7376
+ grid-template-columns: repeat(11, minmax(0, 1fr));
7377
+ }
7378
+ .e-data-form .e-grid-col-12 {
7379
+ -ms-grid-columns: (minmax(0, 1fr))[12];
7380
+ grid-template-columns: repeat(12, minmax(0, 1fr));
7381
+ }
7382
+ .e-data-form .e-colspan-1 {
7383
+ -ms-grid-column-span: 1;
7384
+ -ms-grid-column: span 1;
7385
+ grid-column: span 1/span 1;
7386
+ }
7387
+ .e-data-form .e-colspan-2 {
7388
+ -ms-grid-column-span: 2;
7389
+ -ms-grid-column: span 2;
7390
+ grid-column: span 2/span 2;
7391
+ }
7392
+ .e-data-form .e-colspan-3 {
7393
+ -ms-grid-column-span: 3;
7394
+ -ms-grid-column: span 3;
7395
+ grid-column: span 3/span 3;
7396
+ }
7397
+ .e-data-form .e-colspan-4 {
7398
+ -ms-grid-column-span: 4;
7399
+ -ms-grid-column: span 4;
7400
+ grid-column: span 4/span 4;
7401
+ }
7402
+ .e-data-form .e-colspan-5 {
7403
+ -ms-grid-column-span: 5;
7404
+ -ms-grid-column: span 5;
7405
+ grid-column: span 5/span 5;
7406
+ }
7407
+ .e-data-form .e-colspan-6 {
7408
+ -ms-grid-column-span: 6;
7409
+ -ms-grid-column: span 6;
7410
+ grid-column: span 6/span 6;
7411
+ }
7412
+ .e-data-form .e-colspan-7 {
7413
+ -ms-grid-column-span: 7;
7414
+ -ms-grid-column: span 7;
7415
+ grid-column: span 7/span 7;
7416
+ }
7417
+ .e-data-form .e-colspan-8 {
7418
+ -ms-grid-column-span: 8;
7419
+ -ms-grid-column: span 8;
7420
+ grid-column: span 8/span 8;
7421
+ }
7422
+ .e-data-form .e-colspan-9 {
7423
+ -ms-grid-column-span: 9;
7424
+ -ms-grid-column: span 9;
7425
+ grid-column: span 9/span 9;
7426
+ }
7427
+ .e-data-form .e-colspan-10 {
7428
+ -ms-grid-column-span: 10;
7429
+ -ms-grid-column: span 10;
7430
+ grid-column: span 10/span 10;
7431
+ }
7432
+ .e-data-form .e-colspan-11 {
7433
+ -ms-grid-column-span: 11;
7434
+ -ms-grid-column: span 11;
7435
+ grid-column: span 11/span 11;
7436
+ }
7437
+ .e-data-form .e-colspan-12 {
7438
+ -ms-grid-column-span: 12;
7439
+ -ms-grid-column: span 12;
7440
+ grid-column: span 12/span 12;
7441
+ }
7442
+ .e-data-form .e-label-left .e-form-item-wrapper {
7443
+ -ms-flex: 1 1 auto;
7444
+ flex: 1 1 auto;
7445
+ max-width: calc(75% - 12px);
7446
+ }
7447
+ .e-data-form .e-label-left .e-form-label {
7448
+ margin-right: 12px;
7449
+ width: 25%;
7450
+ text-align: end;
7451
+ -ms-flex-direction: column;
7452
+ flex-direction: column;
7453
+ -ms-flex-align: end;
7454
+ align-items: flex-end;
7455
+ -ms-flex-pack: start;
7456
+ justify-content: flex-start;
7457
+ }
7458
+ .e-data-form .e-label-left .validation-message {
7459
+ display: -ms-flexbox;
7460
+ display: flex;
7461
+ }
7462
+ .e-data-form .e-form-group {
7463
+ border: none;
7464
+ padding: 0;
7465
+ margin: 0;
7466
+ }
7467
+ .e-data-form .e-form-group .e-group-title {
7468
+ position: relative;
7469
+ display: inline-block;
7470
+ padding-bottom: 8px;
7471
+ /* Gap between text and border */
7472
+ margin-bottom: 0;
7473
+ font-size: 16px;
7474
+ }
7475
+ .e-data-form .e-form-group .e-group-title::after {
7476
+ content: "";
7477
+ position: absolute;
7478
+ bottom: 0;
7479
+ left: 0;
7480
+ width: 100%;
7481
+ height: 1px;
7482
+ border-bottom: 1px solid #969696;
7483
+ }
7484
+ .e-data-form .e-label-top {
7485
+ display: -ms-flexbox;
7486
+ display: flex;
7487
+ -ms-flex-direction: column;
7488
+ flex-direction: column;
7489
+ margin-top: 20px;
7490
+ }
7491
+ .e-data-form .e-label-top .e-label-right {
7492
+ display: -ms-flexbox;
7493
+ display: flex;
7494
+ -ms-flex-align: center;
7495
+ align-items: center;
7496
+ }
7497
+ .e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
7498
+ margin-top: 3px;
7499
+ margin-left: 5px;
7500
+ }
7501
+ .e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
7502
+ margin-top: 3px;
7503
+ }
7504
+ .e-data-form .e-label-left {
7505
+ display: -ms-flexbox;
7506
+ display: flex;
7507
+ text-align: center;
7508
+ margin-top: 20px;
7509
+ }
7510
+ .e-data-form .e-button-left {
7511
+ -ms-flex-pack: start;
7512
+ justify-content: flex-start;
7513
+ }
7514
+ .e-data-form .e-button-right {
7515
+ -ms-flex-pack: end;
7516
+ justify-content: flex-end;
7517
+ }
7518
+ .e-data-form .e-button-center {
7519
+ -ms-flex-pack: center;
7520
+ justify-content: center;
7521
+ }
7522
+ .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
7523
+ margin-top: 24px;
7524
+ display: -ms-flexbox;
7525
+ display: flex;
7526
+ gap: 10px;
7527
+ }
7528
+ .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 {
7529
+ border-radius: 20px;
7530
+ padding: 7px 16px;
7531
+ }
7532
+ .e-data-form .e-button-stretch .e-btn {
7533
+ width: 100%;
7534
+ }
7535
+ .e-data-form > :first-child.e-form-layout {
7536
+ margin-top: 0;
7537
+ }
7538
+ .e-data-form .e-form-group-layout {
7539
+ display: -ms-grid;
7540
+ display: grid;
7541
+ }
7542
+
7543
+ /*! data-form theme */
7544
+ .e-data-form .e-form-label {
7545
+ color: #fff;
7546
+ }
7547
+ .e-data-form .e-group-title {
7548
+ color: #fff;
7549
+ }
7550
+ .e-data-form .validation-message {
7551
+ color: #fff;
7552
+ font-size: 14px;
7553
+ font-style: italic;
7554
+ }
7555
+
7556
+ .e-tooltip-wrap.e-popup.e-error-tooltip {
7557
+ background-color: #b30900;
7558
+ border: #b30900;
7559
+ }
7560
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
7561
+ color: #fff;
7562
+ }
7563
+ .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 {
7564
+ border-bottom-color: #b30900;
7565
+ color: #b30900;
7306
7566
  }
@@ -7,3 +7,4 @@
7
7
  @import 'uploader/highcontrast.scss';
8
8
  @import 'color-picker/highcontrast.scss';
9
9
  @import 'rating/highcontrast.scss';
10
+ @import 'data-form/highcontrast.scss';