@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: "\e98e";
409
+ font-family: "e-icons";
410
+ }
411
+
412
+ .e-de-e-linked-style-mark::before {
413
+ content: "\e992";
414
+ font-family: "e-icons";
415
+ }
416
+
402
417
  .e-de-ctnr-columns::before {
403
418
  content: "\e955";
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: 34px;
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: 34px;
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: #1a1a1a;
590
+ background: #1a1a1a;
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: 6px;
566
634
  }
567
635
 
568
636
  .e-de-statusbar-zoom {
569
- background-color: #1a1a1a;
637
+ background: #1a1a1a;
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 #ccc;
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 #ccc;
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: #1a1a1a;
752
+ background: #1a1a1a;
678
753
  border-bottom: 1px solid #505050;
679
754
  border-top: 1px solid #505050;
680
755
  }
@@ -784,7 +859,7 @@
784
859
  margin: 0 5.5px;
785
860
  }
786
861
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
787
- margin-left: 12px;
862
+ margin-left: 12px !important;
788
863
  margin-right: 6px;
789
864
  }
790
865
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -800,20 +875,23 @@
800
875
  }
801
876
 
802
877
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
878
+ -ms-flex-direction: column;
879
+ flex-direction: column;
880
+ height: calc(100% - 10px);
803
881
  padding: 0;
804
- padding-bottom: 6px;
882
+ padding-bottom: 5px;
805
883
  }
806
884
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
807
885
  padding: 0;
808
- padding-bottom: 6px;
886
+ padding-bottom: 5px;
809
887
  }
810
888
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
811
889
  padding: 0;
812
- padding-bottom: 6px;
890
+ padding-bottom: 5px;
813
891
  }
814
892
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
815
893
  padding: 0;
816
- padding-bottom: 6px;
894
+ padding-bottom: 5px;
817
895
  }
818
896
 
819
897
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -842,7 +920,7 @@
842
920
  }
843
921
 
844
922
  .e-de-ctnr-properties-pane-btn .e-btn {
845
- background-color: #131313;
923
+ background: #131313;
846
924
  border-radius: 0;
847
925
  box-shadow: none;
848
926
  color: #0070f0;
@@ -884,6 +962,7 @@
884
962
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
885
963
  .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
886
964
  padding: 0 !important;
965
+ min-height: 16px;
887
966
  }
888
967
 
889
968
  .e-de-hdr-ftr-frst-div {
@@ -906,6 +985,7 @@
906
985
  }
907
986
 
908
987
  .e-de-review-pane {
988
+ background: #1a1a1a;
909
989
  border-left: 1px solid #505050;
910
990
  height: 100%;
911
991
  min-height: 200px;
@@ -923,34 +1003,6 @@
923
1003
  width: 272px;
924
1004
  }
925
1005
 
926
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
927
- box-shadow: none;
928
- height: 34px;
929
- }
930
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):focus {
931
- box-shadow: none;
932
- }
933
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):active {
934
- box-shadow: none;
935
- }
936
- .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
937
- box-shadow: none;
938
- }
939
-
940
- .e-de-ctnr-group-btn button {
941
- box-shadow: none;
942
- height: 34px;
943
- }
944
- .e-de-ctnr-group-btn button:focus {
945
- box-shadow: none;
946
- }
947
- .e-de-ctnr-group-btn button:active {
948
- box-shadow: none;
949
- }
950
- .e-de-ctnr-group-btn button:hover {
951
- box-shadow: none;
952
- }
953
-
954
1006
  .e-de-property-div-padding {
955
1007
  border-bottom: 0.5px solid #505050;
956
1008
  padding: 12.5px;
@@ -1074,7 +1126,7 @@
1074
1126
  }
1075
1127
 
1076
1128
  .e-de-list-header-presetmenu .e-de-list-line {
1077
- border-bottom: 1px solid #ccc;
1129
+ border-bottom: 1px solid #ccc !important;
1078
1130
  margin-left: 5px;
1079
1131
  width: 100%;
1080
1132
  }
@@ -1143,10 +1195,10 @@
1143
1195
  }
1144
1196
 
1145
1197
  .e-de-list-container {
1146
- background: #1a1a1a;
1147
1198
  border: 1px solid #ccc;
1148
1199
  border-radius: 2px;
1149
1200
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
1201
+ background: #1a1a1a;
1150
1202
  box-sizing: border-box;
1151
1203
  display: inline-block;
1152
1204
  line-height: normal;
@@ -1238,8 +1290,8 @@
1238
1290
  border: 1px solid #505050;
1239
1291
  color: #acacac;
1240
1292
  height: 129px;
1241
- margin-left: 78px;
1242
1293
  width: 94px;
1294
+ margin-left: 78px;
1243
1295
  }
1244
1296
 
1245
1297
  .e-de-toc-template1.e-de-rtl {
@@ -1294,7 +1346,7 @@
1294
1346
  }
1295
1347
 
1296
1348
  .e-de-status-bar {
1297
- background-color: #1a1a1a;
1349
+ background: #1a1a1a;
1298
1350
  display: -ms-flexbox;
1299
1351
  display: flex;
1300
1352
  padding-top: 2.5px;
@@ -1419,7 +1471,7 @@
1419
1471
  }
1420
1472
 
1421
1473
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
1422
- height: 38px !important;
1474
+ height: 36px !important;
1423
1475
  }
1424
1476
 
1425
1477
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
@@ -1427,8 +1479,8 @@
1427
1479
  }
