@syncfusion/ej2-lists 19.3.53 → 19.4.38

package/dist/ts/sortable/sortable.ts

@@ -0,0 +1,457 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Base, Event, getUniqueID, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';
+import { closest, Draggable, DragPosition, MouseEventArgs, remove, compareElementParent } from '@syncfusion/ej2-base';
+import { addClass, isNullOrUndefined, getComponent, isBlazor, BlazorDragEventArgs } from '@syncfusion/ej2-base';
+import { SortableModel } from './sortable-model';
+
+/**
+ * Sortable Module provides support to enable sortable functionality in Dom Elements.
+ * ```html
+ * <div id="sortable">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ *   <div>Item 4</div>
+ *   <div>Item 5</div>
+ * </div>
+ * ```
+ * ```typescript
+ *   let ele: HTMLElement = document.getElementById('sortable');
+ *   let sortObj: Sortable = new Sortable(ele, {});
+ * ```
+ */
+@NotifyPropertyChanges
+export class Sortable extends Base<HTMLElement> implements INotifyPropertyChanged {
+    private target: HTMLElement;
+    private curTarget: HTMLElement;
+    private placeHolderElement: HTMLElement;
+    /**
+     * It is used to enable or disable the built-in animations. The default value is `false`
+     *
+     * @default false
+     */
+
+    @Property(false)
+    public enableAnimation: boolean;
+    /**
+     * Specifies the sortable item class.
+     *
+     * @default null
+     */
+    @Property(null)
+    public itemClass: string;
+    /**
+     * Defines the scope value to group sets of sortable libraries.
+     * More than one Sortable with same scope allows to transfer elements between different sortable libraries which has same scope value.
+     */
+    @Property(null)
+    public scope: string;
+    /**
+     * Defines the callback function for customizing the cloned element.
+     */
+    @Property()
+    public helper: (Element: object) => HTMLElement;
+    /**
+     * Defines the callback function for customizing the placeHolder element.
+     */
+    @Property()
+    public placeHolder: (Element: object) => HTMLElement;
+    /**
+     * Specifies the callback function for drag event.
+     *
+     * @event 'object'
+     */
+
+ 
+    @Event()
+    public drag: (e: any) => void;
+    /* es-lint enable  */
+    /**
+     * Specifies the callback function for beforeDragStart event.
+     *
+     *  @event 'object'
+     */
+ 
+    @Event()
+    public beforeDragStart: (e: any) => void;
+    /* es-lint enable  */
+    /**
+     * Specifies the callback function for dragStart event.
+     *
+     *  @event 'object'
+     */
+    @Event()
+    public dragStart: (e: any) => void;
+    /* es-lint enable  */
+    /**
+     * Specifies the callback function for beforeDrop event.
+     *
+     *  @event 'object'
+     */
+    @Event()
+    public beforeDrop: (e: any) => void;
+    /* es-lint enable  */
+    /**
+     * Specifies the callback function for drop event.
+     *
+     *  @event 'object'
+     */
+
+    @Event()
+    public drop: (e: any) => void;
+    /* es-lint enable  */
+    constructor(element: HTMLElement, options?: SortableModel) {
+        super(options, element);
+        this.bind();
+    }
+    protected bind(): void {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('sortable');
+        }
+        if (!this.itemClass) {
+            this.itemClass = 'e-sort-item';
+            this.dataBind();
+        }
+        this.initializeDraggable();
+    }
+    private initializeDraggable(): void {
+        new Draggable(this.element, {
+            helper: this.getHelper,
+            dragStart: this.onDragStart,
+            drag: this.onDrag,
+            dragStop: this.onDragStop,
+            dragTarget: `.${this.itemClass}`,
+            enableTapHold: true,
+            tapHoldThreshold: 200,
+            queryPositionInfo: this.queryPositionInfo,
+            distance: 5
+        });
+    }
+    private getPlaceHolder(target: HTMLElement, instance: Sortable): HTMLElement {
+        if (instance.placeHolder) {
+            const placeHolderElement: HTMLElement = instance.placeHolder(
+                { element: instance.element, grabbedElement: this.target, target: target });
+            placeHolderElement.classList.add('e-sortable-placeholder');
+            return placeHolderElement;
+        }
+        return null;
+    }
+    // eslint-disable-next-line
+    private getHelper: Function = (e: { sender: MouseEventArgs, element: HTMLElement }) => {
+        // eslint-disable-next-line prefer-const
+        let target: HTMLElement = this.getSortableElement(e.sender.target as HTMLElement);
+        if (!this.isValidTarget(target as Element, this)) {
+            return false;
+        }
+        let element: HTMLElement;
+        if (this.helper) {
+            element = this.helper({ sender: target, element: e.element });
+        } else {
+            element = target.cloneNode(true) as HTMLElement;
+            element.style.width = `${target.offsetWidth}px`; element.style.height = `${target.offsetHeight}px`;
+        }
+        addClass([element], ['e-sortableclone']);
+        document.body.appendChild(element);
+        return element;
+    }
+    private isValidTarget(target: Element, instance: Sortable): boolean {
+        return target && compareElementParent(target, instance.element) && target.classList.contains(instance.itemClass) &&
+            !target.classList.contains('e-disabled');
+    }
+    // eslint-disable-next-line
+    private onDrag: Function = (e: { target: HTMLElement, event: MouseEventArgs }) => {
+        this.trigger('drag', { event: e.event, element: this.element, target: e.target });
+        let newInst: Sortable = this.getSortableInstance(e.target); let target: HTMLElement = this.getSortableElement(e.target, newInst);
+        if ((this.isValidTarget(target, newInst) || e.target.className.indexOf('e-list-group-item') > -1) && (this.curTarget !== target ||
+            !isNullOrUndefined(newInst.placeHolder)) && (newInst.placeHolderElement ? newInst.placeHolderElement !== e.target :
+                true)) {
+            if (e.target.className.indexOf('e-list-group-item') > -1) {
+                target = e.target;
+            }
+            this.curTarget = target;
+            if (this.target === target) { return; }
+            let oldIdx: number = this.getIndex(newInst.placeHolderElement, newInst);
+            const placeHolder: HTMLElement = this.getPlaceHolder(target, newInst);
+            let newIdx: number;
+            if (placeHolder) {
+                oldIdx = isNullOrUndefined(oldIdx) ? this.getIndex(this.target) : oldIdx;
+                newIdx = this.getIndex(target, newInst, e.event);
+                const isPlaceHolderPresent: boolean = this.isPlaceHolderPresent(newInst);
+                if (isPlaceHolderPresent && oldIdx === newIdx) { return; }
+                if (isPlaceHolderPresent) { remove(newInst.placeHolderElement); }
+                newInst.placeHolderElement = placeHolder;
+                if (e.target.className.indexOf('e-list-group-item') > -1) {
+                    newInst.element.insertBefore(newInst.placeHolderElement, newInst.element.children[newIdx]);
+                } else if (newInst.element !== this.element && newIdx === newInst.element.childElementCount) {
+                    newInst.element.appendChild(newInst.placeHolderElement);
+                } else {
+                    newInst.element.insertBefore(newInst.placeHolderElement, newInst.element.children[newIdx]);
+                }
+                this.refreshDisabled(oldIdx, newIdx, newInst);
+            } else {
+                oldIdx = isNullOrUndefined(oldIdx) ? this.getIndex(this.target) :
+                    this.getIndex(target, newInst) < oldIdx || !oldIdx ? oldIdx : oldIdx - 1;
+                newIdx = this.getIndex(target, newInst);
+                const idx: number = newInst.element !== this.element ? newIdx : oldIdx < newIdx ? newIdx + 1 : newIdx;
+                this.updateItemClass(newInst);
+                newInst.element.insertBefore(this.target, newInst.element.children[idx]);
+                this.refreshDisabled(oldIdx, newIdx, newInst);
+                this.curTarget = this.target;
+                this.trigger('drop', {
+                    droppedElement: this.target, element: newInst.element, previousIndex: oldIdx, currentIndex: newIdx,
+                    target: e.target, helper: document.getElementsByClassName('e-sortableclone')[0], event: e.event, scope: this.scope
+                });
+            }
+        }
+        newInst = this.getSortableInstance(this.curTarget);
+        if (isNullOrUndefined(target) && e.target !== newInst.placeHolderElement) {
+            if (this.isPlaceHolderPresent(newInst)) { this.removePlaceHolder(newInst); }
+        } else {
+            const placeHolders: Element[] = [].slice.call(document.getElementsByClassName('e-sortable-placeholder')); let inst: Sortable;
+            placeHolders.forEach((placeHolder: Element) => {
+                inst = this.getSortableInstance(placeHolder);
+                if (inst.element && inst !== newInst) { this.removePlaceHolder(inst); }
+            });
+        }
+    }
+    private removePlaceHolder(instance: Sortable): void {
+        remove(instance.placeHolderElement);
+        instance.placeHolderElement = null;
+    }
+    private updateItemClass(instance: Sortable): void {
+        if (this !== instance) {
+            this.target.classList.remove(this.itemClass);
+            this.target.classList.add(instance.itemClass);
+        }
+    }
+    private getSortableInstance(element: Element): Sortable {
+        element = closest(element, `.e-${this.getModuleName()}`);
+        if (element) {
+            const inst: Sortable = getComponent(element as HTMLElement, Sortable) as Sortable;
+            return inst.scope && this.scope && inst.scope === this.scope ? inst : this;
+        } else {
+            return this;
+        }
+    }
+    private refreshDisabled(oldIdx: number, newIdx: number, instance: Sortable): void {
+        if (instance === this) {
+            let element: Element; const increased: boolean = oldIdx < newIdx; let disabledIdx: number;
+            let start: number = increased ? oldIdx : newIdx; const end: number = increased ? newIdx : oldIdx;
+            while (start <= end) {
+                element = this.element.children[start];
+                if (element.classList.contains('e-disabled')) {
+                    disabledIdx = this.getIndex(element);
+                    this.element.insertBefore(element, this.element.children[increased ? disabledIdx + 2 : disabledIdx - 1]);
+                    start = increased ? disabledIdx + 2 : disabledIdx + 1;
+                } else {
+                    start++;
+                }
+            }
+        }
+    }
+    private getIndex(target: Element, instance: Sortable = this, e?: MouseEventArgs): number {
+        let idx: number; let placeHolderPresent: boolean;
+        [].slice.call(instance.element.children).forEach((element: HTMLElement, index: number): void => {
+            if (element.classList.contains('e-sortable-placeholder')) { placeHolderPresent = true; }
+            if (element === target) {
+                idx = index;
+                if (!isNullOrUndefined(e)) {
+                    if (placeHolderPresent) { idx -= 1; }
+                    const offset: ClientRect = target.getBoundingClientRect();
+                    const clientY: number = offset.bottom - ((offset.bottom - offset.top) / 2);
+                    idx = e.clientY <= clientY ? idx : idx + 1;
+                }
+                return;
+            }
+        });
+        return idx;
+    }
+    private getSortableElement(element: HTMLElement, instance: Sortable = this): HTMLElement {
+        return closest(element, `.${instance.itemClass}`) as HTMLElement;
+    }
+    // eslint-disable-next-line
+    private onDragStart: Function = (e: { target: HTMLElement, event: MouseEventArgs, helper: Element } & BlazorDragEventArgs) => {
+        this.target = this.getSortableElement(e.target);
+        let cancelDrag: boolean = false;
+        this.target.classList.add('e-grabbed');
+        this.curTarget = this.target;
+        e.helper = document.getElementsByClassName('e-sortableclone')[0];
+        const args: object = { cancel: false, element: this.element, target: this.target };
+        this.trigger('beforeDragStart', args, (observedArgs: BeforeDragEventArgs) => {
+            if (observedArgs.cancel) {
+                cancelDrag = observedArgs.cancel;
+                this.onDragStop(e);
+            }
+        });
+        if (cancelDrag) {
+            return;
+        }
+        if (isBlazor) {
+            this.trigger('dragStart', {
+                event: e.event, element: this.element, target: this.target,
+                bindEvents: e.bindEvents, dragElement: e.dragElement
+            });
+        } else {
+            this.trigger('dragStart', { event: e.event, element: this.element, target: this.target });
+        }
+    }
+    private queryPositionInfo(value: DragPosition): DragPosition {
+        value.left = pageXOffset ? `${parseFloat(value.left) - pageXOffset}px` : value.left;
+        value.top = pageYOffset ? `${parseFloat(value.top) - pageYOffset}px` : value.top;
+        return value;
+    }
+    private isPlaceHolderPresent(instance: Sortable): boolean {
+        return instance.placeHolderElement && !!closest(instance.placeHolderElement, `#${instance.element.id}`);
+    }
+    // eslint-disable-next-line
+    private onDragStop: Function = (e: { target: HTMLElement, event: MouseEvent & TouchEvent, helper: Element }) => {
+        let dropInst: Sortable = this.getSortableInstance(this.curTarget); let prevIdx: number; let curIdx: number; let handled: boolean;
+        prevIdx = this.getIndex(this.target);
+        const isPlaceHolderPresent: boolean = this.isPlaceHolderPresent(dropInst);
+        if (isPlaceHolderPresent) {
+            const curIdx: number = this.getIndex(dropInst.placeHolderElement, dropInst);
+            const args: DropEventArgs = {
+                previousIndex: prevIdx, currentIndex: curIdx, target: e.target, droppedElement: this.target,
+                helper: e.helper, cancel: false, handled: false
+            };
+            this.trigger('beforeDrop', args, (observedArgs: DropEventArgs) => {
+                if (!observedArgs.cancel) {
+                    handled = observedArgs.handled;
+                    this.updateItemClass(dropInst);
+                    if (observedArgs.handled) {
+                        const ele: Node = this.target.cloneNode(true);
+                        this.target.classList.remove('e-grabbed');
+                        this.target = ele as HTMLElement;
+                    }
+                    dropInst.element.insertBefore(this.target, dropInst.placeHolderElement);
+                    const curIdx: number = this.getIndex(this.target, dropInst);
+                    prevIdx = this === dropInst && (prevIdx - curIdx) > 1 ? prevIdx - 1 : prevIdx;
+                    this.trigger('drop', {
+                        event: e.event, element: dropInst.element, previousIndex: prevIdx, currentIndex: curIdx,
+                        target: e.target, helper: e.helper, droppedElement: this.target, scopeName: this.scope, handled: handled
+                    });
+                }
+                remove(dropInst.placeHolderElement);
+            });
+        }
+        dropInst = this.getSortableInstance(e.target);
+        // eslint-disable-next-line prefer-const
+        curIdx = dropInst.element.childElementCount;
+        prevIdx = this.getIndex(this.target);
+        if (dropInst.element === e.target || (!isPlaceHolderPresent && this.curTarget === this.target)) {
+            const beforeDropArgs: DropEventArgs = {
+                previousIndex: prevIdx, currentIndex: this.curTarget === this.target ? prevIdx : curIdx,
+                target: e.target, droppedElement: this.target, helper: e.helper, cancel: false
+            };
+            this.trigger('beforeDrop', beforeDropArgs, (observedArgs: DropEventArgs) => {
+                if (dropInst.element === e.target && !observedArgs.cancel) {
+                    this.updateItemClass(dropInst);
+                    dropInst.element.appendChild(this.target);
+                    this.trigger('drop', {
+                        event: e.event, element: dropInst.element, previousIndex: prevIdx, currentIndex: curIdx,
+                        target: e.target, helper: e.helper, droppedElement: this.target, scopeName: this.scope
+                    });
+                }
+            });
+        }
+        this.target.classList.remove('e-grabbed');
+        this.target = null;
+        this.curTarget = null;
+        remove(e.helper);
+        (getComponent(this.element, Draggable) as Draggable).intDestroy(e.event);
+    }
+    /**
+     * It is used to sort array of elements from source element to destination element.
+     *
+     * @param destination - Defines the destination element to which the sortable elements needs to be appended.
+     *
+     * If it is null, then the Sortable library element will be considered as destination.
+     * @param targetIndexes - Specifies the sortable elements indexes which needs to be sorted.
+     * @param insertBefore - Specifies the index before which the sortable elements needs to be appended.
+     * If it is null, elements will be appended as last child.
+     * @function moveTo
+     * @returns {void}
+     */
+
+    public moveTo(destination?: HTMLElement, targetIndexes?: number[], insertBefore?: number): void {
+        moveTo(this.element, destination, targetIndexes, insertBefore);
+    }
+
+    /**
+     * It is used to destroy the Sortable library.
+     */
+
+    public destroy(): void {
+        if (this.itemClass === 'e-sort-item') { this.itemClass = null; this.dataBind(); }
+        (getComponent(this.element, Draggable) as Draggable).destroy();
+        super.destroy();
+    }
+    public getModuleName(): string {
+        return 'sortable';
+    }
+    public onPropertyChanged(newProp: SortableModel, oldProp: SortableModel): void {
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'itemClass':
+                    [].slice.call(this.element.children).forEach((element: HTMLElement): void => {
+                        if (element.classList.contains(oldProp.itemClass)) {
+                            element.classList.remove(oldProp.itemClass);
+                        }
+                        if (newProp.itemClass) {
+                            element.classList.add(newProp.itemClass);
+                        }
+                    });
+                    break;
+            }
+        }
+    }
+}
+
+/**
+ * It is used to sort array of elements from source element to destination element.
+ *
+ * @private
+ */
+
+export function moveTo(from: HTMLElement, to?: HTMLElement, targetIndexes?: number[], insertBefore?: number): void {
+    let targetElements: Element[] = [];
+    if (!to) { to = from; }
+    if (targetIndexes && targetIndexes.length) {
+        targetIndexes.forEach((index: number): void => {
+            targetElements.push(from.children[index]);
+        });
+    } else {
+        targetElements = [].slice.call(from.children);
+    }
+    if (isNullOrUndefined(insertBefore)) {
+        targetElements.forEach((target: Element): void => {
+            to.appendChild(target);
+        });
+    } else {
+        const insertElement: HTMLElement = to.children[insertBefore] as HTMLElement;
+        targetElements.forEach((target: Element): void => {
+            to.insertBefore(target, insertElement);
+        });
+    }
+}
+
+/**
+ * An interface that holds item drop event arguments
+ */
+export interface DropEventArgs {
+    previousIndex: number;
+    currentIndex: number;
+    droppedElement: Element;
+    target: Element;
+    helper: Element;
+    cancel?: boolean;
+    handled?: boolean;
+}
+
+/**
+ * An interface that holds item before drag event arguments
+ */
+export interface BeforeDragEventArgs {
+    cancel?: boolean;
+    target: Element;
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-lists@*",
-  "_id": "@syncfusion/ej2-lists@19.3.45",
+  "_id": "@syncfusion/ej2-lists@18.14.0",
   "_inBundle": false,
-  "_integrity": "sha512-GT5gLmp/nT4bKydUCumvFVDylUeQKRO0p9Fv9LPHl6d8qU8+ES1tMOsQ3DRkataMJ2UG5y/i1Uc/QkkuXuB9wg==",
+  "_integrity": "sha512-zVH7602lk9s2Os99r5I3CnJSYqcOk9QQZHwdKlaZDNp1O8yhTb6TbdcHMpPkNp3RcwvXxsIXYMC1K5WRFpbThg==",
   "_location": "/@syncfusion/ej2-lists",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-lists"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-lists/-/ej2-lists-19.3.45.tgz",
-  "_shasum": "85c528c399c66a61cba765f98b5cb81e204fb983",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-lists/-/ej2-lists-18.14.0.tgz",
+  "_shasum": "ab216d34f4964b0e6edddfe7a5414a50f317768e",
   "_spec": "@syncfusion/ej2-lists@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,9 +43,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.53",
-    "@syncfusion/ej2-buttons": "~19.3.53",
-    "@syncfusion/ej2-data": "~19.3.53"
+    "@syncfusion/ej2-base": "~19.4.38",
+    "@syncfusion/ej2-buttons": "~19.4.38",
+    "@syncfusion/ej2-data": "~19.4.38"
   },
   "deprecated": false,
   "description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.",
