@syncfusion/ej2-ribbon 21.2.3 → 22.1.39

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 (102) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +8 -0
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es2015.js +1254 -165
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +1275 -180
  8. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  9. package/dist/global/ej2-ribbon.min.js +2 -2
  10. package/dist/global/ej2-ribbon.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +16 -13
  13. package/src/ribbon/base/interface.d.ts +6 -6
  14. package/src/ribbon/base/interface.js +6 -6
  15. package/src/ribbon/base/ribbon-model.d.ts +2 -2
  16. package/src/ribbon/base/ribbon.d.ts +43 -1
  17. package/src/ribbon/base/ribbon.js +1074 -163
  18. package/src/ribbon/base/utils.d.ts +2 -2
  19. package/src/ribbon/base/utils.js +16 -10
  20. package/src/ribbon/items/ribbon-button.js +1 -0
  21. package/src/ribbon/items/ribbon-checkbox.js +1 -0
  22. package/src/ribbon/items/ribbon-colorpicker.js +1 -0
  23. package/src/ribbon/items/ribbon-combobox.js +1 -0
  24. package/src/ribbon/items/ribbon-dropdown.d.ts +7 -1
  25. package/src/ribbon/items/ribbon-dropdown.js +152 -1
  26. package/src/ribbon/items/ribbon-splitbutton.js +24 -0
  27. package/src/ribbon/models/ribbon-combobox-settings-model.d.ts +10 -5
  28. package/src/ribbon/models/ribbon-combobox-settings.d.ts +10 -5
  29. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +3 -1
  30. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +3 -1
  31. package/src/ribbon/models/ribbon-item-model.d.ts +1 -1
  32. package/src/ribbon/models/ribbon-item.d.ts +1 -1
  33. package/styles/bootstrap-dark.css +27 -0
  34. package/styles/bootstrap.css +27 -0
  35. package/styles/bootstrap4.css +27 -0
  36. package/styles/bootstrap5-dark.css +27 -0
  37. package/styles/bootstrap5.css +27 -0
  38. package/styles/fabric-dark.css +27 -0
  39. package/styles/fabric.css +27 -0
  40. package/styles/fluent-dark.css +27 -0
  41. package/styles/fluent.css +27 -0
  42. package/styles/highcontrast-light.css +27 -0
  43. package/styles/highcontrast.css +31 -4
  44. package/styles/material-dark.css +27 -0
  45. package/styles/material.css +27 -0
  46. package/styles/material3-dark.css +1672 -0
  47. package/styles/material3-dark.scss +3 -0
  48. package/styles/material3.css +1728 -0
  49. package/styles/material3.scss +3 -0
  50. package/styles/ribbon/_bootstrap-dark-definition.scss +4 -0
  51. package/styles/ribbon/_bootstrap-definition.scss +4 -0
  52. package/styles/ribbon/_bootstrap4-definition.scss +4 -0
  53. package/styles/ribbon/_bootstrap5-definition.scss +4 -0
  54. package/styles/ribbon/_fabric-dark-definition.scss +4 -0
  55. package/styles/ribbon/_fabric-definition.scss +4 -0
  56. package/styles/ribbon/_fluent-definition.scss +4 -0
  57. package/styles/ribbon/_fusionnew-definition.scss +4 -0
  58. package/styles/ribbon/_highcontrast-definition.scss +6 -2
  59. package/styles/ribbon/_highcontrast-light-definition.scss +4 -0
  60. package/styles/ribbon/_layout.scss +28 -0
  61. package/styles/ribbon/_material-dark-definition.scss +4 -0
  62. package/styles/ribbon/_material-definition.scss +4 -0
  63. package/styles/ribbon/_material3-dark-definition.scss +1 -0
  64. package/styles/ribbon/_material3-definition.scss +210 -0
  65. package/styles/ribbon/_tailwind-definition.scss +4 -0
  66. package/styles/ribbon/bootstrap-dark.css +27 -0
  67. package/styles/ribbon/bootstrap-dark.scss +1 -0
  68. package/styles/ribbon/bootstrap.css +27 -0
  69. package/styles/ribbon/bootstrap.scss +1 -0
  70. package/styles/ribbon/bootstrap4.css +27 -0
  71. package/styles/ribbon/bootstrap4.scss +1 -0
  72. package/styles/ribbon/bootstrap5-dark.css +27 -0
  73. package/styles/ribbon/bootstrap5-dark.scss +1 -0
  74. package/styles/ribbon/bootstrap5.css +27 -0
  75. package/styles/ribbon/bootstrap5.scss +1 -0
  76. package/styles/ribbon/fabric-dark.css +27 -0
  77. package/styles/ribbon/fabric-dark.scss +1 -0
  78. package/styles/ribbon/fabric.css +27 -0
  79. package/styles/ribbon/fabric.scss +1 -0
  80. package/styles/ribbon/fluent-dark.css +27 -0
  81. package/styles/ribbon/fluent-dark.scss +1 -0
  82. package/styles/ribbon/fluent.css +27 -0
  83. package/styles/ribbon/fluent.scss +1 -0
  84. package/styles/ribbon/highcontrast-light.css +27 -0
  85. package/styles/ribbon/highcontrast-light.scss +1 -0
  86. package/styles/ribbon/highcontrast.css +31 -4
  87. package/styles/ribbon/highcontrast.scss +1 -0
  88. package/styles/ribbon/icons/_material3-dark.scss +1 -0
  89. package/styles/ribbon/material-dark.css +27 -0
  90. package/styles/ribbon/material-dark.scss +1 -0
  91. package/styles/ribbon/material.css +27 -0
  92. package/styles/ribbon/material.scss +1 -0
  93. package/styles/ribbon/material3-dark.css +1672 -0
  94. package/styles/ribbon/material3-dark.scss +19 -0
  95. package/styles/ribbon/material3.css +1728 -0
  96. package/styles/ribbon/material3.scss +19 -0
  97. package/styles/ribbon/tailwind-dark.css +27 -0
  98. package/styles/ribbon/tailwind-dark.scss +1 -0
  99. package/styles/ribbon/tailwind.css +27 -0
  100. package/styles/ribbon/tailwind.scss +1 -0
  101. package/styles/tailwind-dark.css +27 -0
  102. package/styles/tailwind.css +27 -0
