@syncfusion/ej2-filemanager 21.2.5 → 22.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +9 -0
  3. package/dist/ej2-filemanager.min.js +2 -2
  4. package/dist/ej2-filemanager.umd.min.js +2 -2
  5. package/dist/ej2-filemanager.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-filemanager.es2015.js +52 -18
  7. package/dist/es6/ej2-filemanager.es2015.js.map +1 -1
  8. package/dist/es6/ej2-filemanager.es5.js +51 -18
  9. package/dist/es6/ej2-filemanager.es5.js.map +1 -1
  10. package/dist/global/ej2-filemanager.min.js +2 -2
  11. package/dist/global/ej2-filemanager.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +15 -15
  14. package/src/file-manager/base/file-manager-model.d.ts +7 -0
  15. package/src/file-manager/base/file-manager.d.ts +6 -0
  16. package/src/file-manager/base/file-manager.js +3 -0
  17. package/src/file-manager/base/interface.d.ts +49 -134
  18. package/src/file-manager/common/operations.js +16 -2
  19. package/src/file-manager/common/utility.d.ts +2 -2
  20. package/src/file-manager/common/utility.js +8 -3
  21. package/src/file-manager/layout/details-view.js +14 -10
  22. package/src/file-manager/layout/large-icons-view.js +2 -2
  23. package/src/file-manager/models/column-model.d.ts +4 -2
  24. package/src/file-manager/models/column.d.ts +4 -2
  25. package/src/file-manager/models/details-view-settings-model.d.ts +1 -1
  26. package/src/file-manager/models/details-view-settings.js +9 -3
  27. package/src/file-manager/models/search-settings.d.ts +6 -13
  28. package/src/file-manager/pop-up/dialog.js +1 -0
  29. package/styles/bootstrap-dark.css +5 -1
  30. package/styles/bootstrap.css +5 -1
  31. package/styles/bootstrap4.css +5 -1
  32. package/styles/bootstrap5-dark.css +5 -1
  33. package/styles/bootstrap5.css +5 -1
  34. package/styles/fabric-dark.css +5 -1
  35. package/styles/fabric.css +5 -1
  36. package/styles/file-manager/_layout.scss +143 -43
  37. package/styles/file-manager/_material3-dark-definition.scss +1 -0
  38. package/styles/file-manager/_material3-definition.scss +260 -0
  39. package/styles/file-manager/_theme.scss +27 -24
  40. package/styles/file-manager/bootstrap-dark.css +5 -1
  41. package/styles/file-manager/bootstrap.css +5 -1
  42. package/styles/file-manager/bootstrap4.css +5 -1
  43. package/styles/file-manager/bootstrap5-dark.css +5 -1
  44. package/styles/file-manager/bootstrap5.css +5 -1
  45. package/styles/file-manager/fabric-dark.css +5 -1
  46. package/styles/file-manager/fabric.css +5 -1
  47. package/styles/file-manager/fluent-dark.css +5 -1
  48. package/styles/file-manager/fluent.css +5 -1
  49. package/styles/file-manager/highcontrast-light.css +5 -1
  50. package/styles/file-manager/highcontrast.css +5 -1
  51. package/styles/file-manager/icons/_material3-dark.scss +1 -0
  52. package/styles/file-manager/material-dark.css +5 -1
  53. package/styles/file-manager/material.css +5 -1
  54. package/styles/file-manager/material3-dark.css +1621 -0
  55. package/styles/file-manager/material3-dark.scss +17 -0
  56. package/styles/file-manager/material3.css +1677 -0
  57. package/styles/file-manager/material3.scss +17 -0
  58. package/styles/file-manager/tailwind-dark.css +5 -1
  59. package/styles/file-manager/tailwind.css +5 -1
  60. package/styles/fluent-dark.css +5 -1
  61. package/styles/fluent.css +5 -1
  62. package/styles/highcontrast-light.css +5 -1
  63. package/styles/highcontrast.css +5 -1
  64. package/styles/material-dark.css +5 -1
  65. package/styles/material.css +5 -1
  66. package/styles/material3-dark.css +1621 -0
  67. package/styles/material3-dark.scss +3 -0
  68. package/styles/material3.css +1677 -0
  69. package/styles/material3.scss +3 -0
  70. package/styles/tailwind-dark.css +5 -1
  71. package/styles/tailwind.css +5 -1
