@syncfusion/ej2-navigations 24.2.4 → 25.1.35-579988

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 (137) hide show
  1. package/CHANGELOG.md +4 -34
  2. package/dist/ej2-navigations.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +154 -138
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +154 -138
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -12
  13. package/src/accordion/accordion-model.d.ts +3 -2
  14. package/src/accordion/accordion.d.ts +3 -2
  15. package/src/accordion/accordion.js +7 -7
  16. package/src/breadcrumb/breadcrumb.js +2 -1
  17. package/src/common/menu-base-model.d.ts +3 -2
  18. package/src/common/menu-base.d.ts +3 -2
  19. package/src/common/menu-base.js +101 -101
  20. package/src/menu/menu-model.d.ts +3 -2
  21. package/src/menu/menu.d.ts +3 -2
  22. package/src/menu/menu.js +1 -1
  23. package/src/stepper/stepper.js +1 -2
  24. package/src/tab/tab-model.d.ts +7 -21
  25. package/src/tab/tab.d.ts +7 -21
  26. package/src/tab/tab.js +5 -5
  27. package/src/toolbar/toolbar.js +25 -7
  28. package/src/treeview/treeview-model.d.ts +4 -7
  29. package/src/treeview/treeview.d.ts +3 -3
  30. package/src/treeview/treeview.js +14 -16
  31. package/styles/accordion/_bds-definition.scss +180 -0
  32. package/styles/accordion/_material-definition.scss +1 -1
  33. package/styles/accordion/icons/_bds.scss +17 -0
  34. package/styles/accordion/material.css +1 -1
  35. package/styles/appbar/_bds-definition.scss +27 -0
  36. package/styles/bootstrap-dark.css +38 -8
  37. package/styles/bootstrap.css +34 -4
  38. package/styles/bootstrap4.css +38 -8
  39. package/styles/bootstrap5-dark.css +34 -4
  40. package/styles/bootstrap5.css +34 -4
  41. package/styles/breadcrumb/_bds-definition.scss +60 -0
  42. package/styles/breadcrumb/icons/_bds.scss +25 -0
  43. package/styles/carousel/_bds-definition.scss +27 -0
  44. package/styles/carousel/_layout.scss +5 -0
  45. package/styles/carousel/bootstrap-dark.css +6 -0
  46. package/styles/carousel/bootstrap.css +6 -0
  47. package/styles/carousel/bootstrap4.css +6 -0
  48. package/styles/carousel/bootstrap5-dark.css +6 -0
  49. package/styles/carousel/bootstrap5.css +6 -0
  50. package/styles/carousel/fabric-dark.css +6 -0
  51. package/styles/carousel/fabric.css +6 -0
  52. package/styles/carousel/fluent-dark.css +6 -0
  53. package/styles/carousel/fluent.css +6 -0
  54. package/styles/carousel/highcontrast-light.css +6 -0
  55. package/styles/carousel/highcontrast.css +6 -0
  56. package/styles/carousel/icons/_bds.scss +30 -0
  57. package/styles/carousel/material-dark.css +6 -0
  58. package/styles/carousel/material.css +6 -0
  59. package/styles/carousel/material3-dark.css +6 -0
  60. package/styles/carousel/material3.css +6 -0
  61. package/styles/carousel/tailwind-dark.css +6 -0
  62. package/styles/carousel/tailwind.css +6 -0
  63. package/styles/context-menu/_bds-definition.scss +65 -0
  64. package/styles/context-menu/icons/_bds.scss +33 -0
  65. package/styles/fabric-dark.css +34 -4
  66. package/styles/fabric.css +34 -4
  67. package/styles/fluent-dark.css +45 -15
  68. package/styles/fluent.css +45 -15
  69. package/styles/h-scroll/_bds-definition.scss +83 -0
  70. package/styles/h-scroll/icons/_bds.scss +49 -0
  71. package/styles/highcontrast-light.css +34 -4
  72. package/styles/highcontrast.css +34 -4
  73. package/styles/material-dark.css +34 -4
  74. package/styles/material.css +35 -5
  75. package/styles/material3-dark.css +34 -4
  76. package/styles/material3.css +34 -4
  77. package/styles/menu/_bds-definition.scss +66 -0
  78. package/styles/menu/icons/_bds.scss +134 -0
  79. package/styles/pager/_bds-definition.scss +152 -0
  80. package/styles/pager/icons/_bds.scss +50 -0
  81. package/styles/sidebar/_bds-definition.scss +45 -0
  82. package/styles/stepper/_bds-definition.scss +79 -0
  83. package/styles/stepper/_layout.scss +1 -0
  84. package/styles/stepper/bootstrap-dark.css +3 -0
  85. package/styles/stepper/bootstrap.css +3 -0
  86. package/styles/stepper/bootstrap4.css +3 -0
  87. package/styles/stepper/bootstrap5-dark.css +3 -0
  88. package/styles/stepper/bootstrap5.css +3 -0
  89. package/styles/stepper/fabric-dark.css +3 -0
  90. package/styles/stepper/fabric.css +3 -0
  91. package/styles/stepper/fluent-dark.css +3 -0
  92. package/styles/stepper/fluent.css +3 -0
  93. package/styles/stepper/highcontrast-light.css +3 -0
  94. package/styles/stepper/highcontrast.css +3 -0
  95. package/styles/stepper/icons/_bds.scss +5 -0
  96. package/styles/stepper/material-dark.css +3 -0
  97. package/styles/stepper/material.css +3 -0
  98. package/styles/stepper/material3-dark.css +3 -0
  99. package/styles/stepper/material3.css +3 -0
  100. package/styles/stepper/tailwind-dark.css +3 -0
  101. package/styles/stepper/tailwind.css +3 -0
  102. package/styles/tab/_bds-definition.scss +701 -0
  103. package/styles/tab/icons/_bds.scss +92 -0
  104. package/styles/tailwind-dark.css +36 -6
  105. package/styles/tailwind.css +34 -4
  106. package/styles/toolbar/_bds-definition.scss +215 -0
  107. package/styles/toolbar/_bootstrap-dark-definition.scss +3 -3
  108. package/styles/toolbar/_bootstrap4-definition.scss +3 -3
  109. package/styles/toolbar/_fluent-definition.scss +3 -3
  110. package/styles/toolbar/_layout.scss +39 -5
  111. package/styles/toolbar/bootstrap-dark.css +29 -8
  112. package/styles/toolbar/bootstrap.css +25 -4
  113. package/styles/toolbar/bootstrap4.css +29 -8
  114. package/styles/toolbar/bootstrap5-dark.css +25 -4
  115. package/styles/toolbar/bootstrap5.css +25 -4
  116. package/styles/toolbar/fabric-dark.css +25 -4
  117. package/styles/toolbar/fabric.css +25 -4
  118. package/styles/toolbar/fluent-dark.css +36 -15
  119. package/styles/toolbar/fluent.css +36 -15
  120. package/styles/toolbar/highcontrast-light.css +25 -4
  121. package/styles/toolbar/highcontrast.css +25 -4
  122. package/styles/toolbar/icons/_bds.scss +16 -0
  123. package/styles/toolbar/material-dark.css +25 -4
  124. package/styles/toolbar/material.css +25 -4
  125. package/styles/toolbar/material3-dark.css +25 -4
  126. package/styles/toolbar/material3.css +25 -4
  127. package/styles/toolbar/tailwind-dark.css +25 -4
  128. package/styles/toolbar/tailwind.css +25 -4
  129. package/styles/treeview/_bds-definition.scss +132 -0
  130. package/styles/treeview/_tailwind-definition.scss +1 -1
  131. package/styles/treeview/_theme.scss +1 -1
  132. package/styles/treeview/icons/_bds.scss +43 -0
  133. package/styles/treeview/tailwind-dark.css +2 -2
  134. package/styles/v-scroll/_bds-definition.scss +49 -0
  135. package/styles/v-scroll/icons/_bds.scss +27 -0
  136. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -63
  137. package/.github/PULL_REQUEST_TEMPLATE/feature.md +0 -39
