@syncfusion/ej2-inplace-editor 28.2.3 → 29.1.33

package/README.md

@@ -2,7 +2,7 @@
 
 ![ej2-inplace-editor](https://ej2.syncfusion.com/products/images/inplace-editor/readMe.gif)
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).
 
 > A free [community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
@@ -44,7 +44,7 @@ In-place Editor component is also offered in following list of frameworks.
 
 Product support is available for through following mediums.
 
-* Creating incident in Syncfusion<sup>®</sup> [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=grid) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=grid).
+* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=grid) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=grid).
 * New [GitHub issue](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new).
 * Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
 

package/dist/ej2-inplace-editor.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-inplace-editor.min.js
-*  version : 28.2.3
+*  version : 29.1.33
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-inplace-editor.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-inplace-editor.umd.min.js
-*  version : 28.2.3
+*  version : 29.1.33
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/ej2-inplace-editor.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-inplace-editor.min.js
-*  version : 28.2.3
+*  version : 29.1.33
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.3
+*  version : 29.1.33
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inplace-editor@*",
-  "_id": "@syncfusion/ej2-inplace-editor@28.1.33",
+  "_id": "@syncfusion/ej2-inplace-editor@21.3.7",
   "_inBundle": false,
-  "_integrity": "sha512-KGLq4OOvyCTxngWDRnusWO+xmNOhLduK2SoL+5y6lawiLE2EeO2E7rBF/1eCuDl/os3d5qWGxjlVwUJPlRFONw==",
+  "_integrity": "sha512-bd/779f6WwnBq13ouNi3oCodRo6FwHIOnU5Ai8VIjZWTy4L+KOPaSoFxjWttd4g8QXAG0e4dmlnl3g2bU8nQlw==",
   "_location": "/@syncfusion/ej2-inplace-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -24,10 +24,10 @@
     "/@syncfusion/ej2-react-inplace-editor",
     "/@syncfusion/ej2-vue-inplace-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-inplace-editor/-/ej2-inplace-editor-28.1.33.tgz",
-  "_shasum": "76e81d1665fee3ccfb93b481b7d8f6ad2703fa4c",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-inplace-editor/-/ej2-inplace-editor-21.3.7.tgz",
+  "_shasum": "c259f4be48131673f24d22ad1e926d8941550587",
   "_spec": "@syncfusion/ej2-inplace-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -36,18 +36,18 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.3",
-    "@syncfusion/ej2-buttons": "~28.2.3",
-    "@syncfusion/ej2-calendars": "~28.2.3",
-    "@syncfusion/ej2-data": "~28.2.3",
-    "@syncfusion/ej2-dropdowns": "~28.2.3",
-    "@syncfusion/ej2-inputs": "~28.2.3",
-    "@syncfusion/ej2-lists": "~28.2.3",
-    "@syncfusion/ej2-navigations": "~28.2.3",
-    "@syncfusion/ej2-notifications": "~28.2.3",
-    "@syncfusion/ej2-popups": "~28.2.3",
-    "@syncfusion/ej2-richtexteditor": "~28.2.3",
-    "@syncfusion/ej2-splitbuttons": "~28.2.3"
+    "@syncfusion/ej2-base": "~29.1.33",
+    "@syncfusion/ej2-buttons": "~29.1.33",
+    "@syncfusion/ej2-calendars": "~29.1.33",
+    "@syncfusion/ej2-data": "~29.1.33",
+    "@syncfusion/ej2-dropdowns": "~29.1.33",
+    "@syncfusion/ej2-inputs": "~29.1.33",
+    "@syncfusion/ej2-lists": "~29.1.33",
+    "@syncfusion/ej2-navigations": "~29.1.33",
+    "@syncfusion/ej2-notifications": "~29.1.33",
+    "@syncfusion/ej2-popups": "~29.1.33",
+    "@syncfusion/ej2-richtexteditor": "~29.1.33",
+    "@syncfusion/ej2-splitbuttons": "~29.1.33"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server.",
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "28.2.3",
+  "version": "29.1.33",
   "sideEffects": false
 }

package/styles/bootstrap5-dark-lite.css

@@ -656,19 +656,19 @@
   color: #fff;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
