@syncfusion/ej2-navigations 17.3.9-beta → 17.3.14-96615

package/src/treeview/treeview.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
@@ -1249,7 +1249,8 @@ var TreeView = /** @class */ (function (_super) {
         var eUids = this.expandedNodes;
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
-            if (this.fields.dataSource instanceof DataManager) {
+            // tslint:disable
+            if (this.fields.dataSource instanceof DataManager && (this.fields.dataSource.adaptorName !== 'BlazorAdaptor')) {
                 this.expandGivenNodes(eUids);
             }
             else {
@@ -1476,7 +1477,12 @@ var TreeView = /** @class */ (function (_super) {
         removeClass([liEle], NODECOLLAPSED);
         var id = liEle.getAttribute('data-uid');
         if (!isNOU(id) && this.expandedNodes.indexOf(id) === -1) {
-            this.expandedNodes.push(id);
+            if (this.isBlazorPlatform) {
+                this.setProperties({ expandedNodes: [].concat([], this.expandedNodes, [id]) }, true);
+            }
+            else {
+                this.expandedNodes.push(id);
+            }
         }
     };
     TreeView.prototype.collapseNode = function (currLi, icon, e) {
@@ -1561,7 +1567,14 @@ var TreeView = /** @class */ (function (_super) {
         }
         var index = this.expandedNodes.indexOf(liEle.getAttribute('data-uid'));
         if (index > -1) {
-            this.expandedNodes.splice(index, 1);
+            if (this.isBlazorPlatform) {
+                var removeVal = this.expandedNodes.slice(0);
+                removeVal.splice(index, 1);
+                this.setProperties({ expandedNodes: [].concat([], removeVal) }, true);
+            }
+            else {
+                this.expandedNodes.splice(index, 1);
+            }
         }
     };
     TreeView.prototype.disableExpandAttr = function (liEle) {
@@ -1611,6 +1624,9 @@ var TreeView = /** @class */ (function (_super) {
                 mapper_2.dataSource.executeQuery(this.getQuery(mapper_2, parentLi.getAttribute('data-uid'))).then(function (e) {
                     _this.treeList.pop();
                     childItems = e.result;
+                    if (_this.dataType === 1) {
+                        _this.dataType = 2;
+                    }
                     _this.loadChild(childItems, mapper_2, eicon, parentLi, expandChild, callback, loaded);
                     if (_this.nodeTemplate && _this.isBlazorPlatform && !_this.isStringTemplate) {
                         _this.updateBlazorTemplate();
@@ -2632,14 +2648,14 @@ var TreeView = /** @class */ (function (_super) {
             newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
             var newData = setValue(_this.editFields.text, newText, _this.editData);
             if (!isNOU(_this.nodeTemplateFn)) {
-                txtEle.innerHTML = '';
+                txtEle.innerText = '';
                 var tempArr = _this.nodeTemplateFn(newData, undefined, undefined, _this.element.id + 'nodeTemplate', _this.isStringTemplate);
                 tempArr = Array.prototype.slice.call(tempArr);
                 append(tempArr, txtEle);
                 _this.updateBlazorTemplate();
             }
             else {
-                txtEle.innerHTML = newText;
+                txtEle.innerText = newText;
             }
             if (isInput) {
                 removeClass([liEle], EDITING);
@@ -2783,11 +2799,13 @@ var TreeView = /** @class */ (function (_super) {
                 }
                 var eventArgs = _this.getDragEvent(e.event, _this, null, e.target, null, virtualEle, level);
                 if (eventArgs.draggedNode.classList.contains(EDITING)) {
+                    _this.dragObj.intDestroy(e.event);
                     _this.dragCancelAction(virtualEle);
                 }
                 else {
                     _this.trigger('nodeDragStart', eventArgs, function (observedArgs) {
                         if (observedArgs.cancel) {
+                            _this.dragObj.intDestroy(e.event);
                             _this.dragCancelAction(virtualEle);
                         }
                         else {
@@ -2868,15 +2886,17 @@ var TreeView = /** @class */ (function (_super) {
         if (dropRoot) {
             var dropLi = closest(e.target, '.' + LISTITEM);
             var checkWrapper = closest(e.target, '.' + CHECKBOXWRAP);
+            var collapse = closest(e.target, '.' + COLLAPSIBLE);
+            var expand = closest(e.target, '.' + EXPANDABLE);
             if (!dropRoot.classList.contains(ROOT) || (dropWrap &&
                 (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {
-                if (dropLi && e && (e.event.offsetY < 7) && !checkWrapper) {
+                if ((dropLi && e && (!expand && !collapse) && (e.event.offsetY < 7) && !checkWrapper) || (((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3)))) {
                     addClass([icon], DROPNEXT);
                     var virEle = this.createElement('div', { className: SIBLING });
                     var index = this.fullRowSelect ? (1) : (0);
                     dropLi.insertBefore(virEle, dropLi.children[index]);
                 }
-                else if (dropLi && e && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10)) && !checkWrapper) {
+                else if ((dropLi && e && (!expand && !collapse) && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10)) && !checkWrapper) || (((expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19)))) {
                     addClass([icon], DROPNEXT);
                     var virEle = this.createElement('div', { className: SIBLING });
                     var index = this.fullRowSelect ? (2) : (1);
@@ -2976,7 +2996,9 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
         var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
-        if (!dragLi.classList.contains('e-disable') && !dropLi.classList.contains('e-disable') && !checkWrapper) {
+        var collapse = closest(e.target, '.' + COLLAPSIBLE);
+        var expand = closest(e.target, '.' + EXPANDABLE);
+        if (!dragLi.classList.contains('e-disable') && !checkWrapper && ((expand && e.event.offsetY < 5) || (collapse && e.event.offsetX < 3) || (expand && e.event.offsetY > 19) || (collapse && e.event.offsetX > 19) || (!expand && !collapse))) {
             if (dropTarget.nodeName === 'LI') {
                 this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
             }
@@ -2985,11 +3007,14 @@ var TreeView = /** @class */ (function (_super) {
                     this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
                 }
             }
+            else if ((dropTarget.classList.contains('e-icon-collapsible')) || (dropTarget.classList.contains('e-icon-expandable'))) {
+                this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);
+            }
             else {
                 this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY);
             }
         }
-        else if (checkWrapper) {
+        else {
             this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY, true);
         }
     };
@@ -3004,7 +3029,21 @@ var TreeView = /** @class */ (function (_super) {
         else if (e.event.offsetY < 2) {
             pre = true;
         }
-        dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);
+        else if (e.target.classList.contains('e-icon-expandable') || (e.target.classList.contains('e-icon-collapsible'))) {
+            if ((e.event.offsetY < 5) || (e.event.offsetX < 3)) {
+                pre = true;
+            }
+            else if ((e.event.offsetY > 15) || (e.event.offsetX > 17)) {
+                pre = false;
+            }
+        }
+        if ((e.target.classList.contains('e-icon-expandable')) || (e.target.classList.contains('e-icon-collapsible'))) {
+            var target = e.target.closest('li');
+            dropUl.insertBefore(dragLi, pre ? target : target.nextElementSibling);
+        }
+        else {
+            dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);
+        }
         this.moveData(dragLi, dropLi, dropUl, pre, dragObj);
         this.updateElement(dragParentUl, dragParentLi);
         this.updateAriaLevel(dragLi);
@@ -3927,6 +3966,7 @@ var TreeView = /** @class */ (function (_super) {
      * @returns void
      * @private
      */
+    // tslint:disable-next-line:max-func-body-length
     TreeView.prototype.onPropertyChanged = function (newProp, oldProp) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -3968,10 +4008,14 @@ var TreeView = /** @class */ (function (_super) {
                     break;
                 case 'expandedNodes':
                     this.isAnimate = false;
-                    this.setProperties({ expandedNodes: [] }, true);
+                    if (!this.isBlazorPlatform) {
+                        this.setProperties({ expandedNodes: [] }, true);
+                    }
                     this.collapseAll();
                     this.isInitalExpand = true;
-                    this.setProperties({ expandedNodes: isNOU(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);
+                    if (!this.isBlazorPlatform) {
+                        this.setProperties({ expandedNodes: isNOU(newProp.expandedNodes) ? [] : newProp.expandedNodes }, true);
+                    }
                     this.doExpandAction();
                     this.isInitalExpand = false;
                     this.isAnimate = true;
@@ -4040,7 +4084,9 @@ var TreeView = /** @class */ (function (_super) {
         this.setCssClass(this.cssClass, null);
         this.setDragAndDrop(false);
         this.setFullRow(false);
-        this.element.innerHTML = '';
+        if (this.ulElement && this.ulElement.parentElement) {
+            this.ulElement.parentElement.removeChild(this.ulElement);
+        }
         _super.prototype.destroy.call(this);
     };
     /**
@@ -4095,7 +4141,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
         }
-        if (this.fields.dataSource instanceof DataManager === false) {
+        if ((this.fields.dataSource instanceof DataManager === false) || (this.fields.dataSource instanceof DataManager) && (this.fields.dataSource.adaptorName === 'BlazorAdaptor')) {
             this.preventExpand = false;
             this.triggerEvent();
         }

package/styles/accordion/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/accordion/_bootstrap-dark-definition.scss

@@ -1,69 +1,69 @@
-//default 
-$acrdn-skin: 'bootstrap' !default;
-$acrdn-header-font-weight: normal !default;
-$acrdn-icon-font-size: $font-size !default;
-$acrdn-content-line-height: 1.5 !default;
-$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
-$acrdn-border-size: $border-size !default;
-$acrdn-active-bg: $default-bg-color !default;
-$acrdn-item-select-bg: $grey-f5 !default;
-$acrdn-header-hover-bg: '' !default;
-$acrdn-header-active-bg: '' !default;
-$acrdn-selected-border-size: $border-size !default;
-$acrdn-selected-border-color: $grey-99 !default;
-$acrdn-nested-header-font: $header-font-color !default;
-$acrdn-nrml-header-minheight: 40px !default;
-$acrdn-bgr-header-minheight: 50px !default;
-$acrdn-nrml-header-lineheight: 39px !default;
-$acrdn-bgr-header-lineheight: 48px !default;
-$acrdn-nrml-header-paddingpix: 15px !default;
-$acrdn-bgr-header-paddingpix: 15px !default;
-// Header, Nested header and RTL mode Padding
-$acrdn-nrml-header-padding: 0 30px 0 15px !default;
-$acrdn-bgr-header-padding: 0 30px 0 15px !default;
-$acrdn-nest-nrml-header-padding: 0 30px !default;
-$acrdn-nest-bgr-header-padding: 0 30px !default;
-$acrdn-nest-second-nrml-header-padding: 0 30px 0 45px !default;
-$acrdn-nest-second-bgr-header-padding: 0 30px 0 45px !default;
-$acrdn-rtl-nrml-header-padding: 0 15px 0 30px !default;
-$acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
-$acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
-$acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
-$acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px  !default;
-$acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
-// Content, Nested content and RTL mode Padding
-$acrdn-nrml-content-padding: 15px !default;
-$acrdn-bgr-content-padding: 15px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
-$acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
-$acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
-$acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
-$acrdn-nrml-icn-minwidth: 24px !default;
-$acrdn-bgr-icn-minwidth: 24px !default;
-$acrdn-header-font-size: 16px !default;
-$acrdn-nest-header-font-size: 14px !default;
-$acrdn-content-font-size: 14px !default;
-$acrdn-header-font-bgr-size: 16px !default;
-$acrdn-content-font-bgr-size: 14px !default;
-$acrdn-nrml-header-icon-padding: 10px !default;
-$acrdn-bgr-header-icon-padding: 10px !default;
-$acrdn-item-padding-size: '' !default;
-$acrdn-border-type: none !default;
-$acrdn-selected-border-type: none !default;
-$acrdn-slct-header-font-weight: normal !default;
-$acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !default;
-$acrdn-default-border: $grey-light !default;
-$acrdn-selected-header-color: $grey-base !default;
-$acrdn-default-border: $grey-99 !default;
-$acrdn-bg-color: $grey-base !default;
-$acrdn-content-color: $grey-dark-font !default;
-$acrdn-header-focus-bg: transparent !default;
-$acrdn-header-font: $grey-dark-font !default;
-$acrdn-icon-color: $grey-dark-font !default;
-$acrdn-selected-header-font-color: $grey-dark-font !default;
-$acrdn-selected-icon-color: $grey-light-font !default;
-//enddefault
+//default 
+$acrdn-skin: 'bootstrap' !default;
+$acrdn-header-font-weight: normal !default;
+$acrdn-icon-font-size: $font-size !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$acrdn-border-size: $border-size !default;
+$acrdn-active-bg: $default-bg-color !default;
+$acrdn-item-select-bg: $grey-f5 !default;
+$acrdn-header-hover-bg: '' !default;
+$acrdn-header-active-bg: '' !default;
+$acrdn-selected-border-size: $border-size !default;
+$acrdn-selected-border-color: $grey-99 !default;
+$acrdn-nested-header-font: $header-font-color !default;
+$acrdn-nrml-header-minheight: 40px !default;
+$acrdn-bgr-header-minheight: 50px !default;
+$acrdn-nrml-header-lineheight: 39px !default;
+$acrdn-bgr-header-lineheight: 48px !default;
+$acrdn-nrml-header-paddingpix: 15px !default;
+$acrdn-bgr-header-paddingpix: 15px !default;
+// Header, Nested header and RTL mode Padding
+$acrdn-nrml-header-padding: 0 30px 0 15px !default;
+$acrdn-bgr-header-padding: 0 30px 0 15px !default;
+$acrdn-nest-nrml-header-padding: 0 30px !default;
+$acrdn-nest-bgr-header-padding: 0 30px !default;
+$acrdn-nest-second-nrml-header-padding: 0 30px 0 45px !default;
+$acrdn-nest-second-bgr-header-padding: 0 30px 0 45px !default;
+$acrdn-rtl-nrml-header-padding: 0 15px 0 30px !default;
+$acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
+$acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px  !default;
+$acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 15px !default;
+$acrdn-bgr-content-padding: 15px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
+$acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
+$acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
+$acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
+$acrdn-nrml-icn-minwidth: 24px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-header-font-size: 16px !default;
+$acrdn-nest-header-font-size: 14px !default;
+$acrdn-content-font-size: 14px !default;
+$acrdn-header-font-bgr-size: 16px !default;
+$acrdn-content-font-bgr-size: 14px !default;
+$acrdn-nrml-header-icon-padding: 10px !default;
+$acrdn-bgr-header-icon-padding: 10px !default;
+$acrdn-item-padding-size: '' !default;
+$acrdn-border-type: none !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-slct-header-font-weight: normal !default;
+$acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !default;
+$acrdn-default-border: $grey-light !default;
+$acrdn-selected-header-color: $grey-base !default;
+$acrdn-default-border: $grey-99 !default;
+$acrdn-bg-color: $grey-base !default;
+$acrdn-content-color: $grey-dark-font !default;
+$acrdn-header-focus-bg: transparent !default;
+$acrdn-header-font: $grey-dark-font !default;
+$acrdn-icon-color: $grey-dark-font !default;
+$acrdn-selected-header-font-color: $grey-dark-font !default;
+$acrdn-selected-icon-color: $grey-light-font !default;
+//enddefault

package/styles/accordion/_bootstrap-definition.scss

@@ -1,76 +1,76 @@
-//default 
-/*! component's theme wise override fabric-definitions and variables */
-$acrdn-skin: 'bootstrap' !default;
-$acrdn-header-font-weight: normal !default;
-$acrdn-icon-font-size: $font-size !default;
-$acrdn-content-line-height: 1.5 !default;
-$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
-$acrdn-bg-color: $default-bg-color !default;
-$acrdn-border-size: $border-size !default;
-$acrdn-active-bg: $default-bg-color !default;
-$acrdn-header-font: $header-font-color !default;
-$acrdn-content-color: $content-font-color !default;
-$acrdn-icon-color: $header-icon-color !default;
-$acrdn-header-hover-bg: '' !default;
-$acrdn-header-active-bg: '' !default;
-$acrdn-selected-icon-color: $header-icon-color !default;
-$acrdn-selected-header-font-color: $header-font-color !default;
-$acrdn-selected-border-size: $border-size !default;
-$acrdn-selected-border-color: $default-border-color !default;
-$acrdn-nested-header-font: $header-font-color !default;
-
-$acrdn-nrml-header-minheight: 40px !default;
-$acrdn-bgr-header-minheight: 50px !default;
-$acrdn-nrml-header-lineheight: 39px !default;
-$acrdn-bgr-header-lineheight: 48px !default;
-
-$acrdn-nrml-header-paddingpix: 15px !default;
-$acrdn-bgr-header-paddingpix: 15px !default;
-
-// Header, Nested header and RTL mode Padding
-$acrdn-nrml-header-padding: 0 30px 0 15px !default;
-$acrdn-bgr-header-padding: 0 30px 0 15px !default;
-$acrdn-nest-nrml-header-padding: 0 30px !default;
-$acrdn-nest-bgr-header-padding: 0 30px !default;
-$acrdn-nest-second-nrml-header-padding: 0 30px 0 45px !default;
-$acrdn-nest-second-bgr-header-padding: 0 30px 0 45px !default;
-$acrdn-rtl-nrml-header-padding: 0 15px 0 30px !default;
-$acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
-$acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
-$acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
-$acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px  !default;
-$acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
-
-// Content, Nested content and RTL mode Padding
-$acrdn-nrml-content-padding: 15px !default;
-$acrdn-bgr-content-padding: 15px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
-$acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
-$acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
-$acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
-
-
-$acrdn-nrml-icn-minwidth: 24px !default;
-$acrdn-bgr-icn-minwidth: 24px !default;
-$acrdn-header-font-size: 16px !default;
-$acrdn-nest-header-font-size: 14px !default;
-$acrdn-content-font-size: 14px !default;
-$acrdn-header-font-bgr-size: 16px !default;
-$acrdn-content-font-bgr-size: 14px !default;
-$acrdn-nrml-header-icon-padding: 10px !default;
-$acrdn-bgr-header-icon-padding: 10px !default;
-$acrdn-item-padding-size: '' !default;
-$acrdn-border-type: none !default;
-$acrdn-selected-border-type: none !default;
-$acrdn-slct-header-font-weight: normal !default;
-$acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !default;
-$acrdn-selected-header-color: $grey-f5 !default;
-$acrdn-default-border: $grey-dd !default;
-$acrdn-header-focus-bg: transparent !default;
-
-$acrdn-item-select-bg: $grey-f5 !default;
-//enddefault
+//default 
+/*! component's theme wise override fabric-definitions and variables */
+$acrdn-skin: 'bootstrap' !default;
+$acrdn-header-font-weight: normal !default;
+$acrdn-icon-font-size: $font-size !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$acrdn-bg-color: $default-bg-color !default;
+$acrdn-border-size: $border-size !default;
+$acrdn-active-bg: $default-bg-color !default;
+$acrdn-header-font: $header-font-color !default;
+$acrdn-content-color: $content-font-color !default;
+$acrdn-icon-color: $header-icon-color !default;
+$acrdn-header-hover-bg: '' !default;
+$acrdn-header-active-bg: '' !default;
+$acrdn-selected-icon-color: $header-icon-color !default;
+$acrdn-selected-header-font-color: $header-font-color !default;
+$acrdn-selected-border-size: $border-size !default;
+$acrdn-selected-border-color: $default-border-color !default;
+$acrdn-nested-header-font: $header-font-color !default;
+
+$acrdn-nrml-header-minheight: 40px !default;
+$acrdn-bgr-header-minheight: 50px !default;
+$acrdn-nrml-header-lineheight: 39px !default;
+$acrdn-bgr-header-lineheight: 48px !default;
+
+$acrdn-nrml-header-paddingpix: 15px !default;
+$acrdn-bgr-header-paddingpix: 15px !default;
+
+// Header, Nested header and RTL mode Padding
+$acrdn-nrml-header-padding: 0 30px 0 15px !default;
+$acrdn-bgr-header-padding: 0 30px 0 15px !default;
+$acrdn-nest-nrml-header-padding: 0 30px !default;
+$acrdn-nest-bgr-header-padding: 0 30px !default;
+$acrdn-nest-second-nrml-header-padding: 0 30px 0 45px !default;
+$acrdn-nest-second-bgr-header-padding: 0 30px 0 45px !default;
+$acrdn-rtl-nrml-header-padding: 0 15px 0 30px !default;
+$acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
+$acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px  !default;
+$acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 15px !default;
+$acrdn-bgr-content-padding: 15px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
+$acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
+$acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
+$acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
+
+
+$acrdn-nrml-icn-minwidth: 24px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-header-font-size: 16px !default;
+$acrdn-nest-header-font-size: 14px !default;
+$acrdn-content-font-size: 14px !default;
+$acrdn-header-font-bgr-size: 16px !default;
+$acrdn-content-font-bgr-size: 14px !default;
+$acrdn-nrml-header-icon-padding: 10px !default;
+$acrdn-bgr-header-icon-padding: 10px !default;
+$acrdn-item-padding-size: '' !default;
+$acrdn-border-type: none !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-slct-header-font-weight: normal !default;
+$acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !default;
+$acrdn-selected-header-color: $grey-f5 !default;
+$acrdn-default-border: $grey-dd !default;
+$acrdn-header-focus-bg: transparent !default;
+
+$acrdn-item-select-bg: $grey-f5 !default;
+//enddefault