@syncfusion/ej2-filemanager 32.2.7 → 33.1.45

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 (45) hide show
  1. package/dist/ej2-filemanager.min.js +2 -2
  2. package/dist/ej2-filemanager.umd.min.js +2 -2
  3. package/dist/ej2-filemanager.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-filemanager.es2015.js +133 -4
  5. package/dist/es6/ej2-filemanager.es2015.js.map +1 -1
  6. package/dist/es6/ej2-filemanager.es5.js +137 -4
  7. package/dist/es6/ej2-filemanager.es5.js.map +1 -1
  8. package/dist/global/ej2-filemanager.min.js +2 -2
  9. package/dist/global/ej2-filemanager.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +11 -11
  12. package/src/file-manager/actions/toolbar.js +8 -0
  13. package/src/file-manager/base/file-manager.d.ts +1 -0
  14. package/src/file-manager/base/file-manager.js +14 -0
  15. package/src/file-manager/base/interface.d.ts +1 -0
  16. package/src/file-manager/layout/details-view.d.ts +10 -1
  17. package/src/file-manager/layout/details-view.js +37 -0
  18. package/src/file-manager/layout/large-icons-view.d.ts +26 -3
  19. package/src/file-manager/layout/large-icons-view.js +68 -0
  20. package/src/file-manager/models/default-locale.js +2 -2
  21. package/src/file-manager/pop-up/context-menu.js +5 -2
  22. package/src/file-manager/pop-up/dialog.js +3 -0
  23. package/styles/bootstrap4-lite.css +5 -1
  24. package/styles/bootstrap4.css +5 -1
  25. package/styles/bootstrap5-dark-lite.css +4 -0
  26. package/styles/bootstrap5-dark.css +4 -0
  27. package/styles/bootstrap5-lite.css +5 -1
  28. package/styles/bootstrap5.css +5 -1
  29. package/styles/file-manager/_bootstrap4-definition.scss +3 -0
  30. package/styles/file-manager/_bootstrap5-dark-definition.scss +3 -0
  31. package/styles/file-manager/_bootstrap5-definition.scss +3 -0
  32. package/styles/file-manager/_fluent2-definition.scss +1 -0
  33. package/styles/file-manager/_theme.scss +10 -1
  34. package/styles/file-manager/bootstrap4.css +5 -1
  35. package/styles/file-manager/bootstrap5-dark.css +4 -0
  36. package/styles/file-manager/bootstrap5.css +5 -1
  37. package/styles/file-manager/fluent2.css +1 -0
  38. package/styles/file-manager/material3-dark.css +0 -5
  39. package/styles/file-manager/material3.css +0 -5
  40. package/styles/fluent2-lite.css +1 -0
  41. package/styles/fluent2.css +1 -0
  42. package/styles/material3-dark-lite.css +0 -5
  43. package/styles/material3-dark.css +0 -5
  44. package/styles/material3-lite.css +0 -5
  45. package/styles/material3.css +0 -5
