@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
@@ -0,0 +1,2 @@
1
+ @import 'ej2-base/styles/material3-definition.scss';
2
+ @import 'ej2-documenteditor/styles/document-editor-container/material3.scss';
@@ -426,6 +426,21 @@
426
426
  font-family: "e-icons";
427
427
  }
428
428
 
429
+ .e-de-e-paragraph-style-mark::before {
430
+ content: "\e844";
431
+ font-family: "e-icons";
432
+ }
433
+
434
+ .e-de-e-character-style-mark::before {
435
+ content: "\e8bf";
436
+ font-family: "e-icons";
437
+ }
438
+
439
+ .e-de-e-linked-style-mark::before {
440
+ content: "\e8c0";
441
+ font-family: "e-icons";
442
+ }
443
+
429
444
  .e-de-ctnr-columns::before {
430
445
  content: "\e89d";
431
446
  font-family: "e-icons";
@@ -558,8 +573,48 @@
558
573
  height: 100%;
559
574
  }
560
575
 
576
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
577
+ box-shadow: none;
578
+ height: 31px;
579
+ }
580
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
581
+ box-shadow: none;
582
+ }
583
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
584
+ box-shadow: none;
585
+ }
586
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
587
+ box-shadow: none;
588
+ }
589
+
590
+ .e-de-ctnr-group-btn-middle button {
591
+ border-radius: 0px;
592
+ }
593
+
594
+ .de-tbl-fill-clr .e-dropdown-btn.e-btn {
595
+ box-shadow: none;
596
+ }
597
+
598
+ .e-de-prop-pane .e-de-ctnr-group-btn button,
599
+ .e-de-ctn .e-de-status-bar button {
600
+ box-shadow: none;
601
+ height: 31px;
602
+ }
603
+ .e-de-prop-pane .e-de-ctnr-group-btn button:focus,
604
+ .e-de-ctn .e-de-status-bar button:focus {
605
+ box-shadow: none;
606
+ }
607
+ .e-de-prop-pane .e-de-ctnr-group-btn button:active,
608
+ .e-de-ctn .e-de-status-bar button:active {
609
+ box-shadow: none;
610
+ }
611
+ .e-de-prop-pane .e-de-ctnr-group-btn button:hover,
612
+ .e-de-ctn .e-de-status-bar button:hover {
613
+ box-shadow: none;
614
+ }
615
+
561
616
  .e-de-statusbar-pageweb {
562
- background-color: #374151;
617
+ background: #374151;
563
618
  border: 0;
564
619
  box-shadow: none;
565
620
  float: right;
@@ -583,12 +638,25 @@
583
638
  font-size: 18px;
584
639
  }
585
640
 
641
+ .e-listview .e-list-icon {
642
+ height: 24px;
643
+ width: 16px;
644
+ margin-right: 10px;
645
+ }
646
+
647
+ .e-de-listview-icon {
648
+ height: auto;
649
+ width: auto;
650
+ line-height: 22px;
651
+ margin-right: 10px;
652
+ }
653
+
586
654
  .e-de-linespacing {
587
655
  margin-top: 8px;
588
656
  }
589
657
 
590
658
  .e-de-statusbar-zoom {
591
- background-color: #374151;
659
+ background: #374151;
592
660
  border: 0;
593
661
  color: #9ca3af;
594
662
  float: right;
@@ -677,14 +745,22 @@
677
745
  .e-de-statusbar-separator {
678
746
  border-left: 1px solid #4b5563;
679
747
  height: 16px;
680
- margin-left: 0;
748
+ margin-left: 7.5px;
749
+ margin-right: 7.5px;
750
+ margin-top: 6px;
751
+ }
752
+
753
+ .e-bigger .e-de-statusbar-separator {
754
+ border-left: 1px solid #4b5563;
755
+ height: 16px;
756
+ margin-left: 7.5px;
757
+ margin-right: 7.5px;
681
758
  margin-top: 6px;
682
759
  }
683
760
 
684
761
  .e-de-statusbar-spellcheck {
685
762
  border-radius: 2px;
686
763
  font-weight: 400;
687
- margin-left: 7.5px;
688
764
  }
689
765
 
690
766
  .e-de-ctn {
@@ -697,7 +773,6 @@
697
773
 
698
774
  .e-bigger .e-de-statusbar-spellcheck {
699
775
  border-radius: 2px;
700
- margin-left: 7.5px;
701
776
  }
702
777
 
703
778
  .e-de-ctnr-toolbar {
@@ -722,7 +797,7 @@
722
797
 
723
798
  .e-de-tool-ctnr-properties-pane,
724
799
  .e-de-ctnr-properties-pane {
725
- background-color: #232e3e;
800
+ background: #232e3e;
726
801
  border-bottom: 1px solid #4b5563;
727
802
  border-top: 1px solid #4b5563;
728
803
  }
@@ -870,7 +945,7 @@
870
945
  margin: 0 8px;
871
946
  }
872
947
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
873
- margin-left: 8px;
948
+ margin-left: 8px !important;
874
949
  margin-right: 8px;
875
950
  }
876
951
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -886,20 +961,23 @@
886
961
  }
