@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
@@ -400,6 +400,21 @@
400
400
  font-family: "e-icons";
401
401
  }
402
402
 
403
+ .e-de-e-paragraph-style-mark::before {
404
+ content: "\e353";
405
+ font-family: "e-icons";
406
+ }
407
+
408
+ .e-de-e-character-style-mark::before {
409
+ content: "\e982";
410
+ font-family: "e-icons";
411
+ }
412
+
413
+ .e-de-e-linked-style-mark::before {
414
+ content: "\e983";
415
+ font-family: "e-icons";
416
+ }
417
+
403
418
  .e-de-ctnr-columns::before {
404
419
  content: "\e972";
405
420
  font-family: "e-icons";
@@ -532,8 +547,48 @@
532
547
  height: 100%;
533
548
  }
534
549
 
550
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
551
+ box-shadow: none;
552
+ height: 32px;
553
+ }
554
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
555
+ box-shadow: none;
556
+ }
557
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
558
+ box-shadow: none;
559
+ }
560
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
561
+ box-shadow: none;
562
+ }
563
+
564
+ .e-de-ctnr-group-btn-middle button {
565
+ border-radius: 0px;
566
+ }
567
+
568
+ .de-tbl-fill-clr .e-dropdown-btn.e-btn {
569
+ box-shadow: none;
570
+ }
571
+
572
+ .e-de-prop-pane .e-de-ctnr-group-btn button,
573
+ .e-de-ctn .e-de-status-bar button {
574
+ box-shadow: none;
575
+ height: 32px;
576
+ }
577
+ .e-de-prop-pane .e-de-ctnr-group-btn button:focus,
578
+ .e-de-ctn .e-de-status-bar button:focus {
579
+ box-shadow: none;
580
+ }
581
+ .e-de-prop-pane .e-de-ctnr-group-btn button:active,
582
+ .e-de-ctn .e-de-status-bar button:active {
583
+ box-shadow: none;
584
+ }
585
+ .e-de-prop-pane .e-de-ctnr-group-btn button:hover,
586
+ .e-de-ctn .e-de-status-bar button:hover {
587
+ box-shadow: none;
588
+ }
589
+
535
590
  .e-de-statusbar-pageweb {
536
- background-color: #282727;
591
+ background: #282727;
537
592
  border: 0;
538
593
  box-shadow: none;
539
594
  float: right;
@@ -562,12 +617,25 @@
562
617
  font-size: 16px;
563
618
  }
564
619
 
620
+ .e-listview .e-list-icon {
621
+ height: 24px;
622
+ width: 16px;
623
+ margin-right: 12px;
624
+ }
625
+
626
+ .e-de-listview-icon {
627
+ height: auto;
628
+ width: auto;
629
+ line-height: 22px;
630
+ margin-right: 12px;
631
+ }
632
+
565
633
  .e-de-linespacing {
566
634
  margin-top: 12px;
567
635
  }
568
636
 
569
637
  .e-de-statusbar-zoom {
570
- background-color: #282727;
638
+ background: #282727;
571
639
  border: 0;
572
640
  color: #dadada;
573
641
  float: right;
@@ -630,14 +698,22 @@
630
698
  .e-de-statusbar-separator {
631
699
  border-left: 1px solid #dadada;
632
700
  height: 16px;
633
- margin-left: 15.5;
701
+ margin-left: 7.5px;
702
+ margin-right: 7.5px;
703
+ margin-top: 10px;
704
+ }
705
+
706
+ .e-bigger .e-de-statusbar-separator {
707
+ border-left: 1px solid #dadada;
708
+ height: 16px;
709
+ margin-left: 7.5px;
710
+ margin-right: 7.5px;
634
711
  margin-top: 10px;
635
712
  }
636
713
 
637
714
  .e-de-statusbar-spellcheck {
638
715
  border-radius: 2px;
639
716
  font-weight: 400;
640
- margin-left: 7.5px;
641
717
  }
642
718
 
643
719
  .e-de-ctn {
@@ -650,7 +726,6 @@
650
726
 
651
727
  .e-bigger .e-de-statusbar-spellcheck {
652
728
  border-radius: 2px;
653
- margin-left: 7.5px;
654
729
  }
655
730
 
656
731
  .e-de-ctnr-toolbar {
@@ -675,7 +750,7 @@
675
750
 
676
751
  .e-de-tool-ctnr-properties-pane,
677
752
  .e-de-ctnr-properties-pane {
678
- background-color: #282727;
753
+ background: #282727;
679
754
  border-bottom: 1px solid #4a4848;
680
755
  border-top: 1px solid #4a4848;
681
756
  }
@@ -774,7 +849,7 @@
774
849
  margin: 0 5.5px;
775
850
  }
776
851
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
777
- margin-left: 12px;
852
+ margin-left: 12px !important;
778
853
  margin-right: 6px;
779
854
  }
780
855
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -790,20 +865,23 @@
790
865
  }
