@syncfusion/ej2-inputs 19.3.53 → 19.4.42

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 (153) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +1 -1
  3. package/common.d.ts +4 -0
  4. package/common.js +4 -0
  5. package/dist/ej2-inputs.umd.min.js +2 -2
  6. package/dist/ej2-inputs.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-inputs.es2015.js +1116 -8
  8. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  9. package/dist/es6/ej2-inputs.es5.js +1150 -7
  10. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  11. package/dist/global/ej2-inputs.min.js +2 -2
  12. package/dist/global/ej2-inputs.min.js.map +1 -1
  13. package/dist/global/index.d.ts +1 -1
  14. package/package.json +9 -9
  15. package/signature.d.ts +4 -0
  16. package/signature.js +4 -0
  17. package/src/common/index.d.ts +4 -0
  18. package/src/common/index.js +4 -0
  19. package/src/common/signature-base.d.ts +320 -0
  20. package/src/common/signature-base.js +946 -0
  21. package/src/index.d.ts +2 -0
  22. package/src/index.js +2 -0
  23. package/src/input/input.js +10 -6
  24. package/src/numerictextbox/numerictextbox.js +10 -0
  25. package/src/signature/index.d.ts +5 -0
  26. package/src/signature/index.js +4 -0
  27. package/src/signature/signature-model.d.ts +131 -0
  28. package/src/signature/signature.d.ts +167 -0
  29. package/src/signature/signature.js +171 -0
  30. package/src/slider/slider.d.ts +1 -0
  31. package/src/slider/slider.js +9 -0
  32. package/styles/bootstrap-dark.css +43 -16
  33. package/styles/bootstrap-dark.scss +1 -0
  34. package/styles/bootstrap.css +43 -16
  35. package/styles/bootstrap.scss +1 -0
  36. package/styles/bootstrap4.css +43 -16
  37. package/styles/bootstrap4.scss +1 -0
  38. package/styles/bootstrap5-dark.css +46 -41
  39. package/styles/bootstrap5-dark.scss +1 -0
  40. package/styles/bootstrap5.css +46 -41
  41. package/styles/bootstrap5.scss +1 -0
  42. package/styles/color-picker/_fabric-dark-definition.scss +1 -1
  43. package/styles/color-picker/_fluent-definition.scss +134 -0
  44. package/styles/color-picker/_layout.scss +5 -5
  45. package/styles/color-picker/_theme.scss +16 -15
  46. package/styles/color-picker/bootstrap-dark.css +20 -0
  47. package/styles/color-picker/bootstrap.css +20 -0
  48. package/styles/color-picker/bootstrap4.css +20 -0
  49. package/styles/color-picker/bootstrap5-dark.css +22 -20
  50. package/styles/color-picker/bootstrap5.css +22 -20
  51. package/styles/color-picker/fabric-dark.css +23 -3
  52. package/styles/color-picker/fabric.css +20 -0
  53. package/styles/color-picker/highcontrast-light.css +20 -0
  54. package/styles/color-picker/highcontrast.css +20 -0
  55. package/styles/color-picker/icons/_fluent.scss +10 -0
  56. package/styles/color-picker/material-dark.css +20 -0
  57. package/styles/color-picker/material.css +20 -0
  58. package/styles/color-picker/tailwind-dark.css +20 -0
  59. package/styles/color-picker/tailwind.css +20 -0
  60. package/styles/fabric-dark.css +46 -19
  61. package/styles/fabric-dark.scss +1 -0
  62. package/styles/fabric.css +43 -16
  63. package/styles/fabric.scss +1 -0
  64. package/styles/highcontrast-light.css +43 -16
  65. package/styles/highcontrast-light.scss +1 -0
  66. package/styles/highcontrast.css +43 -16
  67. package/styles/highcontrast.scss +1 -0
  68. package/styles/input/_fluent-definition.scss +321 -0
  69. package/styles/input/_layout.scss +138 -37
  70. package/styles/input/_theme.scss +42 -24
  71. package/styles/input/bootstrap-dark.css +13 -16
  72. package/styles/input/bootstrap.css +13 -16
  73. package/styles/input/bootstrap4.css +13 -16
  74. package/styles/input/bootstrap5-dark.css +13 -16
  75. package/styles/input/bootstrap5.css +13 -16
  76. package/styles/input/fabric-dark.css +13 -16
  77. package/styles/input/fabric.css +13 -16
  78. package/styles/input/highcontrast-light.css +13 -16
  79. package/styles/input/highcontrast.css +13 -16
  80. package/styles/input/icons/_fluent.scss +17 -0
  81. package/styles/input/material-dark.css +13 -16
  82. package/styles/input/material.css +13 -16
  83. package/styles/input/tailwind-dark.css +13 -16
  84. package/styles/input/tailwind.css +13 -16
  85. package/styles/maskedtextbox/_fluent-definition.scss +7 -0
  86. package/styles/maskedtextbox/_theme.scss +2 -2
  87. package/styles/material-dark.css +43 -16
  88. package/styles/material-dark.scss +1 -0
  89. package/styles/material.css +43 -16
  90. package/styles/material.scss +1 -0
  91. package/styles/numerictextbox/_fluent-definition.scss +5 -0
  92. package/styles/numerictextbox/_theme.scss +18 -0
  93. package/styles/numerictextbox/icons/_fluent.scss +12 -0
  94. package/styles/signature/_all.scss +2 -0
  95. package/styles/signature/_bootstrap-dark-definition.scss +3 -0
  96. package/styles/signature/_bootstrap-definition.scss +3 -0
  97. package/styles/signature/_bootstrap4-definition.scss +3 -0
  98. package/styles/signature/_bootstrap5-dark-definition.scss +1 -0
  99. package/styles/signature/_bootstrap5-definition.scss +3 -0
  100. package/styles/signature/_fabric-dark-definition.scss +3 -0
  101. package/styles/signature/_fabric-definition.scss +3 -0
  102. package/styles/signature/_fluent-definition.scss +3 -0
  103. package/styles/signature/_highcontrast-definition.scss +3 -0
  104. package/styles/signature/_highcontrast-light-definition.scss +3 -0
  105. package/styles/signature/_layout.scss +5 -0
  106. package/styles/signature/_material-dark-definition.scss +3 -0
  107. package/styles/signature/_material-definition.scss +3 -0
  108. package/styles/signature/_tailwind-dark-definition.scss +1 -0
  109. package/styles/signature/_tailwind-definition.scss +3 -0
  110. package/styles/signature/_theme.scss +7 -0
  111. package/styles/signature/bootstrap-dark.css +9 -0
  112. package/styles/signature/bootstrap-dark.scss +3 -0
  113. package/styles/signature/bootstrap.css +9 -0
  114. package/styles/signature/bootstrap.scss +3 -0
  115. package/styles/signature/bootstrap4.css +9 -0
  116. package/styles/signature/bootstrap4.scss +3 -0
  117. package/styles/signature/bootstrap5-dark.css +9 -0
  118. package/styles/signature/bootstrap5-dark.scss +3 -0
  119. package/styles/signature/bootstrap5.css +9 -0
  120. package/styles/signature/bootstrap5.scss +3 -0
  121. package/styles/signature/fabric-dark.css +9 -0
  122. package/styles/signature/fabric-dark.scss +3 -0
  123. package/styles/signature/fabric.css +9 -0
  124. package/styles/signature/fabric.scss +3 -0
  125. package/styles/signature/highcontrast-light.css +9 -0
  126. package/styles/signature/highcontrast-light.scss +3 -0
  127. package/styles/signature/highcontrast.css +9 -0
  128. package/styles/signature/highcontrast.scss +3 -0
  129. package/styles/signature/material-dark.css +10 -0
  130. package/styles/signature/material-dark.scss +3 -0
  131. package/styles/signature/material.css +10 -0
  132. package/styles/signature/material.scss +3 -0
  133. package/styles/signature/tailwind-dark.css +10 -0
  134. package/styles/signature/tailwind-dark.scss +3 -0
  135. package/styles/signature/tailwind.css +10 -0
  136. package/styles/signature/tailwind.scss +3 -0
  137. package/styles/slider/_bootstrap5-definition.scss +2 -2
  138. package/styles/slider/_fluent-definition.scss +94 -0
  139. package/styles/slider/_layout.scss +7 -2
  140. package/styles/slider/_tailwind-definition.scss +2 -2
  141. package/styles/slider/bootstrap5-dark.css +1 -5
  142. package/styles/slider/bootstrap5.css +1 -5
  143. package/styles/slider/tailwind-dark.css +1 -5
  144. package/styles/slider/tailwind.css +1 -5
  145. package/styles/tailwind-dark.css +45 -21
  146. package/styles/tailwind-dark.scss +1 -0
  147. package/styles/tailwind.css +45 -21
  148. package/styles/tailwind.scss +1 -0
  149. package/styles/textbox/_fluent-definition.scss +0 -0
  150. package/styles/uploader/_fluent-definition.scss +234 -0
  151. package/styles/uploader/_layout.scss +99 -8
  152. package/styles/uploader/_theme.scss +5 -2
  153. package/styles/uploader/icons/_fluent.scss +34 -0
