@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
@@ -399,6 +399,21 @@
399
399
  font-family: "e-icons";
400
400
  }
401
401
 
402
+ .e-de-e-paragraph-style-mark::before {
403
+ content: "\e353";
404
+ font-family: "e-icons";
405
+ }
406
+
407
+ .e-de-e-character-style-mark::before {
408
+ content: "\e980";
409
+ font-family: "e-icons";
410
+ }
411
+
412
+ .e-de-e-linked-style-mark::before {
413
+ content: "\e981";
414
+ font-family: "e-icons";
415
+ }
416
+
402
417
  .e-de-ctnr-columns::before {
403
418
  content: "\e968";
404
419
  font-family: "e-icons";
@@ -531,8 +546,48 @@
531
546
  height: 100%;
532
547
  }
533
548
 
549
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
550
+ box-shadow: none;
551
+ height: 32px;
552
+ }
553
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
554
+ box-shadow: none;
555
+ }
556
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
557
+ box-shadow: none;
558
+ }
559
+ .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
560
+ box-shadow: none;
561
+ }
562
+
563
+ .e-de-ctnr-group-btn-middle button {
564
+ border-radius: 0px;
565
+ }
566
+
567
+ .de-tbl-fill-clr .e-dropdown-btn.e-btn {
568
+ box-shadow: none;
569
+ }
570
+
571
+ .e-de-prop-pane .e-de-ctnr-group-btn button,
572
+ .e-de-ctn .e-de-status-bar button {
573
+ box-shadow: none;
574
+ height: 32px;
575
+ }
576
+ .e-de-prop-pane .e-de-ctnr-group-btn button:focus,
577
+ .e-de-ctn .e-de-status-bar button:focus {
578
+ box-shadow: none;
579
+ }
580
+ .e-de-prop-pane .e-de-ctnr-group-btn button:active,
581
+ .e-de-ctn .e-de-status-bar button:active {
582
+ box-shadow: none;
583
+ }
584
+ .e-de-prop-pane .e-de-ctnr-group-btn button:hover,
585
+ .e-de-ctn .e-de-status-bar button:hover {
586
+ box-shadow: none;
587
+ }
588
+
534
589
  .e-de-statusbar-pageweb {
535
- background-color: #000;
590
+ background: #000;
536
591
  border: 0;
537
592
  box-shadow: none;
538
593
  float: right;
@@ -561,12 +616,25 @@
561
616
  font-size: 16px;
562
617
  }
563
618
 
619
+ .e-listview .e-list-icon {
620
+ height: 24px;
621
+ width: 16px;
622
+ margin-right: 12px;
623
+ }
624
+
625
+ .e-de-listview-icon {
626
+ height: auto;
627
+ width: auto;
628
+ line-height: 22px;
629
+ margin-right: 12px;
630
+ }
631
+
564
632
  .e-de-linespacing {
565
633
  margin-top: 11px;
566
634
  }
567
635
 
568
636
  .e-de-statusbar-zoom {
569
- background-color: #000;
637
+ background: #000;
570
638
  border: 0;
571
639
  color: #fff;
572
640
  float: right;
@@ -629,14 +697,22 @@
629
697
  .e-de-statusbar-separator {
630
698
  border-left: 1px solid #dadada;
631
699
  height: 16px;
632
- margin-left: 15.5;
700
+ margin-left: 7.5px;
701
+ margin-right: 7.5px;
702
+ margin-top: 10px;
703
+ }
704
+
705
+ .e-bigger .e-de-statusbar-separator {
706
+ border-left: 1px solid #dadada;
707
+ height: 16px;
708
+ margin-left: 7.5px;
709
+ margin-right: 7.5px;
633
710
  margin-top: 10px;
634
711
  }
635
712
 
636
713
  .e-de-statusbar-spellcheck {
637
714
  border-radius: 2px;
638
715
  font-weight: 400;
639
- margin-left: 7.5px;
640
716
  }
641
717
 
642
718
  .e-de-ctn {
@@ -649,7 +725,6 @@
649
725
 
650
726
  .e-bigger .e-de-statusbar-spellcheck {
651
727
  border-radius: 2px;
652
- margin-left: 7.5px;
653
728
  }
654
729
 
655
730
  .e-de-ctnr-toolbar {
@@ -674,7 +749,7 @@
674
749
 
675
750
  .e-de-tool-ctnr-properties-pane,
676
751
  .e-de-ctnr-properties-pane {
677
- background-color: #000;
752
+ background: #000;
678
753
  border-bottom: 1px solid #fff;
679
754
  border-top: 1px solid #fff;
680
755
  }
@@ -773,7 +848,7 @@
773
848
  margin: 0 5.5px;
774
849
  }
775
850
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
776
- margin-left: 12px;
851
+ margin-left: 12px !important;
777
852
  margin-right: 6px;
778
853
  }
779
854
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -789,20 +864,23 @@
789
864
  }
