@syncfusion/ej2-inplace-editor 19.3.45 → 19.4.38

package/dist/ts/inplace-editor/modules/rte.ts

@@ -0,0 +1,72 @@
+import { RichTextEditor, RichTextEditorModel, HtmlEditor } from '@syncfusion/ej2-richtexteditor';
+import { MarkdownEditor, Toolbar, Link, Image, QuickToolbar, Table, FileManager } from '@syncfusion/ej2-richtexteditor';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `RTE` module is used configure the properties of RTE type editor.
+ */
+export class Rte implements IComponent {
+    private base: Base;
+    protected parent: InPlaceEditor;
+    public compObj: RichTextEditor = undefined;
+
+    public constructor(parent?: InPlaceEditor) {
+        RichTextEditor.Inject(HtmlEditor, MarkdownEditor, Toolbar, Link, Image, QuickToolbar, Table, FileManager);
+        this.parent = parent;
+        this.parent.rteModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        this.compObj = new RichTextEditor(this.parent.model as RichTextEditorModel);
+        this.compObj.appendTo(e.target);
+    }
+
+    public focus(): void {
+        this.compObj.focusIn();
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'RTE') {
+            this.parent.setProperties({ value: this.getRteValue() }, true);
+            this.parent.extendModelValue(this.compObj.value);
+        }
+    }
+
+    private getRteValue(): string {
+        let rteVal: string;
+        if (this.compObj.editorMode === 'Markdown') {
+            rteVal = (this.compObj.contentModule.getEditPanel() as HTMLTextAreaElement).value;
+            return (rteVal === '') ? '' : rteVal;
+        } else {
+            rteVal = this.compObj.contentModule.getEditPanel().innerHTML;
+            return (rteVal === '<p><br></p>' || rteVal === '&lt;p&gt;&lt;br&gt;&lt;/p&gt;' || rteVal === '') ? '' : rteVal;
+        }
+    }
+
+    public refresh(): void {
+        this.compObj.refresh();
+    }
+
+    /**
+     * Destroys the rte module.
+     *
+     * @function destroy
+     * @returns {void}
+     * @hidden
+     */
+    public destroy(): void {
+        this.base.destroy();
+    }
+
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the string
+     */
+    private getModuleName(): string {
+        return 'rte';
+    }
+}

package/dist/ts/inplace-editor/modules/slider.ts

@@ -0,0 +1,59 @@
+import { Slider as EJ2Slider, SliderModel } from '@syncfusion/ej2-inputs';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `Slider` module is used configure the properties of Slider type editor.
+ */
+export class Slider implements IComponent {
+    private base: Base;
+    protected parent: InPlaceEditor;
+    public compObj: EJ2Slider = undefined;
+
+    public constructor(parent?: InPlaceEditor) {
+        this.parent = parent;
+        this.parent.sliderModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        this.compObj = new EJ2Slider(this.parent.model as SliderModel);
+        this.compObj.appendTo(e.target as HTMLInputElement);
+    }
+
+    public focus(): void {
+        this.compObj.element.focus();
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'Slider') {
+            this.parent.setProperties({ value: this.compObj.value }, true);
+            this.parent.extendModelValue(this.compObj.value);
+        }
+    }
+
+    public refresh(): void {
+        this.compObj.refresh();
+    }
+
+    /**
+     * Destroys the slider module.
+     *
+     * @function destroy
+     * @returns {void}
+     * @hidden
+     */
+    public destroy(): void {
+        this.base.destroy();
+    }
+
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the string
+     */
+    private getModuleName(): string {
+        return 'slider';
+    }
+}

package/dist/ts/inplace-editor/modules/time-picker.ts