@@ -614,7 +614,7 @@
614
614
 
615
615
  .e-input-group .e-input-group-icon:first-child,
616
616
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
617
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') {
617
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
618
618
  border-left-width: $input-border-left-width;
619
619
  }
620
620
  }
@@ -626,7 +626,7 @@
626
626
 
627
627
  .e-input-group .e-input-group-icon:not(:last-child),
628
628
  .e-input-group.e-control-wrapper .e-input-group-icon:not(:last-child) {
629
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
629
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
630
630
  border-right-width: $zero-value;
631
631
  }
632
632
  }
@@ -634,7 +634,7 @@
634
634
  .e-input + .e-input-group-icon,
635
635
  .e-input-group .e-input + .e-input-group-icon,
636
636
  .e-input-group.e-control-wrapper .e-input + .e-input-group-icon {
637
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
637
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
638
638
  border-left-width: $zero-value;
639
639
  }
640
640
  }
@@ -690,7 +690,7 @@
690
690
 
691
691
  .e-input-group.e-rtl .e-input-group-icon:first-child,
692
692
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child {
693
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
693
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
694
694
  border-left-width: $zero-value;
695
695
  border-right-width: $input-border-left-width;
696
696
  }
@@ -698,7 +698,7 @@
698
698
 
699
699
  .e-input-group.e-rtl .e-input-group-icon:last-child,
