@syncfusion/ej2-inplace-editor 19.4.48 → 20.1.55

package/styles/fluent.scss

@@ -0,0 +1 @@
+@import 'inplace-editor/fluent.scss';

package/styles/highcontrast-light.css

@@ -677,6 +677,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 12px;

package/styles/highcontrast.css

@@ -680,6 +680,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 12px;

package/styles/inplace-editor/_bootstrap-dark-definition.scss

@@ -35,6 +35,7 @@ $editor-tip-box-shadow: none !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 700 !default;

package/styles/inplace-editor/_bootstrap-definition.scss

@@ -36,6 +36,7 @@ $editor-tip-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .26) !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 700 !default;

package/styles/inplace-editor/_bootstrap4-definition.scss

@@ -36,6 +36,7 @@ $editor-tip-box-shadow: none !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 700 !default;

package/styles/inplace-editor/_bootstrap5-definition.scss

@@ -17,6 +17,7 @@ $editor-nrml-overlay-icon-container-size: 20px !default;
 $editor-big-overlay-icon-left-right: 8px !default;
 $editor-nrml-overlay-icon-left-right: 8px !default;
 $editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
 $editor-tip-title-font-weight: $font-weight-medium !default;
 $editor-big-tip-title-font-size: $text-sm !default;
 $editor-nrml-tip-title-font-size: $text-xs !default;

package/styles/inplace-editor/_fabric-dark-definition.scss

@@ -35,6 +35,7 @@ $editor-tip-box-shadow: none !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 0 !default;
+$editor-popup-tip-content-bdr-radius: 0 !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 600 !default;

package/styles/inplace-editor/_fabric-definition.scss

@@ -36,6 +36,7 @@ $editor-tip-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .26) !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 0 !default;
+$editor-popup-tip-content-bdr-radius: 0 !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 600 !default;

package/styles/inplace-editor/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/inplace-editor/_fluent-definition.scss

@@ -0,0 +1,69 @@
+$inplace-skin: 'FluentUI' !default;
+//Layout Variable Start
+$editor-big-value-text-font-size: $text-base !default;
+$editor-nrml-value-text-font-size: $text-sm !default;
+$editor-big-value-container-padding: 7px 12px 9px 12px !default;
+$editor-nrml-value-container-padding: 4px 8px 6px 8px !default;
+$editor-big-value-container-spin-padding: 12px !default;
+$editor-nrml-value-container-spin-padding: 10px !default;
+$editor-big-value-margin: 0 32px 0 0 !default;
+$editor-nrml-value-margin: 0 30px 0 0 !default;
+$editor-rtl-big-value-margin: 0 0 0 32px !default;
+$editor-rtl-nrml-value-margin: 0 0 0 30px !default;
+$editor-big-overlay-icon-size: $text-base !default;
+$editor-nrml-overlay-icon-size: $text-sm !default;
+$editor-big-overlay-icon-container-size: 20px !default;
+$editor-nrml-overlay-icon-container-size: 20px !default;
+$editor-big-overlay-icon-left-right: 12px !default;
+$editor-nrml-overlay-icon-left-right: 8px !default;
+$editor-tip-content-bdr-radius: $model-radius !default;
+$editor-popup-tip-content-bdr-radius: 0 !default;
+$editor-popup-tip-wrapper-bdr-radius: 0 !default;
+$editor-tip-title-font-weight: $font-weight-medium !default;
+$editor-big-tip-title-font-size: $text-lg !default;
+$editor-nrml-tip-title-font-size: $text-base !default;
+$editor-big-tip-title-padding: 8px 16px 0 16px !default;
+$editor-nrml-tip-title-padding: 6px 12px 0 12px !default;
+$editor-rtl-big-tip-title-padding: 8px 16px 0 16px !default;
+$editor-rtl-nrml-tip-title-padding: 6px 12px 0 12px !default;
+$editor-big-tip-title-container-size: 28px !default;
+$editor-nrml-tip-title-container-size: 24px !default;
+$editor-big-tip-wrapper-padding: 25px 16px 16px 16px !default;
+$editor-nrml-tip-wrapper-padding: 18px 12px 12px 12px !default;
+$editor-big-wrapper-title-with-padding: 25px 16px 16px 16px !default;
+$editor-nrml-wrapper-title-with-padding: 18px 12px 12px 12px !default;
+$editor-component-bottom-margin: 4px !default;
+$editor-buttons-top-margin: 4px !default;
+$editor-btn-save-icon-size: 12px !default;
+$editor-btn-cancel-icon-size: 12px !default;
+$editor-big-btn-save-margin: 0 6px 0 0 !default;
+$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
+$editor-big-btn-cancel-margin: 0 0 0 6px !default;
+$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-save-margin: 0 0 0 6px !default;
+$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-cancel-margin: 0 6px 0 0 !default;
+$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
+//Layout Variable End
+
+//Theme Variable Start
+$editor-value-hover-bg: $content-bg-color-alt2 !default;
+$editor-value-text-color: $content-text-color !default;
+$editor-overlay-icon-color: $icon-color !default;
+$editor-value-text-border: 1px dashed $content-text-color !default;
+$editor-background-color: $transparent !default;
+$wrapper-background-color: $flyout-bg-color !default;
+$editor-tip-border: none !default;
+$editor-tip-bg: $flyout-bg-color !default;
+$editor-tip-arrow-icon-color: $content-bg-color !default;
+$editor-tip-title-arrow-icon-color: $content-bg-color !default;
+$editor-tip-arrow-bdr-color: $content-bg-color-alt1 !default;
+$editor-tip-title-arrow-bdr-color: $border !default;
+$editor-tip-box-shadow: $shadow-xl !default;
+$editor-tip-title-bg: $content-bg-color !default;
+$editor-tio-title-border-bottom: 0 !default;
+$editor-tip-title-color: $content-text-color !default;
+$editable-overlay-icon-height: inherit !default;
+$editable-overlay-icon: 0 !default;
+$editor-btn-icon-color: $icon-color !default;
+//Theme Variable End

