@syncfusion/ej2-inplace-editor 19.2.60 → 19.3.53

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 (39) hide show
  1. package/.eslintrc.json +1 -1
  2. package/CHANGELOG.md +7 -1
  3. package/dist/ej2-inplace-editor.umd.min.js +2 -2
  4. package/dist/ej2-inplace-editor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-inplace-editor.es2015.js +5 -4
  6. package/dist/es6/ej2-inplace-editor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-inplace-editor.es5.js +5 -4
  8. package/dist/es6/ej2-inplace-editor.es5.js.map +1 -1
  9. package/dist/global/ej2-inplace-editor.min.js +2 -2
  10. package/dist/global/ej2-inplace-editor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +16 -16
  13. package/src/inplace-editor/base/inplace-editor.d.ts +1 -0
  14. package/src/inplace-editor/base/inplace-editor.js +5 -4
  15. package/styles/bootstrap4.css +5 -0
  16. package/styles/bootstrap5-dark.css +929 -0
  17. package/styles/bootstrap5-dark.scss +1 -0
  18. package/styles/bootstrap5.css +929 -0
  19. package/styles/bootstrap5.scss +1 -0
  20. package/styles/inplace-editor/_bootstrap5-dark-definition.scss +1 -0
  21. package/styles/inplace-editor/_bootstrap5-definition.scss +67 -0
  22. package/styles/inplace-editor/_layout.scss +2 -2
  23. package/styles/inplace-editor/_tailwind-dark-definition.scss +1 -78
  24. package/styles/inplace-editor/_tailwind-definition.scss +26 -36
  25. package/styles/inplace-editor/_theme.scss +7 -1
  26. package/styles/inplace-editor/bootstrap4.css +5 -0
  27. package/styles/inplace-editor/bootstrap5-dark.css +929 -0
  28. package/styles/inplace-editor/bootstrap5-dark.scss +26 -0
  29. package/styles/inplace-editor/bootstrap5.css +929 -0
  30. package/styles/inplace-editor/bootstrap5.scss +26 -0
  31. package/styles/inplace-editor/icons/_bootstrap5-dark.scss +1 -0
  32. package/styles/inplace-editor/icons/_bootstrap5.scss +19 -0
  33. package/styles/inplace-editor/icons/_tailwind-dark.scss +1 -19
  34. package/styles/inplace-editor/material-dark.css +1 -1
  35. package/styles/inplace-editor/tailwind-dark.css +2 -10
  36. package/styles/inplace-editor/tailwind.css +2 -10
  37. package/styles/material-dark.css +1 -1
  38. package/styles/tailwind-dark.css +2 -10
  39. package/styles/tailwind.css +2 -10
