@syncfusion/ej2-angular-documenteditor 20.4.54 → 21.1.35

package/styles/document-editor/icons/_material-dark.scss

@@ -61,6 +61,11 @@
       font-size: 13px;
     }
 
+    .e-de-multi-cmt-mark::before {
+      content: '\e97a';
+      font-family: 'e-icons';
+    }
+
     .e-de-cmt-post::before {
       content: '\e816';
       font-family: 'e-icons';

package/styles/document-editor/icons/_material.scss

@@ -61,6 +61,11 @@
       font-size: 13px;
     }
 
+    .e-de-multi-cmt-mark::before {
+      content: '\e97a';
+      font-family: 'e-icons';
+    }
+
     .e-de-cmt-post::before {
       content: '\e816';
       font-family: 'e-icons';

package/styles/document-editor/icons/_material3.scss

@@ -54,6 +54,12 @@
       font-size: 13px;
     }
 
+    .e-de-multi-cmt-mark::before {
+      color: $icon-color;
+      content: '\e8bc';
+      font-family: 'e-icons';
+    }
+
     .e-de-cmt-post::before {
       content: '\e71d';
       font-family: 'e-icons';
@@ -183,17 +189,17 @@
 
   .e-de-table-border-setting {
     border: 1px solid $de-border-dlg-border-setting-inside-border;
-    height: 40px;
-    left: 5px;
+    height: 52px;
+    left: 3px;
     position: relative;
-    top: 5px;
-    width: 40px;
+    top: 3px;
+    width: 52px;
   }
 
   .e-de-table-border-setting-genral {
     border: 1px solid $de-border-dlg-border-setting-divs-color;
-    height: 52px;
-    width: 52px;
+    height: 60px;
+    width: 60px;
   }
 
   .e-de-table-border-preview-genral {

package/styles/document-editor/icons/_tailwind-dark.scss

@@ -54,6 +54,12 @@
       font-size: 13px;
     }
 
+    .e-de-multi-cmt-mark::before {
+      color: $icon-color;
+      content: '\e8bc';
+      font-family: 'e-icons';
+    }
+
     .e-de-cmt-post::before {
       content: '\e71d';
       font-family: 'e-icons';

package/styles/document-editor/icons/_tailwind.scss

@@ -54,6 +54,12 @@
       font-size: 13px;
     }
 
+    .e-de-multi-cmt-mark::before {
+      color: $icon-color;
+      content: '\e8bc';
+      font-family: 'e-icons';
+    }
+
     .e-de-cmt-post::before {
       content: '\e71d';
       font-family: 'e-icons';
@@ -165,6 +171,7 @@
     content: '\e775';
     font-family: 'e-icons';
     font-size: $de-tablecell-alignment-font-size;
+    margin: 2px;
   }
 
   .e-de-tablecell-center-alignment::before {
@@ -172,6 +179,7 @@
     content: '\e7e5';
     font-family: 'e-icons';
     font-size: $de-tablecell-alignment-font-size;
+    margin: 2px;
   }
 
   .e-de-tablecell-bottom-alignment::before {
@@ -179,6 +187,7 @@
     content: '\e7d9';
     font-family: 'e-icons';
     font-size: $de-tablecell-alignment-font-size;
+    margin: 2px;
   }
 
   .e-de-table-border-setting {

package/styles/document-editor/implementation/dailogs/_paragraph-dailogs.scss

@@ -109,6 +109,9 @@
   }
 
   .e-de-para-dlg-container {
+    @if $skin-name == 'Material3' {
+      padding: 8px;
+    }
     height: $de-para-dlg-height;
     width: $de-para-dlg-width;
   }

package/styles/document-editor/material-dark.css

@@ -49,6 +49,10 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  content: "\e97a";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e816";
   font-family: "e-icons";
@@ -1685,7 +1689,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #212121;
+  background: #212121;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2378,7 +2382,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 15px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 18px;
 }
 

package/styles/document-editor/material.css

@@ -49,6 +49,10 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  content: "\e97a";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e816";
   font-family: "e-icons";
@@ -1685,7 +1689,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #fff;
+  background: #fff;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2378,7 +2382,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 15px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 18px;
 }
 

package/styles/document-editor/tailwind-dark.css

@@ -43,6 +43,11 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  color: #d1d5db;
+  content: "\e8bc";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e71d";
   font-family: "e-icons";
