@syncfusion/ej2-filemanager 22.2.12 → 23.1.38

package/src/file-manager/models/toolbar-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty } from '@syncfusion/ej2-base';
+import { Property, ChildProperty } from '@syncfusion/ej2-base';import { DisplayMode, ItemAlign, ItemType, OverflowOption } from '@syncfusion/ej2-navigations';
 
 /**
  * Interface for a class ToolbarSettings
@@ -8,7 +8,7 @@ export interface ToolbarSettingsModel {
     /**
      * An array of string or object that is used to configure the toolbar items.
      *
-     * @default toolbarItems
+     * @default defaultToolbarItems
      */
     items?: string[];
 
@@ -19,4 +19,179 @@ export interface ToolbarSettingsModel {
      */
     visible?: boolean;
 
+}
+
+/**
+ * Interface for a class ToolbarItem
+ */
+export interface ToolbarItemModel {
+
+    /**
+     * Specifies the unique ID to be used with button or input element of Toolbar items.
+     *
+     * @default ""
+     */
+    id?: string;
+
+    /**
+     * Specifies the text to be displayed on the Toolbar button.
+     *
+     * @default ""
+     */
+    text?: string;
+
+    /**
+     * Specifies the width of the Toolbar button commands.
+     *
+     * @default 'auto'
+     */
+    width?: number | string;
+
+    /**
+     * Defines single/multiple classes (separated by space) to be used for customization of commands.
+     *
+     * @default ""
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the priority of items to display it in popup always.
+     * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
+     *
+     * @default false
+     */
+    showAlwaysInPopup?: boolean;
+
+    /**
+     * Specifies whether an item should be disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
+     *
+     * @default ""
+     */
+    prefixIcon?: string;
+
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned after the text content if text is available.
+     *
+     * @default ""
+     */
+    suffixIcon?: string;
+
+    /**
+     * Specifies whether an item should be hidden or not.
+     *
+     * @default true
+     */
+    visible?: boolean;
+
+    /**
+     * Specifies the Toolbar command display area when an element's content is too large to fit available space.
+     * This is applicable only to `popup` mode. The possible values for this property as follows
+     * * `Show`:  Always shows the item as the primary priority on the *Toolbar*.
+     * * `Hide`: Always shows the item as the secondary priority on the *popup*.
+     * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.
+     *
+     * @default 'None'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.OverflowOption.None
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.OverflowOption
+     */
+    overflow?: OverflowOption;
+
+    /**
+     * Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
+     * ```
+     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
+     * ```
+     *
+     * @default ""
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Object | Function;
+
+    /**
+     * Specifies the types of command to be rendered in the Toolbar.
+     * Supported types are:
+     * * `Button`: Creates the Button control with its given properties like text, prefixIcon, etc.
+     * * `Separator`: Adds a horizontal line that separates the Toolbar commands.
+     * * `Input`: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * AutoComplete, etc.
+     *
+     * @default 'Button'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.ItemType.Button
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.ItemType
+     */
+    type?: ItemType;
+
+    /**
+     * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
+     * The possible values for this property as follows
+     * * `Toolbar`:  Text will be displayed on *Toolbar* only.
+     * * `Overflow`: Text will be displayed only when content overflows to *popup*.
+     * * `Both`: Text will be displayed on *popup* and *Toolbar*.
+     *
+     * @default 'Both'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.DisplayMode.Both
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.DisplayMode
+     */
+    showTextOn?: DisplayMode;
+
+    /**
+     * Defines htmlAttributes used to add custom attributes to Toolbar command.
+     * Supports HTML attributes such as style, class, etc.
+     *
+     * @default null
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
+     * Specifies the text to be displayed on hovering the Toolbar button.
+     *
+     * @default ""
+     */
+    tooltipText?: string;
+
+    /**
+     * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
+     * The possible values for this property as follows
+     * * `Left`: To align commands to the left side of the Toolbar.
+     * * `Center`: To align commands at the center of the Toolbar.
+     * * `Right`: To align commands to the right side of the Toolbar.
+     *
+     * @default 'Left'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.ItemAlign.Left
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.ItemAlign
+     */
+    align?: ItemAlign;
+
+    /**
+     * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tool bar items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex?: number;
+
+    /**
+     * Specifies the unique name for each toolbar item rendered in File Manager. This name is used to map the toolbar items in the File Manager component.
+     *
+     * @default null
+     */
+    name?: string;
+
 }

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