@@ -0,0 +1 @@
1
+ @import 'inplace-editor/bootstrap5.scss';
@@ -0,0 +1 @@
1
+ @import './bootstrap5-definition.scss';
@@ -0,0 +1,67 @@
1
+ $inplace-skin: 'bootstrap5' !default;
2
+ //Layout Variable Start
3
+ $editor-big-value-text-font-size: $text-base !default;
4
+ $editor-nrml-value-text-font-size: $text-sm !default;
5
+ $editor-big-value-container-padding: 7px 12px 7px 12px !default;
6
+ $editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
7
+ $editor-big-value-container-spin-padding: 8px !default;
8
+ $editor-nrml-value-container-spin-padding: 8px !default;
9
+ $editor-big-value-margin: 0 30px 0 0 !default;
10
+ $editor-nrml-value-margin: 0 28px 0 0 !default;
11
+ $editor-rtl-big-value-margin: 0 0 0 30px !default;
12
+ $editor-rtl-nrml-value-margin: 0 0 0 28px !default;
13
+ $editor-big-overlay-icon-size: $text-base !default;
14
+ $editor-nrml-overlay-icon-size: $text-sm !default;
15
+ $editor-big-overlay-icon-container-size: 20px !default;
16
+ $editor-nrml-overlay-icon-container-size: 20px !default;
17
+ $editor-big-overlay-icon-left-right: 8px !default;
18
+ $editor-nrml-overlay-icon-left-right: 8px !default;
19
+ $editor-tip-content-bdr-radius: 4px !default;
20
+ $editor-tip-title-font-weight: $font-weight-medium !default;
21
+ $editor-big-tip-title-font-size: $text-sm !default;
22
+ $editor-nrml-tip-title-font-size: $text-xs !default;
23
+ $editor-big-tip-title-padding: 12px 16px 12px 16px !default;
24
+ $editor-nrml-tip-title-padding: 9px 12px 9px 12px !default;
25
+ $editor-rtl-big-tip-title-padding: 12px 16px 12px 16px !default;
26
+ $editor-rtl-nrml-tip-title-padding: 9px 12px 9px 12px !default;
27
+ $editor-big-tip-title-container-size: 46px !default;
28
+ $editor-nrml-tip-title-container-size: 36px !default;
29
+ $editor-big-tip-wrapper-padding: 16px !default;
30
+ $editor-nrml-tip-wrapper-padding: 12px !default;
31
+ $editor-big-wrapper-title-with-padding: 16px !default;
32
+ $editor-nrml-wrapper-title-with-padding: 12px !default;
33
+ $editor-component-bottom-margin: 4px !default;
34
+ $editor-buttons-top-margin: 4px !default;
35
+ $editor-btn-save-icon-size: 16px !default;
36
+ $editor-btn-cancel-icon-size: 16px !default;
37
+ $editor-big-btn-save-margin: 0 4px 0 0 !default;
38
+ $editor-nrml-btn-save-margin: 0 4px 0 0 !default;
39
+ $editor-big-btn-cancel-margin: 0 0 0 4px !default;
40
+ $editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
41
+ $editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
42
+ $editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
43
+ $editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
44
+ $editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
45
+ //Layout Variable End
46
+
47
+ //Theme Variable Start
48
+ $editor-value-hover-bg: $content-bg-color-alt2 !default;
49
+ $editor-value-text-color: $content-text-color !default;
50
+ $editor-overlay-icon-color: $icon-color !default;
51
+ $editor-value-text-border: 1px dashed $content-text-color !default;
52
+ $editor-background-color: $transparent !default;
53
+ $wrapper-background-color: $flyout-bg-color !default;
54
+ $editor-tip-border: 1px solid $border !default;
55
+ $editor-tip-bg: $content-bg-color !default;
56
+ $editor-tip-arrow-icon-color: $content-bg-color-alt1 !default;
57
+ $editor-tip-title-arrow-icon-color: $content-bg-color-alt1 !default;
58
+ $editor-tip-arrow-bdr-color: $content-bg-color-alt1 !default;
59
+ $editor-tip-title-arrow-bdr-color: $border !default;
60
+ $editor-tip-box-shadow: $shadow-lg !default;
61
+ $editor-tip-title-bg: $content-bg-color-alt1 !default;
62
+ $editor-tio-title-border-bottom: 0 !default;
63
+ $editor-tip-title-color: $content-text-color !default;
64
+ $editable-overlay-icon-height: inherit !default;
65
+ $editable-overlay-icon: 0 !default;
66
+ $editor-btn-icon-color: $icon-color !default;
67
+ //Theme Variable End
@@ -625,7 +625,7 @@
625
625
  min-height: 70px;
626
626
  }
627
627
 
628
- @if $inplace-skin == 'tailwind' or $inplace-skin == 'tailwind-dark' {
628
+ @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
629
629
  .e-control .e-inplaceeditor,
630
630
  .e-tooltip-wrap.e-popup.e-inplaceeditor-tip.e-popup-open,
631
631
  .e-inplaceeditor .e-input-group.e-control-wrapper.e-editable-elements {
@@ -633,7 +633,7 @@
633
633
  }
634
634
  }
635
635
 
