@syncfusion/ej2-vue-documenteditor 20.4.54 → 21.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/CHANGELOG.md +208 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-vue-documenteditor.umd.min.js +2 -2
  4. package/dist/ej2-vue-documenteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-vue-documenteditor.es2015.js +240 -282
  6. package/dist/es6/ej2-vue-documenteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-vue-documenteditor.es5.js +261 -313
  8. package/dist/es6/ej2-vue-documenteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-vue-documenteditor.min.js +2 -2
  10. package/package.json +11 -10
  11. package/src/document-editor/documenteditor.component.d.ts +3 -50
  12. package/src/document-editor/documenteditor.component.js +168 -197
  13. package/src/document-editor-container/documenteditorcontainer.component.d.ts +3 -26
  14. package/src/document-editor-container/documenteditorcontainer.component.js +96 -125
  15. package/styles/bootstrap-dark.css +167 -58
  16. package/styles/bootstrap.css +167 -54
  17. package/styles/bootstrap4.css +185 -65
  18. package/styles/bootstrap5-dark.css +187 -74
  19. package/styles/bootstrap5.css +187 -74
  20. package/styles/document-editor/bootstrap-dark.css +13 -2
  21. package/styles/document-editor/bootstrap.css +17 -2
  22. package/styles/document-editor/bootstrap4.css +23 -4
  23. package/styles/document-editor/bootstrap5-dark.css +32 -17
  24. package/styles/document-editor/bootstrap5.css +32 -17
  25. package/styles/document-editor/fabric-dark.css +13 -2
  26. package/styles/document-editor/fabric.css +17 -2
  27. package/styles/document-editor/fluent-dark.css +47 -27
  28. package/styles/document-editor/fluent.css +47 -27
  29. package/styles/document-editor/highcontrast-light.css +5 -0
  30. package/styles/document-editor/highcontrast.css +13 -2
  31. package/styles/document-editor/material-dark.css +13 -2
  32. package/styles/document-editor/material.css +13 -2
  33. package/styles/document-editor/material3-dark.css +3971 -0
  34. package/styles/document-editor/material3-dark.scss +2 -0
  35. package/styles/document-editor/material3.css +4027 -0
  36. package/styles/document-editor/material3.scss +2 -0
  37. package/styles/document-editor/tailwind-dark.css +29 -17
  38. package/styles/document-editor/tailwind.css +32 -17
  39. package/styles/document-editor-container/bootstrap-dark.css +154 -56
  40. package/styles/document-editor-container/bootstrap.css +150 -52
  41. package/styles/document-editor-container/bootstrap4.css +162 -61
  42. package/styles/document-editor-container/bootstrap5-dark.css +155 -57
  43. package/styles/document-editor-container/bootstrap5.css +155 -57
  44. package/styles/document-editor-container/fabric-dark.css +154 -56
  45. package/styles/document-editor-container/fabric.css +154 -56
  46. package/styles/document-editor-container/fluent-dark.css +159 -64
  47. package/styles/document-editor-container/fluent.css +159 -64
  48. package/styles/document-editor-container/highcontrast-light.css +154 -56
  49. package/styles/document-editor-container/highcontrast.css +154 -56
  50. package/styles/document-editor-container/material-dark.css +159 -61
  51. package/styles/document-editor-container/material.css +154 -55
  52. package/styles/document-editor-container/material3-dark.css +2178 -0
  53. package/styles/document-editor-container/material3-dark.scss +2 -0
  54. package/styles/document-editor-container/material3.css +2234 -0
  55. package/styles/document-editor-container/material3.scss +2 -0
  56. package/styles/document-editor-container/tailwind-dark.css +153 -55
  57. package/styles/document-editor-container/tailwind.css +153 -55
  58. package/styles/fabric-dark.css +167 -58
  59. package/styles/fabric.css +171 -58
  60. package/styles/fluent-dark.css +206 -91
  61. package/styles/fluent.css +206 -91
  62. package/styles/highcontrast-light.css +159 -56
  63. package/styles/highcontrast.css +167 -58
  64. package/styles/material-dark.css +172 -63
  65. package/styles/material.css +167 -57
  66. package/styles/material3-dark.css +6150 -0
  67. package/styles/material3-dark.scss +3 -0
  68. package/styles/material3.css +6261 -0
  69. package/styles/material3.scss +3 -0
  70. package/styles/tailwind-dark.css +182 -72
  71. package/styles/tailwind.css +185 -72
