@syncfusion/ej2-filemanager 31.2.12 → 32.1.24

package/src/file-manager/models/upload-settings.d.ts

@@ -36,6 +36,13 @@ export declare class UploadSettings extends ChildProperty<UploadSettings> {
      * @default false
      */
     directoryUpload: boolean;
+    /**
+     * Specifies a Boolean value that indicates whether files are uploaded sequentially in the FileManager component.
+     * This property allows to select or drop to upload the files. When enabled, files are uploaded one at a time, reducing network load for large files.
+     *
+     * @default false
+     */
+    sequentialUpload: boolean;
     /**
      * Specifies the minimum file size to be uploaded in bytes.
      * The property is used to make sure that you cannot upload empty files and small files.

package/src/file-manager/models/upload-settings.js

@@ -38,6 +38,9 @@ var UploadSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], UploadSettings.prototype, "directoryUpload", void 0);
+    __decorate([
+        Property(false)
+    ], UploadSettings.prototype, "sequentialUpload", void 0);
     __decorate([
         Property(0)
     ], UploadSettings.prototype, "minFileSize", void 0);

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

@@ -28,6 +28,7 @@ export declare class ContextMenu {
     constructor(parent?: IFileManager);
     private render;
     onBeforeItemRender(args: MenuEventArgs): void;
+    renderFileFolderIcons(menuArgs: MenuEventArgs, fileFolderIcon: string, isDirectory: boolean): void;
     onBeforeClose(args: BeforeOpenCloseMenuEventArgs): void;
     onBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void;
     private updateActiveModule;

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

@@ -60,6 +60,18 @@ var ContextMenu = /** @class */ (function () {
             element.insertBefore(iconSpan, this.parent.view === 'Details' ? element.childNodes[1] : element.childNodes[0]);
             iconSpan.setAttribute('class', CLS.ICON_GRID + ' ' + CLS.MENU_ICON);
         }
+        if (args.item.id === this.getMenuId('fileupload')) {
+            this.renderFileFolderIcons(args, CLS.ICON_FILE, !this.parent.uploadObj.directoryUpload);
+        }
+        if (args.item.id === this.getMenuId('folderupload')) {
+            this.renderFileFolderIcons(args, CLS.ICON_FOLDER, this.parent.uploadObj.directoryUpload);
+        }
+    };
+    ContextMenu.prototype.renderFileFolderIcons = function (menuArgs, fileFolderIcon, isDirectory) {
+        var iconSpan = createElement('span');
+        var element = menuArgs.element;
+        element.insertBefore(iconSpan, isDirectory ? element.childNodes[1] : element.childNodes[0]);
+        iconSpan.setAttribute('class', fileFolderIcon + ' ' + CLS.MENU_ICON);
     };
     ContextMenu.prototype.onBeforeClose = function (args) {
         var eventArgs = {
@@ -387,7 +399,7 @@ var ContextMenu = /** @class */ (function () {
         }
         var itemText = args.item.id.substr((this.parent.element.id + '_cm_').length);
         var details;
-        if (itemText === 'refresh' || itemText === 'newfolder' || itemText === 'upload') {
+        if (itemText === 'refresh' || itemText === 'newfolder' || itemText === 'fileupload' || itemText === 'folderupload') {
             details = [getPathObject(this.parent)];
             this.parent.itemData = details;
         }
@@ -497,9 +509,6 @@ var ContextMenu = /** @class */ (function () {
                     case 'newfolder':
                         createNewFolder(_this.parent);
                         break;
-                    case 'upload':
-                        uploadItem(_this.parent);
-                        break;
                     case 'name':
                     case 'size':
                     case 'date':
@@ -521,6 +530,12 @@ var ContextMenu = /** @class */ (function () {
                     case 'detailsview':
                         updateLayout(_this.parent, 'Details');
                         break;
+                    case 'fileupload':
+                    case 'folderupload':
+                        _this.parent.setProperties({ uploadSettings: { directoryUpload: itemText === 'fileupload' ? false : true } });
+                        _this.parent.dataBind();
+                        uploadItem(_this.parent);
+                        break;
                 }
             }
         });
@@ -592,7 +607,19 @@ var ContextMenu = /** @class */ (function () {
                     item = { id: itemId, text: itemText, iconCss: CLS.ICON_OPEN };
                     break;
                 case 'Upload':
-                    item = { id: itemId, text: itemText, iconCss: CLS.ICON_UPLOAD };
+                    item = {
+                        id: itemId, text: itemText, iconCss: CLS.ICON_UPLOAD,
+                        items: [
+                            {
+                                id: this.getMenuId('folderupload'), text: getLocaleText(this.parent, 'Upload-Folder'),
+                                iconCss: !this.parent.uploadObj.directoryUpload ? null : CLS.TB_OPTION_TICK
+                            },
+                            {
+                                id: this.getMenuId('fileupload'), text: getLocaleText(this.parent, 'Upload-File'),
+                                iconCss: this.parent.uploadObj.directoryUpload ? null : CLS.TB_OPTION_TICK
+                            }
+                        ]
+                    };
                     break;
                 case 'Cut':
                     item = { id: itemId, text: itemText, iconCss: CLS.ICON_CUT };

package/styles/bds-lite.css

@@ -207,6 +207,65 @@
     transform: rotate(360deg);
   }
 }
+/* stylelint-disable */
+.e-btn.e-primary:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+}
+
+.e-btn.e-success:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
+}
+
+.e-btn.e-info:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+}
+
+.e-btn.e-warning:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+}
+
+.e-btn.e-danger:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+}
+
+.e-btn.e-outline.e-info {
+  background: transparent !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text) !important;
+}
+
+.e-btn.e-outline.e-info:hover {
+  background: var(--color-sf-utility-info-bg-color-hover) !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text-hover) !important;
+}
+
+.e-btn.e-outline.e-info:active {
+  background: var(--color-sf-utility-info-bg-color-pressed) !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text-hover) !important;
+}
+
+.e-btn.e-flat.e-info {
+  color: var(--color-sf-utility-info-text) !important;
+}
+
+.e-bigger .e-btn,
+.e-bigger .e-btn,
+.e-bigger .e-css.e-btn,
+.e-bigger.e-css.e-btn {
+  font-size: 14px;
+  line-height: 1.572em;
+  padding: 8px 15px;
+  border-radius: 8px !important;
+  font-weight: 600;
+}
+
 .e-dropdown-popup {
   position: absolute;
   border-radius: 8px;
@@ -449,6 +508,11 @@
   content: "\e774";
 }
 