700
700
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child {
701
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
701
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
702
702
  border-left-width: $input-border-left-width;
703
703
  border-right-width: $zero-value;
704
704
  }
@@ -717,7 +717,7 @@
717
717
 
718
718
  .e-input-group.e-rtl .e-input-group-icon:not(:last-child),
719
719
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:not(:last-child) {
720
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') {
720
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
721
721
  border-left-width: $input-border-left-width;
722
722
  }
723
723
  }
@@ -731,7 +731,7 @@
731
731
 
732
732
  .e-input-group.e-rtl .e-input-group-icon + .e-input,
733
733
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input {
734
- @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
734
+ @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
735
735
  border-right-width: $zero-value;
736
736
  }
737
737
  }
@@ -900,6 +900,8 @@
900
900
  .e-input-group.e-small .e-input-group-icon.e-bigger,
901
901
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
902
902
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
903
+ .e-small .e-bigger.e-input-group .e-input-group-icon,
904
+ .e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
903
905
  .e-bigger .e-input-group.e-small .e-input-group-icon,
904
906
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
905
907
  font-size: $input-bigger-small-icon-font-size;
@@ -1111,6 +1113,11 @@
1111
1113
  padding-right: 0;
1112
1114
  transform: translate3d(-10px, -36px, 0) scale(1);
1113
1115
  }
1116
+ @else if ($input-skin-name == 'FluentUI') {
1117
+ font-weight: 600;
1118
+ padding-right: 0;
1119
+ transform: translate3d(-10px, -41px, 0) scale(1);
1120
+ }
1114
1121
  }
1115
1122
 
1116
1123
  .e-float-input.e-small input:focus ~ label.e-float-text,