790
865
 
791
866
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
867
+ -ms-flex-direction: column;
868
+ flex-direction: column;
869
+ height: calc(100% - 10px);
792
870
  padding: 0;
793
- padding-bottom: 6px;
871
+ padding-bottom: 5px;
794
872
  }
795
873
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
796
874
  padding: 0;
797
- padding-bottom: 6px;
875
+ padding-bottom: 5px;
798
876
  }
799
877
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
800
878
  padding: 0;
801
- padding-bottom: 6px;
879
+ padding-bottom: 5px;
802
880
  }
803
881
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
804
882
  padding: 0;
805
- padding-bottom: 6px;
883
+ padding-bottom: 5px;
806
884
  }
807
885
 
808
886
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -831,7 +909,7 @@
831
909
  }
832
910
 
833
911
  .e-de-ctnr-properties-pane-btn .e-btn {
834
- background-color: #000;
912
+ background: #000;
835
913
  border-radius: 0;
836
914
  box-shadow: none;
837
915
  color: #ffd939;
@@ -873,6 +951,7 @@
873
951
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
874
952
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
875
953
  padding: 0 !important;
954
+ min-height: 16px;
876
955
  }
877
956
 
878
957
  .e-de-hdr-ftr-frst-div {
@@ -895,6 +974,7 @@
895
974
  }
896
975
 
897
976
  .e-de-review-pane {
977
+ background: #000;
898
978
  border-left: 1px solid #e1e1e1;
899
979
  height: 100%;
900
980
  min-height: 200px;
@@ -912,34 +992,6 @@
912
992
  width: 272px;
913
993
  }
914
994
 
915
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
916
- box-shadow: none;
917
- height: 32px;
918
- }
919
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
920
- box-shadow: none;
921
- }
922
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
923
- box-shadow: none;
924
- }
925
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
926
- box-shadow: none;
927
- }
928
-
929
- .e-de-ctnr-group-btn button {
930
- box-shadow: none;
931
- height: 32px;
932
- }
933
- .e-de-ctnr-group-btn button:focus {
934
- box-shadow: none;
935
- }
936
- .e-de-ctnr-group-btn button:active {
937
- box-shadow: none;
938
- }
939
- .e-de-ctnr-group-btn button:hover {
940
- box-shadow: none;
941
- }
942
-
943
995
  .e-de-property-div-padding {
944
996
  border-bottom: 0.5px solid #e0e0e0;
945
997
  padding: 12.5px;
@@ -1063,7 +1115,7 @@
1063
1115
  }
1064
1116
 
1065
1117
  .e-de-list-header-presetmenu .e-de-list-line {
1066
- border-bottom: 1px solid #ccc;
1118
+ border-bottom: 1px solid #ccc !important;
1067
1119
  margin-left: 5px;
1068
1120
  width: 100%;
1069
1121
  }
@@ -1132,10 +1184,10 @@
1132
1184
  }
1133
1185
 
1134
1186
  .e-de-list-container {
1135
- background: #000;
1136
1187
  border: 1px solid #ccc;
1137
1188
  border-radius: 2px;
1138
1189
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
1190
+ background: #000;
1139
1191
  box-sizing: border-box;
1140
1192
  display: inline-block;
1141
1193
  line-height: normal;
@@ -1236,8 +1288,8 @@
1236
1288
  border: 1px solid #fff;
1237
1289
  color: #fff;
1238
1290
  height: 129px;
1239
- margin-left: 78px;
1240
1291
  width: 94px;
1292
+ margin-left: 78px;
1241
1293
  }
1242
1294
 
1243
1295
  .e-de-toc-template1.e-de-rtl {
@@ -1292,7 +1344,7 @@
1292
1344
  }
1293
1345
 
1294
1346
  .e-de-status-bar {
1295
- background-color: #000;
1347
+ background: #000;
1296
1348
  display: -ms-flexbox;
1297
1349
  display: flex;
1298
1350
  padding-top: 1.5px;
@@ -1417,7 +1469,7 @@
1417
1469
  }
1418
1470
 
1419
1471
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
1420
- height: 38px !important;
1472
+ height: 36px !important;
1421
1473
  }
1422
1474
 
1423
1475
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
@@ -1425,8 +1477,8 @@
1425
1477
  }
1426
1478
 
1427
1479
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
1428
- height: 38px;
1429
1480
  width: 38px;
1481
+ height: 38px;
1430
1482
  }
1431
1483
 
1432
1484
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1438,6 +1490,18 @@
1438
1490
  width: 70px;
1439
1491
  }
1440
1492
 