@@ -1,5 +1,6 @@
 import { ChildProperty } from '@syncfusion/ej2-base';
-export declare const toolbarItems: string[];
+import { DisplayMode, ItemAlign, ItemType, OverflowOption } from '@syncfusion/ej2-navigations';
+export declare const defaultToolbarItems: string[];
 /**
  * Specifies the Toolbar settings of the FileManager.
  */
@@ -7,7 +8,7 @@ export declare class ToolbarSettings extends ChildProperty<ToolbarSettings> {
     /**
      * An array of string or object that is used to configure the toolbar items.
      *
-     * @default toolbarItems
+     * @default defaultToolbarItems
      */
     items: string[];
     /**
@@ -17,3 +18,157 @@ export declare class ToolbarSettings extends ChildProperty<ToolbarSettings> {
      */
     visible: boolean;
 }
+export declare class ToolbarItem extends ChildProperty<ToolbarItem> {
+    /**
+     * Specifies the unique ID to be used with button or input element of Toolbar items.
+     *
+     * @default ""
+     */
+    id: string;
+    /**
+     * Specifies the text to be displayed on the Toolbar button.
+     *
+     * @default ""
+     */
+    text: string;
+    /**
+     * Specifies the width of the Toolbar button commands.
+     *
+     * @default 'auto'
+     */
+    width: number | string;
+    /**
+     * Defines single/multiple classes (separated by space) to be used for customization of commands.
+     *
+     * @default ""
+     */
+    cssClass: string;
+    /**
+     * Defines the priority of items to display it in popup always.
+     * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
+     *
+     * @default false
+     */
+    showAlwaysInPopup: boolean;
+    /**
+     * Specifies whether an item should be disabled or not.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
+     *
+     * @default ""
+     */
+    prefixIcon: string;
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned after the text content if text is available.
+     *
+     * @default ""
+     */
+    suffixIcon: string;
+    /**
+     * Specifies whether an item should be hidden or not.
+     *
+     * @default true
+     */
+    visible: boolean;
+    /**
+     * Specifies the Toolbar command display area when an element's content is too large to fit available space.
+     * This is applicable only to `popup` mode. The possible values for this property as follows
+     * * `Show`:  Always shows the item as the primary priority on the *Toolbar*.
+     * * `Hide`: Always shows the item as the secondary priority on the *popup*.
+     * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.
+     *
+     * @default 'None'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.OverflowOption.None
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.OverflowOption
+     */
+    overflow: OverflowOption;
+    /**
+     * Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
+     * ```
+     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
+     * ```
+     *
+     * @default ""
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template: string | Object | Function;
+    /**
+     * Specifies the types of command to be rendered in the Toolbar.
+     * Supported types are:
+     * * `Button`: Creates the Button control with its given properties like text, prefixIcon, etc.
+     * * `Separator`: Adds a horizontal line that separates the Toolbar commands.
+     * * `Input`: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * AutoComplete, etc.
+     *
+     * @default 'Button'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.ItemType.Button
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.ItemType
+     */
+    type: ItemType;
+    /**
+     * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
+     * The possible values for this property as follows
+     * * `Toolbar`:  Text will be displayed on *Toolbar* only.
+     * * `Overflow`: Text will be displayed only when content overflows to *popup*.
+     * * `Both`: Text will be displayed on *popup* and *Toolbar*.
+     *
+     * @default 'Both'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.DisplayMode.Both
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.DisplayMode
+     */
+    showTextOn: DisplayMode;
+    /**
+     * Defines htmlAttributes used to add custom attributes to Toolbar command.
+     * Supports HTML attributes such as style, class, etc.
+     *
+     * @default null
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
+     * Specifies the text to be displayed on hovering the Toolbar button.
+     *
+     * @default ""
+     */
+    tooltipText: string;
+    /**
+     * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
+     * The possible values for this property as follows
+     * * `Left`: To align commands to the left side of the Toolbar.
+     * * `Center`: To align commands at the center of the Toolbar.
+     * * `Right`: To align commands to the right side of the Toolbar.
+     *
+     * @default 'Left'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.ItemAlign.Left
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.ItemAlign
+     */
+    align: ItemAlign;
+    /**
+     * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tool bar items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex: number;
+    /**
+     * Specifies the unique name for each toolbar item rendered in File Manager. This name is used to map the toolbar items in the File Manager component.
+     *
+     * @default null
+     */
+    name: string;
+}

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

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Property, ChildProperty } from '@syncfusion/ej2-base';
-export var toolbarItems = ['NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename',
+export var defaultToolbarItems = ['NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename',
     'SortBy', 'Refresh', 'Selection', 'View', 'Details'];
 /**
  * Specifies the Toolbar settings of the FileManager.
@@ -29,7 +29,7 @@ var ToolbarSettings = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Property(toolbarItems)
+        Property(defaultToolbarItems)
     ], ToolbarSettings.prototype, "items", void 0);
     __decorate([
         Property(true)
@@ -37,3 +37,65 @@ var ToolbarSettings = /** @class */ (function (_super) {
     return ToolbarSettings;
 }(ChildProperty));
 export { ToolbarSettings };
+var ToolbarItem = /** @class */ (function (_super) {
+    __extends(ToolbarItem, _super);
+    function ToolbarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "text", void 0);
+    __decorate([
+        Property('auto')
+    ], ToolbarItem.prototype, "width", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], ToolbarItem.prototype, "showAlwaysInPopup", void 0);
+    __decorate([
+        Property(false)
+    ], ToolbarItem.prototype, "disabled", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "prefixIcon", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "suffixIcon", void 0);
+    __decorate([
+        Property(true)
+    ], ToolbarItem.prototype, "visible", void 0);
+    __decorate([
+        Property('None')
+    ], ToolbarItem.prototype, "overflow", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "template", void 0);
+    __decorate([
+        Property('Button')
+    ], ToolbarItem.prototype, "type", void 0);
+    __decorate([
+        Property('Both')
+    ], ToolbarItem.prototype, "showTextOn", void 0);
+    __decorate([
+        Property(null)
+    ], ToolbarItem.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "tooltipText", void 0);
+    __decorate([
+        Property('Left')
+    ], ToolbarItem.prototype, "align", void 0);
+    __decorate([
+        Property(-1)
+    ], ToolbarItem.prototype, "tabIndex", void 0);
+    __decorate([
+        Property()
+    ], ToolbarItem.prototype, "name", void 0);
+    return ToolbarItem;
+}(ChildProperty));
+export { ToolbarItem };

