@syncfusion/ej2-inplace-editor 21.1.37 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.1.37
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@21.1.35",
+  "_id": "@syncfusion/ej2-inplace-editor@21.2.2",
   "_inBundle": false,
-  "_integrity": "sha512-KLSITPYFK8hlrFzVSlGCbK+TLYsb1uHQ/l6mYmmLti4O1B/IyXOIg8BbbbATzuzFwpU9W+EWB7sseNFdf4QzVw==",
+  "_integrity": "sha512-vuCLFNueXYgrh2TOZqMOz8RyOl3hYfn3VX5Mn/ENltAytZanR/BETQ3aqNAILDv4Q4s5hLVE+IRUzfVQuBvNYw==",
   "_location": "/@syncfusion/ej2-inplace-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-inplace-editor",
     "/@syncfusion/ej2-vue-inplace-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inplace-editor/-/ej2-inplace-editor-21.1.35.tgz",
-  "_shasum": "7125dde1a3b03644290ff87f62ceed9e53c3442b",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inplace-editor/-/ej2-inplace-editor-21.2.2.tgz",
+  "_shasum": "9a5d7d80730dd384fcad9e5ea463d2a8f8af908f",
   "_spec": "@syncfusion/ej2-inplace-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -36,17 +36,17 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.37",
-    "@syncfusion/ej2-buttons": "~21.1.37",
-    "@syncfusion/ej2-calendars": "~21.1.37",
-    "@syncfusion/ej2-data": "~21.1.37",
-    "@syncfusion/ej2-dropdowns": "~21.1.37",
-    "@syncfusion/ej2-inputs": "~21.1.37",
-    "@syncfusion/ej2-lists": "~21.1.37",
-    "@syncfusion/ej2-navigations": "~21.1.37",
-    "@syncfusion/ej2-popups": "~21.1.37",
-    "@syncfusion/ej2-richtexteditor": "~21.1.37",
-    "@syncfusion/ej2-splitbuttons": "~21.1.37"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-calendars": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-dropdowns": "~22.1.34",
+    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-lists": "~22.1.34",
+    "@syncfusion/ej2-navigations": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34",
+    "@syncfusion/ej2-richtexteditor": "~22.1.34",
+    "@syncfusion/ej2-splitbuttons": "~22.1.34"
   },
   "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": "21.1.37",
+  "version": "22.1.34",
   "sideEffects": false
 }

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