@@ -1,4 +1,4 @@
1
- import { Ajax, Browser, ChildProperty, Complex, Component, Draggable, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, Touch, addClass, closest, createElement, detach, extend, formatUnit, getUniqueID, getValue, isNullOrUndefined, isVisible, matches, remove, removeClass, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
1
+ import { Ajax, Browser, ChildProperty, Complex, Component, Draggable, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, Touch, addClass, closest, createElement, detach, extend, formatUnit, getUniqueID, getValue, initializeCSPTemplate, isNullOrUndefined, isVisible, matches, remove, removeClass, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
2
2
  import { Splitter } from '@syncfusion/ej2-layouts';
3
3
  import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
4
4
  import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -156,14 +156,20 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
156
156
  var columnArray = [
157
157
  {
158
158
  field: 'name', headerText: 'Name', minWidth: 120, isPrimaryKey: true,
159
- template: '<span class="e-fe-text">${name}</span>', customAttributes: { class: 'e-fe-grid-name' }
159
+ template: initializeCSPTemplate(function (data) {
160
+ return "<span class=\"e-fe-text\">" + data.name + "</span>";
161
+ }),
162
+ customAttributes: { class: 'e-fe-grid-name' }
160
163
  },
161
164
  {
162
165
  field: '_fm_modified', headerText: 'DateModified', type: 'dateTime',
163
166
  format: 'MMMM dd, yyyy HH:mm', minWidth: 120, width: '190'
164
167
  },
165
168
  {
166
- field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '<span class="e-fe-size">${size}</span>', format: 'n2'
169
+ field: 'size', headerText: 'Size', minWidth: 90, width: '110',
170
+ template: initializeCSPTemplate(function (data) {
171
+ return "<span class=\"e-fe-size\">" + data.size + "</span>";
172
+ }), format: 'n2'
167
173
  }
168
174
  ];
169
175
  /**
@@ -1408,10 +1414,15 @@ function setNodeId(result, rootId) {
1408
1414
  * @private
1409
1415
  */
1410
1416
  // eslint-disable-next-line
1411
- function setDateObject(args) {
1417
+ function setDateObject(args, localeString, dateFormat) {
1412
1418
  for (var i = 0; i < args.length; i++) {
1413
- setValue('_fm_created', new Date(getValue('dateCreated', args[i])), args[i]);
1414
- setValue('_fm_modified', new Date(getValue('dateModified', args[i])), args[i]);
1419
+ var createdDate = new Date(getValue('dateCreated', args[i]));
1420
+ var modifiedDate = new Date(getValue('dateModified', args[i]));
1421
+ if (isNullOrUndefined(dateFormat)) {
1422
+ dateFormat = "MM/dd/yyyy";
1423
+ }
1424
+ setValue('_fm_created', localeString.formatDate(createdDate, { format: dateFormat }), args[i]);
1425
+ setValue('_fm_modified', localeString.formatDate(modifiedDate, { format: dateFormat }), args[i]);
1415
1426
  }
1416
1427
  }
1417
1428
  /**
@@ -2442,6 +2453,19 @@ function GetDetails(parent, names, path, operation) {
2442
2453
  * @returns {void}
2443
2454
  * @private
2444
2455
  */
2456
+ function getDateFormat(parent) {
2457
+ var columns = parent.detailsViewSettings.columns;
2458
+ var dateFormat;
2459
+ for (var i = 0; i < columns.length; i++) {
2460
+ if (columns[i].field === '_fm_modified') {
2461
+ if (!isNullOrUndefined(columns[i].format)) {
2462
+ dateFormat = columns[i].format.toString();
2463
+ }
2464
+ break;
2465
+ }
2466
+ }
2467
+ return dateFormat;
2468
+ }
2445
2469
  function createAjax(
2446
2470
  // eslint-disable-next-line
2447
2471
  parent, data, fn, event, operation, targetPath) {
@@ -2503,8 +2527,9 @@ parent, data, fn, event, operation, targetPath) {
2503
2527
  }
2504
2528
  }
2505
2529
  }
2530
+ var intl = new Internationalization(parent.locale);
2506
2531
  if (!isNullOrUndefined(result.files)) {
2507
- setDateObject(result.files);
2532
+ setDateObject(result.files, intl, getDateFormat(parent));
2508
2533
  for (var i = 0, len = result.files.length; i < len; i++) {
2509
2534
  // eslint-disable-next-line
2510
2535
  var item = result.files[i];
@@ -3730,6 +3755,7 @@ function onReSubmit(parent) {
3730
3755
  var newPath = (parent.activeModule === 'navigationpane') ? getValue('filterPath', parent.itemData[0]).replace(/\\/g, '/') : parent.path;
3731
3756
  parent.renamedId = getValue('id', parent.itemData[0]);
3732
3757
  parent.renamedId = getValue('id', parent.itemData[0]);
3758
+ parent.renamedId = getValue('id', parent.itemData[0]);
3733
3759
  if (parent.isFile) {
3734
3760
  var oldExtension = (oIndex === -1) ? '' : parent.currentItemText.substr(oIndex);
3735
3761
  var nIndex = text.lastIndexOf('.');
@@ -4176,7 +4202,7 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
4176
4202
  this.parent.trigger('fileLoad', eventArgs);
4177
4203
  };
4178
4204
  LargeIconsView.prototype.renderCheckbox = function (args) {
4179
- if (!this.parent.allowMultiSelection) {
4205
+ if (!this.parent.showItemCheckBoxes) {
4180
4206
  return;
4181
4207
  }
4182
4208
  var checkElement = createCheckBox(createElement, false, {
@@ -5239,7 +5265,7 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
5239
5265
  item.focus();
5240
5266
  };
5241
5267
  LargeIconsView.prototype.checkState = function (item, toCheck) {
5242
- if (!this.parent.allowMultiSelection) {
5268
+ if (!this.parent.showItemCheckBoxes) {
5243
5269
  return;
5244
5270
  }
5245
5271
  var checkEle = select('.' + FRAME, item);
@@ -7749,6 +7775,9 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
7749
7775
  __decorate$8([
7750
7776
  Property(true)
7751
7777
  ], FileManager.prototype, "allowMultiSelection", void 0);
7778
+ __decorate$8([
7779
+ Property(true)
7780
+ ], FileManager.prototype, "showItemCheckBoxes", void 0);
7752
7781
  __decorate$8([
7753
7782
  Complex({}, ContextMenuSettings)
7754
7783
  ], FileManager.prototype, "contextMenuSettings", void 0);
@@ -9703,13 +9732,14 @@ var DetailsView = /** @__PURE__ @class */ (function () {
9703
9732
  columns = [
9704
9733
  {
9705
9734
  field: 'name', headerText: getLocaleText(this.parent, 'Name'), width: 'auto', minWidth: 120, headerTextAlign: 'Left',
9706
- template: '<div class="e-fe-text">${name}</div><div class="e-fe-date">${_fm_modified}</div>' +
9707
- '<span class="e-fe-size">${size}</span>'
9735
+ template: initializeCSPTemplate(function (data) {
9736
+ return "<div class=\"e-fe-text\">" + data.name + "</div><div class=\"e-fe-date\">" + data._fm_modified + "</div>' +\n '<span class=\"e-fe-size\">" + data.size + "</span>";
9737
+ })
9708
9738
  }
9709
9739
  ];
9710
9740
  }
9711
9741
  else {
9712
- columns = JSON.parse(JSON.stringify(this.parent.detailsViewSettings.columns));
9742
+ columns = extend([], this.parent.detailsViewSettings.columns, null, true);
9713
9743
  this.adjustWidth(columns, 'name');
9714
9744
  for (var i = 0, len = columns.length; i < len; i++) {
9715
9745
  columns[i].headerText = getLocaleText(this.parent, columns[i].headerText);
@@ -9717,12 +9747,16 @@ var DetailsView = /** @__PURE__ @class */ (function () {
9717
9747
  }
9718
9748
  var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
9719
9749
  var icon = {
9720
- field: 'type', width: iWidth, minWidth: iWidth, template: '<span class="e-fe-icon ${_fm_iconClass}"></span>',
9721
- allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
9722
- headerTemplate: '<span class="e-fe-icon e-fe-folder"></span>'
9750
+ field: 'type', width: iWidth, minWidth: iWidth,
9751
+ template: initializeCSPTemplate(function (data) {
9752
+ return "<span class=\"e-fe-icon " + data._fm_iconClass + "\"></span>";
9753
+ }), allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
9754
+ headerTemplate: initializeCSPTemplate(function () {
9755
+ return "<span class=\"e-fe-icon e-fe-folder\"></span>";
9756
+ }),
9723
9757
  };
9724
9758
  columns.unshift(icon);
9725
- if (this.parent.allowMultiSelection) {
9759
+ if (this.parent.showItemCheckBoxes) {
9726
9760
  var cWidth = (this.parent.isBigger ? '36' : '26');
9727
9761
  var cBox = {
9728
9762
  type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
@@ -9802,8 +9836,6 @@ var DetailsView = /** @__PURE__ @class */ (function () {
9802
9836
  }
9803
9837
  }
9804
9838
  var value = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
9805
- var num = Number(value.replace(/,/g, ''));
9806
- value = num.toLocaleString(intl.culture);
9807
9839
  modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
9808
9840
  }
9809
9841
  sizeEle.innerHTML = modifiedSize;
@@ -10867,6 +10899,7 @@ var DetailsView = /** @__PURE__ @class */ (function () {
10867
10899
  var lastItem;
10868
10900
  switch (action) {
10869
10901
  case 'altEnter':
10902
+ this.parent.notify(detailsInit, {});
10870
10903
  GetDetails(this.parent, this.parent.selectedItems, this.parent.path, 'details');
10871
10904
  break;
10872
10905
  case 'esc':