@syncfusion/ej2-filemanager 21.2.3 → 22.1.34

package/dist/es6/ej2-filemanager.es2015.js

@@ -1,4 +1,4 @@
-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';
+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';
 import { Splitter } from '@syncfusion/ej2-layouts';
 import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -89,14 +89,20 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
 const columnArray = [
     {
         field: 'name', headerText: 'Name', minWidth: 120, isPrimaryKey: true,
-        template: '<span class="e-fe-text">${name}</span>', customAttributes: { class: 'e-fe-grid-name' }
+        template: initializeCSPTemplate(function (data) {
+            return `<span class="e-fe-text">${data.name}</span>`;
+        }),
+        customAttributes: { class: 'e-fe-grid-name' }
     },
     {
         field: '_fm_modified', headerText: 'DateModified', type: 'dateTime',
         format: 'MMMM dd, yyyy HH:mm', minWidth: 120, width: '190'
     },
     {
-        field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '<span class="e-fe-size">${size}</span>', format: 'n2'
+        field: 'size', headerText: 'Size', minWidth: 90, width: '110',
+        template: initializeCSPTemplate(function (data) {
+            return `<span class="e-fe-size">${data.size}</span>`;
+        }), format: 'n2'
     }
 ];
 /**
@@ -1264,10 +1270,15 @@ function setNodeId(result, rootId) {
  * @private
  */
 // eslint-disable-next-line
-function setDateObject(args) {
+function setDateObject(args, localeString, dateFormat) {
     for (let i = 0; i < args.length; i++) {
-        setValue('_fm_created', new Date(getValue('dateCreated', args[i])), args[i]);
-        setValue('_fm_modified', new Date(getValue('dateModified', args[i])), args[i]);
+        const createdDate = new Date(getValue('dateCreated', args[i]));
+        const modifiedDate = new Date(getValue('dateModified', args[i]));
+        if (isNullOrUndefined(dateFormat)) {
+            dateFormat = "MM/dd/yyyy";
+        }
+        setValue('_fm_created', localeString.formatDate(createdDate, { format: dateFormat }), args[i]);
+        setValue('_fm_modified', localeString.formatDate(modifiedDate, { format: dateFormat }), args[i]);
     }
 }
 /**
@@ -2298,6 +2309,19 @@ function GetDetails(parent, names, path, operation) {
  * @returns {void}
  * @private
  */
+function getDateFormat(parent) {
+    const columns = parent.detailsViewSettings.columns;
+    let dateFormat;
+    for (var i = 0; i < columns.length; i++) {
+        if (columns[i].field === '_fm_modified') {
+            if (!isNullOrUndefined(columns[i].format)) {
+                dateFormat = columns[i].format.toString();
+            }
+            break;
+        }
+    }
+    return dateFormat;
+}
 function createAjax(
 // eslint-disable-next-line
 parent, data, fn, event, operation, targetPath) {
@@ -2359,8 +2383,9 @@ parent, data, fn, event, operation, targetPath) {
                             }
                         }
                     }