@@ -34,8 +34,9 @@ export interface InPlaceEditorModel extends ComponentModel{
      *
      * @default ''
      * @blazorType string
+     * @aspType string
      */
-    template?: string | HTMLElement;
+    template?: string | HTMLElement | Function;
 
     /**
      * Defines whether to allow the cross-scripting site or not.

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

@@ -193,8 +193,9 @@ export declare class InPlaceEditor extends Component<HTMLElement> implements INo
      *
      * @default ''
      * @blazorType string
+     * @aspType string
      */
-    template: string | HTMLElement;
+    template: string | HTMLElement | Function;
     /**
      * Defines whether to allow the cross-scripting site or not.
      *

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

@@ -728,7 +728,7 @@ var InPlaceEditor = /** @class */ (function (_super) {
         }
         var compiler = compile(tempStr);
         if (!isNOU(compiler)) {
-            var isString = (isBlazor() &&
+            var isString = (isBlazor() && typeof tempStr !== 'function' &&
                 !this.isStringTemplate && (tempStr).indexOf('<div>Blazor') === 0) ?
                 this.isStringTemplate : true;
             tempEle = compiler({}, this, 'template', this.element.id + 'template', isString);
@@ -737,7 +737,8 @@ var InPlaceEditor = /** @class */ (function (_super) {
             [].slice.call(tempEle).forEach(function (el) {
                 trgEle.appendChild(el);
             });
-            if (isBlazor() && !this.isStringTemplate && (tempStr).indexOf('<div>Blazor') === 0) {
+            if (isBlazor() && !this.isStringTemplate && typeof tempStr !== 'function' &&
+                (tempStr).indexOf('<div>Blazor') === 0) {
                 updateBlazorTemplate(this.element.id + 'template', 'Template', this);
             }
         }
@@ -769,7 +770,10 @@ var InPlaceEditor = /** @class */ (function (_super) {
     InPlaceEditor.prototype.appendTemplate = function (trgEle, tempStr) {
         tempStr = typeof (tempStr) === 'string' ? this.sanitizeHelper(tempStr) : tempStr;
         this.setProperties({ template: tempStr }, true);
-        if (typeof tempStr === 'string' || isNOU(tempStr.innerHTML)) {
+        if (typeof tempStr === 'function') {
+            this.templateCompile(trgEle, tempStr);
+        }
+        else if (typeof tempStr === 'string' || isNOU(tempStr.innerHTML)) {
             if (tempStr[0] === '.' || tempStr[0] === '#') {
                 if (document.querySelectorAll(tempStr).length) {
                     this.templateEle = document.querySelector(tempStr);

package/styles/bootstrap.css

@@ -197,8 +197,8 @@
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-fontcolor-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-numberformatlist-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-bulletformatlist-dropdown {
-  padding-bottom: 0;
-  padding-top: 0;
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn:hover, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active:hover,
 .e-rte-toolbar .e-toolbar-items .e-rte-fontcolor-dropdown.e-tbar-btn.e-btn:hover,

package/styles/bootstrap4.css

@@ -284,8 +284,8 @@
 }
 .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn, .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn {
   border: 1px solid transparent;
-  padding-bottom: 1px;
-  padding-top: 1px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 .e-richtexteditor .e-rte-content {
   border-bottom-left-radius: 4px;
@@ -1066,6 +1066,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,

package/styles/bootstrap5-dark.css

@@ -777,6 +777,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #212529;
+  border: 1px solid #444c54;
+  border-radius: 4px;
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,

package/styles/bootstrap5.css

@@ -777,6 +777,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,

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

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

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

@@ -0,0 +1,70 @@
+//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;
+$editor-nrml-value-container-padding: 6px 30px 6px 12px !default;
+$editor-big-value-container-spin-padding: 8px !default;
+$editor-nrml-value-container-spin-padding: 8px !default;
+$editor-big-value-margin: 0 !default;
+$editor-nrml-value-margin: 0 8px 0 0 !default;
+$editor-rtl-big-value-margin: 0 0 0 28px !default;
+$editor-rtl-nrml-value-margin: 0 0 0 32px !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: 0 !default;
+$editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 20px !default;
+$editor-popup-tip-wrapper-bdr-radius: 0 !default;
+$editor-tip-title-font-weight: $font-weight-normal !default;
+$editor-big-tip-title-font-size: $text-2xl !default;
+$editor-nrml-tip-title-font-size: $text-base !default;
+$editor-big-tip-title-padding: 24px !default;
+$editor-nrml-tip-title-padding: 20px 20px 12px 20px !default;
+$editor-rtl-big-tip-title-padding: 12px 16px 12px 16px !default;
+$editor-rtl-nrml-tip-title-padding: 9px 12px 9px 12px !default;
+$editor-big-tip-title-container-size: 46px !default;
+$editor-nrml-tip-title-container-size: 24px !default;
+$editor-big-tip-wrapper-padding: 24px !default;
+$editor-nrml-tip-wrapper-padding: 20px !default;
+$editor-big-wrapper-title-with-padding: 24px !default;
+$editor-nrml-wrapper-title-with-padding: 20px !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 6px 0 0 !default;
+$editor-big-btn-cancel-margin: 0 0 0 4px !default;
+$editor-nrml-btn-cancel-margin: 0 0 0 6px !default;
+$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;
+$editor-value-text-border: 1px solid rgba($content-text-color) !default;
+$editor-background-color: $transparent !default;
+$wrapper-background-color: $flyout-bg-color !default;
+$editor-tip-border: 0 !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-alt1 !default;
+$editor-tip-arrow-bdr-color: $flyout-bg-color !default;
+$editor-tip-title-arrow-bdr-color: rgba($border) !default;
+$editor-tip-box-shadow: $shadow-lg !default;
+$editor-tip-title-bg: $flyout-bg-color !default;
+$editor-tio-title-border-bottom: 0 !default;
+$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

@@ -136,6 +136,12 @@
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled {
+            background-color: $content-bg;
+            border: 1px solid $gray-400;
+            box-shadow: 0 1px 4px 0 $black-color;
+          }
         }
         @else if $skin-name == 'bootstrap5' {
 
@@ -143,6 +149,12 @@
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
+
+          &:disabled{
+            background-color: $content-bg-color;
+            border: 1px solid $border-light;
+            border-radius: 4px;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {
@@ -192,13 +204,16 @@
     &.e-tooltip-wrap.e-popup {
       background: $editor-tip-bg;
       box-shadow: $editor-tip-box-shadow;
-      @if $skin-name == 'FluentUI' {
+      @if $skin-name == 'FluentUI' or $skin-name == 'Material3' {
         border-radius: $editor-popup-tip-wrapper-bdr-radius;
       }
 
       .e-tip-content {
         border-radius: $editor-popup-tip-content-bdr-radius;
         color: $editor-value-text-color;
+        @if $skin-name == 'Material3' {
+          background: $editor-tip-title-bg;
+        }
       }
 
       .e-arrow-tip-inner {
@@ -218,6 +233,9 @@
 
       &.e-popup {
         border: $editor-tip-border;
+        @if $skin-name == 'Material3' {
+          border-radius: 8px;
+        }
       }
 
       .e-editable-title {

package/styles/inplace-editor/bootstrap.css

@@ -197,8 +197,8 @@
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-fontcolor-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-numberformatlist-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-bulletformatlist-dropdown {
-  padding-bottom: 0;
-  padding-top: 0;
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn:hover, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active:hover,
 .e-rte-toolbar .e-toolbar-items .e-rte-fontcolor-dropdown.e-tbar-btn.e-btn:hover,

package/styles/inplace-editor/bootstrap4.css

@@ -284,8 +284,8 @@
 }
 .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn, .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn {
   border: 1px solid transparent;
-  padding-bottom: 1px;
-  padding-top: 1px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 .e-richtexteditor .e-rte-content {
   border-bottom-left-radius: 4px;
@@ -1066,6 +1066,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,

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

@@ -777,6 +777,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #212529;
+  border: 1px solid #444c54;
+  border-radius: 4px;
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,

package/styles/inplace-editor/bootstrap5.css

@@ -777,6 +777,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,

package/styles/inplace-editor/icons/_material3-dark.scss

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