791
866
 
792
867
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
868
+ -ms-flex-direction: column;
869
+ flex-direction: column;
870
+ height: calc(100% - 10px);
793
871
  padding: 0;
794
- padding-bottom: 6px;
872
+ padding-bottom: 5px;
795
873
  }
796
874
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
797
875
  padding: 0;
798
- padding-bottom: 6px;
876
+ padding-bottom: 5px;
799
877
  }
800
878
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
801
879
  padding: 0;
802
- padding-bottom: 6px;
880
+ padding-bottom: 5px;
803
881
  }
804
882
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
805
883
  padding: 0;
806
- padding-bottom: 6px;
884
+ padding-bottom: 5px;
807
885
  }
808
886
 
809
887
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -832,7 +910,7 @@
832
910
  }
833
911
 
834
912
  .e-de-ctnr-properties-pane-btn .e-btn {
835
- background-color: #333232;
913
+ background: #333232;
836
914
  border-radius: 0;
837
915
  box-shadow: none;
838
916
  color: #007ddb;
@@ -874,6 +952,7 @@
874
952
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
875
953
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
876
954
  padding: 0 !important;
955
+ min-height: 16px;
877
956
  }
878
957
 
879
958
  .e-de-hdr-ftr-frst-div {
@@ -896,6 +975,7 @@
896
975
  }
897
976
 
898
977
  .e-de-review-pane {
978
+ background: #282727;
899
979
  border-left: 1px solid #4a4848;
900
980
  height: 100%;
901
981
  min-height: 200px;
@@ -913,34 +993,6 @@
913
993
  width: 272px;
914
994
  }
915
995
 
916
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
917
- box-shadow: none;
918
- height: 32px;
919
- }
920
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
921
- box-shadow: none;
922
- }
923
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
924
- box-shadow: none;
925
- }
926
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
927
- box-shadow: none;
928
- }
929
-
930
- .e-de-ctnr-group-btn button {
931
- box-shadow: none;
932
- height: 32px;
933
- }
934
- .e-de-ctnr-group-btn button:focus {
935
- box-shadow: none;
936
- }
937
- .e-de-ctnr-group-btn button:active {
938
- box-shadow: none;
939
- }
940
- .e-de-ctnr-group-btn button:hover {
941
- box-shadow: none;
942
- }
943
-
944
996
  .e-de-property-div-padding {
945
997
  border-bottom: 0.5px solid #4a4848;
946
998
  padding: 12.5px;
@@ -1064,7 +1116,7 @@
1064
1116
  }
1065
1117
 
1066
1118
  .e-de-list-header-presetmenu .e-de-list-line {
1067
- border-bottom: 1px solid #ccc;
1119
+ border-bottom: 1px solid #ccc !important;
1068
1120
  margin-left: 5px;
1069
1121
  width: 100%;
1070
1122
  }
@@ -1133,10 +1185,10 @@
1133
1185
  }
1134
1186
 
1135
1187
  .e-de-list-container {
1136
- background: #282727;
1137
1188
  border: 1px solid #ccc;
1138
1189
  border-radius: 2px;
1139
1190
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
1191
+ background: #282727;
1140
1192
  box-sizing: border-box;
1141
1193
  display: inline-block;
1142
1194
  line-height: normal;
@@ -1228,8 +1280,8 @@
1228
1280
  border: 1px solid #4a4848;
1229
1281
  color: #c8c8c8;
1230
1282
  height: 129px;
1231
- margin-left: 78px;
1232
1283
  width: 94px;
1284
+ margin-left: 78px;
1233
1285
  }
1234
1286
 
1235
1287
  .e-de-toc-template1.e-de-rtl {
@@ -1284,7 +1336,7 @@
1284
1336
  }
1285
1337
 
1286
1338
  .e-de-status-bar {
1287
- background-color: #282727;
1339
+ background: #282727;
1288
1340
  display: -ms-flexbox;
1289
1341
  display: flex;
1290
1342
  padding-top: 2.5px;
@@ -1409,7 +1461,7 @@
1409
1461
  }
1410
1462
 
1411
1463
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
1412
- height: 38px !important;
1464
+ height: 36px !important;
1413
1465
  }
1414
1466
 
1415
1467
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
@@ -1417,8 +1469,8 @@
1417
1469
  }
1418
1470
 
1419
1471
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
1420
- height: 38px;
1421
1472
  width: 38px;
1473
+ height: 38px;
1422
1474
  }
1423
1475
 
1424
1476
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1430,6 +1482,18 @@
1430
1482
  width: 70px;
1431
1483
  }
1432
1484
 
