@syncfusion/ej2-navigations 21.1.39 → 21.2.4

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 (50) hide show
  1. package/CHANGELOG.md +32 -0
  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 +71 -53
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +71 -53
  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 +11 -11
  13. package/src/common/h-scroll.js +1 -0
  14. package/src/common/menu-base.d.ts +1 -0
  15. package/src/common/menu-base.js +27 -15
  16. package/src/common/v-scroll.js +1 -1
  17. package/src/tab/tab.d.ts +1 -0
  18. package/src/tab/tab.js +37 -32
  19. package/src/treeview/treeview.js +5 -5
  20. package/styles/bootstrap-dark.css +35 -16
  21. package/styles/bootstrap.css +35 -16
  22. package/styles/bootstrap4.css +35 -16
  23. package/styles/bootstrap5-dark.css +35 -16
  24. package/styles/bootstrap5.css +35 -16
  25. package/styles/fabric-dark.css +35 -16
  26. package/styles/fabric.css +35 -16
  27. package/styles/fluent-dark.css +35 -16
  28. package/styles/fluent.css +35 -16
  29. package/styles/highcontrast-light.css +35 -16
  30. package/styles/highcontrast.css +37 -17
  31. package/styles/material-dark.css +35 -16
  32. package/styles/material.css +35 -16
  33. package/styles/tailwind-dark.css +35 -16
  34. package/styles/tailwind.css +35 -16
  35. package/styles/treeview/_theme.scss +20 -10
  36. package/styles/treeview/bootstrap-dark.css +35 -16
  37. package/styles/treeview/bootstrap.css +35 -16
  38. package/styles/treeview/bootstrap4.css +35 -16
  39. package/styles/treeview/bootstrap5-dark.css +35 -16
  40. package/styles/treeview/bootstrap5.css +35 -16
  41. package/styles/treeview/fabric-dark.css +35 -16
  42. package/styles/treeview/fabric.css +35 -16
  43. package/styles/treeview/fluent-dark.css +35 -16
  44. package/styles/treeview/fluent.css +35 -16
  45. package/styles/treeview/highcontrast-light.css +35 -16
  46. package/styles/treeview/highcontrast.css +37 -17
  47. package/styles/treeview/material-dark.css +35 -16
  48. package/styles/treeview/material.css +35 -16
  49. package/styles/treeview/tailwind-dark.css +35 -16
  50. package/styles/treeview/tailwind.css +35 -16
package/styles/material.css CHANGED
@@ -8130,17 +8130,22 @@
8130
8130
  font-size: 10px;
8131
8131
  }
8132
8132
  .e-treeview .e-list-item.e-active,
8133
- .e-treeview .e-list-item.e-hover {
8133
+ .e-treeview .e-list-item.e-hover,
8134
+ .e-treeview .e-list-item.e-node-focus {
8134
8135
  background: transparent;
8135
8136
  }
8136
- .e-treeview .e-list-item.e-hover > .e-text-content {
8137
+ .e-treeview .e-list-item.e-hover > .e-text-content,
8138
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
8137
8139
  color: rgba(0, 0, 0, 0.87);
8138
8140
  }
8139
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
8141
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
8142
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
8140
8143
  color: rgba(0, 0, 0, 0.87);
8141
8144
  }
8142
8145
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
8143
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
8146
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
8147
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
8148
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
8144
8149
  color: rgba(0, 0, 0, 0.54);
8145
8150
  }
8146
8151
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -8153,31 +8158,40 @@
8153
8158
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
8154
8159
  color: rgba(0, 0, 0, 0.54);
8155
8160
  }
8156
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
8161
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
8162
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
8157
8163
  color: #e3165b;
8158
8164
  }
8159
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
8165
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
8166
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
8160
8167
  color: #e3165b;
8161
8168
  }
8162
8169
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
8163
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
8170
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
8171
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
8172
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
8164
8173
  color: rgba(0, 0, 0, 0.54);
8165
8174
  }
8166
8175
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
8167
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
8176
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
8177
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
8168
8178
  color: rgba(0, 0, 0, 0.87);
8169
8179
  }
8170
8180
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
8171
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
8181
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
8182
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
8172
8183
  color: rgba(0, 0, 0, 0.87);
8173
8184
  }
8174
8185
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
8175
8186
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
8176
8187
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
8177
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
8188
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
8189
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
8190
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
8178
8191
  color: rgba(0, 0, 0, 0.54);
8179
8192
  }
8180
- .e-treeview .e-list-item.e-hover > .e-fullrow {
8193
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
8194
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
8181
8195
  background-color: #f5f5f5;
8182
8196
  border-color: #f5f5f5;
8183
8197
  }
@@ -8195,12 +8209,14 @@
8195
8209
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
8196
8210
  color: rgba(0, 0, 0, 0.87);