package/styles/highcontrast.css CHANGED
@@ -130,6 +130,7 @@
130
130
  border-width: 0 0 1px 0;
131
131
  font-size: 14px;
132
132
  font-weight: 400;
133
+ box-shadow: none;
133
134
  }
134
135
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
135
136
  border-radius: unset;
@@ -243,7 +244,7 @@
243
244
  height: 40px;
244
245
  }
245
246
  .e-ribbon.e-rbn .e-content {
246
- width: calc(100% - 20px);
247
+ width: calc(100% - 25px);
247
248
  }
248
249
  .e-ribbon.e-rbn .e-ribbon-collapse-btn {
249
250
  bottom: 0;
@@ -257,7 +258,7 @@
257
258
  transform: rotate(180deg);
258
259
  }
259
260
  .e-ribbon.e-rbn.e-ribbon-overflow .e-content {
260
- width: calc(100% - 20px - 40px);
261
+ width: calc(100% - 25px - 40px);
261
262
  }
262
263
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn,
263
264
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
@@ -267,6 +268,7 @@
267
268
  border: 2px solid;
268
269
  height: 40px;
269
270
  margin: auto;
271
+ box-shadow: none;
270
272
  }
271
273
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
272
274
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -406,6 +408,8 @@
406
408
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
407
409
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
408
410
  min-width: auto;
411
+ min-height: auto;
412
+ border-radius: unset;
409
413
  }
410
414
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
411
415
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -489,6 +493,7 @@
489
493
  font-weight: 400;
490
494
  font-size: 14px;
491
495
  text-transform: none;
496
+ box-shadow: none;
492
497
  }
493
498
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
494
499
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -597,6 +602,7 @@
597
602
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
598
603
  border: 1px solid transparent;
599
604
  border-radius: unset;
605
+ box-shadow: none;
600
606
  }
601
607
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
602
608
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -721,6 +727,7 @@
721
727
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
722
728
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
723
729
  line-height: 22px;
730
+ overflow: hidden;
724
731
  }
725
732
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
726
733
  width: inherit;
@@ -768,6 +775,17 @@
768
775
  padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
769
776
  }
770
777
 
778
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
779
+ font-size: 16px;
780
+ height: 36px;
781
+ -ms-flex-align: center;
782
+ align-items: center;
783
+ }
784
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
785
+ font-size: 16px;
786
+ line-height: 16px;
787
+ }
788
+
771
789
  .e-ribbon-tooltip .e-tip-content {
772
790
  padding: 4px;
773
791
  }
@@ -836,7 +854,7 @@
836
854
  }
837
855
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible .e-content,
838
856
  .e-bigger .e-ribbon.e-rbn.e-ribbon-collapsible .e-content {
839
- width: calc(100% - 24px);
857
+ width: calc(100% - 28px);
840
858
  }
841
859
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible .e-ribbon-collapse-btn,
842
860
  .e-bigger .e-ribbon.e-rbn.e-ribbon-collapsible .e-ribbon-collapse-btn {
@@ -846,7 +864,7 @@
846
864
  }
847
865
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-content,
848
866
  .e-bigger .e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-content {
849
- width: calc(100% - 24px - 40px);
867
+ width: calc(100% - 28px - 40px);
850
868
  }
851
869
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-ribbon-group-of-btn,
852
870
  .e-bigger.e-ribbon.e-rbn.e-ribbon-collapsible.e-ribbon-overflow .e-ribbon-overall-of-btn,
