@syncfusion/ej2-ribbon 21.1.37 → 22.1.34

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 (89) hide show
  1. package/.eslintrc.json +1 -0
  2. package/dist/ej2-ribbon.umd.min.js +2 -2
  3. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-ribbon.es2015.js +1344 -176
  5. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  6. package/dist/es6/ej2-ribbon.es5.js +1367 -191
  7. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  8. package/dist/global/ej2-ribbon.min.js +2 -2
  9. package/dist/global/ej2-ribbon.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +12 -12
  12. package/src/ribbon/base/constant.d.ts +2 -0
  13. package/src/ribbon/base/constant.js +2 -0
  14. package/src/ribbon/base/interface.d.ts +6 -6
  15. package/src/ribbon/base/interface.js +6 -6
  16. package/src/ribbon/base/ribbon-model.d.ts +2 -2
  17. package/src/ribbon/base/ribbon.d.ts +43 -1
  18. package/src/ribbon/base/ribbon.js +1082 -169
  19. package/src/ribbon/base/utils.d.ts +2 -2
  20. package/src/ribbon/base/utils.js +11 -6
  21. package/src/ribbon/items/ribbon-button.js +1 -0
  22. package/src/ribbon/items/ribbon-checkbox.js +1 -0
  23. package/src/ribbon/items/ribbon-colorpicker.d.ts +7 -0
  24. package/src/ribbon/items/ribbon-colorpicker.js +41 -3
  25. package/src/ribbon/items/ribbon-combobox.js +5 -1
  26. package/src/ribbon/items/ribbon-dropdown.d.ts +7 -1
  27. package/src/ribbon/items/ribbon-dropdown.js +173 -3
  28. package/src/ribbon/items/ribbon-splitbutton.js +45 -2
  29. package/src/ribbon/models/ribbon-combobox-settings-model.d.ts +10 -5
  30. package/src/ribbon/models/ribbon-combobox-settings.d.ts +10 -5
  31. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +3 -1
  32. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +3 -1
  33. package/src/ribbon/models/ribbon-item-model.d.ts +1 -1
  34. package/src/ribbon/models/ribbon-item.d.ts +1 -1
  35. package/styles/bootstrap-dark.css +62 -12
  36. package/styles/bootstrap.css +62 -12
  37. package/styles/bootstrap4.css +62 -12
  38. package/styles/bootstrap5-dark.css +62 -12
  39. package/styles/bootstrap5.css +62 -12
  40. package/styles/fabric-dark.css +62 -12
  41. package/styles/fabric.css +62 -12
  42. package/styles/fluent-dark.css +62 -12
  43. package/styles/fluent.css +62 -12
  44. package/styles/highcontrast-light.css +62 -12
  45. package/styles/highcontrast.css +66 -16
  46. package/styles/material-dark.css +62 -12
  47. package/styles/material.css +62 -12
  48. package/styles/material3-dark.css +1671 -0
  49. package/styles/material3-dark.scss +3 -0
  50. package/styles/material3.css +1727 -0
  51. package/styles/material3.scss +3 -0
  52. package/styles/ribbon/_bootstrap-dark-definition.scss +4 -0
  53. package/styles/ribbon/_bootstrap-definition.scss +4 -0
  54. package/styles/ribbon/_bootstrap4-definition.scss +4 -0
  55. package/styles/ribbon/_bootstrap5-definition.scss +4 -0
  56. package/styles/ribbon/_fabric-dark-definition.scss +4 -0
  57. package/styles/ribbon/_fabric-definition.scss +4 -0
  58. package/styles/ribbon/_fluent-definition.scss +4 -0
  59. package/styles/ribbon/_fusionnew-definition.scss +4 -0
  60. package/styles/ribbon/_highcontrast-definition.scss +6 -2
  61. package/styles/ribbon/_highcontrast-light-definition.scss +4 -0
  62. package/styles/ribbon/_layout.scss +88 -18
  63. package/styles/ribbon/_material-dark-definition.scss +4 -0
  64. package/styles/ribbon/_material-definition.scss +4 -0
  65. package/styles/ribbon/_material3-dark-definition.scss +1 -0
  66. package/styles/ribbon/_material3-definition.scss +210 -0
  67. package/styles/ribbon/_tailwind-definition.scss +4 -0
  68. package/styles/ribbon/bootstrap-dark.css +62 -12
  69. package/styles/ribbon/bootstrap.css +62 -12
  70. package/styles/ribbon/bootstrap4.css +62 -12
  71. package/styles/ribbon/bootstrap5-dark.css +62 -12
  72. package/styles/ribbon/bootstrap5.css +62 -12
  73. package/styles/ribbon/fabric-dark.css +62 -12
  74. package/styles/ribbon/fabric.css +62 -12
  75. package/styles/ribbon/fluent-dark.css +62 -12
  76. package/styles/ribbon/fluent.css +62 -12
  77. package/styles/ribbon/highcontrast-light.css +62 -12
  78. package/styles/ribbon/highcontrast.css +66 -16
  79. package/styles/ribbon/icons/_material3-dark.scss +1 -0
  80. package/styles/ribbon/material-dark.css +62 -12
  81. package/styles/ribbon/material.css +62 -12
  82. package/styles/ribbon/material3-dark.css +1671 -0
  83. package/styles/ribbon/material3-dark.scss +18 -0
  84. package/styles/ribbon/material3.css +1727 -0
  85. package/styles/ribbon/material3.scss +18 -0
  86. package/styles/ribbon/tailwind-dark.css +62 -12
  87. package/styles/ribbon/tailwind.css +62 -12
  88. package/styles/tailwind-dark.css +62 -12
  89. package/styles/tailwind.css +62 -12
