@syncfusion/ej2-filemanager 19.4.56 → 20.1.52-10459

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Toolbar as BaseToolbar } from '@syncfusion/ej2-navigations';
 import { select, isNullOrUndefined as isNOU, closest, selectAll } from '@syncfusion/ej2-base';
 import { createDialog } from '../pop-up/dialog';
@@ -44,6 +45,7 @@ var Toolbar = /** @class */ (function () {
                 enableRtl: _this.parent.enableRtl
             });
             _this.toolbarObj.isStringTemplate = true;
+            _this.toolbarObj.root = _this.parent.root ? _this.parent.root : _this.parent;
             _this.toolbarObj.appendTo('#' + _this.parent.element.id + CLS.TOOLBAR_ID);
         });
     };
@@ -61,6 +63,9 @@ var Toolbar = /** @class */ (function () {
         if (this.parent.isDevice && this.parent.allowMultiSelection) {
             currItems.push('SelectAll');
         }
+        if (this.parent.toolbarItems.length > 0) {
+            currItems = this.parent.toolbarItems.map(function (item) { return item.name; });
+        }
         return currItems;
     };
     /* istanbul ignore next */
@@ -70,7 +75,6 @@ var Toolbar = /** @class */ (function () {
             return;
         }
         var tool = args.item.id.substr((this.parent.element.id + '_tb_').length);
-        // eslint-disable-next-line
         var details;
         if (tool === 'refresh' || tool === 'newfolder' || tool === 'upload') {
             details = [getPathObject(this.parent)];
@@ -151,11 +155,15 @@ var Toolbar = /** @class */ (function () {
         });
     };
     Toolbar.prototype.toolbarCreateHandler = function () {
+        var _this = this;
         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 : '' },
@@ -174,15 +182,15 @@ var Toolbar = /** @class */ (function () {
             this.buttonObj.appendTo('#' + this.getId('SortBy'));
         }
         if (!isNOU(select('#' + this.getId('View'), this.parent.element))) {
-            var gridSpan = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>';
-            var largeIconSpan = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>';
+            var gridSpan_1 = '<span class="' + CLS.ICON_GRID + ' ' + CLS.MENU_ICON + '"></span>';
+            var largeIconSpan_1 = '<span class="' + CLS.ICON_LARGE + ' ' + CLS.MENU_ICON + '"></span>';
             var layoutItems = [
                 {
-                    id: this.getPupupId('large'), text: largeIconSpan + getLocaleText(this.parent, 'View-LargeIcons'),
+                    id: this.getPupupId('large'), text: getLocaleText(this.parent, 'View-LargeIcons'),
                     iconCss: this.parent.view === 'Details' ? '' : CLS.TB_OPTION_TICK
                 },
                 {
-                    id: this.getPupupId('details'), text: gridSpan + getLocaleText(this.parent, 'View-Details'),
+                    id: this.getPupupId('details'), text: getLocaleText(this.parent, 'View-Details'),
                     iconCss: this.parent.view === 'Details' ? CLS.TB_OPTION_TICK : ''
                 }
             ];
@@ -191,14 +199,27 @@ var Toolbar = /** @class */ (function () {
                 cssClass: getCssClass(this.parent, 'e-caret-hide ' + CLS.ROOT_POPUP),
                 items: layoutItems, select: this.layoutChange.bind(this),
                 enableRtl: this.parent.enableRtl,
-                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
-                content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>'
+                content: '<span class="e-tbar-btn-text">' + getLocaleText(this.parent, 'View') + '</span>',
+                beforeItemRender: function (args) {
+                    var tickIcon = args.item.iconCss;
+                    var viewText = args.item.text === getLocaleText(_this.parent, 'View-LargeIcons');
+                    var iconClass = tickIcon ? ' e-menu-icon ' + tickIcon : '';
+                    args.element.innerHTML = '<span class="' + iconClass + '"></span>' + (viewText ? largeIconSpan_1 : gridSpan_1) + args.item.text;
+                    var span = args.element.firstChild;
+                    if (span && span.className === '') {
+                        args.element.removeChild(span);
+                    }
+                }
             });
             this.layoutBtnObj.isStringTemplate = true;
             this.layoutBtnObj.appendTo('#' + this.getId('View'));
         }
         this.hideItems(this.default, true);
         this.hideStatus();
+        if (this.parent.portals && this.toolbarObj.portals) {
+            this.parent.portals = this.parent.portals.concat(this.toolbarObj.portals);
+            this.parent['renderReactTemplates']();
+        }
         var btnElement = selectAll('.e-btn', this.toolbarObj.element);
         var _loop_1 = function (btnCount) {
             /* istanbul ignore next */
@@ -229,7 +250,12 @@ var Toolbar = /** @class */ (function () {
                     items[itemCount].iconCss = this.parent.sortBy === 'size' ? CLS.TB_OPTION_DOT : '';
                 }
                 else if (items[itemCount].id === this.getPupupId('date')) {
-                    items[itemCount].iconCss = this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '';
+                    if (this.parent.sortBy === 'dateModified' || this.parent.sortBy === 'dateCreated') {
+                        items[itemCount].iconCss = this.parent.sortBy === this.parent.sortBy ? CLS.TB_OPTION_DOT : '';
+                    }
+                    else {
+                        items[itemCount].iconCss = this.parent.sortBy === '_fm_modified' ? CLS.TB_OPTION_DOT : '';
+                    }
                 }
                 else if (items[itemCount].id === this.getPupupId('ascending')) {
                     items[itemCount].iconCss = this.parent.sortOrder === 'Ascending' ? CLS.TB_OPTION_TICK : '';
@@ -266,10 +292,13 @@ var Toolbar = /** @class */ (function () {
         }
         for (var i = 0; i < data.length; i++) {
             var item = void 0;
+            var propItem = void 0;
+            if (this.parent.toolbarItems.length > 0) {
+                propItem = this.getItemModel(this.parent.toolbarItems[parseInt(i.toString(), 10)]);
+            }
             var itemId = this.getId(data[i]);
             var itemText = getLocaleText(this.parent, data[i]);
             var itemTooltip = getLocaleText(this.parent, 'Tooltip-' + data[i]);
-            var spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + itemText + '</span>';
             switch (data[i]) {
                 case '|':
                     item = { type: 'Separator' };
@@ -277,12 +306,17 @@ var Toolbar = /** @class */ (function () {
                 case 'Upload':
                     item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_UPLOAD, showTextOn: mode };
                     break;
-                case 'SortBy':
+                case 'SortBy': {
+                    var spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + itemText + '</span>';
+                    if (propItem && propItem.text) {
+                        spanElement = '<span class="e-tbar-btn-text e-tbar-ddb-text">' + propItem.text + '</span>';
+                    }
                     item = {
                         id: itemId, tooltipText: itemTooltip,
                         template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1">' + spanElement + '</button>'
                     };
                     break;
+                }
                 case 'Refresh':
                     item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_REFRESH, showTextOn: mode };
                     break;
@@ -292,14 +326,22 @@ var Toolbar = /** @class */ (function () {
                         align: 'Right'
                     };
                     break;
-                case 'View':
+                case 'View': {
+                    var viewText = void 0;
+                    if (propItem && propItem.text) {
+                        viewText = propItem.text;
+                    }
+                    else {
+                        viewText = getLocaleText(this.parent, 'View');
+                    }
                     item = {
                         id: itemId, tooltipText: itemTooltip, prefixIcon: this.parent.view === 'Details' ? CLS.ICON_GRID : CLS.ICON_LARGE,
                         overflow: 'Show', align: 'Right', text: itemText, showTextOn: 'Overflow',
                         template: '<button id="' + itemId + '" class="e-tbar-btn e-tbtn-txt" tabindex="-1" aria-label=' +
-                            getLocaleText(this.parent, 'View') + '></button>'
+                            viewText + '></button>'
                     };
                     break;
+                }
                 case 'Details':
                     item = {
                         id: itemId, tooltipText: itemTooltip, prefixIcon: CLS.ICON_DETAILS, overflow: 'Show', align: 'Right',
@@ -331,13 +373,74 @@ var Toolbar = /** @class */ (function () {
                     item = { id: itemId, text: itemText, tooltipText: itemTooltip, prefixIcon: CLS.ICON_SELECTALL, showTextOn: mode };
                     break;
                 default:
-                    item = { id: itemId, text: itemText, tooltipText: itemTooltip };
+                    item = { id: itemId, text: itemText, tooltipText: itemTooltip, template: '' };
                     break;
             }
-            items.push(item);
+            if (this.parent.toolbarItems.length > 0 && propItem) {
+                var mergedItems = Object.assign({}, item, propItem);
+                items.push(mergedItems);
+            }
+            else {
+                items.push(item);
+            }
         }
         return items;
     };
+    Toolbar.prototype.getItemModel = function (propItem) {
+        var item = {};
+        if (propItem.id) {
+            item.id = propItem.id;
+        }
+        if (propItem.text) {
+            item.text = propItem.text;
+        }
+        if (propItem.tooltipText) {
+            item.tooltipText = propItem.tooltipText;
+        }
+        if (propItem.prefixIcon) {
+            item.prefixIcon = propItem.prefixIcon;
+        }
+        if (propItem.cssClass) {
+            item.cssClass = propItem.cssClass;
+        }
+        if (propItem.showTextOn !== 'Both') {
+            item.showTextOn = propItem.showTextOn;
+        }
+        if (propItem.template) {
+            item.template = propItem.template;
+        }
+        if (propItem.disabled) {
+            item.disabled = propItem.disabled;
+        }
+        if (propItem.width !== 'auto') {
+            item.width = propItem.width;
+        }
+        if (propItem.suffixIcon) {
+            item.suffixIcon = propItem.suffixIcon;
+        }
+        if (propItem.align !== 'Left') {
+            item.align = propItem.align;
+        }
+        if (propItem.overflow !== 'None') {
+            item.overflow = propItem.overflow;
+        }
+        if (propItem.htmlAttributes) {
+            item.htmlAttributes = propItem.htmlAttributes;
+        }
+        if (propItem.type !== 'Button') {
+            item.type = propItem.type;
+        }
+        if (propItem.visible !== true) {
+            item.visible = propItem.visible;
+        }
+        if (propItem.showAlwaysInPopup) {
+            item.showAlwaysInPopup = propItem.showAlwaysInPopup;
+        }
+        if (propItem.tabIndex !== -1) {
+            item.tabIndex = propItem.tabIndex;
+        }
+        return item;
+    };
     Toolbar.prototype.getId = function (id) {
         return this.parent.element.id + '_tb_' + id.toLowerCase();
     };
@@ -352,8 +455,19 @@ var Toolbar = /** @class */ (function () {
     };
     Toolbar.prototype.reRenderToolbar = function (e) {
         var _this = this;
-        if (e.newProp.toolbarSettings.items !== undefined) {
-            this.items = this.toolbarItemData(this.getItems(e.newProp.toolbarSettings.items.map(function (item) { return item.trim(); })));
+        var itemsToProcess = [];
+        if (this.parent.toolbarItems.length > 0) {
+            itemsToProcess = this.parent.toolbarItems.map(function (item) {
+                return item.name;
+            });
+        }
+        else if (e.newProp.toolbarSettings.items !== undefined) {
+            itemsToProcess = e.newProp.toolbarSettings.items.map(function (item) {
+                return item.trim();
+            });
+        }
+        if (itemsToProcess.length > 0) {
+            this.items = this.toolbarItemData(this.getItems(itemsToProcess));
             var eventArgs = { items: this.items };
             this.parent.trigger('toolbarCreate', eventArgs, function (toolbarCreateArgs) {
                 if (_this.buttonObj) {
@@ -382,7 +496,7 @@ var Toolbar = /** @class */ (function () {
             this.hideItems(this.selection, true);
         }
         var ele = select('#' + this.getId('Selection'), this.toolbarObj.element);
-        if (this.parent.selectedItems.length > 0 && ele) {
+        if (this.parent.selectedItems.length > 0 && ele && !this.parent.enableVirtualization) {
             var txt = void 0;
             if (this.parent.selectedItems.length === 1) {
                 txt = this.parent.selectedItems.length + ' ' + getLocaleText(this.parent, 'Item-Selection');
@@ -467,6 +581,7 @@ var Toolbar = /** @class */ (function () {
                     this.toolbarObj.refreshOverflow();
                     break;
                 case 'toolbarSettings':
+                case 'toolbarItems':
                     this.reRenderToolbar(e);
                     break;
             }

package/src/file-manager/actions/virtualization.d.ts

@@ -0,0 +1,93 @@
+import { FileManager } from '../base';
+export declare class Virtualization {
+    constructor(instance: FileManager);
+    private filemanagerInstance;
+    private largeIconInstance;
+    private itemCount;
+    private rowItemCount;
+    private items;
+    private itemList;
+    private scrollPosition;
+    private totalHeight;
+    private listItemHeight;
+    private topElementHeight;
+    private bottomElementHeight;
+    private renderedCount;
+    private lastRowCount;
+    private topElement;
+    private bottomElement;
+    private listDiff;
+    /**
+     * Sets up UI virtualization for the large icon view.
+     *
+     * @returns {void}
+     */
+    setUIVirtualization(): void;
+    /**
+     * Sets the height of the top and bottom elements that are used for virtualization.
+     * These elements are used to give the appearance of an infinitely scrolling list.
+     *
+     * @returns {void}
+     */
+    setUlElementHeight(): void;
+    /**
+     * Calculates the number of items to display in the list based on the available width and height.
+     *
+     * @param {number} dataSourceLength The length of the data source.
+     * @returns {number} The number of items to display.
+     */
+    private getItemCount;
+    /**
+     * Wires or un wires the scroll event for the list element.
+     *
+     * @param {boolean} destroy - Set `true` to unwire the scroll event.
+     * @returns {void}
+     */
+    wireScrollEvent(destroy: boolean): void;
+    /**
+     * Handles the scroll event for the list element.
+     * This method updates the top and bottom elements and the displayed items based on the scroll position.
+     *
+     * @returns {void}
+     * @private
+     */
+    private onVirtualUiScroll;
+    /**
+     * Calculates the current scroll position of the list element.
+     *
+     * @param {number} startingHeight The starting height from which to calculate the scroll position.
+     * @returns {number} The current scroll position.
+     * @private
+     */
+    private getscrollerHeight;
+    /**
+     * This method updates the displayed items and the selection based on the scroll direction.
+     *
+     * @param {number} listDiff The number of rows to update.
+     * @param {boolean} isScrollingDown If set to true, the scroll direction is downward.
+     * @returns {void}
+     * @private
+     */
+    private onNormalScroll;
+    /**
+     * Updates the items in the large icons view.
+     *
+     * @param {boolean} isScrollingDown - If set to true, the scroll direction is downward.
+     * @returns {void}
+     * @private
+     */
+    private updateUI;
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    private getModuleName;
+    /**
+     * Destroys the component.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,279 @@
+import { EventHandler, isNullOrUndefined, detach, formatUnit } from '@syncfusion/ej2-base';
+import { ListBase } from '@syncfusion/ej2-lists';
+import { createElement, selectAll } from '@syncfusion/ej2-base';
+import * as CLS from '../base/classes';
+var Virtualization = /** @class */ (function () {
+    function Virtualization(instance) {
+        this.filemanagerInstance = instance;
+        this.largeIconInstance = instance.largeiconsviewModule;
+    }
+    /**
+     * Sets up UI virtualization for the large icon view.
+     *
+     * @returns {void}
+     */
+    Virtualization.prototype.setUIVirtualization = function () {
+        // Get the current view data source
+        var currentViewItems = this.largeIconInstance.items;
+        // Get the first item in the data source
+        var firstItem = currentViewItems.slice(0, 1);
+        // Create a list element from the first item in the data source
+        var listElements = ListBase.createListFromJson(createElement, firstItem, this.largeIconInstance.listObj);
+        // Get the list items from the list element
+        this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, listElements));
+        // Append the list element to the large icon element
+        this.largeIconInstance.element.appendChild(listElements);
+        if (this.itemList.length !== 0 && this.largeIconInstance.element.querySelector('.' + CLS.EMPTY)) {
+            this.largeIconInstance.element.removeChild(this.largeIconInstance.element.querySelector('.' + CLS.EMPTY));
+        }
+        // Get the total number of items
+        this.itemCount = this.getItemCount(Object.keys(this.largeIconInstance.allItems).length);
+        // Remove the first child element from the large icon element
+        this.largeIconInstance.element.firstChild.remove();
+        // Set the items for the large icon view to the current view data source, limited to the number of items to display
+        this.largeIconInstance.items = currentViewItems.slice(0, this.itemCount);
+    };
+    /**
+     * Sets the height of the top and bottom elements that are used for virtualization.
+     * These elements are used to give the appearance of an infinitely scrolling list.
+     *
+     * @returns {void}
+     */
+    Virtualization.prototype.setUlElementHeight = function () {
+        // Calculate the number of items in the last row
+        this.lastRowCount = (this.largeIconInstance.allItems.length - this.itemCount) % this.rowItemCount ?
+            (this.largeIconInstance.allItems.length - this.itemCount) % this.rowItemCount : this.rowItemCount;
+        // Create top and bottom elements
+        this.topElement = this.filemanagerInstance.createElement('div');
+        this.topElement.classList.add('e-virtual-top');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.topElement, this.largeIconInstance.element.firstElementChild.firstChild);
+        this.bottomElement = this.filemanagerInstance.createElement('div');
+        this.bottomElement.classList.add('e-virtual-bottom');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.bottomElement, null);
+        // Get the margin value for list items
+        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-top'), 10) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-bottom'), 10);
+        // Calculate the height of a single list item
+        this.listItemHeight = this.largeIconInstance.itemList[0].getBoundingClientRect().height + marginValue;
+        // Calculate the total height of the list
+        this.totalHeight = (Object.keys(this.largeIconInstance.allItems).length / this.rowItemCount) * this.listItemHeight;
+        // Set the initial height of the top and bottom elements
+        this.topElement.style.height = 0 + 'px';
+        this.bottomElement.style.height = this.totalHeight + 'px';
+        // Initialize the top and bottom element heights
+        this.topElementHeight = 0;
+        this.bottomElementHeight = this.totalHeight;
+        // Initialize the list difference variable
+        this.listDiff = 0;
+        // Set the initial rendered count
+        this.renderedCount = this.itemCount;
+    };
+    /**
+     * Calculates the number of items to display in the list based on the available width and height.
+     *
+     * @param {number} dataSourceLength The length of the data source.
+     * @returns {number} The number of items to display.
+     */
+    Virtualization.prototype.getItemCount = function (dataSourceLength) {
+        // Get the margin values for list items
+        var widthMargin = parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-right'), 10) +
+            parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-left'), 10);
+        // Calculate the number of items that can fit in a single row
+        this.rowItemCount =
+            Math.floor(parseFloat(formatUnit(this.largeIconInstance.element.firstElementChild.clientWidth)) /
+                (this.itemList[0].offsetWidth + widthMargin));
+        // Calculate the number of items that can fit in the available height
+        var itemCount = this.rowItemCount *
+            (Math.round(parseFloat(formatUnit(this.largeIconInstance.element.clientHeight)) / this.itemList[0].offsetHeight));
+        // If the calculated item count is greater than the data source length, set the item count to the data source length
+        if (itemCount > dataSourceLength) {
+            itemCount = dataSourceLength;
+        }
+        return itemCount;
+    };
+    /**
+     * Wires or un wires the scroll event for the list element.
+     *
+     * @param {boolean} destroy - Set `true` to unwire the scroll event.
+     * @returns {void}
+     */
+    Virtualization.prototype.wireScrollEvent = function (destroy) {
+        if (!destroy) {
+            // Wire the scroll event
+            EventHandler.add(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll, this);
+        }
+        else {
+            // Unwire the scroll event
+            EventHandler.remove(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll);
+        }
+    };
+    /**
+     * Handles the scroll event for the list element.
+     * This method updates the top and bottom elements and the displayed items based on the scroll position.
+     *
+     * @returns {void}
+     * @private
+     */
+    Virtualization.prototype.onVirtualUiScroll = function () {
+        var _a;
+        // Set the starting height to 0
+        var startingHeight = 0;
+        // Get the current scroll position
+        this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
+        var scroll = this.getscrollerHeight(startingHeight);
+        // Calculate the height of the top element
+        this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
+        // Calculate the height of the bottom element
+        this.bottomElementHeight = this.totalHeight - this.topElementHeight;
+        // If the scroll position is less than or equal to the total height, set the top and bottom element heights.
+        // Otherwise, set the top element height to the total height and the bottom element height to 0.
+        _a = scroll <= this.totalHeight ?
+            [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0], this.topElementHeight = _a[0], this.bottomElementHeight = _a[1];
+        // If the top element height has changed, update the top and bottom element heights and re-render the items.
+        if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
+            this.topElement.style.height = this.topElementHeight + 'px';
+            this.bottomElement.style.height = this.bottomElementHeight + 'px';
+            // Check whether the scroll direction is upward or downward
+            if (scroll > this.scrollPosition) {
+                // Scrolling is upward
+                var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
+                this.onNormalScroll(listDiff, true);
+            }
+            else {
+                // Scrolling is downward
+                var listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
+                this.onNormalScroll(listDiff, false);
+            }
+        }
+        // Update the list difference and scroll position variables
+        this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
+        this.scrollPosition = scroll;
+        // Update the list of items and the items property of the largeIconInstance
+        this.largeIconInstance.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.largeIconInstance.element));
+        this.itemCount = this.itemCount !== this.largeIconInstance.itemList.length ?
+            this.largeIconInstance.itemList.length : this.itemCount;
+        this.largeIconInstance.items = this.largeIconInstance.allItems.slice(this.renderedCount -
+            this.itemCount, this.renderedCount);
+    };
+    /**
+     * Calculates the current scroll position of the list element.
+     *
+     * @param {number} startingHeight The starting height from which to calculate the scroll position.
+     * @returns {number} The current scroll position.
+     * @private
+     */
+    Virtualization.prototype.getscrollerHeight = function (startingHeight) {
+        // If the scroll position is less than or equal to the starting height, return 0.
+        // Otherwise, return the scroll position minus the starting height.
+        return ((this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight) <= 0) ? 0 :
+            (this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight);
+    };
+    /**
+     * This method updates the displayed items and the selection based on the scroll direction.
+     *
+     * @param {number} listDiff The number of rows to update.
+     * @param {boolean} isScrollingDown If set to true, the scroll direction is downward.
+     * @returns {void}
+     * @private
+     */
+    Virtualization.prototype.onNormalScroll = function (listDiff, isScrollingDown) {
+        // Update the displayed items
+        for (var i = 0; i < listDiff; i++) {
+            this.updateUI(isScrollingDown);
+        }
+    };
+    /**
+     * Updates the items in the large icons view.
+     *
+     * @param {boolean} isScrollingDown - If set to true, the scroll direction is downward.
+     * @returns {void}
+     * @private
+     */
+    Virtualization.prototype.updateUI = function (isScrollingDown) {
+        var _this = this;
+        if (isScrollingDown) {
+            // Get the next batch of items to be displayed
+            this.items = this.largeIconInstance.allItems.slice(this.renderedCount, this.renderedCount + this.rowItemCount);
+            // If there are items to be displayed, create list elements for them and append them to the list
+            if (this.items.length > 0) {
+                var listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, listElements));
+                this.itemList.forEach(function (liEle) {
+                    _this.largeIconInstance.element.firstElementChild.insertBefore(liEle, _this.bottomElement);
+                });
+                // Update the rendered count variable
+                this.renderedCount = (this.largeIconInstance.allItems.length >= this.renderedCount + this.rowItemCount) ?
+                    this.renderedCount + this.rowItemCount : this.renderedCount + this.lastRowCount;
+                // Remove the first batch of items from the list
+                for (var i = 0; i < this.rowItemCount; i++) {
+                    detach(this.topElement.nextElementSibling);
+                }
+            }
+        }
+        else {
+            // Scrolling up
+            var lastItemIndex = void 0;
+            var isAllRendered = void 0;
+            if (this.renderedCount === this.largeIconInstance.allItems.length) {
+                // Set lastItemIndex to the last item in the last row
+                lastItemIndex = this.renderedCount - (this.itemCount - this.rowItemCount + this.lastRowCount);
+                // Set renderedCount to the total number of items that have been rendered, except for the items in the last row
+                this.renderedCount = ((this.renderedCount - this.lastRowCount) < this.itemCount) ?
+                    this.itemCount : (this.renderedCount - this.lastRowCount);
+                // Set isAllRendered to true to indicate that all items have been rendered
+                isAllRendered = true;
+            }
+            else {
+                // Set lastItemIndex to the last item in the current row
+                lastItemIndex = this.renderedCount - this.itemCount;
+                // Set renderedCount to the total number of items that have been rendered, except for the items in the current row
+                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.itemCount) ?
+                    this.itemCount : (this.renderedCount - this.rowItemCount);
+            }
+            // Set startItemIndex to the first item in the current or previous row
+            var startItemIndex = (lastItemIndex - this.rowItemCount > 0) ? lastItemIndex - this.rowItemCount : 0;
+            // Set the items array to the items in the current or previous row
+            this.items = this.largeIconInstance.allItems.slice(startItemIndex, lastItemIndex);
+            if (this.items.length > 0) {
+                // Create a list of elements from the items array
+                var listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                // Set the itemList array to the list items in the list elements
+                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, listElements));
+                // Add the items to the beginning of the list
+                for (var len = this.itemList.length; len > 0; len--) {
+                    this.largeIconInstance.element.firstElementChild.insertBefore(this.itemList[len - 1], this.topElement.nextElementSibling);
+                }
+                // Remove the last row of items from the list
+                for (var i = 0; i < ((isAllRendered) ? this.lastRowCount : this.rowItemCount); i++) {
+                    detach(this.bottomElement.previousElementSibling);
+                }
+            }
+        }
+    };
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    Virtualization.prototype.getModuleName = function () {
+        return 'virtualization';
+    };
+    /**
+     * Destroys the component.
+     *
+     * @returns {void}
+     */
+    Virtualization.prototype.destroy = function () {
+        // If the file manager has already been destroyed, return immediately
+        if (this.filemanagerInstance.isDestroyed) {
+            return;
+        }
+        // If the large icon element has a child element, unwire the scroll event
+        if (!isNullOrUndefined(this.largeIconInstance.element.firstElementChild)) {
+            this.wireScrollEvent(true);
+        }
+    };
+    return Virtualization;
+}());
+export { Virtualization };