@syncfusion/ej2-navigations 19.3.57 → 19.4.47

package/src/toolbar/toolbar.js

@@ -17,6 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
 import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';
 import { selectAll, setStyleAttribute as setStyle, select } from '@syncfusion/ej2-base';
@@ -1015,9 +1016,15 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.tbarPopupHandler = function (isOpen) {
         if (this.overflowMode === 'Extended') {
-            isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);
+            if (isOpen) {
+                this.add(this.element, CLS_EXTENDEDPOPOPEN);
+            }
+            else {
+                this.remove(this.element, CLS_EXTENDEDPOPOPEN);
+            }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Toolbar.prototype.popupOpen = function (e) {
         var popObj = this.popObj;
         if (!this.isVertical) {
@@ -1063,6 +1070,7 @@ var Toolbar = /** @class */ (function (_super) {
             popObj.refreshPosition();
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Toolbar.prototype.popupClose = function (e) {
         var element = this.element;
         var popupNav = element.querySelector('.' + CLS_TBARNAV);
@@ -1427,10 +1435,20 @@ var Toolbar = /** @class */ (function (_super) {
             var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';
             innerItem[2].removeAttribute('style');
             if (this.isVertical) {
-                this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;
+                if (this.enableRtl) {
+                    innerItem[2].style.top = popWid;
+                }
+                else {
+                    innerItem[2].style.bottom = popWid;
+                }
             }
             else {
-                this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;
+                if (this.enableRtl) {
+                    innerItem[2].style.left = popWid;
+                }
+                else {
+                    innerItem[2].style.right = popWid;
+                }
             }
         }
         if (tbarWid <= margin) {
@@ -1440,10 +1458,20 @@ var Toolbar = /** @class */ (function (_super) {
         innerItem[1].removeAttribute('style');
         var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';
         if (this.isVertical) {
-            this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;
+            if (this.enableRtl) {
+                innerItem[1].style.marginBottom = mrgn;
+            }
+            else {
+                innerItem[1].style.marginTop = mrgn;
+            }
         }
         else {
-            this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;
+            if (this.enableRtl) {
+                innerItem[1].style.marginRight = mrgn;
+            }
+            else {
+                innerItem[1].style.marginLeft = mrgn;
+            }
         }
     };
     Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
@@ -1513,7 +1541,12 @@ var Toolbar = /** @class */ (function (_super) {
         var keyVal;
         for (var i = 0; i < key.length; i++) {
             keyVal = key[i];
-            keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);
+            if (keyVal === 'class') {
+                this.add(element, attr[keyVal]);
+            }
+            else {
+                element.setAttribute(keyVal, attr[keyVal]);
+            }
         }
     };
     /**
@@ -1558,7 +1591,12 @@ var Toolbar = /** @class */ (function (_super) {
                 }
                 enable(isEnable, ele);
             }
-            isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);
+            if (isEnable) {
+                removeClass(elements, CLS_DISABLE);
+            }
+            else {
+                addClass(elements, CLS_DISABLE);
+            }
         }
         else {
             if (typeof (elements) === 'number') {
@@ -1746,7 +1784,12 @@ var Toolbar = /** @class */ (function (_super) {
         }
         else if (itemType === 'Input') {
             var ele = this.createElement('input');
-            item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));
+            if (item.id) {
+                ele.id = item.id;
+            }
+            else {
+                ele.id = getUniqueID('tbr-ipt');
+            }
             innerEle.appendChild(ele);
             eleObj.appendTo(ele);
         }
@@ -1759,7 +1802,12 @@ var Toolbar = /** @class */ (function (_super) {
         var textStr = item.text;
         var iconCss;
         var iconPos;
-        item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');
+        if (item.id) {
+            dom.id = item.id;
+        }
+        else {
+            dom.id = getUniqueID('e-tbr-btn');
+        }
         var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });
         if (textStr) {
             btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;
@@ -2027,12 +2075,27 @@ var Toolbar = /** @class */ (function (_super) {
                     this.refreshOverflow();
                     break;
                 case 'enableRtl':
-                    newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);
+                    if (newProp.enableRtl) {
+                        this.add(tEle, CLS_RTL);
+                    }
+                    else {
+                        this.remove(tEle, CLS_RTL);
+                    }
                     if (!isNOU(this.scrollModule)) {
-                        newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);
+                        if (newProp.enableRtl) {
+                            this.add(this.scrollModule.element, CLS_RTL);
+                        }
+                        else {
+                            this.remove(this.scrollModule.element, CLS_RTL);
+                        }
                     }
                     if (!isNOU(this.popObj)) {
-                        newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);
+                        if (newProp.enableRtl) {
+                            this.add(this.popObj.element, CLS_RTL);
+                        }
+                        else {
+                            this.remove(this.popObj.element, CLS_RTL);
+                        }
                     }
                     if (this.tbarAlign) {
                         this.itemPositioning();
@@ -2086,7 +2149,12 @@ var Toolbar = /** @class */ (function (_super) {
             ele = innerItems_1[eleIndex];
         }
         if (ele) {
-            value ? ele.classList.add(CLS_HIDDEN) : ele.classList.remove(CLS_HIDDEN);
+            if (value) {
+                ele.classList.add(CLS_HIDDEN);
+            }
+            else {
+                ele.classList.remove(CLS_HIDDEN);
+            }
             if (value && isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {
                 if (isNOU(ele.firstElementChild.getAttribute('tabindex'))) {
                     ele.firstElementChild.setAttribute('tabindex', '-1');

package/src/treeview/treeview-model.d.ts

@@ -185,6 +185,16 @@ export interface TreeViewModel extends ComponentModel{
      */
     allowMultiSelection?: boolean;
 
+    /**
+     * Enables or disables text wrapping when text exceeds the bounds in the TreeView node.  
+     * When the allowTextWrap property is set to true, the TreeView node text content will wrap to the next line 
+     * when it exceeds the width of the TreeView node.
+     * The TreeView node height will be adjusted automatically based on the TreeView node content.  
+     *
+     * @default false
+     */
+    allowTextWrap?: boolean;
+
     /**
      * Specifies the type of animation applied on expanding and collapsing the nodes along with duration.
      *

package/src/treeview/treeview.d.ts

@@ -515,6 +515,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private isOffline;
     private firstTap;
     private hasTemplate;
+    private isFirstRender;
     /**
      * Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
      * desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing
@@ -546,6 +547,15 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     allowMultiSelection: boolean;
+    /**
+     * Enables or disables text wrapping when text exceeds the bounds in the TreeView node.
+     * When the allowTextWrap property is set to true, the TreeView node text content will wrap to the next line
+     * when it exceeds the width of the TreeView node.
+     * The TreeView node height will be adjusted automatically based on the TreeView node content.
+     *
+     * @default false
+     */
+    allowTextWrap: boolean;
     /**
      * Specifies the type of animation applied on expanding and collapsing the nodes along with duration.
      *
@@ -923,6 +933,9 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private removeCheck;
     private getCheckEvent;
     private finalize;
+    private setTextWrap;
+    private updateWrap;
+    private calculateWrap;
     private doExpandAction;
     private expandGivenNodes;
     private expandCallback;

package/src/treeview/treeview.js

@@ -36,6 +36,8 @@ var COLLAPSIBLE = 'e-icon-collapsible';
 var EXPANDABLE = 'e-icon-expandable';
 var LISTITEM = 'e-list-item';
 var LISTTEXT = 'e-list-text';
+var LISTWRAP = 'e-text-wrap';
+var IELISTWRAP = 'e-ie-wrap';
 var PARENTITEM = 'e-list-parent';
 var HOVER = 'e-hover';
 var ACTIVE = 'e-active';
@@ -207,6 +209,7 @@ var TreeView = /** @class */ (function (_super) {
         _this.isFieldChange = false;
         _this.changeDataSource = false;
         _this.hasTemplate = false;
+        _this.isFirstRender = false;
         _this.mouseDownStatus = false;
         return _this;
     }
@@ -332,6 +335,7 @@ var TreeView = /** @class */ (function (_super) {
         this.setCssClass(null, this.cssClass);
         this.setEnableRtl();
         this.setFullRow(this.fullRowSelect);
+        this.setTextWrap();
         this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);
     };
     TreeView.prototype.setDisabledMode = function () {
@@ -1321,11 +1325,36 @@ var TreeView = /** @class */ (function (_super) {
                 addClass([firstNode], FOCUS);
                 this.updateIdAttr(null, firstNode);
             }
+            if (this.allowTextWrap) {
+                this.updateWrap();
+            }
             this.renderReactTemplates();
             this.hasPid = this.rootData[0] ? this.rootData[0].hasOwnProperty(this.fields.parentID) : false;
             this.doExpandAction();
         }
     };
+    TreeView.prototype.setTextWrap = function () {
+        (this.allowTextWrap ? addClass : removeClass)([this.element], LISTWRAP);
+        if (Browser.isIE) {
+            (this.allowTextWrap ? addClass : removeClass)([this.element], IELISTWRAP);
+        }
+    };
+    TreeView.prototype.updateWrap = function (ulEle) {
+        if (!this.fullRowSelect) {
+            return;
+        }
+        var liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;
+        var length = liEle.length;
+        for (var i = 0; i < length; i++) {
+            this.calculateWrap(liEle[i]);
+        }
+    };
+    TreeView.prototype.calculateWrap = function (liEle) {
+        var element = select('.' + FULLROW, liEle);
+        if (element && element.nextElementSibling) {
+            element.style.height = this.allowTextWrap ? element.nextElementSibling.offsetHeight + 'px' : '';
+        }
+    };
     TreeView.prototype.doExpandAction = function () {
         var eUids = this.expandedNodes;
         if (this.isInitalExpand && eUids.length > 0) {
@@ -1562,6 +1591,10 @@ var TreeView = /** @class */ (function (_super) {
         currLi.style.height = '';
         removeClass([icon], PROCESS);
         this.addExpand(currLi);
+        if (this.allowTextWrap && this.isLoaded && this.isFirstRender) {
+            this.updateWrap(currLi);
+            this.isFirstRender = false;
+        }
         if (this.isLoaded && this.expandArgs && !this.isRefreshed) {
             this.expandArgs = this.getExpandEvent(currLi, null);
             this.trigger('nodeExpanded', this.expandArgs);
@@ -2071,6 +2104,7 @@ var TreeView = /** @class */ (function (_super) {
             this.expandNode(currLi, icon);
         }
         else {
+            this.isFirstRender = true;
             this.renderChildNodes(currLi, expandChild, callback);
             var liEles = selectAll('.' + LISTITEM, currLi);
             for (var i = 0; i < liEles.length; i++) {
@@ -2767,6 +2801,9 @@ var TreeView = /** @class */ (function (_super) {
             removeClass([liEle], EDITING);
             txtEle.focus();
         }
+        if (this.allowTextWrap) {
+            this.calculateWrap(liEle);
+        }
     };
     TreeView.prototype.getElement = function (ele) {
         if (isNOU(ele)) {
@@ -4363,6 +4400,10 @@ var TreeView = /** @class */ (function (_super) {
                     this.setMultiSelect(this.allowMultiSelection);
                     this.addMultiSelect(this.allowMultiSelection);
                     break;
+                case 'allowTextWrap':
+                    this.setTextWrap();
+                    this.updateWrap();
+                    break;
                 case 'checkedNodes':
                     if (this.showCheckBox) {
                         this.checkedNodes = oldProp.checkedNodes;
@@ -4414,6 +4455,10 @@ var TreeView = /** @class */ (function (_super) {
                 case 'fullRowSelect':
                     this.setFullRow(this.fullRowSelect);
                     this.addFullRow(this.fullRowSelect);
+                    if (this.allowTextWrap) {
+                        this.setTextWrap();
+                        this.updateWrap();
+                    }
                     break;
                 case 'loadOnDemand':
                     if (this.loadOnDemand === false && !this.onLoaded) {
@@ -4853,6 +4898,9 @@ var TreeView = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeView.prototype, "allowMultiSelection", void 0);
+    __decorate([
+        Property(false)
+    ], TreeView.prototype, "allowTextWrap", void 0);
     __decorate([
         Complex({}, NodeAnimationSettings)
     ], TreeView.prototype, "animation", void 0);

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

@@ -6,6 +6,7 @@ $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: $grey-88 !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-item-select-bg: $grey-base !default;
 $acrdn-header-hover-bg: transparent !default;
 $acrdn-header-active-bg: transparent !default;
@@ -46,6 +47,8 @@ $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-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
 $acrdn-content-font-size: 14px !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;
@@ -59,6 +62,7 @@ $acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !def
 $acrdn-selected-header-color: $grey-88 !default;
 $acrdn-default-border: $grey-99 !default;
 $acrdn-bg-color: $grey-base !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-content-color: $grey-dark-font !default;
 $acrdn-header-focus-bg: transparent !default;
 $acrdn-header-font: lighten($brand-primary, 15%) !default;

package/styles/accordion/_bootstrap-definition.scss

@@ -6,8 +6,10 @@ $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-default-bg-color: $acrdn-bg-color !default;
 $acrdn-border-size: $border-size !default;
 $acrdn-active-bg: $default-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-header-font: $header-font-color !default;
 $acrdn-content-color: $content-font-color !default;
 $acrdn-icon-color: $header-icon-color !default;
@@ -58,6 +60,8 @@ $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-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
 $acrdn-content-font-size: 14px !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;

package/styles/accordion/_bootstrap4-definition.scss

@@ -16,6 +16,7 @@ $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-border-size: $acrdn-border-size !default;
 $acrdn-active-bg: $acrdn-default-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-item-select-bg: $gray-100 !default;
 $acrdn-header-hover-bg: $gray-100 !default;
 $acrdn-header-active-bg: $gray-100 !default;
@@ -57,6 +58,8 @@ $acrdn-bgr-icn-minwidth: 24px !default;
 $acrdn-header-font-size: 14px !default;
 $acrdn-nest-header-font-size: 16px !default;
 $acrdn-content-font-size: 14px !default;
+$acrdn-nest-header-content-font-size: $acrdn-content-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;
 $acrdn-nrml-header-icon-padding: 8px !default;
@@ -69,6 +72,7 @@ $acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !def
 $acrdn-default-border: rgba(0, 0, 0, .13) !default;
 $acrdn-selected-header-color: $gray-100 !default;
 $acrdn-bg-color: $gray-100 !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-content-color: $gray-900 !default;
 $acrdn-content-icon-color: $gray-700 !default;
 $acrdn-header-focus-bg: $gray-100 !default;

package/styles/accordion/_bootstrap5-definition.scss

@@ -1,25 +1,31 @@
-//default
-/*! component's theme wise override bootstrap5-definitions and variables */
+/*! Accordion's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
 $acrdn-skin: 'bootstrap5' !default;
-$acrdn-slct-header-font-weight: $font-weight-normal;
 
-$acrdn-border-radius: 4px !default;
-$acrdn-nrml-header-minheight: 38px !default;
-$acrdn-bgr-header-minheight: 48px !default;
-$acrdn-nrml-header-lineheight: 22px !default;
-$acrdn-bgr-header-lineheight: 24px !default;
-$acrdn-nrml-header-paddingpix: 16px !default;
-$acrdn-bgr-header-paddingpix: 16px !default;
+// font definitions
 $acrdn-icon-font-size: $text-lg !default;
-$acrdn-content-line-height: 1.5 !default;
-$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$acrdn-slct-header-font-weight: $font-weight-normal;
+$acrdn-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-normal !default;
+$acrdn-header-font-size: $text-sm !default;
+$acrdn-nest-header-font-size: $text-sm !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-content-font-size: $text-sm !default;
+$acrdn-header-font-bgr-size: $text-base !default;
+$acrdn-content-font-bgr-size: $text-base !default;
+$acrdn-bgr-arrow-icon-font-size: 22px;
+$acrdn-bgr-icon-font-size: 20px !default;
+$acrdn-icon-font-size: 18px !default;
+$acrdn-selected-header-font-color: $primary !default;
 
 // Header, Nested header and RTL mode Padding
 $acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
 $acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
 $acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
 $acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
-$acrdn-nrml-header-padding: 7px 12px !default;
+$acrdn-nrml-header-padding: 7px 12px 3px !default;
 $acrdn-bgr-header-padding: 11px 17px !default;
 $acrdn-rtl-nrml-header-padding: 7px 12px !default;
 $acrdn-rtl-bgr-header-padding: 11px 17px !default;
@@ -40,42 +46,40 @@ $acrdn-rtl-nest-bgr-content-padding: 20px !default;
 $acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 24px !default;
 
+// dimension definitions
+$acrdn-border-radius: 4px !default;
+$acrdn-nrml-header-minheight: 38px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 22px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-content-line-height: 1.5 !default;
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 12px !default;
 $acrdn-nrml-icn-minwidth: 22px !default;
 $acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+
+// color definitions
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-active-bg: $content-bg-color !default;
 $acrdn-bg-color: $content-bg-color !default;
-$acrdn-selected-header-font-color: $primary !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-selected-header-color: $content-bg-color !default;
 $acrdn-icon-color: $icon-color !default;
 $acrdn-selected-icon-color: $primary !default;
 $acrdn-content-color: $content-text-color !default;
-$acrdn-header-font: $content-text-color !default;
-$acrdn-nested-header-font: $content-text-color !default;
-$acrdn-header-font-weight: $font-weight-normal !default;
-$acrdn-header-font-size: $text-sm !default;
-$acrdn-nest-header-font-size: $text-sm !default;
-$acrdn-content-font-size: $text-sm !default;
-$acrdn-header-font-bgr-size: $text-base !default;
-$acrdn-content-font-bgr-size: $text-base !default;
-$acrdn-selected-border-size: 1px !default;
-$acrdn-item-padding-size: 0 !default;
-$acrdn-selected-border-type: none !default;
 $acrdn-selected-border-color: $border-light !default;
-$acrdn-default-border: $acrdn-selected-border-color !default;
 $acrdn-header-focus-bg: $primary-lighter !default;
 $acrdn-header-hover-bg: $primary-lighter !default;
 $acrdn-header-active-bg: $primary-lighter !default;
 $acrdn-item-header-focus-border-color: $primary !default;
-
-$acrdn-border-type: solid !default;
-$acrdn-border-size: 1px !default;
-$acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-icon-font-size: 20px !default;
-$acrdn-icon-font-size: 18px !default;
 $acrdn-icon-disable-color: $icon-color-disabled;
 $acrdn-text-disable-color: $content-text-color-disabled;
-
-
-//enddefault
+$acrdn-default-border: $acrdn-selected-border-color !default;

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

@@ -5,16 +5,20 @@ $acrdn-icon-font-size: $font-size !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;
 $acrdn-nest-header-font-size: 14px !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
 $acrdn-bgr-icn-minwidth: 30px !default;
 $acrdn-slct-header-font-weight: normal !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bg-color: $default-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-item-border-color: $neutral-white !default;
 $acrdn-item-header-border-color: $neutral-white !default;
 $acrdn-item-exp-hdr-focus-border-color: $neutral-secondary !default;
 $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-active-bg: $default-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-nested-header-font: $header-font-color !default;
 $acrdn-nrml-header-minheight: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;

package/styles/accordion/_fabric-definition.scss

@@ -4,6 +4,8 @@ $acrdn-skin: 'fabric' !default;
 $acrdn-header-font-bgr-size: 16px;
 $acrdn-content-font-bgr-size: 14px;
 $acrdn-nest-header-font-size: 14px;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
 $acrdn-bgr-icn-minwidth: 30px;
 $acrdn-slct-header-font-weight: normal;
 $acrdn-nrml-icn-minwidth: 24px;
@@ -15,7 +17,9 @@ $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-default-bg-color: $acrdn-bg-color !default;
 $acrdn-active-bg: $default-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-nested-header-font: $header-font-color !default;
 
 $acrdn-nrml-header-paddingpix: 12px !default;

package/styles/accordion/_fluent-definition.scss

@@ -0,0 +1,85 @@
+//default
+/*! component's theme wise override fluent-definitions and variables */
+$acrdn-skin: 'FluentUI' !default;
+$acrdn-slct-header-font-weight: $font-weight-normal;
+
+$acrdn-border-radius: 4px !default;
+$acrdn-nrml-header-minheight: 38px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 22px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-icon-font-size: $text-lg !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+
+// Header, Nested header and RTL mode Padding
+$acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
+$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
+$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
+$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
+$acrdn-nrml-header-padding: 7px 12px !default;
+$acrdn-bgr-header-padding: 11px 17px !default;
+$acrdn-rtl-nrml-header-padding: 7px 12px !default;
+$acrdn-rtl-bgr-header-padding: 11px 17px !default;
+$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
+$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 12px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px !default;
+$acrdn-nest-bgr-content-padding: 20px !default;
+$acrdn-nest-second-nrml-content-padding: 20px !default;
+$acrdn-nest-second-bgr-content-padding: 24px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px !default;
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 12px !default;
+$acrdn-nrml-icn-minwidth: 22px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+
+$acrdn-active-bg: $content-bg-color !default;
+$acrdn-bg-color: $content-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-font-color: $content-text-color !default;
+$acrdn-selected-header-color: $content-bg-color !default;
+$acrdn-icon-color: $icon-color !default;
+$acrdn-selected-icon-color: $icon-color !default;
+$acrdn-content-color: $content-text-color !default;
+$acrdn-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-normal !default;
+$acrdn-header-font-size: $text-sm !default;
+$acrdn-nest-header-font-size: $text-sm !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-content-font-size: $text-sm !default;
+$acrdn-header-font-bgr-size: $text-base !default;
+$acrdn-content-font-bgr-size: $text-base !default;
+$acrdn-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-selected-border-color: $border-light !default;
+$acrdn-default-border: $acrdn-selected-border-color !default;
+$acrdn-header-focus-bg: $content-bg-color-hover !default;
+$acrdn-header-hover-bg: $content-bg-color-hover !default;
+$acrdn-header-active-bg: $content-bg-color !default;
+$acrdn-item-header-focus-border-color: $primary !default;
+
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+$acrdn-bgr-arrow-icon-font-size: 22px;
+$acrdn-bgr-icon-font-size: 20px !default;
+$acrdn-icon-font-size: 18px !default;
+$acrdn-icon-disable-color: $icon-color-disabled;
+$acrdn-text-disable-color: $content-text-color-disabled;
+
+
+//enddefault