887
962
 
888
963
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
964
+ -ms-flex-direction: column;
965
+ flex-direction: column;
966
+ height: calc(100% - 10px);
889
967
  padding: 0;
890
- padding-bottom: 14px;
968
+ padding-bottom: 10px;
891
969
  }
892
970
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
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:active {
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:hover {
901
979
  padding: 0;
902
- padding-bottom: 14px;
980
+ padding-bottom: 10px;
903
981
  }
904
982
 
905
983
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -928,7 +1006,7 @@
928
1006
  }
929
1007
 
930
1008
  .e-de-ctnr-properties-pane-btn .e-btn {
931
- background-color: #374151;
1009
+ background: #374151;
932
1010
  border-radius: 0;
933
1011
  box-shadow: none;
934
1012
  color: #22d3ee;
@@ -970,6 +1048,7 @@
970
1048
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
971
1049
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
972
1050
  padding: 0 !important;
1051
+ min-height: 16px;
973
1052
  }
974
1053
 
975
1054
  .e-de-hdr-ftr-frst-div {
@@ -992,6 +1071,7 @@
992
1071
  }
993
1072
 
994
1073
  .e-de-review-pane {
1074
+ background: #232e3e;
995
1075
  border-left: 1px solid #6b7280;
996
1076
  height: 100%;
997
1077
  min-height: 200px;
@@ -1016,34 +1096,6 @@
1016
1096
  margin-bottom: 16px;
1017
1097
  }
1018
1098
 
1019
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
1020
- box-shadow: none;
1021
- height: 31px;
1022
- }
1023
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
1024
- box-shadow: none;
1025
- }
1026
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
1027
- box-shadow: none;
1028
- }
1029
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1030
- box-shadow: none;
1031
- }
1032
-
1033
- .e-de-ctnr-group-btn button {
1034
- box-shadow: none;
1035
- height: 31px;
1036
- }
1037
- .e-de-ctnr-group-btn button:focus {
1038
- box-shadow: none;
1039
- }
1040
- .e-de-ctnr-group-btn button:active {
1041
- box-shadow: none;
1042
- }
1043
- .e-de-ctnr-group-btn button:hover {
1044
- box-shadow: none;
1045
- }
1046
-
1047
1099
  .e-de-property-div-padding {
1048
1100
  border-bottom: 0.5px solid #4b5563;
1049
1101
  padding: 12px;
@@ -1085,7 +1137,7 @@
1085
1137
  }
1086
1138
 
1087
1139
  .e-bigger .e-de-panel-right-width {
1088
- width: 86px;
1140
+ width: 96px;
1089
1141
  }
1090
1142
  .e-bigger .e-de-char-fmt-btn-left > button,
1091
1143
  .e-bigger .e-de-char-fmt-btn-right > button {
@@ -1177,7 +1229,7 @@
1177
1229
  }
1178
1230
 
1179
1231
  .e-de-list-header-presetmenu .e-de-list-line {
1180
- border-bottom: 1px solid #d1d5db;
1232
+ border-bottom: 1px solid #d1d5db !important;
1181
1233
  margin-left: 5px;
1182
1234
  width: 100%;
1183
1235
  }
@@ -1323,8 +1375,8 @@
1323
1375
  border: 1px solid #4b5563;
1324
1376
  color: #9ca3af;
1325
1377
  height: 129px;
1326
- margin-left: 78px;
1327
1378
  width: 94px;
1379
+ margin-left: 78px;
1328
1380
  }
1329
1381
 
1330
1382
  .e-de-toc-template1.e-de-rtl {
@@ -1380,7 +1432,7 @@
1380
1432
  }
1381
1433
 
1382
1434
  .e-de-status-bar {
1383
- background-color: #374151;
1435
+ background: #374151;
1384
1436
  display: -ms-flexbox;
1385
1437
  display: flex;
1386
1438
  padding-top: 0;
@@ -1505,7 +1557,7 @@
1505
1557
  }
1506
1558
 
1507
1559
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
1508
- height: 38px !important;
1560
+ height: 36px !important;
1509
1561
  }
1510
1562
 
1511
1563
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
@@ -1513,8 +1565,8 @@
1513
1565
  }
1514
1566
 
1515
1567
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
1516
- height: 38px;
1517
1568
  width: 38px;