@@ -85,6 +85,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/lists"
   },
   "typings": "index.d.ts",
-  "version": "19.3.53",
+  "version": "19.4.38",
   "sideEffects": false
 }

package/src/common/list-base.js

@@ -636,7 +636,7 @@ export var ListBase;
             else {
                 var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;
                 if (isHeader) {
-                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() != "listview") {
                         // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -648,7 +648,7 @@ export var ListBase;
                     }
                 }
                 else {
-                    if (componentInstance && componentInstance.getModuleName() !== 'listview') {
+                    if (componentInstance && componentInstance.getModuleName() != "listview") {
                         // eslint-disable-next-line
                         var compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);
                         if (compiledElement) {
@@ -704,7 +704,7 @@ export var ListBase;
             var headerData = {};
             headerData[category] = header.textContent;
             header.innerHTML = '';
-            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
+            if (componentInstance && componentInstance.getModuleName() != "listview") {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);
                 if (compiledElement) {
@@ -888,7 +888,7 @@ export var ListBase;
         if (grpLI && options && options.groupTemplate) {
             // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.groupTemplate);
-            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
+            if (componentInstance && componentInstance.getModuleName() != "listview") {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {
@@ -902,7 +902,7 @@ export var ListBase;
         else if (!grpLI && options && options.template) {
             // eslint-disable-next-line @typescript-eslint/ban-types
             var compiledString = compileTemplate(options.template);
-            if (componentInstance && componentInstance.getModuleName() !== 'listview') {
+            if (componentInstance && componentInstance.getModuleName() != "listview") {
                 // eslint-disable-next-line
                 var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
                 if (compiledElement) {

package/styles/list-view/_fluent-definition.scss

@@ -0,0 +1,134 @@
+//layout
+$listview-icon-margin-right: 12px !default;
+$listview-icon-back-margin: 0 !default;
+$listview-rtl-icon-back-margin: 4px !default;
+$listview-item-height: 38px !default;
+$listview-item-line-height: 22px !default;
+$listview-item-padding: 7px 9px 7px 12px !default;
+$listview-rtl-item-padding: 7px 12px 7px 9px !default;
+$listview-header-padding: 6px 12px !default;
+$listview-back-icon-font-size: 14px !default;
+$listview-root-border-radius: 0 !default;
+$listview-nested-icon-collapsible: 12px !default;
+$listview-icon-size: 20px !default;
+$listview-header-text-padding: 12px !default;
+$listview-header-height: 38px !default;
+$listview-header-line-height: 18px !default;
+$listview-border-bottom: 0 !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-first-border-bottom: 0 !default;
+$listview-group-border-top: 1px !default;
+$listview-group-border-bottom: 0 !default;
+$listview-groupheader-item-height: 38px !default;
+$listview-groupheader-item-line-height: 22px !default;
+$listview-groupheader-font-size: $text-sm !default;
+$listview-border-size: 1px !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 12px !default;
+$listview-back-icon-size: 20px !default;
+$listview-touch-item-height: 44px !default;
+$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-size: 24px !default;
+$listview-touch-item-padding: 12px 14px 12px 16px !default;
+$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 44px !default;
+$listview-touch-groupheader-line-height: 24px !default;
+$listview-touch-header-height: 44px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-touch-icon-margin-right: 12px !default;
+$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
+$listview-touch-checkbox-left-margin: 0 12px 0 0 !default;
+$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
+$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: 3px 12px 3px 0 !default;
+$listview-rtl-checkbox-left-margin: 0 3px 3px 12px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+//ListView In-built template variables
+$listview-template-touch-font-size: $text-base !default;
+$listview-template-padding: 10px 16px !default;
+$listview-template-touch-padding: 12px 16px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-touch-size: 48px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-margin: 7px 16px 7px 12px !default;
+$listview-template-avatar-rtl-margin: 7px 12px 7px 16px !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 18px !default;
+$listview-template-badge-width: 20px !default;
+$listview-template-badge-line-height: 16px !default;
+$listview-template-badge-font-size: $text-xxs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 6px 4px !default;
+$listview-template-multiline-touch-padding: 8px 4px !default;
+$listview-template-multiline-content-font-size: $text-xs !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listview-touch-template-padding: 12px 16px !default;
+$listview-touch-template-multiline-padding: 7px !default;
+$listview-touch-template-avatar-padding-left: 88px !default;
+$listview-touch-template-avatar-size: 48px !default;
+$listview-touch-template-multiline-header-font-size: $text-base !default;
+$listview-touch-template-multiline-header-line-height: 24px !default;
+$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
+$listview-touch-template-badge-height: 20px !default;
+$listview-touch-template-badge-width: 34px !default;
+$listview-touch-template-badge-line-height: 18px !default;
+$listview-touch-template-badge-font-size: $text-xs !default;
+//color
+$listview-font-family: $font-family !default;
+$listview-text-color: $content-text-color !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: $icon-color !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-background: $transparent !default;
+$listview-line-color: $border-light !default;
+$listview-item-hover-bg: $content-bg-color-hover !default;
+$listview-text-hover-color: $content-text-color-hover !default;
+$listview-item-active-bg: $content-bg-color-selected !default;
+$listview-root-border-color: $border-light !default;
+$listview-text-active-color: $content-text-color-selected !default;
+$listview-header-text-color: $primary !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: transparent !default;
+$listview-header-icon-color: $icon-color !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: $border-light !default;
+$listview-header-font-size: $text-sm !default;
+$listview-header-font-weight: $font-weight-medium !default;
+$listview-hover-border-color: $border-light !default;
+$listview-border-bottom-color: $border-light !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-groupheader-text-color: $primary !default;
+$listview-groupheader-bg: transparent !default;
+$listview-groupheader-icon: $icon-color !default;
+$listview-focused-collapsible-color: $content-text-color-selected !default;
+$listview-icon-hover: $icon-color-hover !default;
+$listview-icon-pressed: $icon-color-pressed !default;
+$checkmark-bgcolor: $content-bg-color !default;
+$checkmark-border-color: $content-bg-color !default;
+$checkmark-color: $primary !default;
+//ListView In-built template variables
+$listview-template-multiline-header-color: $content-text-color !default;
+$listview-template-multiline-content-color: $content-text-color-alt3 !default;
+$listview-template-focused-multiline-content-color: $content-text-color-selected !default;