@syncfusion/ej2-inplace-editor 25.2.3 → 26.2.4

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

@@ -0,0 +1,71 @@
+//Layout Variable Start
+$skin-name: 'fluent2' !default;
+$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 7px 12px !default;
+$editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
+$editor-big-value-container-spin-padding: 8px !default;
+$editor-nrml-value-container-spin-padding: 8px !default;
+$editor-big-value-margin: 0 30px 0 0 !default;
+$editor-nrml-value-margin: 0 28px 0 0 !default;
+$editor-rtl-big-value-margin: 0 0 0  30px !default;
+$editor-rtl-nrml-value-margin: 0 0 0 28px !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: 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;
+$editor-big-tip-title-padding: 7px 16px 7px 16px !default;
+$editor-nrml-tip-title-padding: 6px 12px 6px 12px !default;
+$editor-rtl-big-tip-title-padding: 7px 16px 7px 16px !default;
+$editor-rtl-nrml-tip-title-padding: 6px 12px 6px 12px !default;
+$editor-big-tip-title-container-size: 36px !default;
+$editor-nrml-tip-title-container-size: 30px !default;
+$editor-big-tip-wrapper-padding: 16px !default;
+$editor-nrml-tip-wrapper-padding: 12px !default;
+$editor-big-wrapper-title-with-padding: 16px !default;
+$editor-nrml-wrapper-title-with-padding: 12px !default;
+$editor-component-bottom-margin: 4px !default;
+$editor-buttons-top-margin: 4px !default;
+$editor-btn-save-icon-size: 16px !default;
+$editor-btn-cancel-icon-size: 16px !default;
+$editor-big-btn-save-margin: 0 4px 0 0 !default;
+$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
+$editor-big-btn-cancel-margin: 0 0 0 4px !default;
+$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-cancel-margin: 0 4px 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;
+$content-text-color: $content-text-color !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: 1px solid $border-light !default;
+$editor-tip-bg: $flyout-bg-color !default;
+$editor-tip-arrow-icon-color: $flyout-bg-color !default;
+$editor-tip-title-arrow-icon-color:  $content-bg-color-alt2 !default;
+$editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
+$editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
+$editor-tip-box-shadow: $shadow-lg !default;
+$editor-tip-title-bg: transparent !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/_layout.scss