package/styles/toolbar/fluent.css CHANGED
@@ -112,8 +112,8 @@
112
112
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
113
113
  padding: 4px 6px;
114
114
  }
115
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
116
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
115
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
116
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
117
117
  min-width: 49px;
118
118
  padding: 0;
119
119
  }
@@ -297,6 +297,19 @@
297
297
  white-space: nowrap;
298
298
  overflow: hidden;
299
299
  }
300
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
301
+ display: -ms-flexbox;
302
+ display: flex;
303
+ -ms-flex-wrap: nowrap;
304
+ flex-wrap: nowrap;
305
+ width: 100%;
306
+ }
307
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
308
+ position: absolute;
309
+ }
310
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
311
+ width: calc(100% - 28px);
312
+ }
300
313
  .e-toolbar .e-blazor-toolbar-items {
301
314
  position: absolute;
302
315
  top: -9999px;
@@ -401,6 +414,12 @@
401
414
  min-height: 38px;
402
415
  vertical-align: middle;
403
416
  width: auto;
417
+ -ms-flex: 0 0 auto;
418
+ flex: 0 0 auto;
419
+ }
420
+ .e-toolbar .e-toolbar-item.e-spacer {
421
+ -ms-flex-positive: 1;
422
+ flex-grow: 1;
404
423
  }