-  color: #282d31;
+  color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top {
-  border-bottom-color: #282d31;
+  border-bottom-color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-bottom {
-  border-top-color: #282d31;
+  border-top-color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup.e-popup {
   border: 1px solid #6c757d;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
-  background: #282d31;
+  background: #1a1d21;
   border-bottom: 0;
   color: #fff;
 }
@@ -676,5 +676,5 @@
   border-bottom-color: #6c757d;
 }
 .e-inplaceeditor-tip.e-editable-tip-title.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
-  color: #282d31;
+  color: #1a1d21;
 }

package/styles/bootstrap5-dark.css

@@ -656,19 +656,19 @@
   color: #fff;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
-  color: #282d31;
+  color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top {
-  border-bottom-color: #282d31;
+  border-bottom-color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-bottom {
-  border-top-color: #282d31;
+  border-top-color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup.e-popup {
   border: 1px solid #6c757d;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
-  background: #282d31;
+  background: #1a1d21;
   border-bottom: 0;
   color: #fff;
 }
@@ -676,17 +676,17 @@
   border-bottom-color: #6c757d;
 }
 .e-inplaceeditor-tip.e-editable-tip-title.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
-  color: #282d31;
+  color: #1a1d21;
 }
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -703,12 +703,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/bootstrap5.3.css

@@ -685,12 +685,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -707,12 +707,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/bootstrap5.css

@@ -681,12 +681,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -703,12 +703,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/fluent-dark.css

@@ -628,12 +628,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -650,12 +650,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/fluent.css

@@ -628,12 +628,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -650,12 +650,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/fluent2.css

@@ -796,12 +796,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 38px 10px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -818,12 +818,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 38px 10px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/highcontrast.css

@@ -665,12 +665,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 8px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 15px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -687,12 +687,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 8px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 15px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! Bootstrap4 theme definitions and variables */
 /*! Value element styles */
 $black-color: rgba($black, .25) !default;
@@ -17,7 +19,7 @@ $editor-big-overlay-icon-container-size: 20px !default;
 $editor-nrml-overlay-icon-container-size: 18px !default;
 $editor-big-overlay-icon-left-right: 12px !default;
 $editor-nrml-overlay-icon-left-right: 10px !default;
-$editor-value-hover-bg: darken($gray-100, 2%) !default;
+$editor-value-hover-bg: color.adjust($gray-100, $lightness: -2%) !default;
 $editor-value-text-color: $gray-700 !default;
 $editor-overlay-icon-color: $gray-700 !default;
 $editor-value-text-border: 1px dashed $gray-700 !default;
@@ -28,7 +30,7 @@ $editable-overlay-icon: 0 !default;
 $editor-tip-border: 1px solid rgba($black, .2) !default;
 $editor-tip-bg: $content-bg !default;
 $editor-tip-arrow-icon-color: $content-bg !default;
-$editor-tip-title-arrow-icon-color: darken($gray-100, 2%) !default;
+$editor-tip-title-arrow-icon-color: color.adjust($gray-100, $lightness: -2%) !default;
 $editor-tip-arrow-bdr-color: rgba($black, .2) !default;
 $editor-tip-title-arrow-bdr-color: rgba($black, .2) !default;
 $editor-tip-box-shadow: none !default;
@@ -48,7 +50,7 @@ $editor-rtl-nrml-tip-title-padding: 0 14px 0 0 !default;
 $editor-big-tip-title-container-size: 36px !default;
 $editor-nrml-tip-title-container-size: 31px !default;
 $editor-tio-title-border-bottom: 0 !default;
-$editor-tip-title-bg: darken($gray-100, 2%) !default;
+$editor-tip-title-bg: color.adjust($gray-100, $lightness: -2%) !default;
 $editor-tip-title-color: $gray-900 !default;
 
 /*! Wrapper styles */

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

@@ -1,11 +1,11 @@
 //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 7px 12px !default;
+$editor-big-value-container-padding: 7px 48px 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-big-value-margin: 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;

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

@@ -1,11 +1,11 @@
 //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 7px 12px !default;
+$editor-big-value-container-padding: 7px 48px 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-big-value-margin: 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;

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

