@syncfusion/ej2-lists 22.2.11 → 23.1.42

package/src/list-view/list-view.js

@@ -22,7 +22,7 @@ import { attributes, addClass, removeClass, prepend, closest, remove } from '@sy
 import { Component, EventHandler, Property, Complex, Event } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
 import { compile, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
-import { Animation, rippleEffect, Touch } from '@syncfusion/ej2-base';
+import { Animation, rippleEffect, Touch, animationMode } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { ListBase, getFieldValues } from '../common/list-base';
@@ -386,7 +386,7 @@ var ListView = /** @class */ (function (_super) {
             this.element.style.overflow = 'hidden';
             this.aniObj.animate(fromView, {
                 name: (reverse === true ? anim[0] : anim[1]),
-                duration: duration,
+                duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
                 timingFunction: this.animation.easing,
                 // eslint-disable-next-line
                 end: function (model) {
@@ -399,7 +399,7 @@ var ListView = /** @class */ (function (_super) {
             toView.style.display = '';
             this.aniObj.animate(toView, {
                 name: (reverse === true ? anim[2] : anim[3]),
-                duration: duration,
+                duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
                 timingFunction: this.animation.easing,
                 end: function () {
                     _this.trigger('actionComplete');
@@ -411,7 +411,7 @@ var ListView = /** @class */ (function (_super) {
     ListView.prototype.preRender = function () {
         if (this.template) {
             try {
-                if (document.querySelectorAll(this.template).length) {
+                if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
                     this.setProperties({ template: document.querySelector(this.template).innerHTML.trim() }, true);
                 }
             }
@@ -424,7 +424,7 @@ var ListView = /** @class */ (function (_super) {
             headerTemplate: this.headerTemplate,
             groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',
             ariaAttributes: {
-                itemRole: 'listitem', listRole: 'group', itemText: '',
+                itemRole: 'listitem', listRole: 'list', itemText: '',
                 groupItemRole: 'presentation', wrapperRole: 'presentation'
             },
             // eslint-disable-next-line
@@ -1371,18 +1371,6 @@ var ListView = /** @class */ (function (_super) {
         if (this.enableVirtualization) {
             if (Object.keys(this.dataSource).length) {
                 if ((this.template || this.groupTemplate) && !this.virtualizationModule.isNgTemplate()) {
-                    if (this.isReact || this.isVue) {
-                        if (typeof this.template == "string") {
-                            this.listBaseOption.template = null;
-                        }
-                        if (typeof this.groupTemplate == "string") {
-                            this.listBaseOption.groupTemplate = null;
-                        }
-                    }
-                    else {
-                        this.listBaseOption.template = null;
-                        this.listBaseOption.groupTemplate = null;
-                    }
                     this.listBaseOption.itemCreated = this.virtualizationModule.createUIItem.bind(this.virtualizationModule);
                 }
             }
@@ -1415,7 +1403,7 @@ var ListView = /** @class */ (function (_super) {
      */
     ListView.prototype.render = function () {
         this.element.classList.add(classNames.root);
-        attributes(this.element, { role: 'list', tabindex: '0' });
+        attributes(this.element, { tabindex: '0' });
         this.setCSSClass();
         this.setEnableRTL();
         this.setEnable();

package/src/list-view/virtualization.d.ts

@@ -31,6 +31,9 @@ export declare class Virtualization {
     private uiIndices;
     private listDiff;
     private elementDifference;
+    private templateFunction;
+    private groupTemplateFunction;
+    private commonTemplate;
     /**
      * For internal use only.
      *
@@ -80,9 +83,6 @@ export declare class Virtualization {
     private compileTemplate;
     private onChange;
     private updateContextData;
-    private classProperty;
-    private attributeProperty;
-    private textProperty;
     reRenderUiVirtualization(): void;
     private updateUI;
     /**

package/src/list-view/virtualization.js

@@ -31,6 +31,10 @@ var Virtualization = /** @class */ (function () {
      * @private
      */
     Virtualization.prototype.uiVirtualization = function () {
+        this.commonTemplate = '<div class="e-text-content" role="presentation"> ' +
+            '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+        this.templateFunction = compile(this.listViewInstance.template || this.commonTemplate, this.listViewInstance);
+        this.groupTemplateFunction = compile(this.listViewInstance.groupTemplate || this.commonTemplate, this.listViewInstance);
         this.wireScrollEvent(false);
         var curViewDS = this.listViewInstance.curViewDS;
         var firstDs = curViewDS.slice(0, 1);
@@ -786,83 +790,139 @@ var Virtualization = /** @class */ (function () {
         this.refreshItemHeight();
     };
     Virtualization.prototype.createUIItem = function (args) {
-        var virtualTemplate = this.listViewInstance.template;
-        var template = this.listViewInstance.createElement('div');
-        var commonTemplate = '<div class="e-text-content" role="presentation"> ' +
-            '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
+        var template = document.createElement('div');
+        this.templateData = args.curData.isHeader ? args.curData.items[0] :
+            args.curData;
         if (this.listViewInstance.isReact) {
-            commonTemplate = null;
+            this.commonTemplate = null;
         }
         if (this.listViewInstance.showCheckBox) {
             // eslint-disable-next-line
             this.listViewInstance.renderCheckbox(args);
             if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
                 (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
-                var div = document.createElement('div');
-                div.innerHTML = this.listViewInstance.template || commonTemplate;
-                if (div.children && div.children[0]) {
-                    div.children[0].classList.add('e-checkbox');
+                var div_1 = document.createElement('div');
+                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
+                if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                    this.listViewInstance.renderReactTemplates();
+                }
+                [].slice.call(nodes).forEach(function (ele) {
+                    div_1.appendChild(ele);
+                });
+                if (div_1.children && div_1.children[0]) {
+                    div_1.children[0].classList.add('e-checkbox');
                     if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div.children[0].classList.add('e-checkbox-left');
+                        div_1.children[0].classList.add('e-checkbox-left');
                     }
                     else {
-                        div.children[0].classList.add('e-checkbox-right');
+                        div_1.children[0].classList.add('e-checkbox-right');
                     }
                     if (this.listViewInstance.checkBoxPosition === 'Left') {
-                        div.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div.childNodes[0].children[0]);
+                        div_1.children[0].insertBefore(this.listViewInstance.virtualCheckBox, div_1.childNodes[0].children[0]);
                     }
                     else {
-                        div.children[0].appendChild(this.listViewInstance.virtualCheckBox);
+                        div_1.children[0].appendChild(this.listViewInstance.virtualCheckBox);
                     }
-                    this.listViewInstance.template = div.innerHTML;
+                    template.innerHTML = div_1.innerHTML;
                 }
             }
-            if (this.isVueFunctionTemplate())
-                return;
-            template.innerHTML = this.listViewInstance.template;
-            this.listViewInstance.template = virtualTemplate;
+            else {
+                var div_2 = document.createElement('div');
+                var nodes = this.templateFunction(this.templateData, this.listViewInstance);
+                if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                    this.listViewInstance.renderReactTemplates();
+                }
+                [].slice.call(nodes).forEach(function (ele) {
+                    div_2.appendChild(ele);
+                });
+                template.innerHTML = div_2.innerHTML;
+            }
         }
         else {
-            if (this.isVueFunctionTemplate())
-                return;
-            template.innerHTML = this.listViewInstance.template || commonTemplate;
-        }
-        // eslint-disable-next-line
-        var templateElements = template.getElementsByTagName('*');
-        var groupTemplate = this.listViewInstance.createElement('div');
-        if (this.listViewInstance.fields.groupBy) {
-            groupTemplate.innerHTML = this.listViewInstance.groupTemplate || commonTemplate;
+            var nodes = this.templateFunction(this.templateData, this.listViewInstance);
+            if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                this.listViewInstance.renderReactTemplates();
+            }
+            [].slice.call(nodes).forEach(function (ele) {
+                template.appendChild(ele);
+            });
         }
-        // eslint-disable-next-line
-        var groupTemplateElements = groupTemplate.getElementsByTagName('*');
         if (args.curData.isHeader) {
             this.headerData = args.curData;
         }
-        this.templateData = args.curData.isHeader ? args.curData.items[0] :
-            args.curData;
-        if (!this.listViewInstance.isReact || (typeof this.listViewInstance.template == "string" && !args.item.classList.contains("e-list-group-item")) ||
-            (typeof this.listViewInstance.groupTemplate == "string" && args.item.classList.contains("e-list-group-item"))) {
+        var groupTemplate = this.listViewInstance.createElement('div');
+        if (this.listViewInstance.fields.groupBy) {
+            var nodes = this.groupTemplateFunction(this.headerData, this.listViewInstance);
+            if (this.listViewInstance.template && this.listViewInstance.isReact) {
+                this.listViewInstance.renderReactTemplates();
+            }
+            [].slice.call(nodes).forEach(function (ele) {
+                groupTemplate.appendChild(ele);
+            });
+        }
+        if ((!this.listViewInstance.isReact || (typeof this.listViewInstance.template == "string" && !args.item.classList.contains("e-list-group-item")) ||
+            (typeof this.listViewInstance.groupTemplate == "string" && args.item.classList.contains("e-list-group-item"))) && !this.listViewInstance.isVue) {
             args.item.innerHTML = '';
         }
         args.item.context = { data: args.curData, nodes: { flatTemplateNodes: [], groupTemplateNodes: [] } };
-        for (var i = 0; i < templateElements.length; i++) {
-            this.compileTemplate(templateElements[i], args.item, false);
+        for (var i = 0; i < template.children.length; i++) {
+            this.compileTemplate(template.children[i], args.item, false);
         }
-        for (var i = 0; i < groupTemplateElements.length; i++) {
-            this.compileTemplate(groupTemplateElements[i], args.item, true);
+        for (var i = 0; i < groupTemplate.children.length; i++) {
+            this.compileTemplate(groupTemplate.children[i], args.item, true);
         }
         args.item.context.template = args.curData.isHeader ? template.firstElementChild :
             groupTemplate.firstElementChild;
         args.item.context.type = args.curData.isHeader ? 'flatList' : 'groupList';
         var element = args.curData.isHeader ? groupTemplate : template;
-        if (element.firstElementChild) {
+        if (element.firstElementChild && !this.listViewInstance.isReact && !this.listViewInstance.isVue) {
             args.item.insertBefore(element.firstElementChild, null);
         }
     };
     Virtualization.prototype.compileTemplate = function (element, item, isHeader) {
-        this.textProperty(element, item, isHeader);
-        this.classProperty(element, item, isHeader);
-        this.attributeProperty(element, item, isHeader);
+        var _this = this;
+        var subNode = {};
+        subNode.onChange = function (value) {
+            var groupTemplateElements;
+            var templateElements;
+            if (_this.listViewInstance.isVue) {
+                groupTemplateElements = _this.groupTemplateFunction(value);
+                templateElements = _this.templateFunction(value);
+            }
+            else {
+                groupTemplateElements = _this.groupTemplateFunction(value, _this.listViewInstance);
+                templateElements = _this.templateFunction(value, _this.listViewInstance);
+            }
+            if (_this.listViewInstance.template && _this.listViewInstance.isReact) {
+                _this.listViewInstance.renderReactTemplates();
+            }
+            var currentTemplate = templateElements;
+            if (value.isHeader) {
+                currentTemplate = groupTemplateElements;
+            }
+            [].slice.call(currentTemplate).forEach(function (currentElement) {
+                var RemovableClass = element.classList.value.replace('e-checkbox', '');
+                RemovableClass = RemovableClass.replace('e-checkbox-left', '');
+                RemovableClass = RemovableClass.replace('e-checkbox-right', '');
+                removeClass([element], RemovableClass.split(' ').filter(function (css) { return css; }));
+                addClass([element], Array.from(currentElement.classList));
+                for (var i = 0; i < element.attributes.length; i++) {
+                    if (element.attributes[i].name != 'class') {
+                        var newData = currentElement.getAttribute(element.attributes[i].name);
+                        element.setAttribute(element.attributes[i].name, newData);
+                    }
+                }
+                [].slice.call(element.children).forEach(function (ele) {
+                    if (!ele.classList.contains('e-listview-checkbox') && !(ele.classList.contains('e-checkbox-left') || ele.classList.contains('e-checkbox-right'))) {
+                        ele.remove();
+                    }
+                });
+                [].slice.call(currentElement.children).forEach(function (ele) {
+                    element.appendChild(ele);
+                });
+            });
+        };
+        this.updateContextData(item, subNode, isHeader);
     };
     Virtualization.prototype.onChange = function (newData, listElement) {
         listElement.context.data = newData;
@@ -916,183 +976,6 @@ var Virtualization = /** @class */ (function () {
             listElement.context.nodes.flatTemplateNodes.push(node);
         }
     };
-    Virtualization.prototype.classProperty = function (element, listElement, isHeader) {
-        var regex = new RegExp('\\${([^}]*)}', 'g');
-        var resultantOutput = [];
-        var regexMatch;
-        while (regexMatch !== null) {
-            var match = regex.exec(element.className);
-            resultantOutput.push(match);
-            regexMatch = match;
-            if (regexMatch === null) {
-                resultantOutput.pop();
-            }
-        }
-        if (resultantOutput && resultantOutput.length) {
-            var _loop_1 = function (i) {
-                var classNameMatch = resultantOutput[i];
-                // eslint-disable-next-line
-                var classFunction;
-                if (classNameMatch[1].indexOf('?') !== -1 && classNameMatch[1].indexOf(':') !== -1) {
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    classFunction = new Function('data', 'return ' + classNameMatch[1].replace(/\$/g, 'data.'));
-                }
-                else {
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    classFunction = new Function('data', 'return ' + 'data.' + classNameMatch[1]);
-                }
-                // eslint-disable-next-line
-                var subNode = {};
-                if (isHeader) {
-                    subNode.bindedvalue = classFunction(this_1.headerData);
-                }
-                else {
-                    subNode.bindedvalue = classFunction(this_1.templateData);
-                }
-                subNode.onChange = function (value) {
-                    if (subNode.bindedvalue) {
-                        removeClass([element], subNode.bindedvalue.split(' ').filter(function (css) { return css; }));
-                    }
-                    var newCss = classFunction(value);
-                    if (newCss) {
-                        addClass([element], (newCss).split(' ').filter(function (css) { return css; }));
-                    }
-                    subNode.bindedvalue = newCss;
-                };
-                var className = classNameMatch[0].split(' ');
-                for (var i_1 = 0; i_1 < className.length; i_1++) {
-                    element.classList.remove(className[i_1]);
-                }
-                if (subNode.bindedvalue) {
-                    addClass([element], subNode.bindedvalue.split(' ').filter(function (css) { return css; }));
-                }
-                this_1.updateContextData(listElement, subNode, isHeader);
-            };
-            var this_1 = this;
-            for (var i = 0; i < resultantOutput.length; i++) {
-                _loop_1(i);
-            }
-        }
-    };
-    Virtualization.prototype.attributeProperty = function (element, listElement, isHeader) {
-        var attributeNames = [];
-        for (var i = 0; i < element.attributes.length; i++) {
-            attributeNames.push(element.attributes[i].nodeName);
-        }
-        if (attributeNames.indexOf('class') !== -1) {
-            attributeNames.splice(attributeNames.indexOf('class'), 1);
-        }
-        var _loop_2 = function (i) {
-            var attributeName = attributeNames[i];
-            var attrNameMatch = new RegExp('\\${([^}]*)}', 'g').exec(attributeName) || [];
-            var attrValueMatch = new RegExp('\\${([^}]*)}', 'g').exec(element.getAttribute(attributeName))
-                || [];
-            // eslint-disable-next-line
-            var attributeNameFunction;
-            // eslint-disable-next-line
-            var attributeValueFunction;
-            if (attrNameMatch.length || attrValueMatch.length) {
-                if (attrNameMatch[1]) {
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    attributeNameFunction = new Function('data', 'return ' + 'data.' + attrNameMatch[1]);
-                }
-                if (attrValueMatch[1]) {
-                    if (attrValueMatch[1].indexOf('?') !== -1 && attrValueMatch[1].indexOf(':') !== -1) {
-                        // tslint:disable-next-line:no-function-constructor-with-string-args
-                        attributeValueFunction = new Function('data', 'return ' + attrValueMatch[1].replace(/\$/g, 'data.'));
-                    }
-                    else {
-                        // tslint:disable-next-line:no-function-constructor-with-string-args
-                        attributeValueFunction = new Function('data', 'return ' + 'data.' + attrValueMatch[1]);
-                    }
-                }
-                // eslint-disable-next-line @typescript-eslint/ban-types
-                var subNode_1 = {};
-                if (isHeader) {
-                    subNode_1.bindedvalue = [attrNameMatch[1] === undefined ? undefined : attributeNameFunction(this_2.headerData),
-                        attrValueMatch[1] === undefined ? undefined : attributeValueFunction(this_2.headerData)];
-                }
-                else {
-                    subNode_1.bindedvalue = [attrNameMatch[1] === undefined ? undefined : attributeNameFunction(this_2.templateData),
-                        attrValueMatch[1] === undefined ? undefined : attributeValueFunction(this_2.templateData)];
-                }
-                subNode_1.attrName = subNode_1.bindedvalue[0] === undefined ?
-                    attributeName : subNode_1.bindedvalue[0];
-                subNode_1.onChange = function (value) {
-                    var bindedvalue = subNode_1.bindedvalue[1] === undefined ?
-                        element.getAttribute(subNode_1.attrName) : attributeValueFunction(value);
-                    element.removeAttribute(subNode_1.attrName);
-                    subNode_1.attrName = subNode_1.bindedvalue[0] === undefined ? subNode_1.attrName : attributeNameFunction(value);
-                    element.setAttribute(subNode_1.attrName, bindedvalue);
-                    subNode_1.bindedvalue = [subNode_1.bindedvalue[0] === undefined ? undefined : attributeNameFunction(value),
-                        subNode_1.bindedvalue[1] === undefined ? undefined : attributeValueFunction(value)];
-                };
-                var attributeValue = subNode_1.bindedvalue[1] === undefined ? element.getAttribute(attributeName) :
-                    subNode_1.bindedvalue[1];
-                element.removeAttribute(attributeName);
-                element.setAttribute(subNode_1.attrName, attributeValue);
-                this_2.updateContextData(listElement, subNode_1, isHeader);
-            }
-        };
-        var this_2 = this;
-        for (var i = 0; i < attributeNames.length; i++) {
-            _loop_2(i);
-        }
-    };
-    Virtualization.prototype.textProperty = function (element, listElement, isHeader) {
-        var regex = new RegExp('\\${([^}]*)}', 'g');
-        var resultantOutput = [];
-        var regexMatch;
-        while (regexMatch !== null) {
-            var match = regex.exec(element.innerText);
-            resultantOutput.push(match);
-            regexMatch = match;
-            if (regexMatch === null) {
-                resultantOutput.pop();
-            }
-        }
-        var isChildHasTextContent = Array.prototype.some.call(element.children, function (element) {
-            if (new RegExp('\\${([^}]*)}', 'g').exec(element.innerText)) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
-        if (resultantOutput && resultantOutput.length && !isChildHasTextContent) {
-            var _loop_3 = function (i) {
-                var textPropertyMatch = resultantOutput[i];
-                // eslint-disable-next-line
-                var subNode = {};
-                // eslint-disable-next-line
-                var textFunction;
-                if (textPropertyMatch[1].indexOf('?') !== -1 && textPropertyMatch[1].indexOf(':') !== -1) {
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    textFunction = new Function('data', 'return ' + textPropertyMatch[1].replace(/\$/g, 'data.'));
-                }
-                else {
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    textFunction = new Function('data', 'return ' + 'data.' + textPropertyMatch[1]);
-                }
-                if (isHeader) {
-                    subNode.bindedvalue = textFunction(this_3.headerData);
-                }
-                else {
-                    subNode.bindedvalue = textFunction(this_3.templateData);
-                }
-                subNode.onChange = function (value) {
-                    element.innerText = element.innerText.replace(subNode.bindedvalue, textFunction(value));
-                    subNode.bindedvalue = textFunction(value);
-                };
-                element.innerText = element.innerText.replace(textPropertyMatch[0], subNode.bindedvalue);
-                this_3.updateContextData(listElement, subNode, isHeader);
-            };
-            var this_3 = this;
-            for (var i = 0; i < resultantOutput.length; i++) {
-                _loop_3(i);
-            }
-        }
-    };
     Virtualization.prototype.reRenderUiVirtualization = function () {
         this.wireScrollEvent(true);
         if (this.listViewInstance.contentContainer) {

package/styles/list-view/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-buttons/styles/check-box/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';

package/styles/list-view/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';
 @import 'icons/bootstrap.scss';

package/styles/list-view/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';
 @import 'icons/bootstrap4.scss';

package/styles/list-view/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-buttons/styles/check-box/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'icons/bootstrap5-dark.scss';

package/styles/list-view/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';
 @import 'icons/bootstrap5.scss';

package/styles/list-view/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-buttons/styles/check-box/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';
 @import 'icons/fabric-dark.scss';

package/styles/list-view/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'ej2-buttons/styles/check-box/fabric-definition.scss';
 @import 'fabric-definition.scss';
 @import 'icons/fabric.scss';

package/styles/list-view/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-buttons/styles/check-box/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';
 @import 'icons/fluent-dark.scss';

package/styles/list-view/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'ej2-buttons/styles/check-box/fluent-definition.scss';
 @import 'fluent-definition.scss';
 @import 'icons/fluent.scss';

package/styles/list-view/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-buttons/styles/check-box/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'icons/highcontrast-light.scss';

package/styles/list-view/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
 @import 'highcontrast-definition.scss';
 @import 'icons/highcontrast.scss';

package/styles/list-view/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .e-listview .e-icon-collapsible::before {
   content: "\e913";
 }

package/styles/list-view/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-buttons/styles/check-box/material-dark-definition.scss';
 @import 'material-dark-definition.scss';
 @import 'icons/material-dark.scss';

package/styles/list-view/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 .e-icon-collapsible::before {
   content: "\e913";
 }

package/styles/list-view/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'ej2-buttons/styles/check-box/material-definition.scss';
 @import 'material-definition.scss';
 @import 'icons/material.scss';

package/styles/list-view/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;

package/styles/list-view/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';
 @import 'material3-dark-definition.scss';

package/styles/list-view/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;

package/styles/list-view/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'ej2-buttons/styles/check-box/material3-definition.scss';
 @import 'material3-definition.scss';

package/styles/list-view/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");
 .e-icon-collapsible::before {
   content: "\e748";
 }

package/styles/list-view/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-buttons/styles/check-box/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';

package/styles/list-view/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");
 .e-icon-collapsible::before {
   content: "\e748";
 }

package/styles/list-view/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'icons/tailwind.scss';

package/styles/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .e-listview .e-icon-collapsible::before {
   content: "\e913";
 }

package/styles/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 .e-icon-collapsible::before {
   content: "\e913";
 }