405
424
  .e-toolbar .e-toolbar-item .e-tbar-btn {
406
425
  display: -ms-flexbox;
@@ -416,7 +435,7 @@
416
435
  padding: 0 4px;
417
436
  border-radius: 2px;
418
437
  line-height: 22px;
419
- border: none;
438
+ border: 1px solid transparent;
420
439
  cursor: pointer;
421
440
  font-size: 18px;
422
441
  font-weight: 400;
@@ -451,7 +470,7 @@
451
470
  font-size: 14px;
452
471
  padding: 4px;
453
472
  }
454
- .e-toolbar .e-toolbar-item:not(.e-separator) {
473
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
455
474
  height: inherit;
456
475
  min-width: 28px;
457
476
  padding: 0;
@@ -744,6 +763,9 @@
744
763
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
745
764
  display: table;
746
765
  }
766
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
767
+ margin-right: 8px;
768
+ }
747
769
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
748
770
  padding: 4px;
749
771
  }
@@ -782,7 +804,6 @@
782
804
  }
783
805
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
784
806
  margin-left: 0;
785
- margin-right: 8px;
786
807
  }
787
808
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
788
809
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -834,7 +855,7 @@
834
855
  background: transparent;
835
856
  box-shadow: none;
836
857
  color: #605e5c;
837
- border: none;
858
+ border: 1px solid transparent;
838
859
  }
839
860
  .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
840
861
  color: #605e5c;
@@ -856,9 +877,9 @@
856
877
  background: none;
857
878
  border-radius: 0;
858
879
  color: #201f1e;
859
- border-color: #605e5c;
880
+ border-color: transparent;
860
881
  border-style: solid;
861
- border-width: 0;
882
+ border-width: 1px;
862
883
  box-shadow: inset 0 0 0 1px;
863
884
  }
864
885
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
@@ -871,7 +892,7 @@
871
892
  background: #edebe9;
872
893
  border-color: #605e5c;
873
894
  border-style: solid;
874
- border-width: 0;
895
+ border-width: 1px;
875
896
  border-radius: 0;
876
897
  color: #201f1e;
877
898
  }
@@ -891,7 +912,7 @@
891
912
  background: #e1dfdd;
892
913
  border-color: #e1dfdd;
893
914
  border-style: solid;
894
- border-width: 0;
915
+ border-width: 1px;
895
916
  border-radius: 0;
896
917
  box-shadow: none;
897
918
  color: #201f1e;
@@ -1027,7 +1048,7 @@
1027
1048
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
1028
1049
  background: #e1dfdd;
1029
1050
  box-shadow: none;
1030
- border-color: #605e5c;
1051
+ border-color: transparent;
1031
1052
  border-style: solid;
1032
1053
  border-width: 0;
1033
1054
  }
@@ -1045,9 +1066,9 @@
1045
1066
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
1046
1067
  background: none;
1047
1068
  border-radius: 0;
1048
- border-color: #605e5c;
1069
+ border-color: transparent;
1049
1070
  border-style: solid;