package/src/file-manager/pop-up/dialog.js

@@ -8,7 +8,6 @@ import { paste, rename } from '../common/operations';
 import { getLocaleText, getDuplicateData, objectToString, getCssClass } from '../common/utility';
 import { Input } from '@syncfusion/ej2-inputs';
 import { CheckBox } from '@syncfusion/ej2-buttons';
-// eslint:disable-next-line
 /**
  *
  * @param {IFileManager} parent - Specifies the parent element
@@ -168,7 +167,6 @@ function triggerPopupClose(parent, dlgModule, dialogName) {
     var args = { popupModule: dlgModule, element: dlgModule.element, popupName: dialogName };
     parent.trigger('popupClose', args);
 }
-// eslint:disable-next-line
 /**
  *
  * @param {IFileManager} parent - Specifies the parent element.
@@ -388,7 +386,6 @@ function retryDlgClose(parent) {
  * @returns {void}
  * @private
  */
-// eslint-disable-next-line
 function onRetryOpen(parent, args) {
     parent.isRetryOpened = true;
     var dialogEle = getValue('element', args);
@@ -537,8 +534,6 @@ function createInput(ele, placeholder) {
         }
     });
 }
-/* istanbul ignore next */
-// eslint:disable-next-line
 /**
  *
  * @param {IFileManager} parent - specifies the parent element.

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

@@ -124,7 +124,7 @@ $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 30px 12px 30px !default;
+$fe-mobile-lg-icon-margin: 26px auto 12px !default;
 $fe-mobile-lg-img-height: 110px !default;
 $fe-mobile-grid-icon-size: 35px !default;
 $fe-mobile-icon-font-size: 20px !default;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@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';

package/styles/file-manager/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-inputs/styles/input/bootstrap-definition.scss';
 @import 'ej2-inputs/styles/textbox/bootstrap-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap-definition.scss';

package/styles/file-manager/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'ej2-inputs/styles/input/bootstrap4-definition.scss';
 @import 'ej2-inputs/styles/textbox/bootstrap4-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap4-definition.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'ej2-inputs/styles/input/bootstrap5-dark-definition.scss';
 @import 'ej2-inputs/styles/textbox/bootstrap5-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap5-dark-definition.scss';

package/styles/file-manager/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'ej2-inputs/styles/input/bootstrap5-definition.scss';
 @import 'ej2-inputs/styles/textbox/bootstrap5-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap5-definition.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'ej2-inputs/styles/input/fabric-dark-definition.scss';
 @import 'ej2-inputs/styles/textbox/fabric-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/fabric-dark-definition.scss';

package/styles/file-manager/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'ej2-inputs/styles/input/fabric-definition.scss';
 @import 'ej2-inputs/styles/textbox/fabric-definition.scss';
 @import 'ej2-inputs/styles/uploader/fabric-definition.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'ej2-inputs/styles/input/fluent-dark-definition.scss';
 @import 'ej2-inputs/styles/textbox/fluent-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/fluent-dark-definition.scss';

package/styles/file-manager/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'ej2-inputs/styles/input/fluent-definition.scss';
 @import 'ej2-inputs/styles/textbox/fluent-definition.scss';
 @import 'ej2-inputs/styles/uploader/fluent-definition.scss';

package/styles/file-manager/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'ej2-inputs/styles/input/highcontrast-light-definition.scss';
 @import 'ej2-inputs/styles/textbox/highcontrast-light-definition.scss';
 @import 'ej2-inputs/styles/uploader/highcontrast-light-definition.scss';

package/styles/file-manager/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'ej2-inputs/styles/input/highcontrast-definition.scss';
 @import 'ej2-inputs/styles/textbox/highcontrast-definition.scss';
 @import 'ej2-inputs/styles/uploader/highcontrast-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {

package/styles/file-manager/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'ej2-inputs/styles/input/material-dark-definition.scss';
 @import 'ej2-inputs/styles/textbox/material-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/material-dark-definition.scss';

package/styles/file-manager/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {

package/styles/file-manager/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'ej2-inputs/styles/input/material-definition.scss';
 @import 'ej2-inputs/styles/textbox/material-definition.scss';
 @import 'ej2-inputs/styles/uploader/material-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;
@@ -1109,7 +1108,7 @@ ejs-filemanager {
 .e-bigger .e-filemanager.e-fe-mobile .e-large-icons .e-list-parent .e-list-item .e-list-icon,
 .e-filemanager.e-bigger.e-fe-mobile .e-large-icons .e-list-parent .e-list-item .e-list-icon {
   height: 24px;
-  margin: 26px 30px 12px 30px;
+  margin: 26px auto 12px;
   width: 32px;
 }
 .e-filemanager.e-fe-m-select .e-large-icons .e-list-item.e-large-icon .e-checkbox-wrapper,

package/styles/file-manager/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'ej2-inputs/styles/input/material3-dark-definition.scss';
 @import 'ej2-inputs/styles/textbox/material3-dark-definition.scss';

package/styles/file-manager/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;
@@ -1165,7 +1164,7 @@ ejs-filemanager {
 .e-bigger .e-filemanager.e-fe-mobile .e-large-icons .e-list-parent .e-list-item .e-list-icon,
 .e-filemanager.e-bigger.e-fe-mobile .e-large-icons .e-list-parent .e-list-item .e-list-icon {
   height: 24px;
-  margin: 26px 30px 12px 30px;
+  margin: 26px auto 12px;
   width: 32px;
 }
 .e-filemanager.e-fe-m-select .e-large-icons .e-list-item.e-large-icon .e-checkbox-wrapper,

package/styles/file-manager/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'ej2-inputs/styles/input/material3-definition.scss';
 @import 'ej2-inputs/styles/textbox/material3-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable-line no-empty-source */
 .e-upload .e-upload-actions,

package/styles/file-manager/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'ej2-inputs/styles/input/tailwind-dark-definition.scss';
 @import 'ej2-inputs/styles/textbox/tailwind-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/tailwind-dark-definition.scss';

package/styles/file-manager/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable-line no-empty-source */
 .e-upload .e-upload-actions,