@@ -1165,6 +1172,12 @@
1165
1172
  padding-right: 0;
1166
1173
  transform: translate3d(-10px, -35px, 0) scale(1);
1167
1174
  }
1175
+ @else if ($input-skin-name == 'FluentUI') {
1176
+ font-style: $input-font-normal;
1177
+ font-weight: 600;
1178
+ padding-right: 0;
1179
+ transform: translate3d(-10px, -38px, 0) scale(1);
1180
+ }
1168
1181
  }
1169
1182
 
1170
1183
  .e-float-input.e-bigger input:focus ~ label.e-float-text,
@@ -1221,6 +1234,12 @@
1221
1234
  padding-right: 0;
1222
1235
  transform: translate3d(-10px, -39px, 0) scale(1);
1223
1236
  }
1237
+ @else if ($input-skin-name == 'FluentUI') {
1238
+ font-style: $input-font-normal;
1239
+ font-weight: 600;
1240
+ padding-right: 0;
1241
+ transform: translate3d(-10px, -45px, 0) scale(1);
1242
+ }
1224
1243
  }
1225
1244
 
1226
1245
  .e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
@@ -1287,6 +1306,12 @@
1287
1306
  padding-right: 0;
1288
1307
  transform: translate3d(-10px, -36px, 0) scale(1);
1289
1308
  }
1309
+ @else if ($input-skin-name == 'FluentUI') {
1310
+ font-style: $input-font-normal;
1311
+ font-weight: 600;
1312
+ padding-right: 0;
1313
+ transform: translate3d(-10px, -41px, 0) scale(1);
1314
+ }
1290
1315
  }
1291
1316
 
1292
1317
  .e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
@@ -1334,7 +1359,7 @@
1334
1359
  @if $input-skin-name == 'material' {
1335
1360
  top: -9px;
1336
1361
  }
1337
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
1362
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
1338
1363
  padding-right: 0;
1339
1364
  top: 14px;
1340
1365
  }
@@ -1383,7 +1408,7 @@
1383
1408
  @if $input-skin-name == 'material' {
1384
1409
  top: -8px;
1385
1410
  }
1386
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
1411
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
1387
1412
  padding-right: 0;
1388
1413
  top: 17px;
1389
1414
  }
@@ -1439,7 +1464,7 @@
1439
1464
  @if $input-skin-name == 'material' {
1440
1465
  top: -7px;
1441
1466
  }
1442
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
1467
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
1443
1468
  padding-right: 0;
1444
1469
  top: 16px;
1445
1470
  }
@@ -2218,6 +2243,8 @@
2218
2243
  .e-input-group.e-small .e-input-group-icon.e-bigger,
2219
2244
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
2220
2245
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
2246
+ .e-small .e-bigger.e-input-group .e-input-group-icon,
2247
+ .e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
2221
2248
  .e-bigger .e-input-group.e-small .e-input-group-icon,
2222
2249
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
2223
2250
  margin-bottom: $input-child-small-bigger-margin-bottom;
@@ -3800,7 +3827,7 @@
3800
3827
  .e-float-input .e-input-in-wrap,
3801
3828
  .e-float-input.e-control-wrapper .e-input-in-wrap {
3802
3829
  width: 100%;
3803
- @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3830
+ @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3804
3831
  display: flex;
3805
3832
  position: relative;
3806
3833
  }
@@ -3843,7 +3870,7 @@
3843
3870
  .e-float-input .e-input-in-wrap label.e-float-text,
3844
3871
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text {
3845
3872
  right: 0;
3846
- @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3873
+ @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3847
3874
  overflow: hidden;
3848
3875
  text-overflow: ellipsis;
3849
3876
  vertical-align: middle;
@@ -3944,6 +3971,12 @@
3944
3971
  padding-right: 0;
3945
3972
  transform: translate3d(-10px, -36px, 0) scale(1);
3946
3973
  }
3974
+ @else if ($input-skin-name == 'FluentUI') {
3975
+ font-style: $input-font-normal;
3976
+ font-weight: 600;
3977
+ padding-right: 0;
3978
+ transform: translate3d(-10px, -41px, 0) scale(1);
3979
+ }
3947
3980
  }