1050
- border-width: 0;
1071
+ border-width: 1px;
1051
1072
  box-shadow: inset 0 0 0 1px;
1052
1073
  }
1053
1074
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -1055,7 +1076,7 @@
1055
1076
  border-radius: 0;
1056
1077
  border-color: #605e5c;
1057
1078
  border-style: solid;
1058
- border-width: 0;
1079
+ border-width: 1px;
1059
1080
  }
1060
1081
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
1061
1082
  background: #e1dfdd;
@@ -1063,7 +1084,7 @@
1063
1084
  box-shadow: none;
1064
1085
  border-color: #e1dfdd;
1065
1086
  border-style: solid;
1066
- border-width: 0;
1087
+ border-width: 1px;
1067
1088
  }
1068
1089
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
1069
1090
  border: solid #c8c6c4;
package/styles/toolbar/highcontrast-light.css CHANGED
@@ -101,8 +101,8 @@
101
101
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
102
102
  padding: 0 12px 0 0;
103
103
  }
104
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
105
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
104
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
105
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
106
106
  min-width: 49px;
107
107
  padding: 0 1.5px;
108
108
  }
@@ -286,6 +286,19 @@
286
286
  white-space: nowrap;
287
287
  overflow: hidden;
288
288
  }
289
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
290
+ display: -ms-flexbox;
291
+ display: flex;
292
+ -ms-flex-wrap: nowrap;
293
+ flex-wrap: nowrap;
294
+ width: 100%;
295
+ }
296
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
297
+ position: absolute;
298
+ }
299
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
300
+ width: calc(100% - 40px);
301
+ }
289
302
  .e-toolbar .e-blazor-toolbar-items {
290
303
  position: absolute;
291
304
  top: -9999px;
@@ -390,6 +403,12 @@
390
403
  min-height: 39px;
391
404
  vertical-align: middle;
392
405
  width: auto;
406
+ -ms-flex: 0 0 auto;
407
+ flex: 0 0 auto;
408
+ }
409
+ .e-toolbar .e-toolbar-item.e-spacer {
410
+ -ms-flex-positive: 1;
411
+ flex-grow: 1;
393
412
  }
394
413
  .e-toolbar .e-toolbar-item .e-tbar-btn {
395
414
  display: -ms-flexbox;
@@ -440,7 +459,7 @@
440
459
  font-size: 14px;
441
460
  padding: 0 12px 0 8px;
442
461
  }
443
- .e-toolbar .e-toolbar-item:not(.e-separator) {
462
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
444
463
  height: inherit;
445
464
  min-width: 34px;
446
465
  padding: 0 1px;
@@ -733,6 +752,9 @@
733
752
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
734
753
  display: table;
735
754
  }
755
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
756
+ margin-right: 3px;
757
+ }
736
758
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
737
759
  padding: 0 12px 0 0;
738
760
  }
@@ -771,7 +793,6 @@
771
793
  }
772
794
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
773
795
  margin-left: 0;
774
- margin-right: 3px;
775
796
  }
776
797
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
777
798
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
package/styles/toolbar/highcontrast.css CHANGED
@@ -102,8 +102,8 @@
102
102
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
103
103
  padding: 0 12px 0 0;
104
104
  }
105
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
106
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
105
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
106
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
107
107
  min-width: 49px;
108
108
  padding: 0 1.5px;
109
109
  }
@@ -287,6 +287,19 @@
287
287
  white-space: nowrap;
288
288
  overflow: hidden;
289
289
  }
290
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
291
+ display: -ms-flexbox;
292
+ display: flex;
293
+ -ms-flex-wrap: nowrap;
294
+ flex-wrap: nowrap;
295
+ width: 100%;
296
+ }
297
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
298
+ position: absolute;
299
+ }
300
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
301
+ width: calc(100% - 40px);
302
+ }
290
303
  .e-toolbar .e-blazor-toolbar-items {
291
304
  position: absolute;
292
305
  top: -9999px;
@@ -391,6 +404,12 @@
391
404
  min-height: 39px;
392
405
  vertical-align: middle;
393
406
  width: auto;
407
+ -ms-flex: 0 0 auto;
408
+ flex: 0 0 auto;
409
+ }
410
+ .e-toolbar .e-toolbar-item.e-spacer {
411
+ -ms-flex-positive: 1;
412
+ flex-grow: 1;
394
413
  }