@@ -124,40 +129,40 @@
 .e-de-table-left-alignment::before {
   color: #d1d5db;
   content: "\e7f6";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-center-alignment::before {
   color: #d1d5db;
   content: "\e7f1";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-right-alignment::before {
   color: #d1d5db;
   content: "\e703";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-top-alignment::before {
   color: #d1d5db;
   content: "\e775";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-center-alignment::before {
   color: #d1d5db;
   content: "\e7e5";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-bottom-alignment::before {
   color: #d1d5db;
   content: "\e7d9";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
 }
 
 .e-de-table-border-setting {
@@ -205,14 +210,14 @@
 .e-de-table-border-none-setting::before {
   color: #d1d5db;
   content: "\e7eb";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-table-border-box-setting::before {
   color: #d1d5db;
   content: "\e834";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -222,7 +227,7 @@
   color: #d1d5db;
   content: "\e7e8";
   font-family: "e-icons";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -231,7 +236,7 @@
 .e-de-table-border-custom-setting::before {
   color: #d1d5db;
   content: "\e7d5";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -240,14 +245,14 @@
 .e-de-para-border-none-setting::before {
   color: #d1d5db;
   content: "\e890";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-para-border-box-setting::before {
   color: #d1d5db;
   content: "\e891";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -256,7 +261,7 @@
 .e-de-para-border-shadow-setting::before {
   color: #d1d5db;
   content: "\e892";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -265,7 +270,7 @@
 .e-de-para-border-custom-setting::before {
   color: #d1d5db;
   content: "\e88f";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -2063,7 +2068,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #232e3e;
+  background: #232e3e;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2722,7 +2727,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }
 
@@ -3631,7 +3636,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-cmt-textarea.e-input {
   color: #d1d5db;
-  font-size: 13px;
+  font-size: 14px;
   line-height: normal;
   min-height: 30px;
   overflow: hidden;

package/styles/document-editor/tailwind.css

@@ -43,6 +43,11 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  color: #6b7280;
+  content: "\e8bc";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e71d";
   font-family: "e-icons";
@@ -124,40 +129,43 @@
 .e-de-table-left-alignment::before {
   color: #6b7280;
   content: "\e7f6";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-center-alignment::before {
   color: #6b7280;
   content: "\e7f1";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-right-alignment::before {
   color: #6b7280;
   content: "\e703";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-top-alignment::before {
   color: #6b7280;
   content: "\e775";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-center-alignment::before {
   color: #6b7280;
   content: "\e7e5";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-bottom-alignment::before {
   color: #6b7280;
   content: "\e7d9";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-table-border-setting {
@@ -205,14 +213,14 @@
 .e-de-table-border-none-setting::before {
   color: #6b7280;
   content: "\e7eb";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-table-border-box-setting::before {
   color: #6b7280;
   content: "\e834";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -222,7 +230,7 @@
   color: #6b7280;
   content: "\e7e8";
   font-family: "e-icons";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -231,7 +239,7 @@
 .e-de-table-border-custom-setting::before {
   color: #6b7280;
   content: "\e7d5";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -240,14 +248,14 @@
 .e-de-para-border-none-setting::before {
   color: #6b7280;
   content: "\e890";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-para-border-box-setting::before {
   color: #6b7280;
   content: "\e891";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -256,7 +264,7 @@
 .e-de-para-border-shadow-setting::before {
   color: #6b7280;
   content: "\e892";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -265,7 +273,7 @@
 .e-de-para-border-custom-setting::before {
   color: #6b7280;
   content: "\e88f";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -2063,7 +2071,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #f9fafb;
+  background: #f9fafb;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2722,7 +2730,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }
 
@@ -3631,7 +3639,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-cmt-textarea.e-input {
   color: #374151;
-  font-size: 13px;
+  font-size: 14px;
   line-height: normal;
   min-height: 30px;
   overflow: hidden;

package/styles/document-editor-container/_bootstrap-dark-definition.scss

@@ -22,6 +22,11 @@ $de-spellcheck-tlbr-height: 34px !default;
 $de-spellcheck-tlbr-margin-left: 7.5px !default;
 $de-zoom-tlbr-margin-left: calc(100% - 380px) !default;
 $de-zoom-tlbr-margin-left-big: calc(100% - 410px) !default;
+$e-de-ctnr-break-listview-margin-right: 12px !default;
+$e-de-ctnr-break-listview-margin-right-big: 16px !default;
+$e-de-ctnr-break-listview-margin-left: 12px !default;
+$e-de-ctnr-break-listview-margin-left-big: 16px !default;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;
@@ -108,8 +113,8 @@ $de-prop-pane-margin: 14px;
 $de-table-prop-border-margin: 14px;
 $de-clr-pckr-width: 30.8px;
 $de-toolbar-font-size: 12px;
-$de-toolbar-padding-bottom: 6px;
-$de-toolbar-padding-bottom-bg: 6px;
+$de-toolbar-padding-bottom: 5px;
+$de-toolbar-padding-bottom-bg: 5px;
 $de-header-font-weight: normal;
 $de-list-thmbnail-border-clr: #e4e4e4;
 $de-prop-sub-label-mrgn-btm: 8px;

package/styles/document-editor-container/_bootstrap-definition.scss

@@ -23,6 +23,11 @@ $de-spellcheck-tlbr-margin-left: 7.5px !default;
 $de-zoom-tlbr-margin-left: calc(100% - 380px) !default;
 $de-zoom-tlbr-margin-left-big: calc(100% - 410px) !default;
 $e-de-statusbar-separator-color: #ccc;
+$e-de-ctnr-break-listview-margin-right: 12px !default;
+$e-de-ctnr-break-listview-margin-right-big: 16px !default;
+$e-de-ctnr-break-listview-margin-left: 12px !default;
+$e-de-ctnr-break-listview-margin-left-big: 16px !default;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;
@@ -108,8 +113,8 @@ $de-prop-pane-margin: 14px;
 $de-table-prop-border-margin: 14px;
 $de-clr-pckr-width: 30.8px;
 $de-toolbar-font-size: 12px;
-$de-toolbar-padding-bottom: 6px;
-$de-toolbar-padding-bottom-bg: 6px;
+$de-toolbar-padding-bottom: 5px;
+$de-toolbar-padding-bottom-bg: 5px;
 $de-header-font-weight: normal;
 $de-list-thmbnail-border-clr: #e4e4e4;
 $de-prop-sub-label-mrgn-btm: 8px;

package/styles/document-editor-container/_bootstrap4-definition.scss

@@ -23,6 +23,11 @@ $de-spellcheck-tlbr-margin-left: 7.5px !default;
 $de-zoom-tlbr-margin-left: calc(100% - 340px) !default;
 $de-zoom-tlbr-margin-left-big: calc(100% - 370px) !default;
 $e-de-statusbar-separator-color: #495057;
+$e-de-ctnr-break-listview-margin-right: 14px !default;
+$e-de-ctnr-break-listview-margin-right-big: 16px !default;
+$e-de-ctnr-break-listview-margin-left: 14px !default;
+$e-de-ctnr-break-listview-margin-left-big: 16px !default;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;
@@ -125,8 +130,8 @@ $de-prop-pane-margin: 14px;
 $de-table-prop-border-margin: 14px;
 $de-clr-pckr-width: 30.8px;
 $de-toolbar-font-size: 12px;
-$de-toolbar-padding-bottom: 6px;
-$de-toolbar-padding-bottom-bg: 6px;
+$de-toolbar-padding-bottom: 5px;
+$de-toolbar-padding-bottom-bg: 5px;
 $de-header-font-weight: normal;
 $de-list-thmbnail-border-clr: #e4e4e4;
 $de-prop-sub-label-mrgn-btm: 8px;

package/styles/document-editor-container/_bootstrap5-definition.scss

@@ -18,6 +18,11 @@ $de-spellcheck-tlbr-height: 34px !default;
 $de-spellcheck-tlbr-margin-left: 7.5px !default;
 $de-zoom-tlbr-margin-left: calc(100% - 360px) !default;
 $de-zoom-tlbr-margin-left-big: calc(100% - 410px) !default;
+$e-de-ctnr-break-listview-margin-right: 12px !default;
+$e-de-ctnr-break-listview-margin-right-big: 16px !default;
+$e-de-ctnr-break-listview-margin-left: 12px !default;
+$e-de-ctnr-break-listview-margin-left-big: 16px !default;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;
@@ -60,7 +65,7 @@ $de-left-btn-width-big: 44px;
 $de-right-btn-width: 75px * .5;
 $de-right-btn-width-big: 43px;
 $de-border-btn-width-big: 44px;
-$de-right-font-size-width-big: 86px;
+$de-right-font-size-width-big: $text-8xl;
 $de-img-span-top-big: 12px;
 $de-bullet-icon-font-size: $text-xs;
 $de-bullet-icon-line-height: 0;
@@ -85,8 +90,8 @@ $e-de-status-bar-big-padding-top: 5px;
 $e-de-review-pane-width: 440px;
 $e-de-ctnr-linespacing-tick-icon: 8px;
 $de-toolbar-font-size: $text-sm;
-$de-toolbar-padding-bottom: 14px;
-$de-toolbar-padding-bottom-bg: 14px;
+$de-toolbar-padding-bottom: 10px;
+$de-toolbar-padding-bottom-bg: 10px;
 $de-header-font-weight: $font-weight-medium;
 $de-prop-sub-label-mrgn-btm: 4px;
 $de-hdr-ftr-frst-div-mrgn-btm: 12px;
@@ -98,10 +103,10 @@ $de-status-br-left: 0 !default;
 $de-status-br-top: 6px !default;
 $e-de-btn-font-size: $text-sm;
 $e-de-btn-font-icon-size: 16px;
-$e-de-btn-font-size-big: 16px;
+$e-de-btn-font-size-big: $text-base;
 $e-de-btn-font-icon-size-big: 18px;
-$e-de-bzr-btn-font-size: 16px;
-$e-de-bzr-btn-font-size-big: 18px;
+$e-de-bzr-btn-font-size: $text-base;
+$e-de-bzr-btn-font-size-big: $text-lg;
 $e-de-bzr-button-hover-border-radius: 4px;
 $e-de-bzr-button-hover-border: none;
 $de-clr-pckr-width: 38px;

package/styles/document-editor-container/_definition.scss

@@ -1,6 +1,7 @@
 $de-ctnr-tlbr-width: calc(100% - 75px);
 $de-ctnr-status-bar-hgt: 36px;
 $de-ctnr-tlbr-height: 86px;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar height
 $de-tool-ctnr-editor-height: calc(100% - 86px);

package/styles/document-editor-container/_fabric-dark-definition.scss

@@ -23,6 +23,11 @@ $de-spellcheck-tlbr-margin-left: 7.5px !default;
 $de-zoom-tlbr-margin-left: calc(100% - 405px) !default;
 $de-zoom-tlbr-margin-left-big: calc(100% - 435px) !default;
 $e-de-statusbar-separator-color: #dadada;
+$e-de-ctnr-break-listview-margin-right: 12px !default;
+$e-de-ctnr-break-listview-margin-right-big: 16px !default;
+$e-de-ctnr-break-listview-margin-left: 12px !default;
+$e-de-ctnr-break-listview-margin-left-big: 16px !default;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 120px) !default;
@@ -113,8 +118,8 @@ $de-prop-pane-margin: 14px;
 $de-table-prop-border-margin: 14px;
 $de-clr-pckr-width: 30.8px;
 $de-toolbar-font-size: 12px;
-$de-toolbar-padding-bottom: 6px;
-$de-toolbar-padding-bottom-bg: 6px;
+$de-toolbar-padding-bottom: 5px;
+$de-toolbar-padding-bottom-bg: 5px;
 $de-header-font-weight: normal;
 $de-list-thmbnail-border-clr: #e4e4e4;
 $de-prop-sub-label-mrgn-btm: 8px;

package/styles/document-editor-container/_fabric-definition.scss

@@ -23,6 +23,11 @@ $de-spellcheck-tlbr-margin-left: 7.5px !default;
 $de-zoom-tlbr-margin-left: calc(100% - 405px) !default;
 $de-zoom-tlbr-margin-left-big: calc(100% - 435px) !default;
 $e-de-statusbar-separator-color: #dadada;
+$e-de-ctnr-break-listview-margin-right: 12px !default;
+$e-de-ctnr-break-listview-margin-right-big: 16px !default;
+$e-de-ctnr-break-listview-margin-left: 12px !default;
+$e-de-ctnr-break-listview-margin-left-big: 16px !default;
+$de-tlbr-btn-height: calc(100% - 10px) !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 121px) !default;
@@ -110,8 +115,8 @@ $de-prop-pane-margin: 14px;
 $de-table-prop-border-margin: 14px;
 $de-clr-pckr-width: 30.8px;
 $de-toolbar-font-size: 12px;
-$de-toolbar-padding-bottom: 6px;
-$de-toolbar-padding-bottom-bg: 6px;
+$de-toolbar-padding-bottom: 5px;
+$de-toolbar-padding-bottom-bg: 5px;
 $de-header-font-weight: normal;
 $de-list-thmbnail-border-clr: #e4e4e4;
 $de-prop-sub-label-mrgn-btm: 8px;