@@ -0,0 +1,54 @@
+import { TimePicker as EJ2TimePicker, TimePickerModel } from '@syncfusion/ej2-calendars';
+import { Base } from './base-module';
+import { InPlaceEditor } from '../base/inplace-editor';
+import { NotifyParams, IComponent } from '../base/interface';
+
+/**
+ * The `TimePicker` module is used configure the properties of Time picker type editor.
+ */
+export class TimePicker implements IComponent {
+    private base: Base;
+    protected parent: InPlaceEditor;
+    public compObj: EJ2TimePicker = undefined;
+
+    public constructor(parent?: InPlaceEditor) {
+        this.parent = parent;
+        this.parent.timeModule = this;
+        this.base = new Base(this.parent, this);
+    }
+
+    public render(e: NotifyParams): void {
+        this.compObj = new EJ2TimePicker(this.parent.model as TimePickerModel);
+        this.compObj.appendTo(e.target as HTMLInputElement);
+    }
+
+    public focus(): void {
+        this.compObj.focusIn();
+    }
+
+    public updateValue(e: NotifyParams): void {
+        if (this.compObj && e.type === 'Time') {
+            this.parent.setProperties({ value: this.compObj.value }, true);
+            this.parent.extendModelValue(this.compObj.value);
+        }
+    }
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the string
+     */
+    private getModuleName(): string {
+        return 'time-picker';
+    }
+
+    /**
+     * Destroys the module.
+     *
+     * @function destroy
+     * @returns {void}
+     * @hidden
+     */
+    public destroy(): void {
+        this.base.destroy();
+    }
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inplace-editor@*",
-  "_id": "@syncfusion/ej2-inplace-editor@18.20.0",
+  "_id": "@syncfusion/ej2-inplace-editor@19.7.0",
   "_inBundle": false,
-  "_integrity": "sha512-F8DYnytuo4nkwioxQ4PWHFQnsgGufMp3aPNMp5NY0MZgOXVhnHnZNq2xuabkc2Ahhjwo0A1fU7vgl5BbYv/vVg==",
+  "_integrity": "sha512-LxMyNbD9SXdROkhXZMTi8Czai6mgXu3eU5VqgPMNrpDnaE3QBlFKBew3lrT1fk6daGbMEDEmMbPzwDIFCp1mWw==",
   "_location": "/@syncfusion/ej2-inplace-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-inplace-editor",
     "/@syncfusion/ej2-vue-inplace-editor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-inplace-editor/-/ej2-inplace-editor-18.20.0.tgz",
-  "_shasum": "e42872f75242d0439e5e23c25bdf575884f696ed",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inplace-editor/-/ej2-inplace-editor-19.7.0.tgz",
+  "_shasum": "edc2942e227fadc1720f7cfad729f48d38493206",
   "_spec": "@syncfusion/ej2-inplace-editor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,17 +36,17 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-buttons": "~19.3.44",
-    "@syncfusion/ej2-calendars": "~19.3.44",
-    "@syncfusion/ej2-data": "~19.3.44",
-    "@syncfusion/ej2-dropdowns": "~19.3.45",
-    "@syncfusion/ej2-inputs": "~19.3.44",
-    "@syncfusion/ej2-lists": "~19.3.45",
-    "@syncfusion/ej2-navigations": "~19.3.45",
-    "@syncfusion/ej2-popups": "~19.3.43",
-    "@syncfusion/ej2-richtexteditor": "~19.3.45",
-    "@syncfusion/ej2-splitbuttons": "~19.3.45"
+    "@syncfusion/ej2-base": "~19.4.38",
+    "@syncfusion/ej2-buttons": "~19.4.38",
+    "@syncfusion/ej2-calendars": "~19.4.38",
+    "@syncfusion/ej2-data": "~19.4.38",
+    "@syncfusion/ej2-dropdowns": "~19.4.38",
+    "@syncfusion/ej2-inputs": "~19.4.38",
+    "@syncfusion/ej2-lists": "~19.4.38",
+    "@syncfusion/ej2-navigations": "~19.4.38",
+    "@syncfusion/ej2-popups": "~19.4.38",
+    "@syncfusion/ej2-richtexteditor": "~19.4.38",
+    "@syncfusion/ej2-splitbuttons": "~19.4.38"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server.",
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.45",
+  "version": "19.4.38",
   "sideEffects": false
 }

package/src/inplace-editor/base/inplace-editor.d.ts

@@ -127,6 +127,7 @@ export declare class InPlaceEditor extends Component<HTMLElement> implements INo
     private compPrevValue;
     private moduleList;
     private afterOpenEvent;
+    private onScrollResizeHandler;
     /**
      * @hidden
      */

package/src/inplace-editor/base/inplace-editor.js

@@ -85,6 +85,7 @@ var InPlaceEditor = /** @class */ (function (_super) {
      * @private
      */
     InPlaceEditor.prototype.preRender = function () {
+        this.onScrollResizeHandler = this.scrollResizeHandler.bind(this);
         if (isNOU(this.model)) {
             this.setProperties({ model: {} }, true);
         }
@@ -942,8 +943,8 @@ var InPlaceEditor = /** @class */ (function (_super) {
         this.wireEditEvent(this.editableOn);
         EventHandler.add(this.editIcon, 'click', this.clickHandler, this);
         EventHandler.add(this.element, 'keydown', this.valueKeyDownHandler, this);
-        EventHandler.add(document, 'scroll', this.scrollResizeHandler, this);
-        window.addEventListener('resize', this.scrollResizeHandler.bind(this));
+        document.addEventListener('scroll', this.onScrollResizeHandler);
+        window.addEventListener('resize', this.onScrollResizeHandler);
         if (Array.prototype.indexOf.call(this.clearComponents, this.type) > -1) {
             EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);
         }
@@ -985,8 +986,8 @@ var InPlaceEditor = /** @class */ (function (_super) {
     InPlaceEditor.prototype.unWireEvents = function () {
         this.unWireEditEvent(this.editableOn);
         EventHandler.remove(this.editIcon, 'click', this.clickHandler);
-        EventHandler.remove(document, 'scroll', this.scrollResizeHandler);
-        window.removeEventListener('resize', this.scrollResizeHandler.bind(this));
+        document.removeEventListener('scroll', this.onScrollResizeHandler);
+        window.removeEventListener('resize', this.onScrollResizeHandler);
         EventHandler.remove(this.element, 'keydown', this.valueKeyDownHandler);
         if (Array.prototype.indexOf.call(this.clearComponents, this.type) > -1) {
             EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);
@@ -1118,6 +1119,7 @@ var InPlaceEditor = /** @class */ (function (_super) {
         if (!closest(e.target, '.' + classes.INPUT + ' .e-richtexteditor')) {
             if ((e.keyCode === 13 && e.which === 13) && closest(e.target, '.' + classes.INPUT)) {
                 this.save();
+                this.trigger('submitClick', e);
             }
             else if (e.keyCode === 27 && e.which === 27) {
                 this.cancelHandler('cancel');

package/styles/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/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/bootstrap4.css

@@ -85,6 +85,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -996,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/bootstrap5-dark.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -632,6 +637,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;
@@ -768,10 +778,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/bootstrap5.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -632,6 +637,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;
@@ -768,10 +778,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/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/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;

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-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: 16px !default;
+$editor-btn-cancel-icon-size: 16px !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: $content-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-md !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;