636
- @if $inplace-skin == 'tailwind' or $inplace-skin == 'tailwind-dark' {
636
+ @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
637
637
  .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content {
638
638
  padding: 0;
639
639
  }
@@ -1,78 +1 @@
1
- /*! Tailwind dark theme definitions and variables */
2
-
3
- /*! Value element styles */
4
- $inplace-skin: 'tailwind-dark' !default;
5
- $editor-big-value-text-font-size: $text-base !default;
6
- $editor-nrml-value-text-font-size: $text-sm !default;
7
- $editor-big-value-container-padding: 7px 12px 7px 12px !default;
8
- $editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
9
- $editor-big-value-container-spin-padding: 8px !default;
10
- $editor-nrml-value-container-spin-padding: 8px !default;
11
- $editor-big-value-margin: 0 30px 0 0 !default;
12
- $editor-nrml-value-margin: 0 28px 0 0 !default;
13
- $editor-rtl-big-value-margin: 0 0 0 30px !default;
14
- $editor-rtl-nrml-value-margin: 0 0 0 28px !default;
15
- $editor-big-overlay-icon-size: $text-base !default;
16
- $editor-nrml-overlay-icon-size: $text-sm !default;
17
- $editor-big-overlay-icon-container-size: 20px !default;
18
- $editor-nrml-overlay-icon-container-size: 20px !default;
19
- $editor-big-overlay-icon-left-right: 8px !default;
20
- $editor-nrml-overlay-icon-left-right: 8px !default;
21
- $editor-value-hover-bg: $content-bg-color-alt2 !default;
22
- $content-text-color: $content-text-color !default;
23
- $editor-value-text-color: $content-text-color !default;
24
- $editor-overlay-icon-color: $icon-color !default;
25
- $editor-value-text-border: 1px dashed $content-text-color !default;
26
- $editor-background-color: $transparent !default;
27
- $editable-overlay-icon-height: inherit !default;
28
- $editable-overlay-icon: 0 !default;
29
-
30
- /*! Tooltip styles */
31
- $editor-tip-border: 1px solid $border-light !default;
32
- $editor-tip-bg: $flyout-bg-color !default;
33
- $editor-tip-arrow-icon-color: $flyout-bg-color !default;
34
- $editor-tip-title-arrow-icon-color: $content-bg-color-alt2 !default;
35
- $editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
36
- $editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
37
- $editor-tip-box-shadow: $shadow-lg !default;
38
-
39
- /*! Tip Content styles */
40
- $editor-tip-content-bdr-radius: 4px !default;
41
-
42
- /*! Title styles */
43
- $editor-tip-title-font-weight: 500 !default;
44
- $editor-big-tip-title-font-size: $text-sm !default;
45
- $editor-nrml-tip-title-font-size: $text-xs !default;
46
- $editor-big-tip-title-padding: 7px 16px 7px 16px !default;
47
- $editor-nrml-tip-title-padding: 6px 12px 6px 12px !default;
48
- $editor-rtl-big-tip-title-padding: 7px 16px 7px 16px !default;
49
- $editor-rtl-nrml-tip-title-padding: 6px 12px 6px 12px !default;
50
- $editor-big-tip-title-container-size: 36px !default;
51
- $editor-nrml-tip-title-container-size: 30px !default;
52
- $editor-tip-title-bg: $content-bg-color-alt2 !default;
53
- $editor-tio-title-border-bottom: 0 !default;
54
- $editor-tip-title-color: $content-text-color-alt2 !default;
55
- $wrapper-background-color: $flyout-bg-color !default;
56
-
57
- /*! Wrapper styles */
58
- $editor-big-tip-wrapper-padding: 16px !default;
59
- $editor-nrml-tip-wrapper-padding: 12px !default;
60
- $editor-big-wrapper-title-with-padding: 16px !default;
61
- $editor-nrml-wrapper-title-with-padding: 12px !default;
62
-
63
- /*! Component group styles */
64
- $editor-component-bottom-margin: 4px !default;
65
-
66
- /*! Button styles */
67
- $editor-buttons-top-margin: 4px !default;
68
- $editor-btn-save-icon-size: 18px !default;
69
- $editor-btn-cancel-icon-size: 18px !default;
70
- $editor-big-btn-save-margin: 0 4px 0 0 !default;
71
- $editor-nrml-btn-save-margin: 0 4px 0 0 !default;
72
- $editor-big-btn-cancel-margin: 0 0 0 4px !default;
73
- $editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
74
- $editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
75
- $editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
76
- $editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
77
- $editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
78
- $editor-btn-icon-color: $icon-color !default;
1
+ @import './tailwind-definition.scss';
@@ -1,7 +1,5 @@
1
- /*! Tailwind theme definitions and variables */
2
-
3
- /*! Value element styles */
4
1
  $inplace-skin: 'tailwind' !default;
2
+ //Layout Variable Start
5
3
  $editor-big-value-text-font-size: $text-base !default;
6
4
  $editor-nrml-value-text-font-size: $text-sm !default;
7
5
  $editor-big-value-container-padding: 7px 12px 7px 12px !default;
@@ -18,27 +16,7 @@ $editor-big-overlay-icon-container-size: 20px !default;
18
16
  $editor-nrml-overlay-icon-container-size: 20px !default;
19
17
  $editor-big-overlay-icon-left-right: 8px !default;
20
18
  $editor-nrml-overlay-icon-left-right: 8px !default;
21
- $editor-value-hover-bg: $content-bg-color-alt2 !default;
22
- $content-text-color: $content-text-color !default;
23
- $editor-value-text-color: $content-text-color !default;
24
- $editor-overlay-icon-color: $icon-color !default;
25
- $editor-value-text-border: 1px dashed $content-text-color !default;
26
- $editor-background-color: $transparent !default;
27
- $wrapper-background-color: $flyout-bg-color !default;
28
-
29
- /*! Tooltip styles */
30
- $editor-tip-border: 1px solid $border-light !default;
31
- $editor-tip-bg: $flyout-bg-color !default;
32
- $editor-tip-arrow-icon-color: $flyout-bg-color !default;
33
- $editor-tip-title-arrow-icon-color: $content-bg-color-alt2 !default;
34
- $editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
35
- $editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
36
- $editor-tip-box-shadow: $shadow-lg !default;
37
-
38
- /*! Tip Content styles */
39
19
  $editor-tip-content-bdr-radius: 4px !default;
40
-
41
- /*! Title styles */
42
20
  $editor-tip-title-font-weight: 500 !default;
43
21
  $editor-big-tip-title-font-size: $text-sm !default;
44
22
  $editor-nrml-tip-title-font-size: $text-xs !default;
@@ -48,25 +26,14 @@ $editor-rtl-big-tip-title-padding: 7px 16px 7px 16px !default;
48
26
  $editor-rtl-nrml-tip-title-padding: 6px 12px 6px 12px !default;
49
27
  $editor-big-tip-title-container-size: 36px !default;
50
28
  $editor-nrml-tip-title-container-size: 30px !default;
51
- $editor-tip-title-bg: $content-bg-color-alt2 !default;
52
- $editor-tio-title-border-bottom: 0 !default;
53
- $editor-tip-title-color: $content-text-color-alt2 !default;
54
- $editable-overlay-icon-height: inherit !default;
55
- $editable-overlay-icon: 0 !default;
56
-
57
- /*! Wrapper styles */
58
29
  $editor-big-tip-wrapper-padding: 16px !default;
59
30
  $editor-nrml-tip-wrapper-padding: 12px !default;
60
31
  $editor-big-wrapper-title-with-padding: 16px !default;
61
32
  $editor-nrml-wrapper-title-with-padding: 12px !default;
62
-
63
- /*! Component group styles */
64
33
  $editor-component-bottom-margin: 4px !default;
65
-
66
- /*! Button styles */
67
34
  $editor-buttons-top-margin: 4px !default;
68
- $editor-btn-save-icon-size: 18px !default;
69
- $editor-btn-cancel-icon-size: 18px !default;
35
+ $editor-btn-save-icon-size: 16px !default;
36
+ $editor-btn-cancel-icon-size: 16px !default;
70
37
  $editor-big-btn-save-margin: 0 4px 0 0 !default;
71
38
  $editor-nrml-btn-save-margin: 0 4px 0 0 !default;
72
39
  $editor-big-btn-cancel-margin: 0 0 0 4px !default;
@@ -75,4 +42,27 @@ $editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
75
42
  $editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
76
43
  $editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
77
44
  $editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
45
+ //Layout Variable End
46
+
47
+ //Theme Variable Start
48
+ $editor-value-hover-bg: $content-bg-color-alt2 !default;
49
+ $content-text-color: $content-text-color !default;
50
+ $editor-value-text-color: $content-text-color !default;
51
+ $editor-overlay-icon-color: $icon-color !default;
52
+ $editor-value-text-border: 1px dashed $content-text-color !default;
53
+ $editor-background-color: $transparent !default;
54
+ $wrapper-background-color: $flyout-bg-color !default;
55
+ $editor-tip-border: 1px solid $border-light !default;
56
+ $editor-tip-bg: $flyout-bg-color !default;
57
+ $editor-tip-arrow-icon-color: $flyout-bg-color !default;
58
+ $editor-tip-title-arrow-icon-color: $content-bg-color-alt2 !default;
59
+ $editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
60
+ $editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
61
+ $editor-tip-box-shadow: $shadow-lg !default;
62
+ $editor-tip-title-bg: $content-bg-color-alt2 !default;
63
+ $editor-tio-title-border-bottom: 0 !default;
64
+ $editor-tip-title-color: $content-text-color-alt2 !default;
65
+ $editable-overlay-icon-height: inherit !default;
66
+ $editable-overlay-icon: 0 !default;
78
67
  $editor-btn-icon-color: $icon-color !default;
68
+ //Theme Variable End
@@ -119,6 +119,12 @@
119
119
  box-shadow: 0 1px 4px 0 $black-color;
120
120
  }
121
121
 
122
+ @else if $inplace-skin == 'bootstrap5' {
123
+ background-color: $content-bg-color;
124
+ border: 1px solid $border-light;
125
+ border-radius: 4px;
126
+ }
127
+
122
128
  .e-btn-icon.e-icons {
123
129
  color: $editor-btn-icon-color;
124
130
  }
@@ -162,7 +168,7 @@
162
168
  }
163
169
  }
164
170
 
165
- @if $inplace-skin == 'tailwind' or $inplace-skin == 'tailwind-dark' {
171
+ @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
166
172
  .e-inplaceeditor .e-editable-value-wrapper {
167
173
  background-color: $editor-background-color;
168
174
  border-radius: 4px;
@@ -85,6 +85,11 @@
85
85
  background: transparent;
86
86
  }
87
87
 
88
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
89
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
90
+ background: #e9ecef;
91
+ }
92
+
88
93
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
89
94
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
90
95
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,