3948
3981
 
3949
3982
  .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
@@ -3962,7 +3995,7 @@
3962
3995
  @if $input-skin-name == 'material' {
3963
3996
  top: -20px;
3964
3997
  }
3965
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3998
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3966
3999
  top: 14px;
3967
4000
  }
3968
4001
  }
@@ -3979,7 +4012,7 @@
3979
4012
  @if $input-skin-name == 'material' {
3980
4013
  top: -21px;
3981
4014
  }
3982
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4015
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
3983
4016
  top: 16px;
3984
4017
  }
3985
4018
  }
@@ -4000,7 +4033,7 @@
4000
4033
  @if $input-skin-name == 'material' {
4001
4034
  top: -20px;
4002
4035
  }
4003
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4036
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4004
4037
  top: 16px;
4005
4038
  }
4006
4039
  }
@@ -4011,7 +4044,7 @@
4011
4044
  @if $input-skin-name == 'material' {
4012
4045
  top: -11px;
4013
4046
  }
4014
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4047
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4015
4048
  top: 15px;
4016
4049
  }
4017
4050
  }
@@ -4042,7 +4075,7 @@
4042
4075
  @if $input-skin-name == 'material' {
4043
4076
  top: -8px;
4044
4077
  }
4045
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
4078
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
4046
4079
  top: 18px;
4047
4080
  }
4048
4081
  @else if $input-skin-name == 'tailwind' {
@@ -4062,7 +4095,7 @@
4062
4095
  @if $input-skin-name == 'material' {
4063
4096
  top: -11px;
4064
4097
  }
4065
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4098
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
4066
4099
  top: 15px;
4067
4100
  }
4068
4101
  }
@@ -4261,6 +4294,12 @@
4261
4294
  padding-right: 0;
4262
4295
  transform: translate3d(-10px, -39px, 0) scale(1);
4263
4296
  }
4297
+ @else if ($input-skin-name == 'FluentUI') {
4298
+ font-style: $input-font-normal;
4299
+ font-weight: 600;
4300
+ padding-right: 0;
4301
+ transform: translate3d(-10px, -41px, 0) scale(1);
4302
+ }
4264
4303
  user-select: text;
4265
4304
  }
4266
4305
 
@@ -4292,6 +4331,12 @@
4292
4331
  padding-right: 0;
4293
4332
  transform: translate3d(-10px, -40px, 0) scale(1);
4294
4333
  }
4334
+ @else if ($input-skin-name == 'FluentUI') {
4335
+ font-style: $input-font-normal;
4336
+ font-weight: 600;
4337
+ padding-right: 0;
4338
+ transform: translate3d(-10px, -45px, 0) scale(1);
4339
+ }
4295
4340
  user-select: text;
4296
4341
  }
4297
4342
 
@@ -4318,6 +4363,13 @@
4318
4363
  top: 17px;
4319
4364
  transform: translate3d(-10px, -39px, 0) scale(1);
4320
4365
  }
4366
+ @else if ($input-skin-name == 'FluentUI') {
4367
+ font-style: $input-font-normal;
4368
+ font-weight: 600;
4369
+ padding-right: 0;
4370
+ top: 17px;
4371
+ transform: translate3d(-10px, -38px, 0) scale(1);
4372
+ }
4321
4373
  user-select: text;
4322
4374
  }
4323
4375
 
@@ -4342,13 +4394,19 @@
4342
4394
  top: 16px;
4343
4395
  transform: translate3d(-10px, -43px, 0) scale(1);
4344
4396
  }
4345
-
4346
4397
  @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
4347
4398
  font-weight: bold;
4348
4399
  padding-right: 0;
4349
4400
  top: 16px;
4350
4401
  transform: translate3d(-10px, -39px, 0) scale(1);
4351
4402
  }
4403
+ @else if ($input-skin-name == 'FluentUI') {
4404
+ font-style: $input-font-normal;
4405
+ font-weight: 600;
4406
+ padding-right: 0;
4407
+ top: 16px;
4408
+ transform: translate3d(-10px, -41px, 0) scale(1);
4409
+ }
4352
4410
  user-select: text;