@@ -4088,6 +4088,9 @@ function triggerPopupOpen(parent, dlgModule, dialogName) {
4088
4088
  function triggerPopupClose(parent, dlgModule, dialogName) {
4089
4089
  var args = { popupModule: dlgModule, element: dlgModule.element, popupName: dialogName };
4090
4090
  parent.trigger('popupClose', args);
4091
+ if (dialogName !== 'Duplicate Items') {
4092
+ parent.restoreFocus();
4093
+ }
4091
4094
  }
4092
4095
  /**
4093
4096
  *
@@ -4971,6 +4974,7 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
4971
4974
  this.isInteracted = true;
4972
4975
  this.imageEventArgsMap = new Map();
4973
4976
  this.imageUrlCache = new Map();
4977
+ this.nextFocusIndex = null;
4974
4978
  this.parent = parent;
4975
4979
  this.element = select('#' + this.parent.element.id + LARGEICON_ID, this.parent.element);
4976
4980
  addClass([this.element], LARGE_ICONS);
@@ -5379,6 +5383,13 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
5379
5383
  };
5380
5384
  LargeIconsView.prototype.onDeleteInit = function () {
5381
5385
  if (this.parent.activeModule === 'largeiconsview') {
5386
+ var activeItem = this.getFocusedItem() || this.getActiveItem();
5387
+ if (activeItem) {
5388
+ var index = this.itemList.indexOf(activeItem);
5389
+ if (index !== -1) {
5390
+ this.nextFocusIndex = index;
5391
+ }
5392
+ }
5382
5393
  Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
5383
5394
  }
5384
5395
  };
@@ -5389,6 +5400,16 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
5389
5400
  }
5390
5401
  this.onLayoutChange(args);
5391
5402
  this.parent.setProperties({ selectedItems: [] }, true);
5403
+ if (typeof this.nextFocusIndex === 'number') {
5404
+ var items = this.element.querySelectorAll('li.e-list-item');
5405
+ if (items.length > 0) {
5406
+ var focusIndex = this.nextFocusIndex >= items.length
5407
+ ? (this.nextFocusIndex === items.length ? items.length - 1 : 0) : this.nextFocusIndex;
5408
+ // eslint-disable-next-line security/detect-object-injection
5409
+ this.addFocus(items[focusIndex]);
5410
+ }
5411
+ this.nextFocusIndex = null;
5412
+ }
5392
5413
  this.clearSelect();
5393
5414
  };
5394
5415
  LargeIconsView.prototype.onRefreshEnd = function (args) {
@@ -5416,6 +5437,30 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
5416
5437
  this.clearSelect();
5417
5438
  this.addSelection(this.parent.renamedItem);
5418
5439
  }
5440
+ var mappedItem = null;
5441
+ if (this.parent._lastFocused && this.parent.pathId && this.parent.pathId.length && this.items && this.itemList) {
5442
+ var key = this.parent.pathId[this.parent.pathId.length - 1];
5443
+ // eslint-disable-next-line security/detect-object-injection
5444
+ var mappedId = this.parent._lastFocused[key];
5445
+ if (mappedId) {
5446
+ var foundIndex = -1;
5447
+ for (var i = 0; i < this.items.length; i++) {
5448
+ // eslint-disable-next-line security/detect-object-injection
5449
+ if (getValue('_fm_id', this.items[i]) === mappedId || (this.parent.hasId && getValue('id', this.items[i]) === mappedId) || getValue('name', this.items[i]) === mappedId) {
5450
+ foundIndex = i;
5451
+ break;
5452
+ }
5453
+ }
5454
+ // eslint-disable-next-line security/detect-object-injection
5455
+ if (foundIndex > -1 && this.itemList[foundIndex]) {
5456
+ mappedItem = this.itemList[foundIndex];
5457
+ }
5458
+ }
5459
+ }
5460
+ var targetItem = this.getFocusedItem() || mappedItem || this.parent.visitedItem || this.getFirstItem();
5461
+ if (targetItem) {
5462
+ this.addFocus(targetItem);
5463
+ }
5419
5464
  }
5420
5465
  };
5421
5466
  LargeIconsView.prototype.onOpenInit = function (args) {
@@ -5871,11 +5916,15 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
5871
5916
  }
5872
5917
  var eventArgs = { cancel: false, fileDetails: details_1, module: 'LargeIconsView' };
5873
5918
  this.parent.trigger('fileOpen', eventArgs, function (fileOpenArgs) {
5919
+ var _a;
5874
5920
  if (!fileOpenArgs.cancel) {
5875
5921
  var text = getValue('name', details_1);
5876
5922
  if (!_this.parent.isFile) {
5877
5923
  var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
5878
5924
  if (val === '' && !_this.parent.isFiltered) {
5925
+ if (_this.parent.pathId && _this.parent.pathId.length) {
5926
+ _this.parent._lastFocused = Object.assign(_this.parent._lastFocused || {}, (_a = {}, _a[_this.parent.pathId[_this.parent.pathId.length - 1]] = getValue('_fm_id', details_1) || getValue('id', details_1) || text, _a));
5927
+ }
5879
5928
  var id = getValue('id', details_1);
5880
5929
  _this.parent.oldPath = _this.parent.path;
5881
5930
  var newPath = _this.parent.path + (isNullOrUndefined(id) ? text : id) + '/';
@@ -6116,12 +6165,26 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
6116
6165
  var indexes = this.getIndexes([item], this.parent.hasId);
6117
6166
  return this.itemList[indexes[0]];
6118
6167
  };
6168
+ /**
6169
+ *
6170
+ * Gets the currently focused item element in the large icon view.
6171
+ *
6172
+ * @returns {Element} - The DOM element of the focused item, or null if none is focused.
6173
+ * @hidden
6174
+ */
6119
6175
  LargeIconsView.prototype.getFocusedItem = function () {
6120
6176
  return select('.' + LIST_ITEM + '.' + FOCUS, this.element);
6121
6177
  };
6122
6178
  LargeIconsView.prototype.getActiveItem = function () {
6123
6179
  return select('.' + LIST_ITEM + '.' + ACTIVE, this.element);
6124
6180
  };
6181
+ /**
6182
+ *
6183
+ * Gets the first item element in the large icon view.
6184
+ *
6185
+ * @returns {Element} - The DOM element representing the first item in the list.
6186
+ * @hidden
6187
+ */
6125
6188
  LargeIconsView.prototype.getFirstItem = function () {
6126
6189
  return this.itemList[0];
6127
6190
  };
@@ -6326,6 +6389,14 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
6326
6389
  var data = this.getItemObject(item);
6327
6390
  return getItemName(this.parent, data);
6328
6391
  };