+
+
+
+
+/*! FileManager's bds theme wise override definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 ejs-filemanager {
   display: block;
@@ -490,7 +554,7 @@ ejs-filemanager {
   height: 18px;
   margin: 2px 4px 0;
   width: 18px;
-  padding: 1px;
+  padding: 0 8px;
 }
 .e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn .e-tbar-btn-text.e-tbar-ddb-text {
   padding-right: 0;
@@ -600,7 +664,7 @@ ejs-filemanager {
   display: inline;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu .e-breadcrumb-submenu {
-  height: 26px;
+  height: 24px;
 }
 .e-filemanager .e-address .e-list-text {
   cursor: pointer;
@@ -895,13 +959,13 @@ ejs-filemanager {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 38px;
+  height: 36px;
 }
 .e-filemanager .e-fe-clone .e-fe-content .e-fe-name {
   display: inline-block;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 22px;
-  margin: 8px 8px 8px 0;
+  margin: auto 8px;
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -910,7 +974,7 @@ ejs-filemanager {
 .e-filemanager .e-fe-clone .e-fe-content .e-fe-icon {
   display: inline-block;
   height: 20px;
-  margin: 9px 8px;
+  margin: auto 8px;
   width: 20px;
 }
 .e-filemanager .e-fe-clone .e-fe-count {
@@ -920,7 +984,7 @@ ejs-filemanager {
   height: 20px;
   margin: -10px 0 0 -10px;
   width: 20px;
-  line-height: 18px;
+  line-height: 22px;
   position: relative;
   text-align: center;
   top: 0;
@@ -943,7 +1007,7 @@ ejs-filemanager {
   padding-left: 12px;
 }
 .e-filemanager.e-rtl .e-address .e-search-wrap .e-input-group .e-input {
-  margin: 0 29px 0 0;
+  margin: 0 24px 0 0;
   padding: 0;
 }
 .e-filemanager.e-rtl .e-address .e-addressbar-ul {
@@ -1105,7 +1169,7 @@ ejs-filemanager {
 }
 .e-fe-popup .e-fe-error {
   font-size: 12px;
-  line-height: 18px;
+  line-height: 1.5;
   padding-top: 4px;
 }
 .e-fe-popup .e-upload {
@@ -1194,6 +1258,11 @@ ejs-filemanager {
   height: calc(100% - 35px);
 }
 
+
+
+
+
+/*! FileManager's bds theme wise override definitions and variables */
 .e-filemanager {
   background: transparent;
   border-color: var(--color-sf-border-secondary);
@@ -1347,4 +1416,9 @@ ejs-filemanager {
 }
 .e-fe-popup .e-upload .e-upload-actions {
   border-bottom-color: var(--color-sf-border-secondary);
+}
+
+.e-filemanager .e-grid.sf-grid :is(.e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox, .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox):is(:focus, :focus-visible) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }

package/styles/bds-lite.scss

@@ -1,16 +1,15 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-inputs/styles/textbox/bds-definition.scss';
-@import 'ej2-inputs/styles/uploader/bds-definition.scss';
-@import 'ej2-popups/styles/dialog/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bds-definition.scss';
-@import 'ej2-navigations/styles/treeview/bds-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
-@import 'ej2-layouts/styles/splitter/bds-definition.scss';
-@import 'ej2-grids/styles/grid/bds-definition.scss';
-@import 'file-manager/bds-definition.scss';
-@import 'file-manager/icons/bds.scss';
-@import 'file-manager/all.scss';
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-inputs/styles/textbox/bds-definition' as *;
+@use 'ej2-inputs/styles/uploader/bds-definition' as *;
+@use 'ej2-popups/styles/dialog/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bds-definition' as *;
+@use 'ej2-navigations/styles/treeview/bds-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bds-definition' as *;
+@use 'ej2-layouts/styles/splitter/bds-definition' as *;
+@use 'ej2-grids/styles/grid/bds-definition' as *;
+@use 'file-manager/bds-definition' as *;
+@use 'file-manager/icons/bds' as *;
+@use 'file-manager/all.bds' as *;

package/styles/bds.css

@@ -207,6 +207,65 @@
     transform: rotate(360deg);
   }
 }
+/* stylelint-disable */
+.e-btn.e-primary:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+}
+
+.e-btn.e-success:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
+}
+
+.e-btn.e-info:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+}
+
+.e-btn.e-warning:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+}
+
+.e-btn.e-danger:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+}
+
+.e-btn.e-outline.e-info {
+  background: transparent !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text) !important;
+}
+
+.e-btn.e-outline.e-info:hover {
+  background: var(--color-sf-utility-info-bg-color-hover) !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text-hover) !important;
+}
+
+.e-btn.e-outline.e-info:active {
+  background: var(--color-sf-utility-info-bg-color-pressed) !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text-hover) !important;
+}
+
+.e-btn.e-flat.e-info {
+  color: var(--color-sf-utility-info-text) !important;
+}
+
+.e-bigger .e-btn,
+.e-bigger .e-btn,
+.e-bigger .e-css.e-btn,
+.e-bigger.e-css.e-btn {
+  font-size: 14px;
+  line-height: 1.572em;
+  padding: 8px 15px;
+  border-radius: 8px !important;
+  font-weight: 600;
+}
+
 .e-dropdown-popup {
   position: absolute;
   border-radius: 8px;
@@ -449,6 +508,11 @@
   content: "\e774";
 }
 