1569
+ height: 38px;
1518
1570
  }
1519
1571
 
1520
1572
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1536,6 +1588,18 @@
1536
1588
  padding: 0;
1537
1589
  }
1538
1590
 
1591
+ .e-rtl .e-listview .e-list-icon {
1592
+ height: 24px;
1593
+ width: 16px;
1594
+ margin-left: 10px;
1595
+ }
1596
+ .e-rtl .e-de-listview-icon {
1597
+ height: auto;
1598
+ width: auto;
1599
+ line-height: 22px;
1600
+ margin-left: 10px;
1601
+ }
1602
+
1539
1603
  .e-bigger .de-split-button > div:first-child {
1540
1604
  margin-right: 0;
1541
1605
  }
@@ -1654,11 +1718,10 @@
1654
1718
  height: 81px;
1655
1719
  }
1656
1720
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-separator {
1657
- height: 25px;
1658
1721
  margin: 0 12px;
1659
1722
  }
1660
1723
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
1661
- margin-left: 12px;
1724
+ margin-left: 12px !important;
1662
1725
  margin-right: 12px;
1663
1726
  }
1664
1727
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1675,22 +1738,22 @@
1675
1738
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
1676
1739
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1677
1740
  padding: 0;
1678
- padding-bottom: 14px;
1741
+ padding-bottom: 10px;
1679
1742
  }
1680
1743
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
1681
1744
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
1682
1745
  padding: 0;
1683
- padding-bottom: 14px;
1746
+ padding-bottom: 10px;
1684
1747
  }
1685
1748
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
1686
1749
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
1687
1750
  padding: 0;
1688
- padding-bottom: 14px;
1751
+ padding-bottom: 10px;
1689
1752
  }
1690
1753
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
1691
1754
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
1692
1755
  padding: 0;
1693
- padding-bottom: 14px;
1756
+ padding-bottom: 10px;
1694
1757
  }
1695
1758
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
1696
1759
  padding: 0 !important;
@@ -1706,7 +1769,7 @@
1706
1769
  width: 75px;
1707
1770
  }
1708
1771
  .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
1709
- background-color: #374151;
1772
+ background: #374151;
1710
1773
  border-radius: 0;
1711
1774
  box-shadow: none;
1712
1775
  min-height: 100%;
@@ -1757,6 +1820,19 @@
1757
1820
  .e-bigger .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1758
1821
  box-shadow: none;
1759
1822
  }
1823
+ .e-bigger .e-de-status-bar button {
1824
+ height: 38px;
1825
+ box-shadow: none;
1826
+ }
1827
+ .e-bigger .e-de-status-bar button:focus {
1828
+ box-shadow: none;
1829
+ }
1830
+ .e-bigger .e-de-status-bar button:active {
1831
+ box-shadow: none;
1832
+ }
1833
+ .e-bigger .e-de-status-bar button:hover {
1834
+ box-shadow: none;
1835
+ }
1760
1836
  .e-bigger .e-de-ctnr-group-btn button {
1761
1837
  box-shadow: none;
1762
1838
  height: 38px;
@@ -1862,18 +1938,40 @@
1862
1938
  margin-left: 10px;
1863
1939
  }
1864
1940
  .e-bigger .e-de-status-bar {
1865
- background-color: #374151;
1941
+ background: #374151;
1866
1942
  display: -ms-flexbox;
1867
1943
  display: flex;
1868
1944
  padding-top: 6px;
1869
1945
  width: 100%;
1870
1946
  }
1871
1947
  .e-bigger .e-de-statusbar-zoom {
1872
- background-color: #374151;
1873
1948
  border: 0;
1874
1949
  color: #9ca3af;
1875
1950
  float: right;
1876
1951
  height: 34px;
1952
+ background-color: #374151;
1953
+ }
1954
+ .e-bigger .e-listview .e-list-icon {
1955
+ height: 24px;
1956
+ width: 16px;
1957
+ margin-right: 16px;
1958
+ }
1959
+ .e-bigger .e-de-listview-icon {
1960
+ height: auto;
1961
+ width: auto;
1962
+ line-height: 22px;
1963
+ margin-right: 16px;
1964
+ }
1965
+ .e-bigger .e-rtl .e-listview .e-list-icon {
1966
+ height: 24px;
1967
+ width: 16px;
1968
+ margin-left: 16px;
1969
+ }
1970
+ .e-bigger .e-rtl .e-de-listview-icon {
1971
+ height: auto;
1972
+ width: auto;
1973
+ line-height: 22px;
1974
+ margin-left: 16px;
1877
1975
  }
1878
1976
 
1879
1977
  .e-de-ctn .e-de-bzr-button {