package/styles/inplace-editor/_highcontrast-definition.scss

@@ -35,6 +35,7 @@ $editor-tip-box-shadow: none !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 0 !default;
+$editor-popup-tip-content-bdr-radius: 0 !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 600 !default;

package/styles/inplace-editor/_highcontrast-light-definition.scss

@@ -35,6 +35,7 @@ $editor-tip-box-shadow: none !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 0 !default;
+$editor-popup-tip-content-bdr-radius: 0 !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 600 !default;

package/styles/inplace-editor/_layout.scss

@@ -484,6 +484,9 @@
     &.e-tooltip-wrap {
 
       .e-tip-content {
+        @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' $inplace-skin == 'FluentUI' {
+          padding: 0;
+        }
 
         .e-editable-wrapper {
           padding: $editor-big-tip-wrapper-padding;
@@ -634,10 +637,6 @@
   }
 
   @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
-    .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content {
-      padding: 0;
-    }
-
     .e-control.e-inplaceeditor .e-editable-value-wrapper {
       min-height: 30px;
     }

package/styles/inplace-editor/_material-dark-definition.scss

@@ -36,6 +36,7 @@ $editor-tip-box-shadow: none !default;
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 2px !default;
+$editor-popup-tip-content-bdr-radius: 2px !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 500 !default;

package/styles/inplace-editor/_material-definition.scss

@@ -36,6 +36,7 @@ $editor-tip-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0,
 
 /*! Tip Content styles */
 $editor-tip-content-bdr-radius: 2px !default;
+$editor-popup-tip-content-bdr-radius: 2px !default;
 
 /*! Title styles */
 $editor-tip-title-font-weight: 500 !default;

package/styles/inplace-editor/_tailwind-definition.scss

@@ -17,6 +17,7 @@ $editor-nrml-overlay-icon-container-size: 20px !default;
 $editor-big-overlay-icon-left-right: 8px !default;
 $editor-nrml-overlay-icon-left-right: 8px !default;
 $editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
 $editor-tip-title-font-weight: 500 !default;
 $editor-big-tip-title-font-size: $text-sm !default;
 $editor-nrml-tip-title-font-size: $text-xs !default;

package/styles/inplace-editor/_theme.scss

@@ -184,9 +184,12 @@
     &.e-tooltip-wrap.e-popup {
       background: $editor-tip-bg;
       box-shadow: $editor-tip-box-shadow;
+      @if $inplace-skin == 'FluentUI' {
+        border-radius: $editor-popup-tip-wrapper-bdr-radius;
+      }
 
       .e-tip-content {
-        border-radius: $editor-tip-content-bdr-radius;
+        border-radius: $editor-popup-tip-content-bdr-radius;
         color: $editor-value-text-color;
       }
 

package/styles/inplace-editor/bootstrap-dark.css

@@ -615,6 +615,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 12px;

package/styles/inplace-editor/bootstrap.css

@@ -760,6 +760,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 12px;

package/styles/inplace-editor/bootstrap4.css

@@ -1001,6 +1001,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 16px;

package/styles/inplace-editor/bootstrap5-dark.css

@@ -63,7 +63,6 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
-  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
@@ -91,6 +90,13 @@
   color: #adb5bd;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -153,7 +159,7 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 2px 2px 0;
   border-right-width: 0;
 }
 
@@ -638,6 +644,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 16px;
@@ -774,10 +785,6 @@
   border-radius: 4px;
 }
 
-.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content {
-  padding: 0;
-}
-
 .e-control.e-inplaceeditor .e-editable-value-wrapper {
   min-height: 30px;
 }

package/styles/inplace-editor/bootstrap5.css

@@ -63,7 +63,6 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
-  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
@@ -91,6 +90,13 @@
   color: #6c757d;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -153,7 +159,7 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 2px 2px 0;
   border-right-width: 0;
 }
 
@@ -638,6 +644,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 16px;
@@ -774,10 +785,6 @@
   border-radius: 4px;
 }
 
-.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content {
-  padding: 0;
-}
-
 .e-control.e-inplaceeditor .e-editable-value-wrapper {
   min-height: 30px;
 }

package/styles/inplace-editor/fabric-dark.css

@@ -569,6 +569,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 12px;

package/styles/inplace-editor/fabric.css

@@ -563,6 +563,11 @@
   transform: translateX(30%) translateY(-50%);
 }
 
+.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
+.e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content {
+  padding: 0;
+}
+
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper,
 .e-inplaceeditor-tip.e-bigger.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
   padding: 12px;