package/styles/material.css CHANGED
@@ -209,9 +209,6 @@
209
209
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
210
210
  display: none;
211
211
  }
212
- .e-ribbon.e-rbn .e-ribbon-tab .e-item {
213
- width: fit-content;
214
- }
215
212
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
216
213
  position: absolute;
217
214
  line-height: 22px;
@@ -220,6 +217,7 @@
220
217
  border-width: 0 0 1px 0;
221
218
  font-size: 14px;
222
219
  font-weight: 400;
220
+ box-shadow: none;
223
221
  }
224
222
  .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
225
223
  border-radius: unset;
@@ -357,6 +355,7 @@
357
355
  border: none;
358
356
  height: 32px;
359
357
  margin: auto;
358
+ box-shadow: none;
360
359
  }
361
360
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
362
361
  .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -387,6 +386,9 @@
387
386
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
388
387
  overflow-y: hidden;
389
388
  }
389
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
390
+ margin-bottom: 0;
391
+ }
390
392
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
391
393
  padding-top: 2px;
392
394
  height: auto;
@@ -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,
@@ -674,6 +679,7 @@
674
679
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
675
680
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
676
681
  border: 1px solid transparent;
682
+ border-radius: unset;
677
683
  }
678
684
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
679
685
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -683,6 +689,7 @@
683
689
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
684
690
  border: 1px solid transparent;
685
691
  border-radius: unset;
692
+ box-shadow: none;
686
693
  }
687
694
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
688
695
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -792,7 +799,8 @@
792
799
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
793
800
  display: none;
794
801
  }
795
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
802
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
803
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
796
804
  margin: 3px 8px;
797
805
  }
798
806
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -816,22 +824,24 @@
816
824
  -ms-flex-pack: start;
817
825
  justify-content: flex-start;
818
826
  }
819
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
820
- .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
821
- transform: rotate(-90deg);
822
- margin-left: auto;
823
- }
824
827
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
825
828
  padding: 3px 8px;
826
829
  font-weight: 600;
827
830
  line-height: 18px;
828
831
  }
829
832
 
833
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
834
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
835
+ transform: rotate(-90deg);
836
+ padding: 8px;
837
+ margin: 0 0 0 auto;
838
+ }
839
+
830
840
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
831
841
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
832
842
  transform: rotate(90deg);
833
- margin-right: auto;
834
- margin-left: unset;
843
+ padding: 8px;
844
+ margin: 0 auto 0 0;
835
845
  }
836
846
 
837
847
  .e-ribbon-menu {
@@ -851,6 +861,17 @@
851
861
  padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
852
862
  }
853
863
 
864
+ .e-ribbon-control.e-dropdown-popup ul .e-item {
865
+ font-size: 14px;
866
+ height: 36px;
867
+ -ms-flex-align: center;
868
+ align-items: center;
869
+ }
870
+ .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
871
+ font-size: 16px;
872
+ line-height: 16px;
873
+ }
874
+
854
875
  .e-ribbon-tooltip .e-tip-content {
855
876
  padding: 4px;
856
877
  }
@@ -984,6 +1005,12 @@
984
1005
  .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
985
1006
  height: auto;
986
1007
  }
1008
+ .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1009
+ .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
1010
+ .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
1011
+ .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
1012
+ margin-bottom: 0;
1013
+ }
987
1014
  .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
988
1015
  .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
989
1016
  .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1198,7 +1225,9 @@
1198
1225
  }
1199
1226
 
1200
1227
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1201
- .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
1228
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
1229
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1230
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
1202
1231
  margin: 3px 8px;
1203
1232
  }
1204
1233
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1206,6 +1235,27 @@
1206
1235
  margin: 8px;
1207
1236
  padding: 0;
1208
1237
  }
1238
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1239
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1240
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1241
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1242
+ padding: 8px;
1243
+ }
1244
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1245
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1246
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1247
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1248
+ padding: 8px;
1249
+ }
1250
+
1251
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
1252
+ font-size: 16px;
1253
+ height: 48px;
1254
+ }
1255
+ .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1256
+ font-size: 20px;
1257
+ line-height: 20px;
1258
+ }
1209
1259
 
1210
1260
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
1211
1261
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,