+                    const intl = new Internationalization(parent.locale);
                     if (!isNullOrUndefined(result.files)) {
-                        setDateObject(result.files);
+                        setDateObject(result.files, intl, getDateFormat(parent));
                         for (let i = 0, len = result.files.length; i < len; i++) {
                             // eslint-disable-next-line
                             const item = result.files[i];
@@ -3583,6 +3608,7 @@ function onReSubmit(parent) {
     const newPath = (parent.activeModule === 'navigationpane') ? getValue('filterPath', parent.itemData[0]).replace(/\\/g, '/') : parent.path;
     parent.renamedId = getValue('id', parent.itemData[0]);
     parent.renamedId = getValue('id', parent.itemData[0]);
+    parent.renamedId = getValue('id', parent.itemData[0]);
     if (parent.isFile) {
         const oldExtension = (oIndex === -1) ? '' : parent.currentItemText.substr(oIndex);
         const nIndex = text.lastIndexOf('.');
@@ -4028,7 +4054,7 @@ class LargeIconsView {
         this.parent.trigger('fileLoad', eventArgs);
     }
     renderCheckbox(args) {
-        if (!this.parent.allowMultiSelection) {
+        if (!this.parent.showItemCheckBoxes) {
             return;
         }
         const checkElement = createCheckBox(createElement, false, {
@@ -5088,7 +5114,7 @@ class LargeIconsView {
         item.focus();
     }
     checkState(item, toCheck) {
-        if (!this.parent.allowMultiSelection) {
+        if (!this.parent.showItemCheckBoxes) {
             return;
         }
         const checkEle = select('.' + FRAME, item);
@@ -5996,9 +6022,11 @@ class ContextMenu$2 {
         this.menuType = 'folder';
         this.contextMenu.items = this.getItemData(this.parent.contextMenuSettings.folder.map((item) => item.trim()));
         this.contextMenu.dataBind();
-        const selectedTreeNode = select('[data-uid="' + this.parent.navigationpaneModule.treeObj.selectedNodes[0] + '"]', this.parent.navigationpaneModule.treeObj.element);
-        if (this.parent.pathNames[this.parent.pathNames.length - 1] === selectedTreeNode.querySelector('.e-list-text').innerHTML && this.parent.activeModule === 'navigationpane') {
-            this.disabledItems.push('Open');
+        if (isTree) {
+            const selectedTreeNode = select('[data-uid="' + this.parent.navigationpaneModule.treeObj.selectedNodes[0] + '"]', this.parent.navigationpaneModule.treeObj.element);
+            if (this.parent.pathNames[this.parent.pathNames.length - 1] === selectedTreeNode.querySelector('.e-list-text').innerHTML && this.parent.activeModule === 'navigationpane') {
+                this.disabledItems.push('Open');
+            }
         }
         else if (this.parent.selectedItems.length !== 1 && this.parent.activeModule !== 'navigationpane') {
             this.disabledItems.push('Rename', 'Paste');
@@ -7572,6 +7600,9 @@ __decorate$8([
 __decorate$8([
     Property(true)
 ], FileManager.prototype, "allowMultiSelection", void 0);
+__decorate$8([
+    Property(true)
+], FileManager.prototype, "showItemCheckBoxes", void 0);
 __decorate$8([
     Complex({}, ContextMenuSettings)
 ], FileManager.prototype, "contextMenuSettings", void 0);
@@ -8644,7 +8675,7 @@ class NavigationPane {
                     const selecEventArgs = { action: args.action, fileDetails: nodeData[0], isInteracted: args.isInteracted };
                     this.parent.trigger('fileSelect', selecEventArgs);
                 }
-                if (!this.isRightClick && args.node.getAttribute('data-uid') !== this.parent.pathId[this.parent.pathId.length - 1]) {
+                if (!this.isRightClick) {
                     const eventArgs = { cancel: false, fileDetails: nodeData[0], module: 'NavigationPane' };
                     this.parent.trigger('fileOpen', eventArgs);
                     args.cancel = eventArgs.cancel;
@@ -9510,13 +9541,15 @@ class DetailsView {
             columns = [
                 {
                     field: 'name', headerText: getLocaleText(this.parent, 'Name'), width: 'auto', minWidth: 120, headerTextAlign: 'Left',
-                    template: '<div class="e-fe-text">${name}</div><div class="e-fe-date">${_fm_modified}</div>' +
-                        '<span class="e-fe-size">${size}</span>'
+                    template: initializeCSPTemplate(function (data) {
+                        return `<div class="e-fe-text">${data.name}</div><div class="e-fe-date">${data._fm_modified}</div>' +
+                        '<span class="e-fe-size">${data.size}</span>`;
+                    })
                 }
             ];
         }
         else {
-            columns = JSON.parse(JSON.stringify(this.parent.detailsViewSettings.columns));
+            columns = extend([], this.parent.detailsViewSettings.columns, null, true);
             this.adjustWidth(columns, 'name');
             for (let i = 0, len = columns.length; i < len; i++) {
                 columns[i].headerText = getLocaleText(this.parent, columns[i].headerText);
@@ -9524,12 +9557,16 @@ class DetailsView {
         }
         const iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
         const icon = {
-            field: 'type', width: iWidth, minWidth: iWidth, template: '<span class="e-fe-icon ${_fm_iconClass}"></span>',
-            allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
-            headerTemplate: '<span class="e-fe-icon e-fe-folder"></span>'
+            field: 'type', width: iWidth, minWidth: iWidth,
+            template: initializeCSPTemplate(function (data) {
+                return `<span class="e-fe-icon ${data._fm_iconClass}"></span>`;
+            }), allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
+            headerTemplate: initializeCSPTemplate(function () {
+                return `<span class="e-fe-icon e-fe-folder"></span>`;
+            }),
         };
         columns.unshift(icon);
-        if (this.parent.allowMultiSelection) {
+        if (this.parent.showItemCheckBoxes) {
             const cWidth = (this.parent.isBigger ? '36' : '26');
             const cBox = {
                 type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
@@ -9609,8 +9646,6 @@ class DetailsView {
                     }
                 }
                 let value = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
-                let num = Number(value.replace(/,/g, ''));
-                value = num.toLocaleString(intl.culture);
                 modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
             }
             sizeEle.innerHTML = modifiedSize;
@@ -10671,6 +10706,7 @@ class DetailsView {
         let lastItem;
         switch (action) {
             case 'altEnter':
+                this.parent.notify(detailsInit, {});
                 GetDetails(this.parent, this.parent.selectedItems, this.parent.path, 'details');
                 break;
             case 'esc':