1428
1480
 
1429
1481
  .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
1430
- height: 38px;
1431
1482
  width: 38px;
1483
+ height: 38px;
1432
1484
  }
1433
1485
 
1434
1486
  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1440,6 +1492,18 @@
1440
1492
  width: 70px;
1441
1493
  }
1442
1494
 
1495
+ .e-rtl .e-listview .e-list-icon {
1496
+ height: 24px;
1497
+ width: 16px;
1498
+ margin-left: 12px;
1499
+ }
1500
+ .e-rtl .e-de-listview-icon {
1501
+ height: auto;
1502
+ width: auto;
1503
+ line-height: 22px;
1504
+ margin-left: 12px;
1505
+ }
1506
+
1443
1507
  .e-bigger .de-split-button > div:first-child {
1444
1508
  margin-right: 16px;
1445
1509
  }
@@ -1557,11 +1621,10 @@
1557
1621
  height: 82px;
1558
1622
  }
1559
1623
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-separator {
1560
- height: 25px;
1561
1624
  margin: 0 7.5px;
1562
1625
  }
1563
1626
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
1564
- margin-left: 16px;
1627
+ margin-left: 16px !important;
1565
1628
  margin-right: 8px;
1566
1629
  }
1567
1630
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1578,22 +1641,22 @@
1578
1641
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
1579
1642
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1580
1643
  padding: 0;
1581
- padding-bottom: 6px;
1644
+ padding-bottom: 5px;
1582
1645
  }
1583
1646
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
1584
1647
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
1585
1648
  padding: 0;
1586
- padding-bottom: 6px;
1649
+ padding-bottom: 5px;
1587
1650
  }
1588
1651
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
1589
1652
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
1590
1653
  padding: 0;
1591
- padding-bottom: 6px;
1654
+ padding-bottom: 5px;
1592
1655
  }
1593
1656
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
1594
1657
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
1595
1658
  padding: 0;
1596
- padding-bottom: 6px;
1659
+ padding-bottom: 5px;
1597
1660
  }
1598
1661
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
1599
1662
  padding: 0 !important;
@@ -1609,7 +1672,7 @@
1609
1672
  width: 75px;
1610
1673
  }
1611
1674
  .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
1612
- background-color: #131313;
1675
+ background: #131313;
1613
1676
  border-radius: 0;
1614
1677
  box-shadow: none;
1615
1678
  min-height: 100%;
@@ -1637,7 +1700,7 @@
1637
1700
  }
1638
1701
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
1639
1702
  display: table;
1640
- font-size: 12px;
1703
+ font-size: 12px !important;
1641
1704
  margin: 0 6px;
1642
1705
  padding: 0;
1643
1706
  white-space: normal;
@@ -1659,6 +1722,19 @@
1659
1722
  .e-bigger .e-de-ctnr-group-btn.e-btn-group:not(.e-outline):hover {
1660
1723
  box-shadow: none;
1661
1724
  }
1725
+ .e-bigger .e-de-status-bar button {
1726
+ height: 38px;
1727
+ box-shadow: none;
1728
+ }
1729
+ .e-bigger .e-de-status-bar button:focus {
1730
+ box-shadow: none;
1731
+ }
1732
+ .e-bigger .e-de-status-bar button:active {
1733
+ box-shadow: none;
1734
+ }
1735
+ .e-bigger .e-de-status-bar button:hover {
1736
+ box-shadow: none;
1737
+ }
1662
1738
  .e-bigger .e-de-ctnr-group-btn button {
1663
1739
  box-shadow: none;
1664
1740
  height: 38px;
@@ -1772,18 +1848,18 @@
1772
1848
  margin-left: 10px;
1773
1849
  }
1774
1850
  .e-bigger .e-de-status-bar {
1775
- background-color: #1a1a1a;
1851
+ background: #1a1a1a;
1776
1852
  display: -ms-flexbox;
1777
1853
  display: flex;
1778
1854
  padding-top: 2.5px;
1779
1855
  width: 100%;
1780
1856
  }
1781
1857
  .e-bigger .e-de-statusbar-zoom {
1782
- background-color: #1a1a1a;
1783
1858
  border: 0;
1784
1859
  color: #fff;
1785
1860
  float: right;
1786
1861
  height: 34px;
1862
+ background-color: #1a1a1a;
1787
1863
  }
1788
1864
  .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
1789
1865
  line-height: 25px;
@@ -1793,6 +1869,28 @@
1793
1869
  height: 0;
1794
1870
  line-height: 0;
1795
1871
  }
1872
+ .e-bigger .e-listview .e-list-icon {
1873
+ height: 24px;
1874
+ width: 16px;
1875
+ margin-right: 16px;
1876
+ }
1877
+ .e-bigger .e-de-listview-icon {
1878
+ height: auto;
1879
+ width: auto;
1880
+ line-height: 22px;
1881
+ margin-right: 16px;
1882
+ }
1883
+ .e-bigger .e-rtl .e-listview .e-list-icon {
1884
+ height: 24px;
1885
+ width: 16px;
1886
+ margin-left: 16px;
1887
+ }
1888
+ .e-bigger .e-rtl .e-de-listview-icon {
1889
+ height: auto;
1890
+ width: auto;
1891
+ line-height: 22px;
1892
+ margin-left: 16px;
1893
+ }
1796
1894
 
1797
1895
  .e-de-ctn .e-de-bzr-button {
1798
1896
  font-size: 12px;