395
414
  .e-toolbar .e-toolbar-item .e-tbar-btn {
396
415
  display: -ms-flexbox;
@@ -441,7 +460,7 @@
441
460
  font-size: 14px;
442
461
  padding: 0 12px 0 8px;
443
462
  }
444
- .e-toolbar .e-toolbar-item:not(.e-separator) {
463
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
445
464
  height: inherit;
446
465
  min-width: 34px;
447
466
  padding: 0 1px;
@@ -734,6 +753,9 @@
734
753
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
735
754
  display: table;
736
755
  }
756
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
757
+ margin-right: 3px;
758
+ }
737
759
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
738
760
  padding: 0 12px 0 0;
739
761
  }
@@ -772,7 +794,6 @@
772
794
  }
773
795
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
774
796
  margin-left: 0;
775
- margin-right: 3px;
776
797
  }
777
798
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
778
799
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
package/styles/toolbar/icons/_bds.scss ADDED
@@ -0,0 +1,16 @@
1
+ @include export-module('toolbar-bds-icons') {
2
+
3
+ /*! toolbar icons */
4
+ #{&}.e-toolbar {
5
+
6
+ .e-popup-down-icon::before {
7
+ content: '\e729';
8
+ line-height: normal;
9
+ }
10
+
11
+ .e-popup-up-icon::before {
12
+ content: '\e776';
13
+ line-height: normal;
14
+ }
15
+ }
16
+ }
package/styles/toolbar/material-dark.css CHANGED
@@ -128,8 +128,8 @@
128
128
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
129
129
  padding: 0;
130
130
  }
131
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
132
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
131
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
132
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
133
133
  min-width: 48px;
134
134
  padding: 5px;
135
135
  }
@@ -313,6 +313,19 @@
313
313
  white-space: nowrap;
314
314
  overflow: hidden;
315
315
  }
316
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
317
+ display: -ms-flexbox;
318
+ display: flex;
319
+ -ms-flex-wrap: nowrap;
320
+ flex-wrap: nowrap;
321
+ width: 100%;
322
+ }
323
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
324
+ position: absolute;
325
+ }
326
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
327
+ width: calc(100% - 32px);
328
+ }
316
329
  .e-toolbar .e-blazor-toolbar-items {
317
330
  position: absolute;
318
331
  top: -9999px;
@@ -417,6 +430,12 @@
417
430
  min-height: 42px;
418
431
  vertical-align: middle;
419
432
  width: auto;
433
+ -ms-flex: 0 0 auto;
434
+ flex: 0 0 auto;
435
+ }
436
+ .e-toolbar .e-toolbar-item.e-spacer {
437
+ -ms-flex-positive: 1;
438
+ flex-grow: 1;
420
439
  }
421
440
  .e-toolbar .e-toolbar-item .e-tbar-btn {
422
441
  display: -ms-flexbox;
@@ -467,7 +486,7 @@
467
486
  font-size: 14px;
468
487
  padding: 0 2px 0 2px;
469
488
  }
470
- .e-toolbar .e-toolbar-item:not(.e-separator) {
489
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
471
490
  height: inherit;
472
491
  min-width: 34px;
473
492
  padding: 3.5px;
@@ -760,6 +779,9 @@
760
779
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
761
780
  display: table;
762
781
  }
782
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
783
+ margin-right: 3px;
784
+ }
763
785
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
764
786
  padding: 0;
765
787
  }
@@ -798,7 +820,6 @@
798
820
  }
799
821
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
800
822
  margin-left: 0;
801
- margin-right: 3px;
802
823
  }
803
824
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
804
825
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
package/styles/toolbar/material.css CHANGED
@@ -131,8 +131,8 @@
131
131
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
132
132
  padding: 0;
133
133
  }
134
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
135
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
134
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
135
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
136
136
  min-width: 48px;
137
137
  padding: 5px;
138
138
  }
@@ -316,6 +316,19 @@
316
316
  white-space: nowrap;
317
317
  overflow: hidden;
318
318
  }