@@ -425,6 +425,21 @@
425
425
  font-family: "e-icons";
426
426
  }
427
427
 
428
+ .e-de-e-paragraph-style-mark::before {
429
+ content: "\e844";
430
+ font-family: "e-icons";
431
+ }
432
+
433
+ .e-de-e-character-style-mark::before {
434
+ content: "\e8bf";
435
+ font-family: "e-icons";
436
+ }
437
+
438
+ .e-de-e-linked-style-mark::before {
439
+ content: "\e8c0";
440
+ font-family: "e-icons";
441
+ }
442
+
428
443
  .e-de-ctnr-columns::before {
429
444
  content: "\e8b4";
430
445
  font-family: "e-icons";
@@ -557,8 +572,48 @@
557
572
  height: 100%;
558
573
  }
559
574
 
575
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
576
+ box-shadow: none;
577
+ height: 31px;
578
+ }
579
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
580
+ box-shadow: none;
581
+ }
582
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
583
+ box-shadow: none;
584
+ }
585
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
586
+ box-shadow: none;
587
+ }
588
+
589
+ .e-de-ctnr-group-btn-middle button {
590
+ border-radius: 0px;
591
+ }
592
+
593
+ .de-tbl-fill-clr .e-dropdown-btn.e-btn {
594
+ box-shadow: none;
595
+ }
596
+
597
+ .e-de-prop-pane .e-de-ctnr-group-btn button,
598
+ .e-de-ctn .e-de-status-bar button {
599
+ box-shadow: none;
600
+ height: 31px;
601
+ }
602
+ .e-de-prop-pane .e-de-ctnr-group-btn button:focus,
603
+ .e-de-ctn .e-de-status-bar button:focus {
604
+ box-shadow: none;
605
+ }
606
+ .e-de-prop-pane .e-de-ctnr-group-btn button:active,
607
+ .e-de-ctn .e-de-status-bar button:active {
608
+ box-shadow: none;
609
+ }
610
+ .e-de-prop-pane .e-de-ctnr-group-btn button:hover,
611
+ .e-de-ctn .e-de-status-bar button:hover {
612
+ box-shadow: none;
613
+ }
614
+
560
615
  .e-de-statusbar-pageweb {
561
- background-color: #282d31;
616
+ background: #282d31;
562
617
  border: 0;
563
618
  box-shadow: none;
564
619
  float: right;
@@ -585,12 +640,25 @@
585
640
  font-size: 18px;
586
641
  }
587
642
 
643
+ .e-listview .e-list-icon {
644
+ height: 24px;
645
+ width: 16px;
646
+ margin-right: 12px;
647
+ }
648
+
649
+ .e-de-listview-icon {
650
+ height: auto;
651
+ width: auto;
652
+ line-height: 22px;
653
+ margin-right: 12px;
654
+ }
655
+
588
656
  .e-de-linespacing {
589
657
  margin-top: 8px;
590
658
  }
591
659
 