8197
8211
  }
8198
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
8212
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
8213
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
8199
8214
  background-color: #e0e0e0;
8200
8215
  border-color: #e0e0e0;
8201
8216
  }
8202
8217
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
8203
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
8218
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
8219
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
8204
8220
  background-color: transparent;
8205
8221
  border-color: transparent;
8206
8222
  }
@@ -8231,7 +8247,8 @@
8231
8247
  .e-treeview .e-popup .e-downtail::after {
8232
8248
  border-top-color: #fff;
8233
8249
  }
8234
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
8250
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
8251
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
8235
8252
  background-color: #f5f5f5;
8236
8253
  border-color: #f5f5f5;
8237
8254
  }
@@ -8239,12 +8256,14 @@
8239
8256
  background-color: #eee;
8240
8257
  border-color: #eee;
8241
8258
  }
8242
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
8259
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
8260
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
8243
8261
  background-color: #e0e0e0;
8244
8262
  border-color: #e0e0e0;
8245
8263
  }
8246
8264
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
8247
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
8265
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
8266
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
8248
8267
  background-color: transparent;
8249
8268
  border-color: transparent;
8250
8269
  }
package/styles/tailwind-dark.css CHANGED
@@ -8296,17 +8296,22 @@
8296
8296
  font-size: 20px;
8297
8297
  }
8298
8298
  .e-treeview .e-list-item.e-active,
8299
- .e-treeview .e-list-item.e-hover {
8299
+ .e-treeview .e-list-item.e-hover,
8300
+ .e-treeview .e-list-item.e-node-focus {
8300
8301
  background: transparent;
8301
8302
  }
8302
- .e-treeview .e-list-item.e-hover > .e-text-content {
8303
+ .e-treeview .e-list-item.e-hover > .e-text-content,
8304
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
8303
8305
  color: #fff;
8304
8306
  }
8305
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
8307
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
8308
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
8306
8309
  color: #fff;
8307
8310
  }
8308
8311
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
8309
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
8312
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
8313
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
8314
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
8310
8315
  color: #f3f4f6;
8311
8316
  }
8312
8317
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -8319,31 +8324,40 @@
8319
8324
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
8320
8325
  color: #fff;
8321
8326
  }
8322
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
8327
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
8328
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
8323
8329
  color: #fff;
8324
8330
  }
8325
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
8331
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
8332
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
8326
8333
  color: #fff;
8327
8334
  }
8328
8335
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
8329
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
8336
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
8337
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
8338
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
8330
8339
  color: #f3f4f6;
8331
8340
  }
8332
8341
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
8333
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
8342
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
8343
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
8334
8344
  color: #fff;
8335
8345
  }
8336
8346
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
8337
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
8347
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
8348
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
8338
8349
  color: #fff;
8339
8350
  }
8340
8351
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
8341
8352
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
8342
8353
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
8343
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
8354
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
8355
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
8356
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
8344
8357
  color: #d1d5db;
8345
8358
  }
8346
- .e-treeview .e-list-item.e-hover > .e-fullrow {
8359
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
8360
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
8347
8361
  background-color: #4b5563;
8348
8362
  border-color: #4b5563;
8349
8363
  }
@@ -8361,12 +8375,14 @@
8361
8375
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
8362
8376
  color: #fff;
8363
8377
  }
8364
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
8378
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
8379
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
8365
8380
  background-color: #4b5563;
8366
8381
  border-color: #4b5563;
8367
8382
  }
8368
8383
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
8369
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
8384
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
8385
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
8370
8386
  background-color: transparent;
8371
8387
  border-color: transparent;
8372
8388
  }
@@ -8397,7 +8413,8 @@
8397
8413
  .e-treeview .e-popup .e-downtail::after {
8398
8414
  border-top-color: #4b5563;
8399
8415
  }
8400
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
8416
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
8417
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
8401
8418
  background-color: #4b5563;
8402
8419
  border-color: #4b5563;
8403
8420
  }
@@ -8405,12 +8422,14 @@
8405
8422
  background-color: #6b7280;
8406
8423
  border-color: #6b7280;
8407
8424
  }
8408
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
8425
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
8426
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
8409
8427
  background-color: #4b5563;
8410
8428
  border-color: #4b5563;
8411
8429
  }
8412
8430
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
8413
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
8431
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
8432
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
8414
8433
  background-color: transparent;
8415
8434
  border-color: transparent;
8416
8435
  }
package/styles/tailwind.css CHANGED
@@ -8296,17 +8296,22 @@
8296
8296
  font-size: 20px;
8297
8297
  }
8298
8298
  .e-treeview .e-list-item.e-active,
