@syncfusion/ej2-navigations 28.2.5 → 28.2.11

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 (48) hide show
  1. package/README.md +1 -1
  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 +66 -10
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +66 -10
  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 +10 -10
  13. package/src/carousel/carousel.js +5 -0
  14. package/src/common/menu-base.js +38 -5
  15. package/src/toolbar/toolbar.js +4 -1
  16. package/src/treeview/treeview.js +19 -4
  17. package/styles/bootstrap4-lite.css +4 -4
  18. package/styles/bootstrap4.css +4 -4
  19. package/styles/bootstrap5-dark-lite.css +10 -10
  20. package/styles/bootstrap5-dark.css +10 -10
  21. package/styles/bootstrap5-lite.css +10 -10
  22. package/styles/bootstrap5.3-lite.css +12 -12
  23. package/styles/bootstrap5.3.css +12 -12
  24. package/styles/bootstrap5.css +10 -10
  25. package/styles/fluent2-lite.css +7 -26
  26. package/styles/fluent2.css +7 -26
  27. package/styles/material3-dark-lite.css +10 -10
  28. package/styles/material3-dark.css +10 -10
  29. package/styles/material3-lite.css +10 -10
  30. package/styles/material3.css +10 -10
  31. package/styles/tab/_bootstrap4-definition.scss +2 -2
  32. package/styles/tab/_bootstrap5-definition.scss +3 -3
  33. package/styles/tab/_bootstrap5.3-definition.scss +3 -3
  34. package/styles/tab/_material3-definition.scss +3 -3
  35. package/styles/tab/_tailwind3-definition.scss +3 -3
  36. package/styles/tab/bootstrap4.css +4 -4
  37. package/styles/tab/bootstrap5-dark.css +10 -10
  38. package/styles/tab/bootstrap5.3.css +10 -10
  39. package/styles/tab/bootstrap5.css +10 -10
  40. package/styles/tab/material3-dark.css +10 -10
  41. package/styles/tab/material3.css +10 -10
  42. package/styles/tab/tailwind3.css +10 -10
  43. package/styles/tailwind3-lite.css +17 -36
  44. package/styles/tailwind3.css +17 -36
  45. package/styles/toolbar/_theme.scss +25 -64
  46. package/styles/toolbar/bootstrap5.3.css +2 -2
  47. package/styles/toolbar/fluent2.css +7 -26
  48. package/styles/toolbar/tailwind3.css +7 -26
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 28.2.5
3
+ * version : 28.2.11
4
4
  * Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-navigations@*",
3
- "_id": "@syncfusion/ej2-navigations@28.2.4",
3
+ "_id": "@syncfusion/ej2-navigations@28.2.6",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-AKvTyY3in+EMengMf8P8Hj0m6AOjc32uFLUp9WhgKoKNzd/MzTTv6Y2Vjd9FC4ws1aJPRg45effz9nUquLlAcw==",
5
+ "_integrity": "sha512-RkklaJQrfLD0e9aBmW82O/liusJ+PJ8eH2x16z6ZsMTxb/8Xq5vDxTAE8ZuLyzvLcpGvIZGWHIbnMRRDWt29mQ==",
6
6
  "_location": "/@syncfusion/ej2-navigations",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -40,8 +40,8 @@
40
40
  "/@syncfusion/ej2-spreadsheet",
41
41
  "/@syncfusion/ej2-vue-navigations"
42
42
  ],
43
- "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.2.4.tgz",
44
- "_shasum": "0da922773b22bbbd212ba4c68c35cfb4fe0c27ad",
43
+ "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.2.6.tgz",
44
+ "_shasum": "be83cbffff5fdeaa3cf8c7e4841d3b898314aca3",
45
45
  "_spec": "@syncfusion/ej2-navigations@*",
46
46
  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
47
47
  "author": {
@@ -52,12 +52,12 @@
52
52
  },
53
53
  "bundleDependencies": false,