592
660
  .e-de-statusbar-zoom {
593
- background-color: #282d31;
661
+ background: #282d31;
594
662
  border: 0;
595
663
  color: #ced4da;
596
664
  float: right;
@@ -682,14 +750,22 @@
682
750
  .e-de-statusbar-separator {
683
751
  border-left: 1px solid #444c54;
684
752
  height: 16px;
685
- margin-left: 0;
753
+ margin-left: 7.5px;
754
+ margin-right: 7.5px;
755
+ margin-top: 6px;
756
+ }
757
+
758
+ .e-bigger .e-de-statusbar-separator {
759
+ border-left: 1px solid #444c54;
760
+ height: 16px;
761
+ margin-left: 7.5px;
762
+ margin-right: 7.5px;
686
763
  margin-top: 6px;
687
764
  }
688
765
 
689
766
  .e-de-statusbar-spellcheck {
690
767
  border-radius: 2px;
691
768
  font-weight: 400;
692
- margin-left: 7.5px;
693
769
  }
694
770
 
695
771
  .e-de-ctn {
@@ -702,7 +778,6 @@
702
778
 
703
779
  .e-bigger .e-de-statusbar-spellcheck {
704
780
  border-radius: 2px;
705
- margin-left: 7.5px;
706
781
  }
707
782
 
708
783
  .e-de-ctnr-toolbar {
@@ -727,7 +802,7 @@
727
802
 
728
803
  .e-de-tool-ctnr-properties-pane,
729
804
  .e-de-ctnr-properties-pane {
730
- background-color: #282d31;
805
+ background: #282d31;
731
806
  border-bottom: 1px solid #444c54;
732
807
  border-top: 1px solid #444c54;
733
808
  }
@@ -874,7 +949,7 @@
874
949
  margin: 0 14px;
875
950
  }
876
951
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
877
- margin-left: 8px;
952
+ margin-left: 8px !important;
878
953
  margin-right: 4px;
879
954
  }
880
955
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -890,20 +965,23 @@
890
965
  }
891
966
 
892
967
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
968
+ -ms-flex-direction: column;
969
+ flex-direction: column;
970
+ height: calc(100% - 10px);
893
971
  padding: 0;
894
- padding-bottom: 14px;
972
+ padding-bottom: 10px;
895
973
  }
896
974
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
897
975
  padding: 0;
898
- padding-bottom: 14px;
976
+ padding-bottom: 10px;
899
977
  }
900
978
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
901
979
  padding: 0;
902
- padding-bottom: 14px;
980
+ padding-bottom: 10px;
903
981
  }
904
982
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
905
983
  padding: 0;
906
- padding-bottom: 14px;
984
+ padding-bottom: 10px;
907
985
  }
908
986
 
909
987
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -949,7 +1027,7 @@
949
1027
  }
950
1028
 
951
1029
  .e-de-ctnr-group-btn .e-btn {
952
- background-color: #212529;
1030
+ background: #212529;
953
1031
  border-color: #444c54;
954
1032
  }
955
1033
  .e-de-ctnr-group-btn .e-btn:focus {
@@ -1042,7 +1120,7 @@
1042
1120
  }
1043
1121
 
1044
1122
  .e-de-ctnr-properties-pane-btn .e-btn {
1045
- background-color: #282d31;
1123
+ background: #282d31;
1046
1124
  border-radius: 0;
1047
1125
  box-shadow: none;
1048
1126
  color: #0d6efd;
@@ -1084,6 +1162,7 @@
1084
1162
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
1085
1163
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
1086
1164
  padding: 0 !important;
1165
+ min-height: 16px;
1087
1166
  }
1088
1167
 
1089
1168
  .e-de-hdr-ftr-frst-div {
@@ -1106,6 +1185,7 @@
1106
1185
  }
1107
1186
 
1108
1187
  .e-de-review-pane {
1188
+ background: #282d31;
1109
1189
  border-left: 1px solid #6c757d;
1110
1190
  height: 100%;
1111
1191
  min-height: 200px;
@@ -1123,34 +1203,6 @@
1123
1203
  width: 306px;
1124
1204
  }
1125
1205
 