8299
- .e-treeview .e-list-item.e-hover {
8299
+ .e-treeview .e-list-item.e-hover,
8300
+ .e-treeview .e-list-item.e-node-focus {
8300
8301
  background: transparent;
8301
8302
  }
8302
- .e-treeview .e-list-item.e-hover > .e-text-content {
8303
+ .e-treeview .e-list-item.e-hover > .e-text-content,
8304
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
8303
8305
  color: #111827;
8304
8306
  }
8305
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
8307
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
8308
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
8306
8309
  color: #111827;
8307
8310
  }
8308
8311
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
8309
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
8312
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
8313
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
8314
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
8310
8315
  color: #374151;
8311
8316
  }
8312
8317
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -8319,31 +8324,40 @@
8319
8324
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
8320
8325
  color: #111827;
8321
8326
  }
8322
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
8327
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
8328
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
8323
8329
  color: #111827;
8324
8330
  }
8325
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
8331
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
8332
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
8326
8333
  color: #111827;
8327
8334
  }
8328
8335
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
8329
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
8336
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
8337
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
8338
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
8330
8339
  color: #374151;
8331
8340
  }
8332
8341
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
8333
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
8342
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
8343
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
8334
8344
  color: #111827;
8335
8345
  }
8336
8346
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
8337
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
8347
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
8348
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
8338
8349
  color: #111827;
8339
8350
  }
8340
8351
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
8341
8352
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
8342
8353
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
8343
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
8354
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
8355
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
8356
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
8344
8357
  color: #6b7280;
8345
8358
  }
8346
- .e-treeview .e-list-item.e-hover > .e-fullrow {
8359
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
8360
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
8347
8361
  background-color: #f3f4f6;
8348
8362
  border-color: #f3f4f6;
8349
8363
  }
@@ -8361,12 +8375,14 @@
8361
8375
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
8362
8376
  color: #111827;
8363
8377
  }
8364
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
8378
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
8379
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
8365
8380
  background-color: #d6d9e0;
8366
8381
  border-color: #f3f4f6;
8367
8382
  }
8368
8383
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
8369
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
8384
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
8385
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
8370
8386
  background-color: transparent;
8371
8387
  border-color: transparent;
8372
8388
  }
@@ -8397,7 +8413,8 @@
8397
8413
  .e-treeview .e-popup .e-downtail::after {
8398
8414
  border-top-color: #f3f4f6;
8399
8415
  }
8400
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
8416
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
8417
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
8401
8418
  background-color: #f3f4f6;
8402
8419
  border-color: #f3f4f6;
8403
8420
  }
@@ -8405,12 +8422,14 @@
8405
8422
  background-color: #e5e7eb;
8406
8423
  border-color: #e5e7eb;
8407
8424
  }
8408
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
8425
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
8426
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
8409
8427
  background-color: #d6d9e0;
8410
8428
  border-color: #f3f4f6;
8411
8429
  }
8412
8430
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
8413
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
8431
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
8432
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
8414
8433
  background-color: transparent;
8415
8434
  border-color: transparent;
8416
8435
  }
package/styles/treeview/_theme.scss CHANGED
@@ -115,11 +115,13 @@
115
115
  }
116
116
 
117
117
  .e-list-item.e-active,