1485
+ .e-rtl .e-listview .e-list-icon {
1486
+ height: 24px;
1487
+ width: 16px;
1488
+ margin-left: 12px;
1489
+ }
1490
+ .e-rtl .e-de-listview-icon {
1491
+ height: auto;
1492
+ width: auto;
1493
+ line-height: 22px;
1494
+ margin-left: 12px;
1495
+ }
1496
+
1433
1497
  .e-bigger .de-split-button > div:first-child {
1434
1498
  margin-right: 0;
1435
1499
  }
@@ -1538,11 +1602,10 @@
1538
1602
  height: 82px;
1539
1603
  }
1540
1604
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-separator {
1541
- height: 25px;
1542
1605
  margin: 0 7.5px;
1543
1606
  }
1544
1607
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
1545
- margin-left: 16px;
1608
+ margin-left: 16px !important;
1546
1609
  margin-right: 8px;
1547
1610
  }
1548
1611
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1559,22 +1622,22 @@
1559
1622
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
1560
1623
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1561
1624
  padding: 0;
1562
- padding-bottom: 6px;
1625
+ padding-bottom: 5px;
1563
1626
  }
1564
1627
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
1565
1628
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
1566
1629
  padding: 0;
1567
- padding-bottom: 6px;
1630
+ padding-bottom: 5px;
1568
1631
  }
1569
1632
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
1570
1633
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
1571
1634
  padding: 0;
1572
- padding-bottom: 6px;
1635
+ padding-bottom: 5px;
1573
1636
  }
1574
1637
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
1575
1638
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
1576
1639
  padding: 0;
1577
- padding-bottom: 6px;
1640
+ padding-bottom: 5px;
1578
1641
  }
1579
1642
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
1580
1643
  padding: 0 !important;
@@ -1590,7 +1653,7 @@
1590
1653
  width: 75px;
1591
1654
  }
1592
1655
  .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
1593
- background-color: #333232;
1656
+ background: #333232;
1594
1657
  border-radius: 0;
1595
1658
  box-shadow: none;
1596
1659
  min-height: 100%;
@@ -1618,7 +1681,7 @@
1618
1681
  }
1619
1682
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
1620
1683
  display: table;
1621
- font-size: 12px;
1684
+ font-size: 12px !important;
1622
1685
  margin: 0 6px;
1623
1686
  padding: 0;
1624
1687
  white-space: normal;
@@ -1640,6 +1703,19 @@
1640
1703
  .e-bigger .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1641
1704
  box-shadow: none;
1642
1705
  }
1706
+ .e-bigger .e-de-status-bar button {
1707
+ height: 38px;
1708
+ box-shadow: none;
1709
+ }
1710
+ .e-bigger .e-de-status-bar button:focus {
1711
+ box-shadow: none;
1712
+ }
1713
+ .e-bigger .e-de-status-bar button:active {
1714
+ box-shadow: none;
1715
+ }
1716
+ .e-bigger .e-de-status-bar button:hover {
1717
+ box-shadow: none;
1718
+ }
1643
1719
  .e-bigger .e-de-ctnr-group-btn button {
1644
1720
  box-shadow: none;
1645
1721
  height: 38px;
@@ -1753,18 +1829,18 @@
1753
1829
  margin-left: 10px;
1754
1830
  }
1755
1831
  .e-bigger .e-de-status-bar {
1756
- background-color: #282727;
1832
+ background: #282727;
1757
1833
  display: -ms-flexbox;
1758
1834
  display: flex;
1759
1835
  padding-top: 3px;
1760
1836
  width: 100%;
1761
1837
  }
1762
1838
  .e-bigger .e-de-statusbar-zoom {
1763
- background-color: #282727;
1764
1839
  border: 0;
1765
1840
  color: #dadada;
1766
1841
  float: right;
1767
1842
  height: 34px;
1843
+ background-color: #282727;
1768
1844
  }
1769
1845
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
1770
1846
  line-height: 25px;
@@ -1774,6 +1850,28 @@
1774
1850
  height: 0;
1775
1851
  line-height: 0;
1776
1852
  }
1853
+ .e-bigger .e-listview .e-list-icon {
1854
+ height: 24px;
1855
+ width: 16px;
1856
+ margin-right: 16px;
1857
+ }
1858
+ .e-bigger .e-de-listview-icon {
1859
+ height: auto;
1860
+ width: auto;
1861
+ line-height: 22px;
1862
+ margin-right: 16px;
1863
+ }
1864
+ .e-bigger .e-rtl .e-listview .e-list-icon {
1865
+ height: 24px;
1866
+ width: 16px;
1867
+ margin-left: 16px;
1868
+ }
1869
+ .e-bigger .e-rtl .e-de-listview-icon {
1870
+ height: auto;
1871
+ width: auto;
1872
+ line-height: 22px;
1873
+ margin-left: 16px;
1874
+ }
1777
1875
 
1778
1876
  .e-de-ctn .e-de-bzr-button {
1779
1877
  font-size: 12px;