1126
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
1127
- box-shadow: none;
1128
- height: 31px;
1129
- }
1130
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
1131
- box-shadow: none;
1132
- }
1133
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
1134
- box-shadow: none;
1135
- }
1136
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1137
- box-shadow: none;
1138
- }
1139
-
1140
- .e-de-ctnr-group-btn button {
1141
- box-shadow: none;
1142
- height: 31px;
1143
- }
1144
- .e-de-ctnr-group-btn button:focus {
1145
- box-shadow: none;
1146
- }
1147
- .e-de-ctnr-group-btn button:active {
1148
- box-shadow: none;
1149
- }
1150
- .e-de-ctnr-group-btn button:hover {
1151
- box-shadow: none;
1152
- }
1153
-
1154
1206
  .e-de-property-div-padding {
1155
1207
  border-bottom: 0.5px solid #444c54;
1156
1208
  padding: 12px;
@@ -1192,7 +1244,7 @@
1192
1244
  }
1193
1245
 
1194
1246
  .e-bigger .e-de-panel-right-width {
1195
- width: 86px;
1247
+ width: 96px;
1196
1248
  }
1197
1249
  .e-bigger .e-de-char-fmt-btn-left > button,
1198
1250
  .e-bigger .e-de-char-fmt-btn-right > button {
@@ -1283,7 +1335,7 @@
1283
1335
  }
1284
1336
 
1285
1337
  .e-de-list-header-presetmenu .e-de-list-line {
1286
- border-bottom: 1px solid #adb5bd;
1338
+ border-bottom: 1px solid #adb5bd !important;
1287
1339
  margin-left: 5px;
1288
1340
  width: 100%;
1289
1341
  }
@@ -1352,10 +1404,10 @@
1352
1404
  }
1353
1405
 
1354
1406
  .e-de-list-container {
1355
- background: #282d31;
1356
1407
  border: 1px solid #ccc;
1357
1408
  border-radius: 2px;
1358
1409
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
1410
+ background: #282d31;
1359
1411
  box-sizing: border-box;
1360
1412
  display: inline-block;
1361
1413
  line-height: normal;
@@ -1447,8 +1499,8 @@
1447
1499
  border: 1px solid #444c54;
1448
1500
  color: #ced4da;
1449
1501
  height: 129px;
1450
- margin-left: 78px;
1451
1502
  width: 94px;
1503
+ margin-left: 78px;
1452
1504
  }
1453
1505
 
1454
1506
  .e-de-toc-template1.e-de-rtl {
@@ -1503,7 +1555,7 @@
1503
1555
  }
1504
1556
 
1505
1557
  .e-de-status-bar {
1506
- background-color: #282d31;
1558
+ background: #282d31;
1507
1559
  display: -ms-flexbox;
1508
1560
  display: flex;
1509
1561
  padding-top: 4px;
@@ -1628,7 +1680,7 @@
1628
1680
  }
1629
1681
 
1630
1682
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
1631
- height: 38px !important;
1683
+ height: 36px !important;
1632
1684
  }
1633
1685
 
1634
1686
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
@@ -1636,8 +1688,8 @@
1636
1688
  }
1637
1689
 
1638
1690
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
1639
- height: 38px;
1640
1691
  width: 39px;
1692
+ height: 38px;
1641
1693
  }
1642
1694
 
1643
1695
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1649,6 +1701,18 @@
1649
1701
  width: 70px;
1650
1702
  }
1651
1703
 
1704
+ .e-rtl .e-listview .e-list-icon {
1705
+ height: 24px;
1706
+ width: 16px;
1707
+ margin-left: 12px;
1708
+ }
1709
+ .e-rtl .e-de-listview-icon {
1710
+ height: auto;
1711
+ width: auto;
1712
+ line-height: 22px;
1713
+ margin-left: 12px;
1714
+ }
1715
+
1652
1716
  .e-bigger .de-split-button > div:first-child {
1653
1717
  margin-right: 0;
1654
1718
  }
@@ -1769,11 +1833,10 @@
1769
1833
  height: 81px;
1770
1834
  }
1771
1835
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-separator {
1772
- height: 25px;
1773
1836
  margin: 0 16px;
1774
1837
  }