118
- .e-list-item.e-hover {
118
+ .e-list-item.e-hover,
119
+ .e-list-item.e-node-focus {
119
120
  background: transparent;
120
121
  }
121
122
 
122
- .e-list-item.e-hover > .e-text-content {
123
+ .e-list-item.e-hover > .e-text-content,
124
+ .e-list-item.e-node-focus > .e-text-content {
123
125
  color: $treeview-text-hover-color;
124
126
 
125
127
  .e-list-text {
@@ -168,7 +170,8 @@
168
170
  }
169
171
  }
170
172
 
171
- .e-list-item.e-active.e-hover > .e-text-content {
173
+ .e-list-item.e-active.e-hover > .e-text-content,
174
+ .e-list-item.e-active.e-node-focus > .e-text-content {
172
175
  color: $treeview-text-active-hover-color;
173
176
 
174
177
  .e-list-text {
@@ -182,7 +185,8 @@
182
185
  }
183
186
 
184
187
  .e-list-item.e-editing.e-active > .e-text-content,
185
- .e-list-item.e-editing.e-hover > .e-text-content {
188
+ .e-list-item.e-editing.e-hover > .e-text-content,
189
+ .e-list-item.e-editing.e-node-focus > .e-text-content {
186
190
  color: $treeview-text-color;
187
191
 
188
192
  .e-list-text {
@@ -199,7 +203,8 @@
199
203
  }
200
204
  }
201
205
 
202
- .e-list-item.e-hover > .e-fullrow {
206
+ .e-list-item.e-hover > .e-fullrow,
207
+ .e-list-item.e-node-focus > .e-fullrow {
203
208
  background-color: $treeview-item-hover-bg;
204
209
  border-color: $treeview-item-hover-border-color;
205
210
  }
@@ -224,12 +229,14 @@
224
229
  }
225
230
  }
226
231
 
227
- .e-list-item.e-active.e-hover > .e-fullrow{
232
+ .e-list-item.e-active.e-hover > .e-fullrow,
233
+ .e-list-item.e-active.e-node-focus > .e-fullrow {
228
234
  @include active-hover-theme;
229
235
  }
230
236
 
231
237
  .e-list-item.e-editing.e-active > .e-fullrow,
232
- .e-list-item.e-editing.e-hover > .e-fullrow{
238
+ .e-list-item.e-editing.e-hover > .e-fullrow,
239
+ .e-list-item.e-editing.e-node-focus > .e-fullrow {
233
240
  @include active-editing-theme;
234
241
  }
235
242
 
@@ -295,7 +302,8 @@
295
302
 
296
303
  &:not(.e-fullrow-wrap) {
297
304
 
298
- .e-list-item.e-hover > .e-text-content{
305
+ .e-list-item.e-hover > .e-text-content,
306
+ .e-list-item.e-node-focus > .e-text-content {
299
307
  background-color: $treeview-item-hover-bg;
300
308
  border-color: $treeview-item-hover-border-color;
301
309
  }
@@ -305,12 +313,14 @@
305
313
  border-color: $treeview-item-active-border-color;
306
314
  }
307
315
 
308
- .e-list-item.e-active.e-hover > .e-text-content {
316
+ .e-list-item.e-active.e-hover > .e-text-content,
317
+ .e-list-item.e-active.e-node-focus > .e-text-content {
309
318
  @include active-hover-theme;
310
319
  }
311
320
 
312
321
  .e-list-item.e-editing.e-active > .e-text-content,
313
- .e-list-item.e-editing.e-hover > .e-text-content {
322
+ .e-list-item.e-editing.e-hover > .e-text-content,
323
+ .e-list-item.e-editing.e-node-focus > .e-text-content {
314
324
  @include active-editing-theme;
315
325
  }
316
326
  }
package/styles/treeview/bootstrap-dark.css CHANGED
@@ -589,17 +589,22 @@
589
589
  font-size: 8px;
590
590
  }
591
591
  .e-treeview .e-list-item.e-active,
592
- .e-treeview .e-list-item.e-hover {
592
+ .e-treeview .e-list-item.e-hover,
593
+ .e-treeview .e-list-item.e-node-focus {
593
594
  background: transparent;
594
595
  }
595
- .e-treeview .e-list-item.e-hover > .e-text-content {
596
+ .e-treeview .e-list-item.e-hover > .e-text-content,
597
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
596
598
  color: #f0f0f0;
597
599
  }
598
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
600
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
601
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
599
602
  color: #f0f0f0;
600
603
  }
601
604
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
602
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
605
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
606
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
607
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
603
608
  color: #f0f0f0;
604
609
  }
605
610
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -612,31 +617,40 @@
612
617
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
613
618
  color: #fff;
614
619
  }
615
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
620
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
621
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
616
622
  color: #fff;
617
623
  }
618
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
624
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
625
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
619
626
  color: #fff;
620
627
  }
621
628
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
622
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
629
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
630
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
631
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
623
632
  color: #fff;
624
633
  }
625
634
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
626
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
635
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
636
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
627
637
  color: #f0f0f0;
628
638
  }
629
639
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
630
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
640
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
641
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
631
642
  color: #f0f0f0;
632
643
  }
633
644
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
634
645
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
635
646
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
636
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
647
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
648
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
649
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
637
650
  color: #f0f0f0;
638
651
  }
639
- .e-treeview .e-list-item.e-hover > .e-fullrow {
652
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
653
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
640
654
  background-color: #414141;
641
655
  border-color: #414141;
642
656
  }
@@ -654,12 +668,14 @@
654
668
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
655
669
  color: #f0f0f0;
656
670
  }
657
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
671
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
672
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
658
673
  background-color: #0070f0;
659
674
  border-color: #104888;
660
675
  }
661
676
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
662
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
677
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
678
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
663
679
  background-color: transparent;
664
680
  border-color: transparent;
665
681
  }
@@ -691,7 +707,8 @@
691
707
  .e-treeview .e-popup .e-downtail::after {
692
708
  border-top-color: #fff;
693
709
  }
694
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
710
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
711
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
695
712
  background-color: #414141;
696
713
  border-color: #414141;
697
714
  }
@@ -699,12 +716,14 @@
699
716
  background-color: #0070f0;
700
717
  border-color: #0070f0;
701
718
  }
702
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
719
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
720
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
703
721
  background-color: #0070f0;
704
722
  border-color: #104888;
705
723
  }
706
724
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
707
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
725
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
726
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
708
727
  background-color: transparent;
709
728
  border-color: transparent;
710
729
  }