319
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
320
+ display: -ms-flexbox;
321
+ display: flex;
322
+ -ms-flex-wrap: nowrap;
323
+ flex-wrap: nowrap;
324
+ width: 100%;
325
+ }
326
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
327
+ position: absolute;
328
+ }
329
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
330
+ width: calc(100% - 32px);
331
+ }
319
332
  .e-toolbar .e-blazor-toolbar-items {
320
333
  position: absolute;
321
334
  top: -9999px;
@@ -420,6 +433,12 @@
420
433
  min-height: 42px;
421
434
  vertical-align: middle;
422
435
  width: auto;
436
+ -ms-flex: 0 0 auto;
437
+ flex: 0 0 auto;
438
+ }
439
+ .e-toolbar .e-toolbar-item.e-spacer {
440
+ -ms-flex-positive: 1;
441
+ flex-grow: 1;
423
442
  }
424
443
  .e-toolbar .e-toolbar-item .e-tbar-btn {
425
444
  display: -ms-flexbox;
@@ -470,7 +489,7 @@
470
489
  font-size: 14px;
471
490
  padding: 0 2px 0 2px;
472
491
  }
473
- .e-toolbar .e-toolbar-item:not(.e-separator) {
492
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
474
493
  height: inherit;
475
494
  min-width: 34px;
476
495
  padding: 3.5px;
@@ -763,6 +782,9 @@
763
782
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
764
783
  display: table;
765
784
  }
785
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
786
+ margin-right: 3px;
787
+ }
766
788
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
767
789
  padding: 0;
768
790
  }
@@ -801,7 +823,6 @@
801
823
  }
802
824
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
803
825
  margin-left: 0;
804
- margin-right: 3px;
805
826
  }
806
827
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
807
828
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
package/styles/toolbar/material3-dark.css CHANGED
@@ -168,8 +168,8 @@
168
168
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
169
169
  padding: 4px;
170
170
  }
171
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
172
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
171
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
172
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
173
173
  min-width: 40px;
174
174
  padding: 8px 4px 8px 4px;
175
175
  }
@@ -353,6 +353,19 @@
353
353
  white-space: nowrap;
354
354
  overflow: hidden;
355
355
  }
356
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
357
+ display: -ms-flexbox;
358
+ display: flex;
359
+ -ms-flex-wrap: nowrap;
360
+ flex-wrap: nowrap;
361
+ width: 100%;
362
+ }
363
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
364
+ position: absolute;
365
+ }
366
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
367
+ width: calc(100% - 40px);
368
+ }
356
369
  .e-toolbar .e-blazor-toolbar-items {
357
370
  position: absolute;
358
371
  top: -9999px;
@@ -457,6 +470,12 @@
457
470
  min-height: 32px;
458
471
  vertical-align: middle;
459
472
  width: auto;
473
+ -ms-flex: 0 0 auto;
474
+ flex: 0 0 auto;
475
+ }
476
+ .e-toolbar .e-toolbar-item.e-spacer {
477
+ -ms-flex-positive: 1;
478
+ flex-grow: 1;
460
479
  }
461
480
  .e-toolbar .e-toolbar-item .e-tbar-btn {
462
481
  display: -ms-flexbox;
@@ -507,7 +526,7 @@
507
526
  font-size: 14px;
508
527
  padding: 4px;
509
528
  }
510
- .e-toolbar .e-toolbar-item:not(.e-separator) {
529
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
511
530
  height: inherit;
512
531
  min-width: 32px;
513
532
  padding: 8px 4px 8px 4px;
@@ -800,6 +819,9 @@
800
819
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
801
820
  display: table;
802
821
  }
822
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
823
+ margin-right: 8px;
824
+ }
803
825
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
804
826
  padding: 4px;
805
827
  }
@@ -838,7 +860,6 @@
838
860
  }
839
861
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
840
862
  margin-left: 0;
841
- margin-right: 8px;
842
863
  }
843
864
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
844
865
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
package/styles/toolbar/material3.css CHANGED
@@ -224,8 +224,8 @@
224
224
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
225
225
  padding: 4px;
226
226
  }
227
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
228
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
227
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
228
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
229
229
  min-width: 40px;
230
230
  padding: 8px 4px 8px 4px;