4353
4411
  }
4354
4412
 
@@ -4372,7 +4430,7 @@
4372
4430
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
4373
4431
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
4374
4432
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
4375
- @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
4433
+ @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
4376
4434
  @include textarea-float-label-alignment;
4377
4435
  font-style: $input-font-style;
4378
4436
  }
@@ -4443,6 +4501,11 @@
4443
4501
  padding-right: 0;
4444
4502
  transform: translate3d(-10px, -37px, 0) scale(1);
4445
4503
  }
4504
+ @else if ($input-skin-name == 'FluentUI') {
4505
+ font-style: $input-font-normal;
4506
+ padding-right: 0;
4507
+ transform: translate3d(-10px, -41px, 0) scale(1);
4508
+ }
4446
4509
  }
4447
4510
 
4448
4511
  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -4450,7 +4513,7 @@
4450
4513
  @if $input-skin-name == 'material' {
4451
4514
  transform: translate3d(0, 16px, 0) scale(1);
4452
4515
  }
4453
- @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
4516
+ @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'highcontrast' {
4454
4517
  font-style: $input-font-normal;
4455
4518
  transform: translate3d(0, 16px, 0) scale(1);
4456
4519
  }
@@ -4551,6 +4614,12 @@
4551
4614
  padding-right: 0;
4552
4615
  transform: translate3d(-10px, -40px, 0) scale(1);
4553
4616
  }
4617
+ @else if $input-skin-name == 'FluentUI' {
4618
+ font-style: $input-font-normal;
4619
+ font-weight: 600;
4620
+ padding-right: 0;
4621
+ transform: translate3d(-10px, -41px, 0) scale(1);
4622
+ }
4554
4623
  user-select: text;
4555
4624
  }
4556
4625
 
@@ -4577,6 +4646,13 @@
4577
4646
  top: 17px;
4578
4647
  transform: translate3d(-10px, -39px, 0) scale(1);
4579
4648
  }
4649
+ @else if $input-skin-name == 'FluentUI' {
4650
+ font-style: $input-font-normal;
4651
+ font-weight: 600;
4652
+ padding-right: 0;
4653
+ top: 17px;
4654
+ transform: translate3d(-10px, -37px, 0) scale(1);
4655
+ }
4580
4656
  user-select: text;
4581
4657
  }
4582
4658
 
@@ -4608,6 +4684,13 @@
4608
4684
  top: 16px;
4609
4685
  transform: translate3d(-10px, -39px, 0) scale(1);
4610
4686
  }
4687
+ @else if $input-skin-name == 'FluentUI' {
4688
+ font-style: $input-font-normal;
4689
+ font-weight: 600;
4690
+ padding-right: 0;
4691
+ top: 16px;
4692
+ transform: translate3d(-10px, -41px, 0) scale(1);
4693
+ }
4611
4694
  user-select: text;
4612
4695
  }
4613
4696
 
@@ -4634,6 +4717,13 @@
4634
4717
  top: 14px;
4635
4718
  transform: translate3d(-10px, -39px, 0) scale(1);
4636
4719
  }
4720
+ @else if $input-skin-name == 'FluentUI' {
4721
+ font-style: $input-font-normal;
4722
+ font-weight: 600;
4723
+ padding-right: 0;
4724
+ top: 14px;
4725
+ transform: translate3d(-10px, -45px, 0) scale(1);
4726
+ }
4637
4727
  user-select: text;
4638
4728
  }
4639
4729
 
@@ -4683,6 +4773,12 @@
4683
4773
  padding-right: 0;
4684
4774
  transform: translate3d(-10px, -39px, 0) scale(1);
4685
4775
  }
4776
+ @else if ($input-skin-name == 'FluentUI') {
4777
+ font-style: $input-font-normal;
4778
+ font-weight: 600;
4779
+ padding-right: 0;
4780
+ transform: translate3d(-10px, -45px, 0) scale(1);
4781
+ }
4686
4782
  }
4687
4783
 
4688
4784
  .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -4731,6 +4827,12 @@
4731
4827
  padding-right: 0;
