@syncfusion/ej2-filemanager 19.4.52 → 20.1.52

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.52
+*  version : 20.1.52
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-filemanager@*",
-  "_id": "@syncfusion/ej2-filemanager@19.4.50",
+  "_id": "@syncfusion/ej2-filemanager@20.1.47",
   "_inBundle": false,
-  "_integrity": "sha512-vl9ytjZouirIlmSxMJK5qIC6kLYlIezSbORKoiA6YUmpRbtGQgsyiM1qt3fLwPQKrKtcuyoLIAPHCJV53P9Qlg==",
+  "_integrity": "sha512-X2ntzEAEsLkMwTr5MxCZGed0nFIN1Booq2Qmz6ABLlp0gQhLGO1v4ZQar0RiRjVHY0ViLasSRyCL7A3VOkvjkQ==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-19.4.50.tgz",
-  "_shasum": "caf80b55550c4d6b847839736051e445f03dadcc",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-20.1.47.tgz",
+  "_shasum": "b533db437939ff1a76e373430a820cff89b68c87",
   "_spec": "@syncfusion/ej2-filemanager@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -37,16 +37,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.52",
-    "@syncfusion/ej2-data": "~19.4.52",
-    "@syncfusion/ej2-grids": "~19.4.52",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-layouts": "~19.4.52",
-    "@syncfusion/ej2-lists": "~19.4.52",
-    "@syncfusion/ej2-navigations": "~19.4.52",
-    "@syncfusion/ej2-popups": "~19.4.52",
-    "@syncfusion/ej2-splitbuttons": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.50",
+    "@syncfusion/ej2-buttons": "~20.1.52",
+    "@syncfusion/ej2-data": "~20.1.47",
+    "@syncfusion/ej2-grids": "~20.1.52",
+    "@syncfusion/ej2-inputs": "~20.1.48",
+    "@syncfusion/ej2-layouts": "~20.1.47",
+    "@syncfusion/ej2-lists": "~20.1.47",
+    "@syncfusion/ej2-navigations": "~20.1.51",
+    "@syncfusion/ej2-popups": "~20.1.47",
+    "@syncfusion/ej2-splitbuttons": "~20.1.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -67,6 +67,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.52",
+  "version": "20.1.52",
   "sideEffects": false
 }

package/src/file-manager/actions/toolbar.js

@@ -153,9 +153,12 @@ var Toolbar = /** @class */ (function () {
     Toolbar.prototype.toolbarCreateHandler = function () {
         if (!isNOU(select('#' + this.getId('SortBy'), this.parent.element))) {
             var items = [
-                { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'), iconCss: CLS.TB_OPTION_DOT },
-                { id: this.getPupupId('size'), text: getLocaleText(this.parent, 'Size') },
-                { id: this.getPupupId('date'), text: getLocaleText(this.parent, 'DateModified') },
+                { id: this.getPupupId('name'), text: getLocaleText(this.parent, 'Name'),
+                    iconCss: this.parent.sortBy === 'name' ? CLS.TB_OPTION_DOT : '' },
+                { id: this.getPupupId('size'), text: getLocaleText(this.parent, 'Size'),
+                    iconCss: this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '' },
+                { id: this.getPupupId('date'), text: getLocaleText(this.parent, 'DateModified'),
+                    iconCss: this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '' },
                 { separator: true },
                 { id: this.getPupupId('ascending'), text: getLocaleText(this.parent, 'Ascending'),
                     iconCss: this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '' },

package/src/file-manager/base/file-manager-model.d.ts

@@ -183,6 +183,13 @@ export interface FileManagerModel extends ComponentModel{
      */
     sortOrder?: SortOrder;
 
+    /**
+     * Specifies the field name being used as the sorting criteria to sort the files of the file manager component.
+     *
+     * @default 'name'
+     */
+    sortBy?: string;
+
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *

package/src/file-manager/base/file-manager.d.ts

@@ -94,7 +94,6 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     isMobile: boolean;
     isBigger: boolean;
     isFile: boolean;
-    sortBy: string;
     actionRecords: Object[];
     activeRecords: Object[];
     isCut: boolean;
@@ -299,6 +298,12 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @default 'Ascending'
      */
     sortOrder: SortOrder;
+    /**
+     * Specifies the field name being used as the sorting criteria to sort the files of the file manager component.
+     *
+     * @default 'name'
+     */
+    sortBy: string;
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *

package/src/file-manager/base/file-manager.js

@@ -69,7 +69,6 @@ var FileManager = /** @class */ (function (_super) {
         _this.uploadItem = [];
         _this.deleteRecords = [];
         _this.isFile = false;
-        _this.sortBy = 'name';
         _this.isCut = false;
         _this.isSearchCut = false;
         _this.isSearchDrag = false;
@@ -792,6 +791,13 @@ var FileManager = /** @class */ (function (_super) {
                     refresh(this);
                     this.notify(events.sortByChange, {});
                     break;
+                case 'sortBy':
+                    refresh(this);
+                    this.notify(events.sortByChange, {});
+                    if (this.view === 'Details') {
+                        this.notify(events.sortColumn, {});
+                    }
+                    break;
                 case 'popupTarget':
                     if (this.uploadDialogObj) {
                         this.uploadDialogObj.target = newProp.popupTarget;
@@ -1175,6 +1181,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property('Ascending')
     ], FileManager.prototype, "sortOrder", void 0);
+    __decorate([
+        Property('name')
+    ], FileManager.prototype, "sortBy", void 0);
     __decorate([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);

package/src/file-manager/layout/details-view.js

@@ -1267,6 +1267,7 @@ var DetailsView = /** @class */ (function () {
             case 'f2':
             case 'moveDown':
             case 'moveUp':
+            case 'ctrlD':
                 e.preventDefault();
                 break;
             default:

package/src/file-manager/layout/large-icons-view.js

@@ -1474,7 +1474,7 @@ var LargeIconsView = /** @class */ (function () {
         else {
             for (var i = 0, len = this.items.length; i < len; i++) {
                 var name_2 = getValue('filterPath', this.items[i]) + getValue('name', this.items[i]);
-                if (items.indexOf(name_2) !== -1) {
+                if ((items.indexOf(name_2) !== -1) || (items.indexOf(getValue(filterName, this.items[i])) !== -1)) {
                     indexes.push(i);
                 }
             }

package/src/file-manager/layout/navigation-pane.js

@@ -196,7 +196,7 @@ var NavigationPane = /** @class */ (function () {
             this.parent.trigger('fileOpen', eventArgs);
             args.cancel = eventArgs.cancel;
             if (args.cancel) {
-                this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] != args.node.getAttribute('data-uid') : false;
+                this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] !== args.node.getAttribute('data-uid') : false;
                 this.treeObj.selectedNodes = this.isNodeClickCalled ? this.previousSelected : this.treeObj.selectedNodes;
                 this.previousSelected = this.treeObj.selectedNodes;
                 if (!isNOU(this.parent) && !isNOU(this.parent.contextmenuModule)) {

package/src/file-manager/models/navigation-pane-settings.d.ts

@@ -22,13 +22,13 @@ export declare class NavigationPaneSettings extends ChildProperty<NavigationPane
      */
     visible: boolean;
     /**
-    * Specifies a value that indicates how to sort the folders in the navigation pane of the file manager component.
-    *
-    * If the sortOrder is Ascending, the folders are sorted in ascending order.
-    * If the sortOrder is Descending, the folders are sorted in descending order.
-    * If the sortOrder is None, the folders are not sorted.
-    *
-    * @default 'None'
-    */
+     * Specifies a value that indicates how to sort the folders in the navigation pane of the file manager component.
+     *
+     * If the sortOrder is Ascending, the folders are sorted in ascending order.
+     * If the sortOrder is Descending, the folders are sorted in descending order.
+     * If the sortOrder is None, the folders are not sorted.
+     *
+     * @default 'None'
+     */
     sortOrder: 'None' | 'Ascending' | 'Descending';
 }

package/styles/bootstrap5-dark.css

@@ -456,7 +456,7 @@ ejs-filemanager {
   white-space: nowrap;
   list-style: none;
   margin: 0;
-  padding: 8px 12px 8px 18px;
+  padding: 8px 16px 8px;
   visibility: visible;
 }
 

package/styles/bootstrap5.css

@@ -456,7 +456,7 @@ ejs-filemanager {
   white-space: nowrap;
   list-style: none;
   margin: 0;
-  padding: 8px 12px 8px 18px;
+  padding: 8px 16px 8px;
   visibility: visible;
 }
 

package/styles/file-manager/_bootstrap5-definition.scss

@@ -28,7 +28,7 @@ $fe-search-icon-margin: 5px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 29px !default;
 $fe-bc-margin: 0 !default;
-$fe-bc-padding: 8px 12px 8px 18px !default;
+$fe-bc-padding: 8px 16px 8px !default;
 $fe-rtl-bc-padding: 8px 18px 8px 12px !default;
 $fe-bc-text-padding: 4px 4px 5px !default;
 $fe-bc-text-size: 18px !default;

package/styles/file-manager/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/file-manager/_fluent-definition.scss

@@ -31,7 +31,7 @@ $fe-tb-ddb-caret-size: 8px !default;
 $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 4px 8px 5px 0 !default;
 $fe-search-height: 32px !default;
-$fe-search-icon-margin: 5px !default;
+$fe-search-icon-margin: 4px !default;
 $fe-search-clear-icon-margin: 10px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 38px !default;
@@ -50,7 +50,7 @@ $fe-dg-td-padding: 4px 24px 4px 0 !default;
 $fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
 $fe-grid-header-height: 36px !default;
 $fe-grid-header-font-size: 14px !default;
-$fe-grid-header-cb-padding-left: 12px !default;
+$fe-grid-header-cb-padding-left: 5px !default;
 $fe-grid-content-font-size: 14px !default;
 $fe-grid-content-name-font-size: 14px !default;
 $fe-grid-icon-sort-margin: 0 !default;
@@ -68,7 +68,7 @@ $fe-lg-icon-margin: 18px 25px 8px !default;
 $fe-lg-img-height: 40px !default;
 $fe-lg-text-padding: 2px 0 0 0 !default;
 $fe-cm-separator-margin: 0 0 !default;
-$fe-cb-line-height: 12px !default;
+$fe-cb-line-height: 16px !default;
 $fe-dd-popup-blank-icon-padding-left: 40px !default;
 $fe-tv-fullrow-height: 38px !default;
 $fe-address-height: 40px !default;
@@ -97,13 +97,13 @@ $fe-big-lg-item-inner-height: 100px !default;
 $fe-big-lg-item-inner-width: 94px !default;
 $fe-big-lg-icon-height: 52px !default;
 $fe-big-lg-icon-width: 52px !default;
-$fe-big-lg-icon-margin: 11px auto !default;
+$fe-big-lg-icon-margin: 0 auto !default;
 $fe-big-lg-img-height: 79px !default;
 $fe-big-lg-text-padding: 4px 2px 2px !default;
 $fe-big-grid-header-font-size: 14px !default;
 $fe-big-grid-content-font-size: 14px !default;
 $fe-big-grid-content-name-font-size: 16px !default;
-$fe-big-cb-line-height: 14px !default;
+$fe-big-cb-line-height: 21px !default;
 
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
 
@@ -208,6 +208,7 @@ $fe-bc-icon-padding: 5px !default;
 
 // color variables
 $fe-border-color: $border-light !default;
+$fe-search-border-color: $gray90 !default;
 $fe-background: transparent;
 $fe-icon-color: $icon-color !default;
 $fe-label-color: $content-text-color-alt2 !default;
@@ -233,8 +234,8 @@ $fe-search-bg-color: $content-bg-color !default;
 $fe-tb-hover-border-color: $secondary-border-color-hover !default;
 $fe-tb-focus-border-color: $fe-tb-hover-border-color !default;
 $fe-tb-focus-bg: $secondary-bg-color-hover !default;
-$fe-checkbox-color: $primary !default;
-$fe-checkbox-bg-color: $primary-text-color !default;
+$fe-checkbox-color: $primary-text-color !default;
+$fe-checkbox-bg-color: $primary !default;
 $fe-drop-border-color: $primary !default;
 $fe-up-list-border-color: $border-light !default;
 $fe-clone-bg-color: $content-bg-color-alt2 !default;

package/styles/file-manager/_layout.scss

@@ -267,6 +267,9 @@
         @else {
           padding: 5px;
         }
+        @if $fm-skin-name == 'FluentUI' {
+          font-size: 16px;
+        }
         position: absolute;
         z-index: 1;
 
@@ -397,6 +400,12 @@
         }
       }
 
+      @if $fm-skin-name == 'FluentUI' {
+        .e-checkbox-wrapper:hover .e-frame {
+          font-size: 10px;
+        }
+      }
+
       .e-content {
         overflow-y: auto !important; // sass-lint:disable-line no-important
 
@@ -530,7 +539,7 @@
 
         &.e-focused {
           box-shadow: none;
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' {
             td {
               box-shadow: $fe-grid-row-ie-box-shadow;
             }
@@ -850,7 +859,7 @@
       .e-grid.e-rtl {
 
         .e-row.e-focused {
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' {
             td:first-child {
               box-shadow: $fe-grid-row-lc-ie-box-shadow;
             }
@@ -1035,6 +1044,12 @@
         }
       }
 
+      @if $fm-skin-name == 'FluentUI' {
+        .e-dlg-content {
+          padding-top: 2px;
+        }
+      }
+
       &.e-rtl {
 
         td {
@@ -1556,6 +1571,9 @@
             @if ($fm-skin-name == 'material' or $fm-skin-name == 'material-dark') {
               height: 39px;
             }
+            @if ($fm-skin-name == 'FluentUI') {
+              height: 30px;
+            }
           }
 
           .e-clear-icon::before {
@@ -1570,12 +1588,18 @@
         @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
           font-size: 16px;
         }
+        @else if $fm-skin-name == 'FluentUI' {
+          font-size: 18px;
+        }
         @if $fm-skin-name == 'tailwind' {
           margin: 7px 4px;
         }
         @else if $fm-skin-name == 'bootstrap5' {
           margin: 4px;
         }
+        @else if $fm-skin-name == 'FluentUI' {
+          margin: 3px;
+        }
         @else {
           margin: 7px 0;
         }

package/styles/file-manager/_theme.scss

@@ -133,6 +133,9 @@
         .e-input-group.e-control-wrapper:not(.e-success) {
           background: $fe-search-bg-color;
           border-color: $fe-border-color;
+          @if $theme-name == 'fluentui-dark' {
+            border-color: $fe-search-border-color;
+          }
         }
       }
     }
@@ -158,20 +161,27 @@
     .e-grid {
 
       .e-gridheader {
-
-        tr:first-child th {
-          background: $fe-grid-header-bg-color;
-        }
+        @if $fm-skin-name != 'FluentUI' {
+          tr:first-child th {
+            background: $fe-grid-header-bg-color;
+          }
+       }
 
         .e-headercell {
 
           &:not(.e-fe-grid-icon):hover {
             background: $fe-hover-bg-color;
           }
-
-          &.e-fe-checkbox:hover {
-            background: $fe-grid-header-bg-color;
+          @if $fm-skin-name == 'FluentUI' {
+            &.e-fe-checkbox:hover {
+              background: $content-bg-color;
           }
+        }
+          @else {
+            &.e-fe-checkbox:hover {
+              background: $fe-grid-header-bg-color;
+          }
+        }
 
           &.e-fe-grid-icon .e-headercelldiv:hover {
             background: $fe-hover-bg-color;

package/styles/file-manager/bootstrap5-dark.css

@@ -456,7 +456,7 @@ ejs-filemanager {
   white-space: nowrap;
   list-style: none;
   margin: 0;
-  padding: 8px 12px 8px 18px;
+  padding: 8px 16px 8px;
   visibility: visible;
 }
 

package/styles/file-manager/bootstrap5.css

@@ -456,7 +456,7 @@ ejs-filemanager {
   white-space: nowrap;
   list-style: none;
   margin: 0;
-  padding: 8px 12px 8px 18px;
+  padding: 8px 16px 8px;
   visibility: visible;
 }