1493
+ .e-rtl .e-listview .e-list-icon {
1494
+ height: 24px;
1495
+ width: 16px;
1496
+ margin-left: 12px;
1497
+ }
1498
+ .e-rtl .e-de-listview-icon {
1499
+ height: auto;
1500
+ width: auto;
1501
+ line-height: 22px;
1502
+ margin-left: 12px;
1503
+ }
1504
+
1441
1505
  .e-bigger .de-split-button > div:first-child {
1442
1506
  margin-right: 0;
1443
1507
  }
@@ -1546,11 +1610,10 @@
1546
1610
  height: 82px;
1547
1611
  }
1548
1612
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-separator {
1549
- height: 25px;
1550
1613
  margin: 0 7.5px;
1551
1614
  }
1552
1615
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
1553
- margin-left: 16px;
1616
+ margin-left: 16px !important;
1554
1617
  margin-right: 8px;
1555
1618
  }
1556
1619
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1567,22 +1630,22 @@
1567
1630
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
1568
1631
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1569
1632
  padding: 0;
1570
- padding-bottom: 6px;
1633
+ padding-bottom: 5px;
1571
1634
  }
1572
1635
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
1573
1636
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
1574
1637
  padding: 0;
1575
- padding-bottom: 6px;
1638
+ padding-bottom: 5px;
1576
1639
  }
1577
1640
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
1578
1641
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
1579
1642
  padding: 0;
1580
- padding-bottom: 6px;
1643
+ padding-bottom: 5px;
1581
1644
  }
1582
1645
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
1583
1646
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
1584
1647
  padding: 0;
1585
- padding-bottom: 6px;
1648
+ padding-bottom: 5px;
1586
1649
  }
1587
1650
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
1588
1651
  padding: 0 !important;
@@ -1598,7 +1661,7 @@
1598
1661
  width: 75px;
1599
1662
  }
1600
1663
  .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
1601
- background-color: #000;
1664
+ background: #000;
1602
1665
  border-radius: 0;
1603
1666
  box-shadow: none;
1604
1667
  min-height: 100%;
@@ -1626,7 +1689,7 @@
1626
1689
  }
1627
1690
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
1628
1691
  display: table;
1629
- font-size: 12px;
1692
+ font-size: 12px !important;
1630
1693
  margin: 0 6px;
1631
1694
  padding: 0;
1632
1695
  white-space: normal;
@@ -1648,6 +1711,19 @@
1648
1711
  .e-bigger .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1649
1712
  box-shadow: none;
1650
1713
  }
1714
+ .e-bigger .e-de-status-bar button {
1715
+ height: 38px;
1716
+ box-shadow: none;
1717
+ }
1718
+ .e-bigger .e-de-status-bar button:focus {
1719
+ box-shadow: none;
1720
+ }
1721
+ .e-bigger .e-de-status-bar button:active {
1722
+ box-shadow: none;
1723
+ }
1724
+ .e-bigger .e-de-status-bar button:hover {
1725
+ box-shadow: none;
1726
+ }
1651
1727
  .e-bigger .e-de-ctnr-group-btn button {
1652
1728
  box-shadow: none;
1653
1729
  height: 38px;
@@ -1761,18 +1837,18 @@
1761
1837
  margin-left: 10px;
1762
1838
  }
1763
1839
  .e-bigger .e-de-status-bar {
1764
- background-color: #000;
1840
+ background: #000;
1765
1841
  display: -ms-flexbox;
1766
1842
  display: flex;
1767
1843
  padding-top: 1.5px;
1768
1844
  width: 100%;
1769
1845
  }
1770
1846
  .e-bigger .e-de-statusbar-zoom {
1771
- background-color: #000;
1772
1847
  border: 0;
1773
1848
  color: #fff;
1774
1849
  float: right;
1775
1850
  height: 34px;
1851
+ background-color: #000;
1776
1852
  }
1777
1853
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
1778
1854
  line-height: 25px;
@@ -1782,6 +1858,28 @@
1782
1858
  height: 0;
1783
1859
  line-height: 0;
1784
1860
  }
1861
+ .e-bigger .e-listview .e-list-icon {
1862
+ height: 24px;
1863
+ width: 16px;
1864
+ margin-right: 16px;
1865
+ }
1866
+ .e-bigger .e-de-listview-icon {
1867
+ height: auto;
1868
+ width: auto;
1869
+ line-height: 22px;
1870
+ margin-right: 16px;
1871
+ }
1872
+ .e-bigger .e-rtl .e-listview .e-list-icon {
1873
+ height: 24px;
1874
+ width: 16px;
1875
+ margin-left: 16px;
1876
+ }
1877
+ .e-bigger .e-rtl .e-de-listview-icon {
1878
+ height: auto;
1879
+ width: auto;
1880
+ line-height: 22px;
1881
+ margin-left: 16px;
1882
+ }
1785
1883
 
1786
1884
  .e-de-ctn .e-de-bzr-button {
1787
1885
  font-size: 12px;