4732
4828
  transform: translate3d(-10px, -36px, 0) scale(1);
4733
4829
  }
4830
+ @else if ($input-skin-name == 'FluentUI') {
4831
+ font-style: $input-font-normal;
4832
+ font-weight: 600;
4833
+ padding-right: 0;
4834
+ transform: translate3d(-10px, -41px, 0) scale(1);
4835
+ }
4734
4836
  }
4735
4837
 
4736
4838
  .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -4779,6 +4881,12 @@
4779
4881
  padding-right: 0;
4780
4882
  transform: translate3d(-10px, -35px, 0) scale(1);
4781
4883
  }
4884
+ @else if ($input-skin-name == 'FluentUI') {
4885
+ font-style: $input-font-normal;
4886
+ font-weight: 600;
4887
+ padding-right: 0;
4888
+ transform: translate3d(-10px, -37px, 0) scale(1);
4889
+ }
4782
4890
  }
4783
4891
 
4784
4892
  .e-float-input textarea[disabled],
@@ -4877,7 +4985,12 @@
4877
4985
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
4878
4986
  .e-bigger .e-input-group.e-input-focus textarea,
4879
4987
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
4880
- .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
4988
+ .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
4989
+ .e-input-group.e-control-wrapper textarea.e-bigger:focus,
4990
+ .e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
4991
+ .e-bigger .e-input-group.e-control-wrapper textarea:focus,
4992
+ .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
4993
+ .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus {
4881
4994
  font: inherit;
4882
4995
  line-height: 1.5;
4883
4996
  min-height: $textarea-bigger-min-height;
@@ -4890,13 +5003,8 @@
4890
5003
  .e-input-group textarea.e-input.e-small,
4891
5004
  .e-input-group.e-control-wrapper.e-small textarea,
4892
5005
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
4893
- .e-input-group.e-control-wrapper textarea.e-bigger,
4894
- .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
4895
5006
  .e-small .e-input-group textarea,
4896
5007
  .e-small .e-input-group textarea.e-input,
4897
- .e-bigger .e-input-group.e-control-wrapper textarea,
4898
- .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
4899
- .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
4900
5008
  .e-float-input.e-small textarea,
4901
5009
  .e-float-input textarea.e-small,
4902
5010
  .e-float-input.e-control-wrapper.e-small textarea,
@@ -4915,11 +5023,8 @@
4915
5023
  .e-input-group.e-input-focus textarea.e-input.e-small,
4916
5024
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
4917
5025
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
4918
- .e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
4919
- .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
4920
5026
  .e-small .e-input-group.e-input-focus textarea,
4921
- .e-small .e-input-group.e-input-focus textarea.e-input,
4922
- .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
5027
+ .e-small .e-input-group.e-input-focus textarea.e-input {
4923
5028
  font: inherit;
4924
5029
  min-height: $textarea-small-min-height;
4925
5030
  padding: $textarea-small-padding;
@@ -4931,13 +5036,8 @@
4931
5036
  .e-input-group textarea.e-input.e-small:focus,
4932
5037
  .e-input-group.e-control-wrapper.e-small textarea:focus,
4933
5038
  .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
4934
- .e-input-group.e-control-wrapper textarea.e-bigger:focus,
4935
- .e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
4936
5039
  .e-small .e-input-group textarea:focus,
4937
5040
  .e-small .e-input-group textarea.e-input:focus,
4938
- .e-bigger .e-input-group.e-control-wrapper textarea:focus,
4939
- .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
4940
- .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
4941
5041
  .e-float-input.e-small textarea:focus,
4942
5042
  .e-float-input textarea.e-small:focus,
4943
5043
  .e-float-input.e-control-wrapper.e-small textarea:focus,
@@ -4993,7 +5093,8 @@
4993
5093
  .e-bigger.e-small .e-input-group.e-input-focus textarea.e-input,
4994
5094
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
4995
5095
  .e-bigger.e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
4996
- .e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
5096
+ .e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
5097
+ .e-small .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input {
4997
5098
  font: inherit;
4998
5099
  line-height: 1.5;
4999
5100
  min-height: $textarea-bigger-small-min-height;