@@ -1,10 +1,6 @@
 @include export-module('inplaceeditor-layout') {
-
-  /*! inplaceeditor layout */
-
   .e-bigger .e-inplaceeditor,
   .e-inplaceeditor.e-bigger {
-
     .e-editable-value-wrapper {
       padding: $editor-big-value-container-padding;
 
@@ -61,9 +57,7 @@
     }
 
     &.e-rtl {
-
       .e-editable-value-wrapper {
-
         .e-editable-value {
           margin: $editor-rtl-big-value-margin;
         }
@@ -80,7 +74,6 @@
       }
 
       .e-editable-value-container {
-
         .e-editable-value {
           margin: $editor-rtl-big-value-margin;
         }
@@ -97,7 +90,6 @@
       }
 
       .e-editable-action-buttons {
-
         .e-btn-save {
           margin: $editor-rtl-big-btn-save-margin;
         }
@@ -178,7 +170,6 @@
       }
 
       &:hover {
-
         .e-editable-overlay-icon {
           visibility: visible;
         }
@@ -246,13 +237,11 @@
       }
 
       &:hover {
-
         .e-editable-overlay-icon {
           visibility: visible;
         }
 
         &.e-editable-open {
-
           .e-editable-overlay-icon {
             visibility: hidden;
           }
@@ -272,9 +261,7 @@
     }
 
     &.e-rtl {
-
       .e-editable-value-wrapper {
-
         .e-editable-value {
           margin: $editor-rtl-nrml-value-margin;
         }
@@ -295,7 +282,6 @@
       }
 
       .e-editable-value-container {
-
         .e-editable-value {
           margin: $editor-rtl-nrml-value-margin;
         }
@@ -329,7 +315,6 @@
     width: auto;
 
     .e-input-group + .e-editable-loading {
-
       @if $skin-name == 'material' {
         .e-spinner-inner {
           top: 45%;
@@ -338,12 +323,9 @@
     }
 
     .e-editable-action-buttons {
-
       .e-btn-save,
       .e-btn-cancel {
-
         .e-btn-icon.e-icons {
-
           @if $skin-name == 'bootstrap4' {
             font-size: 16px;
           }
@@ -354,9 +336,7 @@
 
   .e-inplaceeditor,
   .e-inplaceeditor-tip {
-
     .e-input-group + .e-editable-loading {
-
       @if $skin-name == 'material' {
         .e-spinner-inner {
           top: 35%;
@@ -365,14 +345,12 @@
     }
 
     .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading {
-
       .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
         stroke-width: inherit;
       }
     }
 
     .e-input-group + .e-editable-loading {
-
       @if $skin-name == 'material' {
         .e-spinner-inner {
           top: 35%;
@@ -381,7 +359,6 @@
     }
 
     .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading {
-
       .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
         stroke-width: inherit;
       }
@@ -408,7 +385,6 @@
       width: 100%;
 
       &.e-loading {
-
         .e-input-group-icon {
           visibility: hidden;
         }
@@ -436,7 +412,6 @@
     }
 
     .e-editable-action-buttons {
-
       .e-btn-save {
         margin: $editor-nrml-btn-save-margin;
 
@@ -459,9 +434,7 @@
     }
 
     &.e-rtl {
-
       .e-editable-action-buttons {
-
         .e-btn-save {
           margin: $editor-rtl-nrml-btn-save-margin;
         }
@@ -481,9 +454,7 @@
 
   .e-bigger .e-inplaceeditor-tip,
   .e-inplaceeditor-tip.e-bigger {
-
     &.e-tooltip-wrap {
-
       .e-tip-content {
         @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' $skin-name == 'FluentUI' {
           padding: 0;
@@ -514,9 +485,7 @@
     }
 
     &.e-rtl {
-
       &.e-tooltip-wrap .e-tip-content {
-
         .e-editable-title {
           padding: $editor-rtl-big-tip-title-padding;
         }
@@ -593,22 +562,18 @@
     }
 
     &.e-rtl {
-
       &.e-tooltip-wrap .e-tip-content {
-
         .e-editable-title {
           padding: $editor-rtl-nrml-tip-title-padding;
         }
 
         .e-editable-wrapper {
-
           .e-editable-action-buttons {
             float: left;
           }
         }
 
         .e-editable-container {
-
           .e-editable-action-buttons {
             float: left;
           }

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

@@ -1,4 +1,3 @@
-//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: 8px 36px 8px 16px !default;
@@ -43,10 +42,6 @@ $editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
 $editor-rtl-nrml-btn-save-margin: 0 0 0 6px !default;
 $editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
 $editor-rtl-nrml-btn-cancel-margin: 0 6px 0 0 !default;
-
-//Layout Variable End
-
-//Theme Variable Start
 $editor-value-hover-bg: $content-bg-color-alt2 !default;
 $editor-value-text-color: rgba($content-text-color) !default;
 $editor-overlay-icon-color: rgba($icon-color) !default;
@@ -66,5 +61,3 @@ $editor-tip-title-color: rgba($content-text-color) !default;
 $editable-overlay-icon-height: inherit !default;
 $editable-overlay-icon: 0 !default;
 $editor-btn-icon-color: rgba($icon-color) !default;
-
-//Theme Variable End

package/styles/inplace-editor/_theme.scss

@@ -1,11 +1,6 @@
 @include export-module('inplaceeditor-theme') {
-
-  /*! inplaceeditor theme */
-
   .e-inplaceeditor {
-
     .e-editable-value-wrapper {
-
       .e-editable-value {
         border-bottom: $editor-value-text-border;
         color: $editor-value-text-color;
@@ -16,7 +11,6 @@
       }
 
       &.e-loading {
-
         .e-editable-value {
           border-bottom: 0;
         }
@@ -33,7 +27,6 @@
     }
 
     .e-editable-value-container {
-
       .e-editable-value {
         border-bottom: $editor-value-text-border;
         color: $editor-value-text-color;
@@ -44,7 +37,6 @@
       }
 
       &.e-loading {
-
         .e-editable-value {
           border-bottom: 0;
         }
@@ -61,16 +53,13 @@
     }
 
     &[data-underline = 'false'] {
-
       .e-editable-value-wrapper {
-
         .e-editable-value {
           border-bottom: 0;
         }
       }
 
       .e-editable-value-container {
-
         .e-editable-value {
           border-bottom: 0;
         }
@@ -82,14 +71,12 @@
       touch-action: none;
 
       .e-editable-value-wrapper {
-
         .e-editable-value {
           border-bottom-color: transparent;
         }
       }
 
       .e-editable-value-container {
-
         .e-editable-value {
           border-bottom-color: transparent;
         }
@@ -99,9 +86,7 @@
 
   .e-inplaceeditor,
   .e-inplaceeditor-tip {
-
     .e-editable-action-buttons {
-
       .e-btn-save.e-icon-btn,
       .e-btn-cancel.e-icon-btn {
 
@@ -131,7 +116,6 @@
         }
 
         @if $skin-name == 'bootstrap4' {
-
           &:hover {
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
@@ -144,7 +128,6 @@
           }
         }
         @else if $skin-name == 'bootstrap5' {
-
           &:hover {
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
@@ -158,7 +141,6 @@
         }
 
         @if $skin-name == 'bootstrap4' {
-
           &:focus {
             background-color: $gray-600;
             border: 1px solid $gray-600;
@@ -166,7 +148,6 @@
         }
 
         @if $skin-name == 'bootstrap4' {
-
           &:active {
             background-color: darken($gray-600, 10%);
             border: 1px solid darken($gray-600, 12.5%);
@@ -175,9 +156,7 @@
 
         &:hover,
         &:active {
-
           .e-btn-icon.e-icons {
-
             @if $skin-name == 'bootstrap4' or $skin-name =='bootstrap5' {
               color: $white;
             }
@@ -185,9 +164,7 @@
         }
 
         &:focus {
-
           .e-btn-icon.e-icons {
-
             @if $skin-name == 'bootstrap4' {
               color: $white;
             }
@@ -209,7 +186,6 @@
   }
 
   .e-inplaceeditor-tip {
-
     &.e-tooltip-wrap.e-popup {
       background: $editor-tip-bg;
       box-shadow: $editor-tip-box-shadow;
@@ -230,7 +206,6 @@
       }
 
       .e-arrow-tip-outer {
-
         &.e-tip-top {
           border-bottom-color: $editor-tip-arrow-bdr-color;
         }
@@ -248,25 +223,26 @@
       }
 
       .e-editable-title {
-        background: $editor-tip-title-bg;
-        border-bottom: $editor-tio-title-border-bottom;
-        color: $editor-tip-title-color;
+        @if $skin-name != 'fluent2' {
+          background: $editor-tip-title-bg;
+          border-bottom: $editor-tio-title-border-bottom;
+          color: $editor-tip-title-color;
+        }
+        @else {
+          color: $editor-tip-title-color;
+        }
       }
     }
 
     &.e-editable-tip-title {
-
       &.e-tooltip-wrap {
-
         .e-arrow-tip-outer {
-
           &.e-tip-top {
             border-bottom-color: $editor-tip-title-arrow-bdr-color;
           }
         }
 
         .e-arrow-tip-inner {
-
           &.e-tip-top {
             color: $editor-tip-title-arrow-icon-color;
           }

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

@@ -2,7 +2,8 @@
 /* stylelint-disable-line no-empty-source */
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -17,6 +18,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -75,7 +77,8 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-filter-parent {
@@ -143,19 +146,43 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -192,7 +219,6 @@
   content: "\e338";
 }
 
-/*! inplaceeditor layout */
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
   padding: 8px 12px;
@@ -313,6 +339,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -323,8 +350,10 @@
   width: 18px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -334,6 +363,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -366,6 +396,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -376,8 +407,10 @@
   width: 18px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -387,6 +420,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -411,6 +445,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -476,7 +511,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -504,6 +540,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -540,7 +577,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -592,19 +630,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 14px;
   font-weight: 700;
   height: 30px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 0 0 0 12px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 12px;
@@ -617,6 +660,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 12px;
@@ -658,7 +702,6 @@
   min-height: 70px;
 }
 
-/*! inplaceeditor theme */
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
   border-bottom: 1px dashed #f0f0f0;
   color: #f0f0f0;
@@ -715,7 +758,8 @@
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons,
@@ -725,7 +769,8 @@
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #2a2a2a;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 4px;