1775
1838
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
1776
- margin-left: 12px;
1839
+ margin-left: 12px !important;
1777
1840
  margin-right: 6px;
1778
1841
  }
1779
1842
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1790,22 +1853,22 @@
1790
1853
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
1791
1854
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1792
1855
  padding: 0;
1793
- padding-bottom: 14px;
1856
+ padding-bottom: 10px;
1794
1857
  }
1795
1858
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
1796
1859
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
1797
1860
  padding: 0;
1798
- padding-bottom: 14px;
1861
+ padding-bottom: 10px;
1799
1862
  }
1800
1863
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
1801
1864
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
1802
1865
  padding: 0;
1803
- padding-bottom: 14px;
1866
+ padding-bottom: 10px;
1804
1867
  }
1805
1868
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
1806
1869
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
1807
1870
  padding: 0;
1808
- padding-bottom: 14px;
1871
+ padding-bottom: 10px;
1809
1872
  }
1810
1873
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
1811
1874
  padding: 0 !important;
@@ -1821,7 +1884,7 @@
1821
1884
  width: 75px;
1822
1885
  }
1823
1886
  .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
1824
- background-color: #282d31;
1887
+ background: #282d31;
1825
1888
  border-radius: 0;
1826
1889
  box-shadow: none;
1827
1890
  min-height: 100%;
@@ -1872,6 +1935,19 @@
1872
1935
  .e-bigger .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1873
1936
  box-shadow: none;
1874
1937
  }
1938
+ .e-bigger .e-de-status-bar button {
1939
+ height: 38px;
1940
+ box-shadow: none;
1941
+ }
1942
+ .e-bigger .e-de-status-bar button:focus {
1943
+ box-shadow: none;
1944
+ }
1945
+ .e-bigger .e-de-status-bar button:active {
1946
+ box-shadow: none;
1947
+ }
1948
+ .e-bigger .e-de-status-bar button:hover {
1949
+ box-shadow: none;
1950
+ }
1875
1951
  .e-bigger .e-de-ctnr-group-btn button {
1876
1952
  box-shadow: none;
1877
1953
  height: 38px;
@@ -1986,18 +2062,18 @@
1986
2062
  margin-left: 10px;
1987
2063
  }
1988
2064
  .e-bigger .e-de-status-bar {
1989
- background-color: #282d31;
2065
+ background: #282d31;
1990
2066
  display: -ms-flexbox;
1991
2067
  display: flex;
1992
2068
  padding-top: 5px;
1993
2069
  width: 100%;
1994
2070
  }
1995
2071
  .e-bigger .e-de-statusbar-zoom {
1996
- background-color: #282d31;
1997
2072
  border: 0;
1998
2073
  color: #ced4da;
1999
2074
  float: right;
2000
2075
  height: 34px;
2076
+ background-color: #282d31;
2001
2077
  }
2002
2078
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
2003
2079
  line-height: 25px;
@@ -2007,6 +2083,28 @@
2007
2083
  height: 0;
2008
2084
  line-height: 0.5;
2009
2085
  }
2086
+ .e-bigger .e-listview .e-list-icon {
2087
+ height: 24px;
2088
+ width: 16px;
2089
+ margin-right: 16px;
2090
+ }
2091
+ .e-bigger .e-de-listview-icon {
2092
+ height: auto;
2093
+ width: auto;
2094
+ line-height: 22px;
2095
+ margin-right: 16px;
2096
+ }
2097
+ .e-bigger .e-rtl .e-listview .e-list-icon {
2098
+ height: 24px;
2099
+ width: 16px;
2100
+ margin-left: 16px;
2101
+ }
2102
+ .e-bigger .e-rtl .e-de-listview-icon {
2103
+ height: auto;
2104
+ width: auto;
2105
+ line-height: 22px;
2106
+ margin-left: 16px;
2107
+ }
2010
2108
 
2011
2109
  .e-de-ctn .e-de-bzr-button {
2012
2110
  background: #282d31;