231
231
  }
@@ -409,6 +409,19 @@
409
409
  white-space: nowrap;
410
410
  overflow: hidden;
411
411
  }
412
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
413
+ display: -ms-flexbox;
414
+ display: flex;
415
+ -ms-flex-wrap: nowrap;
416
+ flex-wrap: nowrap;
417
+ width: 100%;
418
+ }
419
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
420
+ position: absolute;
421
+ }
422
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
423
+ width: calc(100% - 40px);
424
+ }
412
425
  .e-toolbar .e-blazor-toolbar-items {
413
426
  position: absolute;
414
427
  top: -9999px;
@@ -513,6 +526,12 @@
513
526
  min-height: 32px;
514
527
  vertical-align: middle;
515
528
  width: auto;
529
+ -ms-flex: 0 0 auto;
530
+ flex: 0 0 auto;
531
+ }
532
+ .e-toolbar .e-toolbar-item.e-spacer {
533
+ -ms-flex-positive: 1;
534
+ flex-grow: 1;
516
535
  }
517
536
  .e-toolbar .e-toolbar-item .e-tbar-btn {
518
537
  display: -ms-flexbox;
@@ -563,7 +582,7 @@
563
582
  font-size: 14px;
564
583
  padding: 4px;
565
584
  }
566
- .e-toolbar .e-toolbar-item:not(.e-separator) {
585
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
567
586
  height: inherit;
568
587
  min-width: 32px;
569
588
  padding: 8px 4px 8px 4px;
@@ -856,6 +875,9 @@
856
875
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
857
876
  display: table;
858
877
  }
878
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
879
+ margin-right: 8px;
880
+ }
859
881
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
860
882
  padding: 4px;
861
883
  }
@@ -894,7 +916,6 @@
894
916
  }
895
917
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
896
918
  margin-left: 0;
897
- margin-right: 8px;
898
919
  }
899
920
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
900
921
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
package/styles/toolbar/tailwind-dark.css CHANGED
@@ -112,8 +112,8 @@
112
112
  .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
113
113
  padding: 4px 6px;
114
114
  }
115
- .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
116
- .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
115
+ .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
116
+ .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
117
117
  min-width: 49px;
118
118
  padding: 5px 6px;
119
119
  }
@@ -297,6 +297,19 @@
297
297
  white-space: nowrap;
298
298
  overflow: hidden;
299
299
  }
300
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items {
301
+ display: -ms-flexbox;
302
+ display: flex;
303
+ -ms-flex-wrap: nowrap;
304
+ flex-wrap: nowrap;
305
+ width: 100%;
306
+ }
307
+ .e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
308
+ position: absolute;
309
+ }
310
+ .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
311
+ width: calc(100% - 28px);
312
+ }
300
313
  .e-toolbar .e-blazor-toolbar-items {
301
314
  position: absolute;
302
315
  top: -9999px;
@@ -401,6 +414,12 @@
401
414
  min-height: 38px;
402
415
  vertical-align: middle;
403
416
  width: auto;
417
+ -ms-flex: 0 0 auto;
418
+ flex: 0 0 auto;
419
+ }
420
+ .e-toolbar .e-toolbar-item.e-spacer {
421
+ -ms-flex-positive: 1;
422
+ flex-grow: 1;
404
423
  }
405
424
  .e-toolbar .e-toolbar-item .e-tbar-btn {
406
425
  display: -ms-flexbox;
@@ -451,7 +470,7 @@
451
470
  font-size: 14px;
452
471
  padding: 4px;
453
472
  }
454
- .e-toolbar .e-toolbar-item:not(.e-separator) {
473
+ .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
455
474
  height: inherit;
456
475
  min-width: 28px;
457
476
  padding: 4px;
@@ -744,6 +763,9 @@
744
763
  .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
745
764
  display: table;
746
765
  }
766
+ .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
767
+ margin-right: 8px;
768
+ }
747
769
  .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
748
770
  padding: 4px;
749
771
  }
@@ -782,7 +804,6 @@
782
804
  }
783
805
  .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
784
806
  margin-left: 0;
785
- margin-right: 8px;
786
807
  }
787
808
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
788
809
  .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {