@syncfusion/ej2-filemanager 23.2.6 → 24.1.43

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.6
+*  version : 24.1.43
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@23.2.4",
+  "_id": "@syncfusion/ej2-filemanager@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-s8XHzbFYq30zJoimCVZAwAIPFV6Fg2N9dmPUNiYK+wNy/4pOkoE04oeN13L4y0WIaffr8vG/LECVRZHw8UKWrQ==",
+  "_integrity": "sha512-di+YVOOiojWmVe543dHKeovbNq1JX9S/tabfy0KxWAO65XcY+NYA7ydnzCOkaPCG6+coah+Ook+jlzsSzfpz/g==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -24,10 +24,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-23.2.4.tgz",
-  "_shasum": "801f1a445651efb299645bc0038c68bf8733afcc",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-24.1.41.tgz",
+  "_shasum": "f3dadf5704a065fa74c26fd39d1a61a6ae83c619",
   "_spec": "@syncfusion/ej2-filemanager@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -36,16 +36,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.6",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-data": "~23.2.4",
-    "@syncfusion/ej2-grids": "~23.2.6",
-    "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-layouts": "~23.2.4",
-    "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.5",
-    "@syncfusion/ej2-popups": "~23.2.4",
-    "@syncfusion/ej2-splitbuttons": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.42",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-data": "~24.1.41",
+    "@syncfusion/ej2-grids": "~24.1.43",
+    "@syncfusion/ej2-inputs": "~24.1.41",
+    "@syncfusion/ej2-layouts": "~24.1.41",
+    "@syncfusion/ej2-lists": "~24.1.41",
+    "@syncfusion/ej2-navigations": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.41",
+    "@syncfusion/ej2-splitbuttons": "~24.1.41"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -75,6 +75,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.6",
+  "version": "24.1.43",
   "sideEffects": false
 }

package/src/file-manager/common/utility.d.ts

@@ -437,6 +437,18 @@ export declare function removeDropTarget(parent: IFileManager): void;
  * @private
  */
 export declare function removeItemClass(parent: IFileManager, value: string): void;
+/**
+ * Remove item class handler
+ *
+ * @param {Element} scrollParent - specifies the scrolling target.
+ * @param {IFileManager} parent - specifies the parent.
+ * @param {string} nodeClass - specifies the node class.
+ * @param {number} screenY - specifies the vertical (Y) coordinate of the mouse cursor position relative to the entire screen.
+ * @param {number} clientY - specifies the vertical (Y) coordinate of the mouse cursor position relative to the target element.
+ * @returns {void}
+ * @private
+ */
+export declare function scrollHandler(scrollParent: Element, parent: IFileManager, nodeClass: string, screenY: number, clientY: number): void;
 /**
  * Dragging handler
  *

package/src/file-manager/common/utility.js

@@ -1233,6 +1233,30 @@ export function removeItemClass(parent, value) {
         ele[i].classList.remove(value);
     }
 }
+/**
+ * Remove item class handler
+ *
+ * @param {Element} scrollParent - specifies the scrolling target.
+ * @param {IFileManager} parent - specifies the parent.
+ * @param {string} nodeClass - specifies the node class.
+ * @param {number} screenY - specifies the vertical (Y) coordinate of the mouse cursor position relative to the entire screen.
+ * @param {number} clientY - specifies the vertical (Y) coordinate of the mouse cursor position relative to the target element.
+ * @returns {void}
+ * @private
+ */
+export function scrollHandler(scrollParent, parent, nodeClass, screenY, clientY) {
+    var position;
+    var elementData = scrollParent.getBoundingClientRect();
+    var node = select("." + nodeClass, scrollParent);
+    if ((screenY >= (elementData.top + scrollParent.clientHeight - 30)) && !isNullOrUndefined(node)) {
+        position = (parent.targetModule === 'navigationpane' || parent.targetModule === 'detailsview') ? node.offsetHeight / 2.5 : node.offsetHeight / 4.5;
+        scrollParent.scrollBy(0, position);
+    }
+    if (!isNullOrUndefined(node) && (clientY <= (elementData.top + 30))) {
+        position = (parent.targetModule === 'navigationpane' || parent.targetModule === 'detailsview') ? node.offsetHeight / 2.5 : node.offsetHeight / 4.5;
+        scrollParent.scrollBy(0, -position);
+    }
+}
 /**
  * Dragging handler
  *
@@ -1253,12 +1277,15 @@ export function draggingHandler(parent, args) {
     }
     removeBlur(parent, 'hover');
     var node = null;
+    var scrollParent;
     if (parent.targetModule === 'navigationpane') {
         node = closest(args.target, 'li');
         node.classList.add(CLS.HOVER, CLS.DROP_FOLDER);
         canDrop = true;
         /* istanbul ignore next */
         parent.treeExpandTimer = window.setTimeout(function () { parent.notify(events.dragging, args); }, 800);
+        scrollParent = parent.navigationpaneModule.treeObj.element.parentElement;
+        scrollHandler(scrollParent, parent, 'e-level-2', args.event.screenY, args.event.y);
     }
     else if (parent.targetModule === 'detailsview') {
         node = closest(args.target, 'tr');
@@ -1269,6 +1296,8 @@ export function draggingHandler(parent, args) {
             node.classList.add(CLS.DROP_FILE);
         }
         canDrop = true;
+        scrollParent = parent.detailsviewModule.gridObj.element.querySelector('.e-content');
+        scrollHandler(scrollParent, parent, 'e-row', args.event.screenY, args.event.y);
     }
     else if (parent.targetModule === 'largeiconsview') {
         node = closest(args.target, 'li');
@@ -1276,6 +1305,8 @@ export function draggingHandler(parent, args) {
             node.classList.add(CLS.HOVER, CLS.DROP_FOLDER);
         }
         canDrop = true;
+        scrollParent = parent.largeiconsviewModule.element.firstElementChild;
+        scrollHandler(scrollParent, parent, 'e-large-icon', args.event.screenY, args.event.y);
         /* istanbul ignore next */
     }
     else if (parent.targetModule === 'breadcrumbbar') {

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

@@ -1047,7 +1047,7 @@ var DetailsView = /** @class */ (function () {
                         dragStartHandler(_this.parent, args, _this.dragObj);
                     },
                     dragStop: dragStopHandler.bind(this, this.parent),
-                    enableAutoScroll: true,
+                    enableAutoScroll: false,
                     helper: this.dragHelper.bind(this)
                 });
             }

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

@@ -124,6 +124,7 @@ var LargeIconsView = /** @class */ (function () {
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
             this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
             this.element.appendChild(this.listElements);
+            this.listElements.setAttribute("aria-label", "listbox");
             this.preventImgDrag();
             this.createDragObj();
             if (this.itemList.length === 0) {
@@ -191,7 +192,7 @@ var LargeIconsView = /** @class */ (function () {
                 this.dragObj = new Draggable(this.listElements, {
                     enableTailMode: true,
                     distance: 5,
-                    enableAutoScroll: true,
+                    enableAutoScroll: false,
                     dragTarget: '.' + CLS.LARGE_ICON,
                     helper: this.dragHelper.bind(this),
                     cursorAt: this.parent.dragCursorPosition,
@@ -288,6 +289,7 @@ var LargeIconsView = /** @class */ (function () {
         });
         checkElement.setAttribute('role', 'checkbox');
         checkElement.setAttribute('aria-checked', 'false');
+        checkElement.setAttribute('aria-label', 'checkbox');
         args.item.firstElementChild.insertBefore(checkElement, args.item.firstElementChild.childNodes[0]);
     };
     LargeIconsView.prototype.onLayoutChange = function (args) {

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

@@ -110,7 +110,7 @@ var NavigationPane = /** @class */ (function () {
                     },
                     dragStop: dragStopHandler.bind(this, this.parent),
                     enableTailMode: true,
-                    enableAutoScroll: true,
+                    enableAutoScroll: false,
                     helper: this.dragHelper.bind(this)
                 });
             }
@@ -264,7 +264,7 @@ var NavigationPane = /** @class */ (function () {
         this.parent.itemData = nodeData;
         var previousPath = this.parent.path;
         var sNode = select('[data-uid="' + this.treeObj.selectedNodes[0] + '"]', this.treeObj.element);
-        if (!this.isRightClick && this.isSameNodeClicked && sNode.querySelector('.e-list-text').innerHTML !== this.parent.pathNames[this.parent.pathNames.length - 1]) {
+        if (!this.isRightClick && this.isSameNodeClicked) {
             updatePath(args.node, this.parent.itemData[0], this.parent);
         }
         else {
@@ -403,7 +403,6 @@ var NavigationPane = /** @class */ (function () {
     NavigationPane.prototype.onFinalizeEnd = function (args) {
         this.onInit();
         var id = getValue('_fm_id', args.cwd);
-        this.removeChildNodes(id);
         this.addChild(args.files, id, false);
         this.treeObj.selectedNodes = [this.parent.pathId[this.parent.pathId.length - 1]];
     };

package/src/file-manager/pop-up/context-menu.d.ts

@@ -9,6 +9,7 @@ export declare class ContextMenu {
     private targetElement;
     contextMenu: Menu;
     menuTarget: HTMLElement;
+    isMenuItemClicked: boolean;
     private keyConfigs;
     private keyboardModule;
     private menuType;

package/src/file-manager/pop-up/context-menu.js

@@ -19,6 +19,7 @@ var ContextMenu = /** @class */ (function () {
      * @hidden
      */
     function ContextMenu(parent) {
+        this.isMenuItemClicked = false;
         this.currentItems = [];
         this.currentElement = null;
         this.disabledItems = [];
@@ -62,6 +63,12 @@ var ContextMenu = /** @class */ (function () {
     };
     ContextMenu.prototype.onBeforeClose = function () {
         this.menuTarget = null;
+        if (!this.isMenuItemClicked && this.parent.pathId.length > 1) {
+            this.parent.pathId.pop();
+            this.parent.pathId.push(Object.keys(this.parent.feParent)[Object.keys.length]);
+            this.parent.navigationpaneModule.treeObj.selectedNodes = [this.parent.pathId[this.parent.pathId.length - 1]];
+        }
+        this.isMenuItemClicked = false;
     };
     /* istanbul ignore next */
     ContextMenu.prototype.onBeforeOpen = function (args) {
@@ -330,6 +337,7 @@ var ContextMenu = /** @class */ (function () {
         this.parent.trigger('menuClick', eventArgs, function (menuClickArgs) {
             var sItems;
             if (!menuClickArgs.cancel) {
+                _this.isMenuItemClicked = true;
                 // eslint:disable-next-line
                 switch (itemText) {
                     case 'cut':

package/styles/bootstrap-dark.css

@@ -871,7 +871,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/bootstrap.css

@@ -871,7 +871,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/bootstrap4.css

@@ -871,7 +871,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/bootstrap5-dark.css

@@ -887,7 +887,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/bootstrap5.css

@@ -887,7 +887,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/fabric-dark.css

@@ -869,7 +869,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/fabric.css

@@ -870,7 +870,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

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

@@ -158,7 +158,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -159,7 +159,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -160,7 +160,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -116,7 +116,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -156,7 +156,7 @@ $fe-mobile-upload-padding-left: 5px !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -158,7 +158,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -123,7 +123,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -116,7 +116,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -158,7 +158,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

package/styles/file-manager/_highcontrast-light-definition.scss

@@ -158,7 +158,7 @@ $fe-mobile-upload-padding-left: 5px !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

package/styles/file-manager/_layout.scss

@@ -418,7 +418,7 @@
           .e-rcursor {
             border: 0;
           }
-          
+
           @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
             padding: 5px 8px;
             line-height: 16px;
@@ -473,7 +473,7 @@
               line-height: 20px;
             }
           }
-          
+
           @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
             padding: 10px 8px;
             line-height: 16px;
@@ -1351,7 +1351,9 @@
 
         .e-fe-search {
           font-size: $fe-mobile-icon-font-size;
-          margin: 3px 0;
+          @if $fm-skin-name !='Material3' {
+            margin: 3px 0;
+          }
           right: 13px;
         }
       }

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

@@ -158,7 +158,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 0 !default;
 $fe-mobile-select-padding-top: 0 !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 0 !default;
 $fe-mobile-delete-padding-left: 0 !default;

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

@@ -158,7 +158,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -60,7 +60,7 @@ $fe-lg-item-height: 96px !default;
 $fe-lg-item-width: 96px !default;
 $fe-lg-item-margin: 20px 8px !default;
 $fe-lg-item-padding: 0 !default;
-$fe-lg-item-border: 0 !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 78px !default;
 $fe-lg-item-inner-width: 96px !default;
 $fe-lg-icon-height: 24px !default;
@@ -106,7 +106,7 @@ $fe-big-lg-icon-height: 36px !default;
 $fe-big-lg-icon-width: 48px !default;
 $fe-big-lg-icon-margin: 26px 36px 22px !default;
 $fe-big-lg-img-height: 79px !default;
-$fe-big-lg-text-padding: 0 0 16px !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;
@@ -122,9 +122,9 @@ $fe-mobile-lg-item-height: 96px !default;
 $fe-mobile-lg-item-width: 96px !default;
 $fe-mobile-lg-item-margin: 20px 8px !default;
 $fe-mobile-lg-item-inner-width: 92px !default;
-$fe-mobile-lg-icon-height: 24px !default;
-$fe-mobile-lg-icon-width: 32px !default;
-$fe-mobile-lg-icon-margin: 26px auto 12px !default;
+$fe-mobile-lg-icon-height: 110px !default;
+$fe-mobile-lg-icon-width: 110px !default;
+$fe-mobile-lg-icon-margin: 11px auto 0 !default;
 $fe-mobile-lg-img-height: 110px !default;
 $fe-mobile-grid-icon-size: 35px !default;
 $fe-mobile-icon-font-size: 20px !default;
@@ -135,7 +135,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -151,7 +151,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 4px 0 0 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;

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

@@ -871,7 +871,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/file-manager/bootstrap.css

@@ -871,7 +871,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/file-manager/bootstrap4.css

@@ -871,7 +871,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

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

@@ -887,7 +887,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/file-manager/bootstrap5.css

@@ -887,7 +887,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

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

@@ -869,7 +869,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/file-manager/fabric.css

@@ -870,7 +870,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

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

@@ -876,7 +876,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,

package/styles/file-manager/fluent.css

@@ -876,7 +876,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-large {
-  padding: 4px 0 0 2px;
+  padding: 0 0 0 2px;
 }
 .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon.e-fe-grid,