@syncfusion/ej2-navigations 20.2.50 → 20.3.48

package/src/carousel/carousel.js

@@ -26,7 +26,10 @@ import { Button } from '@syncfusion/ej2-buttons';
 var CLS_CAROUSEL = 'e-carousel';
 var CLS_ACTIVE = 'e-active';
 var CLS_RTL = 'e-rtl';
+var CLS_PARTIAL = 'e-partial';
+var CLS_SLIDE_CONTAINER = 'e-carousel-slide-container';
 var CLS_ITEMS = 'e-carousel-items';
+var CLS_CLONED = 'e-cloned';
 var CLS_ITEM = 'e-carousel-item';
 var CLS_PREVIOUS = 'e-previous';
 var CLS_NEXT = 'e-next';
@@ -158,6 +161,9 @@ var Carousel = /** @class */ (function (_super) {
                         this.applySlideInterval();
                     }
                     this.handleNavigatorsActions(this.selectedIndex);
+                    if (this.partialVisible) {
+                        this.reRenderSlides();
+                    }
                     break;
                 case 'enableRtl':
                     if (this.enableRtl) {
@@ -221,16 +227,28 @@ var Carousel = /** @class */ (function (_super) {
                     break;
                 case 'items':
                 case 'dataSource':
-                    target = this.element.querySelector("." + CLS_ITEMS);
-                    if (target) {
-                        this.resetTemplates(['itemTemplate']);
-                        remove(target);
+                    this.reRenderSlides();
+                    break;
+                case 'partialVisible':
+                    if (this.partialVisible) {
+                        addClass([this.element], CLS_PARTIAL);
                     }
-                    this.renderSlides();
+                    else {
+                        removeClass([this.element], CLS_PARTIAL);
+                    }
+                    this.reRenderSlides();
                     break;
             }
         }
     };
+    Carousel.prototype.reRenderSlides = function () {
+        var target = this.element.querySelector("." + CLS_ITEMS);
+        if (target) {
+            this.resetTemplates(['itemTemplate']);
+            remove(target);
+        }
+        this.renderSlides();
+    };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
         if (this.cssClass) {
@@ -239,6 +257,9 @@ var Carousel = /** @class */ (function (_super) {
         if (this.enableRtl) {
             carouselClasses.push(CLS_RTL);
         }
+        if (this.partialVisible) {
+            carouselClasses.push(CLS_PARTIAL);
+        }
         addClass([this.element], carouselClasses);
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
         attributes(this.element, { 'tabindex': '0', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
@@ -248,8 +269,25 @@ var Carousel = /** @class */ (function (_super) {
     };
     Carousel.prototype.renderSlides = function () {
         var _this = this;
+        var slideContainer = this.element.querySelector('.' + CLS_SLIDE_CONTAINER);
+        if (!slideContainer) {
+            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
+            this.element.appendChild(slideContainer);
+        }
         var itemsContainer = this.createElement('div', { className: CLS_ITEMS, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
-        this.element.appendChild(itemsContainer);
+        slideContainer.appendChild(itemsContainer);
+        if (this.partialVisible && this.loop) {
+            if (this.items.length > 0) {
+                this.items.slice(-2).forEach(function (item, index) {
+                    _this.renderSlide(item, item.template, index, itemsContainer, true);
+                });
+            }
+            else if (this.dataSource.length > 0) {
+                this.dataSource.slice(-2).forEach(function (item, index) {
+                    _this.renderSlide(item, _this.itemTemplate, index, itemsContainer, true);
+                });
+            }
+        }
         if (this.items.length > 0) {
             this.slideItems = this.items;
             this.items.forEach(function (item, index) {
@@ -262,20 +300,43 @@ var Carousel = /** @class */ (function (_super) {
                 _this.renderSlide(item, _this.itemTemplate, index, itemsContainer);
             });
         }
+        if (this.partialVisible && this.loop) {
+            if (this.items.length > 0) {
+                this.items.slice(0, 2).forEach(function (item, index) {
+                    _this.renderSlide(item, item.template, index, itemsContainer, true);
+                });
+            }
+            else if (this.dataSource.length > 0) {
+                this.dataSource.slice(0, 2).forEach(function (item, index) {
+                    _this.renderSlide(item, _this.itemTemplate, index, itemsContainer, true);
+                });
+            }
+        }
         this.renderTemplates();
+        if (this.partialVisible) {
+            itemsContainer.style.setProperty('--carousel-items-count', "" + itemsContainer.children.length);
+            var slideWidth = itemsContainer.firstElementChild.clientWidth;
+            var cloneCount = this.loop ? 2 : 0;
+            itemsContainer.style.transitionProperty = 'none';
+            itemsContainer.style.transform = "translateX(" + -(slideWidth) * (this.selectedIndex + cloneCount) + "px)";
+        }
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
     };
-    Carousel.prototype.renderSlide = function (item, itemTemplate, index, container) {
+    Carousel.prototype.renderSlide = function (item, itemTemplate, index, container, isClone) {
+        if (isClone === void 0) { isClone = false; }
         var itemEle = this.createElement('div', {
             id: getUniqueID('carousel_item'),
-            className: CLS_ITEM + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index ? CLS_ACTIVE : ''),
+            className: CLS_ITEM + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index && !isClone ? CLS_ACTIVE : ''),
             attrs: {
-                'aria-hidden': this.selectedIndex === index ? 'false' : 'true', 'data-index': index.toString(),
+                'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),
                 'aria-role': 'group', 'aria-roledescription': 'slide'
             }
         });
+        if (isClone) {
+            itemEle.classList.add(CLS_CLONED);
+        }
         if (!isNullOrUndefined(item.htmlAttributes)) {
             this.setHtmlAttributes(item.htmlAttributes, itemEle);
         }
@@ -289,7 +350,7 @@ var Carousel = /** @class */ (function (_super) {
             return;
         }
         var navigators = this.createElement('div', { className: CLS_NAVIGATORS });
-        var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
+        var itemsContainer = this.element.querySelector("." + CLS_SLIDE_CONTAINER);
         itemsContainer.insertAdjacentElement('afterend', navigators);
         this.renderNavigatorButton('Previous');
         this.renderNavigatorButton('Next');
@@ -297,8 +358,7 @@ var Carousel = /** @class */ (function (_super) {
     };
     Carousel.prototype.renderNavigatorButton = function (direction) {
         var buttonContainer = this.createElement('div', {
-            className: (direction === 'Previous' ? CLS_PREVIOUS : CLS_NEXT) + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : ''),
-            attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+            className: (direction === 'Previous' ? CLS_PREVIOUS : CLS_NEXT) + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : '')
         });
         if (direction === 'Previous' && this.previousButtonTemplate) {
             addClass([buttonContainer], CLS_TEMPLATE);
@@ -313,7 +373,9 @@ var Carousel = /** @class */ (function (_super) {
             append(template, buttonContainer);
         }
         else {
-            var button = this.createElement('button');
+            var button = this.createElement('button', {
+                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+            });
             var buttonObj = new Button({
                 cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),
                 iconCss: CLS_ICON + ' ' + (direction === 'Previous' ? CLS_PREV_ICON : CLS_NEXT_ICON),
@@ -485,7 +547,7 @@ var Carousel = /** @class */ (function (_super) {
         if (this.element.querySelectorAll("." + CLS_ITEM + "." + CLS_PREV_SLIDE + ",." + CLS_ITEM + "." + CLS_NEXT_SLIDE).length > 0) {
             return;
         }
-        var allSlides = [].slice.call(this.element.querySelectorAll("." + CLS_ITEM));
+        var allSlides = [].slice.call(this.element.querySelectorAll("." + CLS_ITEM + ":not(.e-cloned)"));
         var activeSlide = this.element.querySelector("." + CLS_ITEM + "." + CLS_ACTIVE);
         if (isNullOrUndefined(activeSlide) && this.showIndicators) {
             var activeIndicator = this.element.querySelector("." + CLS_INDICATOR_BAR + "." + CLS_ACTIVE);
@@ -530,6 +592,25 @@ var Carousel = /** @class */ (function (_super) {
                 slideDirection: direction,
                 isSwiped: isSwiped
             };
+            if (_this.partialVisible) {
+                var container = _this.element.querySelector('.' + CLS_ITEMS);
+                var slideWidth = allSlides[currentIndex].clientWidth;
+                container.style.transitionProperty = 'transform';
+                if (_this.loop) {
+                    if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
+                        container.style.transform = "translateX(" + -(slideWidth) * (allSlides.length + 2) + "px)";
+                    }
+                    else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {
+                        container.style.transform = "translateX(" + -(slideWidth) + "px)";
+                    }
+                    else {
+                        container.style.transform = "translateX(" + -(slideWidth) * (currentIndex + 2) + "px)";
+                    }
+                }
+                else {
+                    container.style.transform = "translateX(" + -(slideWidth) * (currentIndex) + "px)";
+                }
+            }
             var slideHeight;
             if (_this.animationEffect === 'Slide') {
                 if (direction === 'Previous') {
@@ -567,6 +648,13 @@ var Carousel = /** @class */ (function (_super) {
     Carousel.prototype.onTransitionEnd = function () {
         var _this = this;
         if (this.slideChangedEventArgs) {
+            if (this.partialVisible && this.loop && (this.slideChangedEventArgs.currentIndex === 0 && this.slideChangedEventArgs.slideDirection === 'Next' ||
+                this.slideChangedEventArgs.currentIndex === this.slideItems.length - 1 && this.slideChangedEventArgs.slideDirection === 'Previous')) {
+                var container = this.element.querySelector('.' + CLS_ITEMS);
+                var slideWidth = this.slideChangedEventArgs.currentSlide.clientWidth;
+                container.style.transitionProperty = 'none';
+                container.style.transform = "translate(" + -(slideWidth) * (this.slideChangedEventArgs.currentIndex + 2) + "px)";
+            }
             addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE);
             this.trigger('slideChanged', this.slideChangedEventArgs, function () {
@@ -975,6 +1063,9 @@ var Carousel = /** @class */ (function (_super) {
     __decorate([
         Property('Visible')
     ], Carousel.prototype, "buttonsVisibility", void 0);
+    __decorate([
+        Property(false)
+    ], Carousel.prototype, "partialVisible", void 0);
     __decorate([
         Property()
     ], Carousel.prototype, "htmlAttributes", void 0);

package/src/common/menu-base.js

@@ -1149,7 +1149,8 @@ var MenuBase = /** @class */ (function (_super) {
                     tabindex: '-1'
                 };
                 if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {
-                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text];
+                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
+                        args.curData[args.fields.text] : args.curData[args.fields.id];
                 }
                 if (args.curData[args.fields[fields.iconCss]] === '') {
                     args.curData[args.fields[fields.iconCss]] = null;

package/src/index.d.ts

@@ -11,3 +11,4 @@ export * from './treeview/index';
 export * from './sidebar/index';
 export * from './breadcrumb/index';
 export * from './carousel/index';
+export * from './appbar/index';

package/src/index.js

@@ -11,3 +11,4 @@ export * from './treeview/index';
 export * from './sidebar/index';
 export * from './breadcrumb/index';
 export * from './carousel/index';
+export * from './appbar/index';

package/src/tab/tab.d.ts

@@ -546,13 +546,6 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private swipeHandler;
     private spaceKeyDown;
     private keyHandler;
-    /**
-     * Refresh the active tab border
-     *
-     * @returns {void}
-     * @private
-     */
-    refreshActiveTabBorder(): void;
     private refreshItemVisibility;
     private hoverHandler;
     private evalOnPropertyChangeItems;
@@ -641,6 +634,17 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      * @private
      */
     onPropertyChanged(newProp: TabModel, oldProp: TabModel): void;
+    /**
+     * To refresh the active tab contents.
+     *
+     * @returns {void}
+     */
     refreshActiveTab(): void;
+    /**
+     * To refresh the active tab indicator.
+     *
+     * @returns {void}
+     */
+    refreshActiveTabBorder(): void;
 }
 export {};

package/src/tab/tab.js

@@ -694,7 +694,10 @@ var Tab = /** @class */ (function (_super) {
         if (!isNOU(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        if (this.initRender || value === false || this.animation === {} || isNOU(this.animation)) {
+        var isPrevent = isNOU(this.animation) || this.animation.next === {} || this.animation.previous === {}
+            || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)
+            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
+        if (this.initRender || value === false || this.animation === {} || isPrevent) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE);
             }
@@ -1347,19 +1350,6 @@ var Tab = /** @class */ (function (_super) {
                 break;
         }
     };
-    /**
-     * Refresh the active tab border
-     *
-     * @returns {void}
-     * @private
-     */
-    Tab.prototype.refreshActiveTabBorder = function () {
-        var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);
-        if (!isNOU(activeEle) && this.reorderActiveTab) {
-            this.select(this.getEleIndex(activeEle));
-        }
-        this.refreshActiveBorder();
-    };
     Tab.prototype.refreshItemVisibility = function (target) {
         var scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNOU(scrCnt)) {
@@ -2182,6 +2172,11 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    /**
+     * To refresh the active tab contents.
+     *
+     * @returns {void}
+     */
     Tab.prototype.refreshActiveTab = function () {
         if (this.isReact) {
             this.clearTemplate();
@@ -2300,6 +2295,18 @@ var Tab = /** @class */ (function (_super) {
             this.renderReactTemplates();
         }
     };
+    /**
+     * To refresh the active tab indicator.
+     *
+     * @returns {void}
+     */
+    Tab.prototype.refreshActiveTabBorder = function () {
+        var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);
+        if (!isNOU(activeEle) && this.reorderActiveTab) {
+            this.select(this.getEleIndex(activeEle));
+        }
+        this.refreshActiveBorder();
+    };
     __decorate([
         Collection([], TabItem)
     ], Tab.prototype, "items", void 0);

package/src/treeview/treeview.d.ts

@@ -516,6 +516,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private firstTap;
     private hasTemplate;
     private isFirstRender;
+    private isNodeDropped;
     /**
      * 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

package/src/treeview/treeview.js

@@ -210,6 +210,8 @@ var TreeView = /** @class */ (function (_super) {
         _this.changeDataSource = false;
         _this.hasTemplate = false;
         _this.isFirstRender = false;
+        // Specifies whether the node is dropped or not 
+        _this.isNodeDropped = false;
         _this.mouseDownStatus = false;
         return _this;
     }
@@ -1423,11 +1425,12 @@ var TreeView = /** @class */ (function (_super) {
         this.updateCheckedProp();
         this.isAnimate = true;
         this.isInitalExpand = false;
-        if (!this.isLoaded || this.isFieldChange) {
+        if ((!this.isLoaded || this.isFieldChange) && !this.isNodeDropped) {
             var eventArgs = { data: this.treeData };
             this.trigger('dataBound', eventArgs);
         }
         this.isLoaded = true;
+        this.isNodeDropped = false;
     };
     TreeView.prototype.doSelectionAction = function () {
         var sNodes = selectAll('.' + SELECTED, this.element);
@@ -2652,8 +2655,9 @@ var TreeView = /** @class */ (function (_super) {
             var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;
             var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;
             var checked = null;
-            if (this.showCheckBox) {
-                checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');
+            var checkboxElement = select('.' + CHECKBOXWRAP, currLi);
+            if (this.showCheckBox && checkboxElement) {
+                checked = checkboxElement.getAttribute('aria-checked');
             }
             return {
                 id: id, text: text, parentID: pid, selected: selected, expanded: expanded,
@@ -3165,6 +3169,8 @@ var TreeView = /** @class */ (function (_super) {
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
         if (dragObj.element.id !== this.element.id) {
             dragObj.triggerEvent();
+            this.isNodeDropped = true;
+            this.fields.dataSource = this.treeData;
         }
         this.triggerEvent();
     };

package/styles/accordion/_all.scss

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

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-icon-font-size: $font-size !default;
@@ -19,6 +19,7 @@ $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;
@@ -30,8 +31,9 @@ $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-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;
@@ -69,4 +71,5 @@ $acrdn-header-font: lighten($brand-primary, 15%) !default;
 $acrdn-icon-color: lighten($brand-primary, 15%) !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,4 +1,4 @@
-//default 
+//default
 /*! component's theme wise override fabric-definitions and variables */
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;
@@ -40,7 +40,7 @@ $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-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
@@ -55,7 +55,6 @@ $acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !defau
 $acrdn-rtl-nest-second-nrml-content-padding: 15px 45px 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;
@@ -77,4 +76,5 @@ $acrdn-default-border: $grey-dd !default;
 $acrdn-header-focus-bg: transparent !default;
 
 $acrdn-item-select-bg: $grey-f5 !default;
+
 //enddefault

package/styles/accordion/_bootstrap4-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $acrdn-skin: 'bootstrap4' !default;
 $acrdn-border-size: 1px !default;
 $acrdn-border-radius: 4px !default;
@@ -29,6 +29,7 @@ $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 16px 0 16px !default;
 $acrdn-bgr-header-padding: 0 20px 0 20px !default;
@@ -42,6 +43,7 @@ $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: 16px !default;
 $acrdn-bgr-content-padding: 20px !default;
@@ -83,4 +85,5 @@ $acrdn-bgr-item-header-content-line-height: 24px !default;
 $acrdn-bgr-item-header-content-font-size: 16px !default;
 $acrdn-selected-header-font-color: $primary !default;
 $acrdn-selected-icon-color: $primary !default;
+
 //enddefault

package/styles/accordion/_bootstrap5-definition.scss

@@ -1,5 +1,5 @@
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
-// sass-lint:disable-all
+/* stylelint-disable */
 $acrdn-skin: 'bootstrap5' !default;
 
 // font definitions

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

@@ -1,4 +1,4 @@
-//default 
+//default
 
 $acrdn-skin: 'fabric' !default;
 $acrdn-icon-font-size: $font-size !default;
@@ -35,9 +35,9 @@ $acrdn-nest-second-nrml-header-padding: 0 42px 0  36px !default;
 $acrdn-nest-second-bgr-header-padding: $acrdn-nest-second-nrml-header-padding !default;
 $acrdn-rtl-nrml-header-padding: 0 $acrdn-nrml-header-paddingpix 0 42px !default;
 $acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
-$acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px  !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
-$acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px  !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 19px !default;
@@ -50,7 +50,6 @@ $acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
 $acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
-
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;
 $acrdn-nrml-icon-container: 16px !default;

package/styles/accordion/_fabric-definition.scss

@@ -34,9 +34,9 @@ $acrdn-nest-second-nrml-header-padding: 0 42px 0  36px !default;
 $acrdn-nest-second-bgr-header-padding: $acrdn-nest-second-nrml-header-padding !default;
 $acrdn-rtl-nrml-header-padding: 0 $acrdn-nrml-header-paddingpix 0 42px !default;
 $acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
-$acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px  !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
-$acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px  !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
 
 // Content, Nested content and RTL mode Padding
@@ -51,7 +51,6 @@ $acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
 $acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
-
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;
 $acrdn-nrml-icon-container: 16px !default;
@@ -80,4 +79,5 @@ $acrdn-item-header-focus-border-color: $acrdn-header-focus-bg !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;
+
 //enddefault

package/styles/accordion/_fluent-definition.scss

@@ -81,5 +81,4 @@ $acrdn-icon-font-size: 18px !default;
 $acrdn-icon-disable-color: $icon-color-disabled;
 $acrdn-text-disable-color: $content-text-color-disabled;
 
-
 //enddefault

package/styles/accordion/_fusionnew-definition.scss

@@ -1,5 +1,5 @@
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
-// sass-lint:disable-all
+/* stylelint-disable */
 $acrdn-skin: 'bootstrap5' !default;
 
 // font definitions

package/styles/accordion/_highcontrast-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 /*! component's theme wise override fabric-definitions and variables */
 $acrdn-skin: 'highcontrast' !default;
 $acrdn-disable-color: $disable !default;
@@ -33,9 +33,9 @@ $acrdn-nest-second-nrml-header-padding: 0 42px 0  36px !default;
 $acrdn-nest-second-bgr-header-padding: $acrdn-nest-second-nrml-header-padding !default;
 $acrdn-rtl-nrml-header-padding: 0 $acrdn-nrml-header-paddingpix 0 42px !default;
 $acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
-$acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px  !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
-$acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px  !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
 
 // Content, Nested content and RTL mode Padding
@@ -50,7 +50,6 @@ $acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
 $acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
-
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;
 $acrdn-nrml-icon-container: 16px !default;
@@ -107,4 +106,5 @@ $acrdn-exp-hdr-hover-bg-color: $hover-bg !default;
 $acrdn-exp-hdr-hover-border-color: $hover-border !default;
 $acrdn-exp-hdr-hover-focus-color: $hover-font !default;
 $acrdn-exp-hdr-hover-focus-hdr-color: $selection-font !default;
+
 //enddefault

package/styles/accordion/_highcontrast-light-definition.scss

@@ -81,7 +81,6 @@ $acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
 $acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
-
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;
 $acrdn-nrml-icon-container: 16px !default;
@@ -105,4 +104,5 @@ $acrdn-selected-border-size: $border-size !default;
 $acrdn-item-padding-size: 0 !default;
 $acrdn-selected-border-type: $border-type !default;
 $acrdn-selected-border-color: $border-default !default;
+
 //enddefault