@@ -1144,6 +1162,15 @@
1144
1162
  padding: 10px;
1145
1163
  }
1146
1164
 
1165
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1166
+ font-size: 16px;
1167
+ height: 45px;
1168
+ }
1169
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1170
+ font-size: 20px;
1171
+ line-height: 20px;
1172
+ }
1173
+
1147
1174
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1148
1175
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1149
1176
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/material-dark.css CHANGED
@@ -184,6 +184,7 @@
184
184
  border-width: 0 0 1px 0;
185
185
  font-size: 14px;
186
186
  font-weight: 400;
187
+ box-shadow: none;
187
188
  }
188
189
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
189
190
  border-radius: unset;
@@ -321,6 +322,7 @@
321
322
  border: none;
322
323
  height: 32px;
323
324
  margin: auto;
325
+ box-shadow: none;
324
326
  }
325
327
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
326
328
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -460,6 +462,8 @@
460
462
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
461
463
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
462
464
  min-width: auto;
465
+ min-height: auto;
466
+ border-radius: unset;
463
467
  }
464
468
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
465
469
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -543,6 +547,7 @@
543
547
  font-weight: 400;
544
548
  font-size: 12px;
545
549
  text-transform: none;
550
+ box-shadow: none;
546
551
  }
547
552
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
548
553
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -651,6 +656,7 @@
651
656
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
652
657
  border: 1px solid transparent;
653
658
  border-radius: unset;
659
+ box-shadow: none;
654
660
  }
655
661
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
656
662
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -775,6 +781,7 @@
775
781
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
776
782
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
777
783
  line-height: 22px;
784
+ overflow: hidden;
778
785
  }
779
786
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
780
787
  width: inherit;
@@ -822,6 +829,17 @@
822
829
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
823
830
  }
824
831
 
832
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
833
+ font-size: 14px;
834
+ height: 36px;
835
+ -ms-flex-align: center;
836
+ align-items: center;
837
+ }
838
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
839
+ font-size: 16px;
840
+ line-height: 16px;
841
+ }
842
+
825
843
  .e-ribbon-tooltip .e-tip-content {
826
844
  padding: 4px;
827
845
  }
@@ -1198,6 +1216,15 @@
1198
1216
  padding: 8px;
1199
1217
  }
1200
1218
 
1219
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1220
+ font-size: 16px;
1221
+ height: 48px;
1222
+ }
1223
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1224
+ font-size: 20px;
1225
+ line-height: 20px;
1226
+ }
1227
+
1201
1228
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1202
1229
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1203
1230
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
package/styles/material.css CHANGED
@@ -217,6 +217,7 @@
217
217
  border-width: 0 0 1px 0;
218
218
  font-size: 14px;
219
219
  font-weight: 400;
220
+ box-shadow: none;
220
221
  }
221
222
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
222
223
  border-radius: unset;
@@ -354,6 +355,7 @@
354
355
  border: none;
355
356
  height: 32px;
356
357
  margin: auto;
358
+ box-shadow: none;
357
359
  }
358
360
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
359
361
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -493,6 +495,8 @@
493
495
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
494
496
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
495
497
  min-width: auto;
498
+ min-height: auto;
499
+ border-radius: unset;
496
500
  }
497
501
  .e-ribbon.e-rbn .e-input-group .e-clear-icon,
498
502
  .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -576,6 +580,7 @@
576
580
  font-weight: 400;
577
581
  font-size: 12px;
578
582
  text-transform: none;
583
+ box-shadow: none;
579
584
  }
580
585
  .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
581
586
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -684,6 +689,7 @@
684
689
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
685
690
  border: 1px solid transparent;
686
691
  border-radius: unset;
692
+ box-shadow: none;
687
693
  }
688
694
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
689
695
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -808,6 +814,7 @@
808
814
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
809
815
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
810
816
  line-height: 18px;
817
+ overflow: hidden;
811
818
  }
812
819
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
813
820
  width: inherit;
@@ -855,6 +862,17 @@
855
862
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
856
863
  }
857
864
 
865
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
866
+ font-size: 14px;
867
+ height: 36px;
868
+ -ms-flex-align: center;
869
+ align-items: center;
870
+ }
871
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
872
+ font-size: 16px;
873
+ line-height: 16px;
874
+ }
875
+
858
876
  .e-ribbon-tooltip .e-tip-content {
859
877
  padding: 4px;
860
878
  }
@@ -1231,6 +1249,15 @@
1231
1249
  padding: 8px;
1232
1250
  }
1233
1251
 
1252
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1253
+ font-size: 16px;
1254
+ height: 48px;
1255
+ }
1256
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1257
+ font-size: 20px;
1258
+ line-height: 20px;
1259
+ }
1260
+
1234
1261
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1235
1262
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1236
1263
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,