+
+
+
+
+/*! FileManager's bds theme wise override definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 ejs-filemanager {
   display: block;
@@ -490,7 +554,7 @@ ejs-filemanager {
   height: 18px;
   margin: 2px 4px 0;
   width: 18px;
-  padding: 1px;
+  padding: 0 8px;
 }
 .e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn .e-tbar-btn-text.e-tbar-ddb-text {
   padding-right: 0;
@@ -600,7 +664,7 @@ ejs-filemanager {
   display: inline;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu .e-breadcrumb-submenu {
-  height: 26px;
+  height: 24px;
 }
 .e-filemanager .e-address .e-list-text {
   cursor: pointer;
@@ -895,13 +959,13 @@ ejs-filemanager {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 38px;
+  height: 36px;
 }
 .e-filemanager .e-fe-clone .e-fe-content .e-fe-name {
   display: inline-block;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 22px;
-  margin: 8px 8px 8px 0;
+  margin: auto 8px;
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -910,7 +974,7 @@ ejs-filemanager {
 .e-filemanager .e-fe-clone .e-fe-content .e-fe-icon {
   display: inline-block;
   height: 20px;
-  margin: 9px 8px;
+  margin: auto 8px;
   width: 20px;
 }
 .e-filemanager .e-fe-clone .e-fe-count {
@@ -920,7 +984,7 @@ ejs-filemanager {
   height: 20px;
   margin: -10px 0 0 -10px;
   width: 20px;
-  line-height: 18px;
+  line-height: 22px;
   position: relative;
   text-align: center;
   top: 0;
@@ -943,7 +1007,7 @@ ejs-filemanager {
   padding-left: 12px;
 }
 .e-filemanager.e-rtl .e-address .e-search-wrap .e-input-group .e-input {
-  margin: 0 29px 0 0;
+  margin: 0 24px 0 0;
   padding: 0;
 }
 .e-filemanager.e-rtl .e-address .e-addressbar-ul {
@@ -1105,7 +1169,7 @@ ejs-filemanager {
 }
 .e-fe-popup .e-fe-error {
   font-size: 12px;
-  line-height: 18px;
+  line-height: 1.5;
   padding-top: 4px;
 }
 .e-fe-popup .e-upload {
@@ -1194,6 +1258,11 @@ ejs-filemanager {
   height: calc(100% - 35px);
 }
 
+
+
+
+
+/*! FileManager's bds theme wise override definitions and variables */
 .e-filemanager {
   background: transparent;
   border-color: var(--color-sf-border-secondary);
@@ -1349,6 +1418,22 @@ ejs-filemanager {
   border-bottom-color: var(--color-sf-border-secondary);
 }
 
+.e-filemanager .e-grid.sf-grid :is(.e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox, .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox):is(:focus, :focus-visible) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+
+
+
+/*! FileManager's bds theme wise override definitions and variables */
+/* stylelint-disable property-no-vendor-prefix */
+
+
+
+
+/*! FileManager's bds theme wise override definitions and variables */
 .e-filemanager.e-fe-mobile .e-toolbar .e-popup-up-icon.e-icons,
 .e-filemanager.e-fe-mobile .e-toolbar .e-popup-down-icon.e-icons,
 .e-filemanager.e-fe-mobile .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons,
@@ -1393,7 +1478,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-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,
 .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-grid {
-  padding: 4px 2px 0 2px;
+  padding: 0;
 }
 .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-details,
 .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-details,
@@ -1528,7 +1613,7 @@ ejs-filemanager {
 .e-filemanager.e-fe-mobile .e-grid .e-content .e-rowcell.e-fe-checkbox,
 .e-bigger .e-filemanager.e-fe-mobile .e-grid .e-content .e-rowcell.e-fe-checkbox,
 .e-filemanager.e-bigger.e-fe-mobile .e-grid .e-content .e-rowcell.e-fe-checkbox {
-  padding: 0;
+  padding: 6px;
 }
 .e-filemanager.e-fe-mobile .e-grid .e-gridcontent .e-fe-grid-icon,
 .e-bigger .e-filemanager.e-fe-mobile .e-grid .e-gridcontent .e-fe-grid-icon,
@@ -1632,7 +1717,7 @@ ejs-filemanager {
 .e-filemanager.e-bigger.e-fe-m-filter .e-address .e-search-wrap .e-fe-search {
   left: 0;
   margin-left: 8px;
-  margin-top: 7px;
+  margin-top: 3px;
   width: 30px;
 }
 .e-filemanager.e-fe-m-filter .e-address .e-addressbar-ul,
@@ -1704,7 +1789,7 @@ ejs-filemanager {
   height: 22px;
   margin: 4px 4px 0;
   width: 22px;
-  padding: 1px;
+  padding: 0 10px;
 }
 .e-bigger .e-filemanager .e-toolbar .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-icons.e-caret,
 .e-filemanager.e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-icons.e-caret {
@@ -1825,7 +1910,7 @@ ejs-filemanager {
 .e-bigger .e-filemanager .e-grid .e-gridcontent .e-fe-grid-icon,
 .e-filemanager.e-bigger .e-grid .e-gridheader .e-fe-grid-icon,
 .e-filemanager.e-bigger .e-grid .e-gridcontent .e-fe-grid-icon {
-  padding-left: 10px;
+  padding-left: 16px;
 }
 .e-bigger .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell,
 .e-filemanager.e-bigger .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell {
@@ -1834,7 +1919,7 @@ ejs-filemanager {
 }
 .e-bigger .e-filemanager .e-grid .e-fe-icon,
 .e-filemanager.e-bigger .e-grid .e-fe-icon {
-  height: 24px;
+  height: 35px;
   width: 24px;
 }
 .e-bigger .e-filemanager .e-grid .e-empty,

package/styles/bds.scss

@@ -1,17 +1,16 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-inputs/styles/textbox/bds-definition.scss';
-@import 'ej2-inputs/styles/uploader/bds-definition.scss';
-@import 'ej2-popups/styles/dialog/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bds-definition.scss';
-@import 'ej2-navigations/styles/treeview/bds-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
-@import 'ej2-layouts/styles/splitter/bds-definition.scss';
-@import 'ej2-grids/styles/grid/bds-definition.scss';
-@import 'file-manager/bds-definition.scss';
-@import 'file-manager/icons/bds.scss';
-@import 'file-manager/all.scss';
-@import 'file-manager/bigger.scss';
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-inputs/styles/textbox/bds-definition' as *;
+@use 'ej2-inputs/styles/uploader/bds-definition' as *;
+@use 'ej2-popups/styles/dialog/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bds-definition' as *;
+@use 'ej2-navigations/styles/treeview/bds-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bds-definition' as *;
+@use 'ej2-layouts/styles/splitter/bds-definition' as *;
+@use 'ej2-grids/styles/grid/bds-definition' as *;
+@use 'file-manager/bds-definition' as *;
+@use 'file-manager/icons/bds' as *;
+@use 'file-manager/all.bds' as *;
+@use 'file-manager/bigger.bds' as *;

package/styles/bootstrap-dark-lite.css

@@ -224,6 +224,7 @@
   content: "\e614";
 }
 
+/*! FileManager's bootstrap theme wise override definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 ejs-filemanager {
   display: block;
@@ -964,6 +965,7 @@ ejs-filemanager {
   height: calc(100% - 34px);
 }
 
+/*! FileManager's bootstrap theme wise override definitions and variables */
 .e-filemanager {
   background: #1a1a1a;
   border-color: #505050;
@@ -1122,4 +1124,9 @@ ejs-filemanager {
 }
 .e-fe-popup .e-upload .e-upload-actions {
   border-bottom-color: #0070f0;
+}
+
+.e-filemanager .e-grid.sf-grid :is(.e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox, .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox):is(:focus, :focus-visible) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }

package/styles/bootstrap-dark-lite.scss

@@ -1,16 +1,15 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/uploader/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/dialog/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
-@import 'ej2-layouts/styles/splitter/bootstrap-dark-definition.scss';
-@import 'ej2-grids/styles/grid/bootstrap-dark-definition.scss';
-@import 'file-manager/bootstrap-dark-definition.scss';
-@import 'file-manager/icons/bootstrap-dark.scss';
-@import 'file-manager/all.scss';
+@use 'ej2-inputs/styles/input/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/uploader/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/dialog/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap-dark-definition' as *;
+@use 'ej2-layouts/styles/splitter/bootstrap-dark-definition' as *;
+@use 'ej2-grids/styles/grid/bootstrap-dark-definition' as *;
+@use 'file-manager/bootstrap-dark-definition' as *;
+@use 'file-manager/icons/bootstrap-dark' as *;
+@use 'file-manager/all.bootstrap-dark' as *;