54
54
  "dependencies": {
55
- "@syncfusion/ej2-base": "~28.2.5",
56
- "@syncfusion/ej2-buttons": "~28.2.3",
57
- "@syncfusion/ej2-data": "~28.2.3",
58
- "@syncfusion/ej2-inputs": "~28.2.3",
55
+ "@syncfusion/ej2-base": "~28.2.9",
56
+ "@syncfusion/ej2-buttons": "~28.2.7",
57
+ "@syncfusion/ej2-data": "~28.2.11",
58
+ "@syncfusion/ej2-inputs": "~28.2.11",
59
59
  "@syncfusion/ej2-lists": "~28.2.3",
60
- "@syncfusion/ej2-popups": "~28.2.3"
60
+ "@syncfusion/ej2-popups": "~28.2.9"
61
61
  },
62
62
  "deprecated": false,
63
63
  "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -162,6 +162,6 @@
162
162
  "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
163
163
  },
164
164
  "typings": "index.d.ts",
165
- "version": "28.2.5",
165
+ "version": "28.2.11",
166
166
  "sideEffects": false
167
167
  }
@@ -403,6 +403,9 @@ var Carousel = /** @class */ (function (_super) {
403
403
  if (isClone) {
404
404
  itemEle.classList.add(CLS_CLONED);
405
405
  }
406
+ if (!(this.selectedIndex === index && !isClone)) {
407
+ itemEle.setAttribute('inert', 'true');
408
+ }
406
409
  if (!isNullOrUndefined(item.htmlAttributes)) {
407
410
  this.setHtmlAttributes(item.htmlAttributes, itemEle);
408
411
  }
@@ -683,7 +686,9 @@ var Carousel = /** @class */ (function (_super) {
683
686
  }
684
687
  _this.setProperties({ selectedIndex: currentIndex }, true);
685
688
  attributes(args.currentSlide, { 'aria-hidden': 'true' });
689
+ args.currentSlide.setAttribute('inert', 'true');
686
690
  attributes(args.nextSlide, { 'aria-hidden': 'false' });
691
+ args.nextSlide.removeAttribute('inert');
687
692
  _this.refreshIndicators(activeIndex, currentIndex);
688
693
  _this.slideChangedEventArgs = {
689
694
  currentIndex: args.nextIndex,
@@ -861,6 +861,8 @@ var MenuBase = /** @class */ (function (_super) {
861
861
  this.popupWrapper = this.createElement('div', {
862
862
  className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'
863
863
  });
864
+ this.popupWrapper.setAttribute('role', 'navigation');
865
+ this.popupWrapper.setAttribute('aria-label', item.text + '-menu-popup');
864
866
  if (this.hamburgerMode) {
865
867
  top = li.offsetHeight;
866
868
  li.appendChild(this.popupWrapper);
@@ -1339,6 +1341,9 @@ var MenuBase = /** @class */ (function (_super) {
1339
1341
  if (!args.curData.htmlAttributes.role) {
1340
1342
  args.item.setAttribute('role', 'separator');
1341
1343
  }
1344
+ if (!args.curData.htmlAttributes.ariaLabel) {
1345
+ args.item.setAttribute('aria-label', 'separator');
1346
+ }
1342
1347
  }
1343
1348
  if (showIcon && !args.curData[args.fields.iconCss]
1344
1349
  && !args.curData[_this.getField('separator', level)]) {
@@ -1933,7 +1938,13 @@ var MenuBase = /** @class */ (function (_super) {
1933
1938
  item.splice(idx, 1);
1934
1939
  var uls = this.getWrapper().children;
1935
1940
  if (navIdx.length < uls.length) {
1936
- detach(uls[navIdx.length].children[idx]);
1941
+ if (this.enableScrolling && !uls[navIdx.length].classList.contains('e-menu-parent')) {
1942
+ var ul = uls[navIdx.length].querySelector('.e-menu-parent');
1943
+ detach(ul.children[idx]);
1944
+ }
1945
+ else {
1946
+ detach(uls[navIdx.length].children[idx]);
1947
+ }
1937
1948
  }
1938
1949
  };
1939
1950
  /**
@@ -2238,7 +2249,13 @@ var MenuBase = /** @class */ (function (_super) {
2238
2249
  ul.children[idx + 1].classList.add(disabled);
2239
2250
  }
2240
2251
  else {
2241
- ul.children[idx].classList.add(disabled);
2252
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
2253
+ var mainUl = ul.querySelector('.e-menu-parent');
2254
+ mainUl.children[idx].classList.add(disabled);
2255
+ }
2256
+ else {
2257
+ ul.children[idx].classList.add(disabled);
2258
+ }
2242
2259
  }
2243
2260
  }
2244
2261
  }
@@ -2276,6 +2293,9 @@ var MenuBase = /** @class */ (function (_super) {
2276
2293
  ul = this.getUlByNavIdx(navIdx.length);
2277
2294
  item = this.getItems(navIdx);
2278
2295
  if (ul) {
2296
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
2297
+ ul = ul.querySelector('.e-menu-parent');
2298
+ }
2279
2299
  var validUl = isUniqueId ? ul.children[index].id : item[index].text.toString();
2280
2300
  if (ishide && validUl === items[i]) {
2281
2301
  ul.children[index].classList.add(HIDE);
@@ -2335,6 +2355,7 @@ var MenuBase = /** @class */ (function (_super) {
2335
2355
  var navIdx;
2336
2356
  var iitems;
2337
2357
  var menuitem;
2358
+ var parentUl;
2338
2359
  for (var i = 0; i < items.length; i++) {
2339
2360
  navIdx = this.getIndex(text, isUniqueId);
2340
2361
  idx = navIdx.pop();
@@ -2347,11 +2368,23 @@ var MenuBase = /** @class */ (function (_super) {
2347
2368
  if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {
2348
2369
  idx = isAfter ? idx + 1 : idx;
2349
2370
  li = this.createItems(iitems).children[idx];
2350
- var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
2371
+ var ul = parentUl = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
2372
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
2373
+ ul = ul.querySelector('.e-menu-parent');
2374
+ }
2351
2375
  ul.insertBefore(li, ul.children[idx]);
2352
2376
  if (i === items.length - 1 && !this.isMenu && ul.style.display === 'block') {
2353
- this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
2354
- ul.style.display = 'block';
2377
+ if (this.enableScrolling) {
2378
+ this.setPosition(null, ul, parseFloat(parentUl.style.top), parseFloat(parentUl.style.left));
2379
+ var scrollElem = closest(ul, '.e-vscroll');
2380
+ if (scrollElem) {
2381
+ scrollElem.style.display = 'block';
2382
+ }
2383
+ }
2384
+ else {
2385
+ this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
2386
+ ul.style.display = 'block';
2387
+ }
2355
2388
  }
2356
2389
  }
2357
2390
  }
@@ -851,7 +851,10 @@ var Toolbar = /** @class */ (function (_super) {
851
851
  else if (scrollNav) {
852
852
  navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);
853
853
  }
854
- if (itemWidth > eleWidth - navEleWidth) {
854
+ if (eleWidth >= itemWidth && scrollNav) {
855
+ return false;
856
+ }
857
+ else if (itemWidth > eleWidth - navEleWidth) {
855
858
  return true;
856
859
  }
857
860
  else {
@@ -1064,16 +1064,27 @@ var TreeView = /** @class */ (function (_super) {
1064
1064
  };
1065
1065
  TreeView.prototype.getSelectedChildNodeDetails = function (dataUid) {
1066
1066
  var _this = this;
1067
+ var childKey = typeof this.fields.child === 'string' ? this.fields.child : null;
1068
+ var dataId = this.fields.id;
1069
+ var parentKey = this.fields.parentID;
1067
1070
  return this.checkedNodes
1068
1071
  .map(function (checkedNodeId) {
1069
1072
  return new DataManager(_this.DDTTreeData)
1070
1073
  .executeLocal(new Query().where('id', 'equal', checkedNodeId, true))[0];
1071
1074
  })
1072
1075
  .filter(function (childNode) {
1073
- if (childNode && typeof childNode === 'object' && 'pid' in childNode) {
1074
- var childNodePid = childNode.pid;
1075
- if (!isNOU(childNodePid)) {
1076
- return childNodePid.toString() === dataUid;
1076
+ if (childNode && typeof childNode === 'object' && (parentKey in childNode || childKey in childNode)) {
1077
+ if (!isNOU(childKey) && childKey in childNode && Array.isArray(childNode[childKey])) {
1078
+ var matchNode = childNode[dataId];
1079
+ if (!isNOU(matchNode)) {
1080
+ return matchNode.toString() === dataUid;
1081
+ }
1082
+ }
1083
+ else {
1084
+ var childNodePid = childNode[parentKey];
1085
+ if (!isNOU(childNodePid)) {
1086
+ return childNodePid.toString() === dataUid;
1087
+ }
1077
1088
  }
1078
1089
  }
1079
1090
  return false;
@@ -1203,14 +1214,18 @@ var TreeView = /** @class */ (function (_super) {
1203
1214
  var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);
1204
1215
  if (this.loadOnDemand) {
1205
1216
  for (var index = 0; index < checkBoxes.length; index++) {
1217
+ var liEle = closest(checkBoxes[parseInt(index.toString(), 10)], '.' + LISTITEM);
1206
1218
  this.updateFieldChecked(checkBoxes[parseInt(index.toString(), 10)], doCheck);
1207
1219
  this.changeState(checkBoxes[parseInt(index.toString(), 10)], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);
1220
+ this.updateOldCheckedData([this.getNodeData(liEle)]);
1208
1221
  }
1209
1222
  }
1210
1223
  else {
1211
1224
  for (var index = 0; index < checkBoxes.length; index++) {
1225
+ var liEle = closest(checkBoxes[parseInt(index.toString(), 10)], '.' + LISTITEM);
1212
1226
  this.updateFieldChecked(checkBoxes[parseInt(index.toString(), 10)], doCheck);
1213
1227
  this.changeState(checkBoxes[parseInt(index.toString(), 10)], doCheck ? 'check' : 'uncheck');
1228
+ this.updateOldCheckedData([this.getNodeData(liEle)]);
1214
1229
  }
1215
1230
  }
1216
1231
  }
@@ -3326,7 +3326,7 @@
3326
3326
  height: 20px;
3327
3327
  min-width: 20px;
3328
3328
  width: 20px;
3329
- line-height: 20px;
3329
+ line-height: 1;
3330
3330
  }
3331
3331
  @media screen and (max-width: 480px) {
3332
3332
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3336,7 +3336,7 @@
3336
3336
  }
3337
3337
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
3338
3338
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
3339
- font-size: 14px;
3339
+ font-size: 16px;
3340
3340
  }
3341
3341
  @media screen and (max-width: 480px) {
3342
3342
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4748,7 +4748,7 @@
4748
4748
  height: 20px;
4749
4749
  min-width: 20px;
4750
4750
  width: 20px;
4751
- line-height: 20px;
4751
+ line-height: 1;
4752
4752
  }
4753
4753
  @media screen and (max-width: 480px) {
4754
4754
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4758,7 +4758,7 @@
4758
4758
  }
4759
4759
  .e-tab-clone-element .e-tab-icon,
4760
4760
  .e-tab-clone-element .e-tab-icon::before {
4761
- font-size: 14px;
4761
+ font-size: 16px;
4762
4762
  }
4763
4763
  @media screen and (max-width: 480px) {
4764
4764
  .e-tab-clone-element .e-tab-icon,
@@ -4007,7 +4007,7 @@
4007
4007
  height: 20px;
4008
4008
  min-width: 20px;
4009
4009
  width: 20px;
4010
- line-height: 20px;
4010
+ line-height: 1;
4011
4011
  }
4012
4012
  @media screen and (max-width: 480px) {
4013
4013
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4017,7 +4017,7 @@
4017
4017
  }
4018
4018
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
4019
4019
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
4020
- font-size: 14px;
4020
+ font-size: 16px;
4021
4021
  }
4022
4022
  @media screen and (max-width: 480px) {
4023
4023
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5429,7 +5429,7 @@
5429
5429
  height: 20px;
5430
5430
  min-width: 20px;
5431
5431
  width: 20px;
5432
- line-height: 20px;
5432
+ line-height: 1;
5433
5433
  }
5434
5434
  @media screen and (max-width: 480px) {
5435
5435
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5439,7 +5439,7 @@
5439
5439
  }
5440
5440
  .e-tab-clone-element .e-tab-icon,
5441
5441
  .e-tab-clone-element .e-tab-icon::before {
5442
- font-size: 14px;
5442
+ font-size: 16px;
5443
5443
  }
5444
5444
  @media screen and (max-width: 480px) {
5445
5445
  .e-tab-clone-element .e-tab-icon,
@@ -3347,10 +3347,10 @@
3347
3347
  display: -webkit-inline-box;
3348
3348
  display: -ms-inline-flexbox;
3349
3349
  display: inline-flex;
3350
- height: 24px;
3351
- min-width: 24px;
3352
- width: 24px;
3353
- line-height: 24px;
3350
+ height: 20px;
3351
+ min-width: 20px;
3352
+ width: 20px;
3353
+ line-height: 1;
3354
3354
  }
3355
3355
  @media screen and (max-width: 480px) {
3356
3356
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3360,7 +3360,7 @@
3360
3360
  }
3361
3361
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
3362
3362
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
3363
- font-size: 14px;
3363
+ font-size: 16px;
3364
3364
  }
3365
3365
  @media screen and (max-width: 480px) {
3366
3366
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4769,10 +4769,10 @@
4769
4769
  display: -webkit-inline-box;
4770
4770
  display: -ms-inline-flexbox;
4771
4771
  display: inline-flex;
4772
- height: 24px;
4773
- min-width: 24px;
4774
- width: 24px;
4775
- line-height: 24px;
4772
+ height: 20px;
4773
+ min-width: 20px;
4774
+ width: 20px;
4775
+ line-height: 1;
4776
4776
  }
4777
4777
  @media screen and (max-width: 480px) {
4778
4778
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4782,7 +4782,7 @@
4782
4782
  }
4783
4783
  .e-tab-clone-element .e-tab-icon,
4784
4784
  .e-tab-clone-element .e-tab-icon::before {
4785
- font-size: 14px;
4785
+ font-size: 16px;
4786
4786
  }
4787
4787
  @media screen and (max-width: 480px) {
4788
4788
  .e-tab-clone-element .e-tab-icon,
@@ -4041,10 +4041,10 @@
4041
4041
  display: -webkit-inline-box;
4042
4042
  display: -ms-inline-flexbox;
4043
4043
  display: inline-flex;
4044
- height: 24px;
4045
- min-width: 24px;
4046
- width: 24px;
4047
- line-height: 24px;
4044
+ height: 20px;
4045
+ min-width: 20px;
4046
+ width: 20px;
4047
+ line-height: 1;
4048
4048
  }
4049
4049
  @media screen and (max-width: 480px) {
4050
4050
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4054,7 +4054,7 @@
4054
4054
  }
4055
4055
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
4056
4056
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
4057
- font-size: 14px;
4057
+ font-size: 16px;
4058
4058
  }
4059
4059
  @media screen and (max-width: 480px) {
4060
4060
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5463,10 +5463,10 @@
5463
5463
  display: -webkit-inline-box;
5464
5464
  display: -ms-inline-flexbox;
5465
5465
  display: inline-flex;
5466
- height: 24px;
5467
- min-width: 24px;
5468
- width: 24px;
5469
- line-height: 24px;
5466
+ height: 20px;
5467
+ min-width: 20px;
5468
+ width: 20px;
5469
+ line-height: 1;
5470
5470
  }
5471
5471
  @media screen and (max-width: 480px) {
5472
5472
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5476,7 +5476,7 @@
5476
5476
  }
5477
5477
  .e-tab-clone-element .e-tab-icon,
5478
5478
  .e-tab-clone-element .e-tab-icon::before {
5479
- font-size: 14px;
5479
+ font-size: 16px;
5480
5480
  }
5481
5481
  @media screen and (max-width: 480px) {
5482
5482
  .e-tab-clone-element .e-tab-icon,
@@ -3347,10 +3347,10 @@
3347
3347
  display: -webkit-inline-box;
3348
3348
  display: -ms-inline-flexbox;
3349
3349
  display: inline-flex;
3350
- height: 24px;
3351
- min-width: 24px;
3352
- width: 24px;
3353
- line-height: 24px;
3350
+ height: 20px;
3351
+ min-width: 20px;
3352
+ width: 20px;
3353
+ line-height: 1;
3354
3354
  }
3355
3355
  @media screen and (max-width: 480px) {
3356
3356
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3360,7 +3360,7 @@
3360
3360
  }
3361
3361
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
3362
3362
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
3363
- font-size: 14px;
3363
+ font-size: 16px;
3364
3364
  }
3365
3365
  @media screen and (max-width: 480px) {
3366
3366
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4769,10 +4769,10 @@
4769
4769
  display: -webkit-inline-box;
4770
4770
  display: -ms-inline-flexbox;
4771
4771
  display: inline-flex;
4772
- height: 24px;
4773
- min-width: 24px;
4774
- width: 24px;
4775
- line-height: 24px;
4772
+ height: 20px;
4773
+ min-width: 20px;
4774
+ width: 20px;
4775
+ line-height: 1;
4776
4776
  }
4777
4777
  @media screen and (max-width: 480px) {
4778
4778
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4782,7 +4782,7 @@
4782
4782
  }
4783
4783
  .e-tab-clone-element .e-tab-icon,
4784
4784
  .e-tab-clone-element .e-tab-icon::before {
4785
- font-size: 14px;
4785
+ font-size: 16px;
4786
4786
  }
4787
4787
  @media screen and (max-width: 480px) {
4788
4788
  .e-tab-clone-element .e-tab-icon,
@@ -1895,8 +1895,8 @@
1895
1895
  border-color: var(--color-sf-icon-color);
1896
1896
  border-style: solid;
1897
1897
  border-width: 0;
1898
- -webkit-box-shadow: none;
1899
- box-shadow: none;
1898
+ -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
1899
+ box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
1900
1900
  }
1901
1901
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
1902
1902
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
@@ -3400,10 +3400,10 @@
3400
3400
  display: -webkit-inline-box;
3401
3401
  display: -ms-inline-flexbox;
3402
3402
  display: inline-flex;
3403
- height: 24px;
3404
- min-width: 24px;
3405
- width: 24px;
3406
- line-height: 24px;
3403
+ height: 20px;
3404
+ min-width: 20px;
3405
+ width: 20px;
3406
+ line-height: 1;
3407
3407
  }
3408
3408
  @media screen and (max-width: 480px) {
3409
3409
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3413,7 +3413,7 @@
3413
3413
  }
3414
3414
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
3415
3415
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
3416
- font-size: 14px;
3416
+ font-size: 16px;
3417
3417
  }
3418
3418
  @media screen and (max-width: 480px) {
3419
3419
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4822,10 +4822,10 @@
4822
4822
  display: -webkit-inline-box;
4823
4823
  display: -ms-inline-flexbox;
4824
4824
  display: inline-flex;
4825
- height: 24px;
4826
- min-width: 24px;
4827
- width: 24px;
4828
- line-height: 24px;
4825
+ height: 20px;
4826
+ min-width: 20px;
4827
+ width: 20px;
4828
+ line-height: 1;
4829
4829
  }
4830
4830
  @media screen and (max-width: 480px) {
4831
4831
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4835,7 +4835,7 @@
4835
4835
  }
4836
4836
  .e-tab-clone-element .e-tab-icon,
4837
4837
  .e-tab-clone-element .e-tab-icon::before {
4838
- font-size: 14px;
4838
+ font-size: 16px;
4839
4839
  }
4840
4840
  @media screen and (max-width: 480px) {
4841
4841
  .e-tab-clone-element .e-tab-icon,
@@ -2170,8 +2170,8 @@
2170
2170
  border-color: var(--color-sf-icon-color);
2171
2171
  border-style: solid;
2172
2172
  border-width: 0;
2173
- -webkit-box-shadow: none;
2174
- box-shadow: none;
2173
+ -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
2174
+ box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
2175
2175
  }
2176
2176
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
2177
2177
  .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
@@ -4094,10 +4094,10 @@
4094
4094
  display: -webkit-inline-box;
4095
4095
  display: -ms-inline-flexbox;
4096
4096
  display: inline-flex;
4097
- height: 24px;
4098
- min-width: 24px;
4099
- width: 24px;
4100
- line-height: 24px;
4097
+ height: 20px;
4098
+ min-width: 20px;
4099
+ width: 20px;
4100
+ line-height: 1;
4101
4101
  }
4102
4102
  @media screen and (max-width: 480px) {
4103
4103
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4107,7 +4107,7 @@
4107
4107
  }
4108
4108
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
4109
4109
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
4110
- font-size: 14px;
4110
+ font-size: 16px;
4111
4111
  }
4112
4112
  @media screen and (max-width: 480px) {
4113
4113
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5516,10 +5516,10 @@
5516
5516
  display: -webkit-inline-box;
5517
5517
  display: -ms-inline-flexbox;
5518
5518
  display: inline-flex;
5519
- height: 24px;
5520
- min-width: 24px;
5521
- width: 24px;
5522
- line-height: 24px;
5519
+ height: 20px;
5520
+ min-width: 20px;
5521
+ width: 20px;
5522
+ line-height: 1;
5523
5523
  }
5524
5524
  @media screen and (max-width: 480px) {
5525
5525
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5529,7 +5529,7 @@
5529
5529
  }
5530
5530
  .e-tab-clone-element .e-tab-icon,
5531
5531
  .e-tab-clone-element .e-tab-icon::before {
5532
- font-size: 14px;
5532
+ font-size: 16px;
5533
5533
  }
5534
5534
  @media screen and (max-width: 480px) {
5535
5535
  .e-tab-clone-element .e-tab-icon,
@@ -4041,10 +4041,10 @@
4041
4041
  display: -webkit-inline-box;
4042
4042
  display: -ms-inline-flexbox;
4043
4043
  display: inline-flex;
4044
- height: 24px;
4045
- min-width: 24px;
4046
- width: 24px;
4047
- line-height: 24px;
4044
+ height: 20px;
4045
+ min-width: 20px;
4046
+ width: 20px;
4047
+ line-height: 1;
4048
4048
  }
4049
4049
  @media screen and (max-width: 480px) {
4050
4050
  .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4054,7 +4054,7 @@
4054
4054
  }
4055
4055
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
4056
4056
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
4057
- font-size: 14px;
4057
+ font-size: 16px;
4058
4058
  }
4059
4059
  @media screen and (max-width: 480px) {
4060
4060
  .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5463,10 +5463,10 @@
5463
5463
  display: -webkit-inline-box;
5464
5464
  display: -ms-inline-flexbox;
5465
5465
  display: inline-flex;
5466
- height: 24px;
5467
- min-width: 24px;
5468
- width: 24px;
5469
- line-height: 24px;
5466
+ height: 20px;
5467
+ min-width: 20px;
5468
+ width: 20px;
5469
+ line-height: 1;
5470
5470
  }
5471
5471
  @media screen and (max-width: 480px) {
5472
5472
  .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5476,7 +5476,7 @@
5476
5476
  }
5477
5477
  .e-tab-clone-element .e-tab-icon,
5478
5478
  .e-tab-clone-element .e-tab-icon::before {
5479
- font-size: 14px;
5479
+ font-size: 16px;
5480
5480
  }
5481
5481
  @media screen and (max-width: 480px) {
5482
5482
  .e-tab-clone-element .e-tab-icon,