6392
+ /**
6393
+ *
6394
+ * Adds focus to the specified item element in the large icon view.
6395
+ *
6396
+ * @param {Element} item - The DOM element representing the item to focus.
6397
+ * @returns {void} - If null or invalid, no focus is applied.
6398
+ * @hidden
6399
+ */
6329
6400
  LargeIconsView.prototype.addFocus = function (item) {
6330
6401
  this.element.setAttribute('tabindex', '-1');
6331
6402
  var fItem = this.getFocusedItem();
@@ -7084,6 +7155,9 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
7084
7155
  return;
7085
7156
  }
7086
7157
  });
7158
+ if (!this.isMenuItemClicked && this.menuTarget) {
7159
+ this.parent.restoreFocus();
7160
+ }
7087
7161
  this.menuTarget = null;
7088
7162
  if (!this.isMenuItemClicked && this.parent.pathId.length > 1 && this.parent.activeModule === 'navigationpane') {
7089
7163
  this.parent.pathId.pop();
@@ -7605,11 +7679,11 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
7605
7679
  id: itemId, text: itemText, iconCss: ICON_UPLOAD,
7606
7680
  items: [
7607
7681
  {
7608
- id: this.getMenuId('folderupload'), text: getLocaleText(this.parent, 'Upload-Folder'),
7682
+ id: this.getMenuId('folderupload'), text: getLocaleText(this.parent, 'Folder'),
7609
7683
  iconCss: !this.parent.uploadObj.directoryUpload ? null : TB_OPTION_TICK
7610
7684
  },
7611
7685
  {
7612
- id: this.getMenuId('fileupload'), text: getLocaleText(this.parent, 'Upload-File'),
7686
+ id: this.getMenuId('fileupload'), text: getLocaleText(this.parent, 'File'),
7613
7687
  iconCss: this.parent.uploadObj.directoryUpload ? null : TB_OPTION_TICK
7614
7688
  }
7615
7689
  ]
@@ -7758,8 +7832,8 @@ var defaultLocale = {
7758
7832
  'None': 'None',
7759
7833
  'View-LargeIcons': 'Large icons',
7760
7834
  'View-Details': 'Details',
7761
- 'Upload-File': 'File',
7762
- 'Upload-Folder': 'Folder',
7835
+ 'File': 'File',
7836
+ 'Folder': 'Folder',
7763
7837
  'Search': 'Search',
7764
7838
  'Button-Ok': 'OK',
7765
7839
  'Button-Cancel': 'Cancel',
@@ -9206,6 +9280,20 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
9206
9280
  this.uploadObj.enableRtl = rtl;
9207
9281
  }
9208
9282
  };