@@ -1,11 +1,11 @@
 //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-big-value-container-padding: 8px 36px 8px 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-big-value-margin: 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;

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

@@ -2,11 +2,11 @@
 $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-big-value-container-padding: 8px 38px 10px 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-big-value-margin: 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;

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

@@ -2,11 +2,11 @@
 /*! Value element styles */
 $editor-big-value-text-font-size: 15px !default;
 $editor-nrml-value-text-font-size: 14px !default;
-$editor-big-value-container-padding: 8px 12px !default;
+$editor-big-value-container-padding: 8px 36px 8px 12px !default;
 $editor-nrml-value-container-padding: 6px 10px !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-big-value-margin: 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;

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

@@ -1,11 +1,11 @@
 //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 7px 12px !default;
+$editor-big-value-container-padding: 8px 36px 8px 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-big-value-margin: 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;

package/styles/inplace-editor/_theme.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @include export-module('inplaceeditor-theme') {
   .e-inplaceeditor {
     .e-editable-value-wrapper {
@@ -117,8 +119,8 @@
 
         @if $skin-name == 'bootstrap4' {
           &:hover {
-            background-color: darken($gray-600, 7.5%);
-            border: 1px solid darken($gray-600, 10%);
+            background-color: color.adjust($gray-600, $lightness: -7.5%);
+            border: 1px solid color.adjust($gray-600, $lightness: -10%);
           }
 
           &:disabled {
@@ -129,8 +131,8 @@
         }
         @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           &:hover {
-            background-color: darken($gray-600, 7.5%);
-            border: 1px solid darken($gray-600, 10%);
+            background-color: color.adjust($gray-600, $lightness: -7.5%);
+            border: 1px solid color.adjust($gray-600, $lightness: -10%);
           }
 
           &:disabled{
@@ -149,8 +151,8 @@
 
         @if $skin-name == 'bootstrap4' {
           &:active {
-            background-color: darken($gray-600, 10%);
-            border: 1px solid darken($gray-600, 12.5%);
+            background-color: color.adjust($gray-600, $lightness: -10%);
+            border: 1px solid color.adjust($gray-600, $lightness: -12.5%);
           }
         }
 

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

@@ -656,19 +656,19 @@
   color: #fff;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
-  color: #282d31;
+  color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top {
-  border-bottom-color: #282d31;
+  border-bottom-color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-bottom {
-  border-top-color: #282d31;
+  border-top-color: #1a1d21;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup.e-popup {
   border: 1px solid #6c757d;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
-  background: #282d31;
+  background: #1a1d21;
   border-bottom: 0;
   color: #fff;
 }
@@ -676,17 +676,17 @@
   border-bottom-color: #6c757d;
 }
 .e-inplaceeditor-tip.e-editable-tip-title.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
-  color: #282d31;
+  color: #1a1d21;
 }
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -703,12 +703,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

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

@@ -685,12 +685,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -707,12 +707,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/inplace-editor/bootstrap5.css

@@ -681,12 +681,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -703,12 +703,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 7px 48px 7px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

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

@@ -628,12 +628,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -650,12 +650,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/inplace-editor/fluent.css

@@ -628,12 +628,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -650,12 +650,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 9px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/inplace-editor/fluent2.css

@@ -796,12 +796,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 38px 10px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -818,12 +818,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 38px 10px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/inplace-editor/highcontrast.css

@@ -665,12 +665,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 8px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 15px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -687,12 +687,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 8px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 15px;
-  margin: 0 32px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/inplace-editor/tailwind3.css

@@ -644,12 +644,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -666,12 +666,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {

package/styles/tailwind3.css

@@ -644,12 +644,12 @@
 
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper .e-editable-overlay-icon {
@@ -666,12 +666,12 @@
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container,
 .e-inplaceeditor.e-bigger .e-editable-value-container {
-  padding: 7px 12px 7px 12px;
+  padding: 8px 36px 8px 12px;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-value,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-value {
   font-size: 16px;
-  margin: 0 30px 0 0;
+  margin: 0;
 }
 .e-bigger .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon,
 .e-inplaceeditor.e-bigger .e-editable-value-container .e-editable-overlay-icon {