9283
+ FileManager.prototype.restoreFocus = function () {
9284
+ if (this.activeModule === 'detailsview') {
9285
+ if (this.detailsviewModule.gridObj) {
9286
+ this.detailsviewModule.addFocus(this.detailsviewModule.gridObj.selectedRowIndex > -1
9287
+ ? this.detailsviewModule.gridObj.selectedRowIndex : 0);
9288
+ }
9289
+ return;
9290
+ }
9291
+ var targetItem = this.largeiconsviewModule.getFocusedItem()
9292
+ || this.visitedItem || this.largeiconsviewModule.getFirstItem();
9293
+ if (targetItem && this.largeiconsviewModule) {
9294
+ this.largeiconsviewModule.addFocus(targetItem);
9295
+ }
9296
+ };
9209
9297
  var FileManager_1;
9210
9298
  __decorate$8([
9211
9299
  Complex({}, AjaxSettings)
@@ -9687,6 +9775,7 @@ var Toolbar = /** @__PURE__ @class */ (function () {
9687
9775
  }
9688
9776
  };
9689
9777
  Toolbar.prototype.toolbarItemData = function (data) {
9778
+ var _this = this;
9690
9779
  var items = [];
9691
9780
  var mode = 'Both';
9692
9781
  if (this.parent.isMobile) {
@@ -9786,6 +9875,13 @@ var Toolbar = /** @__PURE__ @class */ (function () {
9786
9875
  items.push(item);
9787
9876
  }
9788
9877
  }
9878
+ for (var _i = 0, _a = items; _i < _a.length; _i++) {
9879
+ var item = _a[_i];
9880
+ if (typeof item === 'object' && item !== null && typeof item.template === 'string') {
9881
+ var template = item.template;
9882
+ item.template = template.replace(/>((?:Upload|SortBy|View|Refresh|NewFolder|Cut|Copy|Paste|Delete|Rename|Download|SelectAll|Details))</g, function (_match, key) { return '>' + getLocaleText(_this.parent, key) + '<'; });
9883
+ }
9884
+ }
9789
9885
  return items;
9790
9886
  };
9791
9887
  Toolbar.prototype.getItemModel = function (propItem) {
@@ -11204,6 +11300,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
11204
11300
  this.isMultiSelect = false;
11205
11301
  this.pasteOperation = false;
11206
11302
  this.uploadOperation = false;
11303
+ this.nextFocusIndex = null;
11207
11304
  Grid.Inject(Resize, ContextMenu$2, Sort, VirtualScroll);
11208
11305
  this.parent = parent;
11209
11306
  this.element = select('#' + this.parent.element.id + GRID_ID, this.parent.element);
@@ -11660,6 +11757,13 @@ var DetailsView = /** @__PURE__ @class */ (function () {
11660
11757
  sortIconElement.classList.remove('e-icon-ascending', 'e-ascending', 'e-icon-descending', 'e-descending');
11661
11758
  }
11662
11759
  }
11760
+ if (typeof this.nextFocusIndex === 'number') {
11761
+ var rowCount = this.gridObj.getRows().length;
11762
+ if (rowCount > 0) {
11763
+ this.addFocus(this.nextFocusIndex >= rowCount ? rowCount : this.nextFocusIndex);
11764
+ }
11765
+ this.nextFocusIndex = null;
11766
+ }
11663
11767
  };
11664
11768
  DetailsView.prototype.selectRecords = function (nodes) {
11665
11769
  var gridRecords = this.gridObj.getCurrentViewRecords();
@@ -11794,6 +11898,21 @@ var DetailsView = /** @__PURE__ @class */ (function () {
11794
11898
  showSpinner(this.parent.element);
11795
11899
  this.parent.setProperties({ selectedItems: [] }, true);
11796
11900
  this.gridObj.dataSource = getSortedData(this.parent, args.files);
11901
+ if (this.parent._lastFocused && this.parent.pathId && this.parent.pathId.length) {
11902
+ var key = this.parent.pathId[this.parent.pathId.length - 1];
11903
+ // eslint-disable-next-line security/detect-object-injection
11904
+ var mappedId = this.parent._lastFocused[key];
11905
+ if (mappedId) {
11906
+ var gridItems = getSortedData(this.parent, args.files);
11907
+ for (var i = 0; i < gridItems.length; i++) {
11908
+ // eslint-disable-next-line security/detect-object-injection
11909
+ if (getValue('_fm_id', gridItems[i]) === mappedId || (this.parent.hasId && getValue('id', gridItems[i]) === mappedId) || getValue('name', gridItems[i]) === mappedId) {
11910
+ this.nextFocusIndex = i;
11911
+ break;
11912
+ }
11913
+ }
11914
+ }
11915
+ }
11797
11916
  this.gridObj.freezeRefresh();
11798
11917
  if (this.parent.isReact) {
11799
11918
  this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
@@ -11853,6 +11972,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
11853
11972
  }
11854
11973
  var eventArgs = { cancel: false, fileDetails: data, module: 'DetailsView' };
11855
11974
  this.parent.trigger('fileOpen', eventArgs, function (fileOpenArgs) {
11975
+ var _a;
11856
11976
  if (!fileOpenArgs.cancel) {
11857
11977
  var name_2 = getValue('name', data);
11858
11978
  if (getValue('isFile', data)) {
@@ -11865,6 +11985,9 @@ var DetailsView = /** @__PURE__ @class */ (function () {
11865
11985
  else {
11866
11986
  var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
11867
11987
  if (val === '' && !_this.parent.isFiltered) {
11988
+ if (_this.parent.pathId && _this.parent.pathId.length) {
11989
+ _this.parent._lastFocused = Object.assign(_this.parent._lastFocused || {}, (_a = {}, _a[_this.parent.pathId[_this.parent.pathId.length - 1]] = getValue('_fm_id', data) || getValue('id', data) || name_2, _a));
11990
+ }
11868
11991
  var id = getValue('id', data);
11869
11992
  _this.parent.oldPath = _this.parent.path;
11870
11993
  var newPath = _this.parent.path + (isNullOrUndefined(id) ? name_2 : id) + '/';
@@ -11985,6 +12108,8 @@ var DetailsView = /** @__PURE__ @class */ (function () {
11985
12108
  };
11986
12109
  DetailsView.prototype.onDeleteInit = function () {
11987
12110
  if (this.parent.activeModule === 'detailsview') {
12111
+ var selectedIndex = this.gridObj.selectedRowIndex;
12112
+ this.nextFocusIndex = selectedIndex >= 0 ? selectedIndex : this.nextFocusIndex;
11988
12113
  Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
11989
12114
  }
11990
12115
  };
@@ -12934,6 +13059,14 @@ var DetailsView = /** @__PURE__ @class */ (function () {
12934
13059
  }
12935
13060
  this.startIndex = this.gridObj.selectedRowIndex;
12936
13061
  };
13062
+ /**
13063
+ * Adds focus to the specified grid row.
13064
+ *
13065
+ * @param {number | null} item - The row index of the item to focus.
13066
+ * If null or invalid, no focus is applied.
13067
+ * @returns {void}
13068
+ * @hidden
13069
+ */
12937
13070
  DetailsView.prototype.addFocus = function (item) {
12938
13071
  var fItem = this.getFocusedItem();
12939
13072
  var itemElement = this.gridObj.getRowByIndex(item);