@syncfusion/ej2-navigations 22.1.39 → 22.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.39
+*  version : 22.2.7
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@22.1.38",
+  "_id": "@syncfusion/ej2-navigations@22.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-zsH2lJ0HGE1wAgBEyDF4opp/TybK+eNg7uYrg/YlRM8jObVXT5KJS6fdprP5CYIEHV5YRA3E8cDJCYDWxnDoPw==",
+  "_integrity": "sha512-ROhN91xNpqtogxlvW9w3ku1Ho2bKlrMhnEXRn4Xy+sQPN5FjVRsgnTZ0Wbp1tH1XygcVFw1QagQufhFvXT1ERw==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-22.1.38.tgz",
-  "_shasum": "ae5865b53c34417c5590b2bc062713bb9d9889e4",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-22.2.5.tgz",
+  "_shasum": "aa9ae780330515fbfda83b0aa3c565b5b349a8d7",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.38",
-    "@syncfusion/ej2-buttons": "~22.1.39",
-    "@syncfusion/ej2-data": "~22.1.38",
-    "@syncfusion/ej2-inputs": "~22.1.39",
-    "@syncfusion/ej2-lists": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.38"
+    "@syncfusion/ej2-base": "~22.2.5",
+    "@syncfusion/ej2-buttons": "~22.2.5",
+    "@syncfusion/ej2-data": "~22.2.5",
+    "@syncfusion/ej2-inputs": "~22.2.7",
+    "@syncfusion/ej2-lists": "~22.2.5",
+    "@syncfusion/ej2-popups": "~22.2.7"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "22.1.39",
+  "version": "22.2.7",
   "sideEffects": false
 }

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

@@ -182,6 +182,9 @@ export interface AccordionModel extends ComponentModel{
      * Specifies the template option for accordion items.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate?: string | Function;
@@ -190,6 +193,9 @@ export interface AccordionModel extends ComponentModel{
      * Specifies the header title template option for accordion items.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     headerTemplate?: string | Function;

package/src/accordion/accordion.d.ts

@@ -228,6 +228,9 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
      * Specifies the template option for accordion items.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate: string | Function;
@@ -235,6 +238,9 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
      * Specifies the header title template option for accordion items.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     headerTemplate: string | Function;

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

@@ -25,6 +25,9 @@ export interface CarouselItemModel {
      * Accepts the template for individual carousel item.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     template?: string | Function;
@@ -65,6 +68,9 @@ export interface CarouselModel extends ComponentModel{
      * Accepts the template for previous navigation button.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     previousButtonTemplate?: string | Function;
@@ -73,6 +79,9 @@ export interface CarouselModel extends ComponentModel{
      * Accepts the template for next navigation button.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     nextButtonTemplate?: string | Function;
@@ -81,6 +90,9 @@ export interface CarouselModel extends ComponentModel{
      * Accepts the template for indicator buttons.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     indicatorsTemplate?: string | Function;
@@ -89,6 +101,9 @@ export interface CarouselModel extends ComponentModel{
      * Accepts the template for play/pause button.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     playButtonTemplate?: string | Function;
@@ -112,6 +127,9 @@ export interface CarouselModel extends ComponentModel{
      * Specifies the template option for carousel items.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate?: string | Function;

package/src/carousel/carousel.d.ts

@@ -101,6 +101,9 @@ export declare class CarouselItem extends ChildProperty<CarouselItem> {
      * Accepts the template for individual carousel item.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     template: string | Function;
@@ -144,6 +147,9 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * Accepts the template for previous navigation button.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     previousButtonTemplate: string | Function;
@@ -151,6 +157,9 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * Accepts the template for next navigation button.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     nextButtonTemplate: string | Function;
@@ -158,6 +167,9 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * Accepts the template for indicator buttons.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     indicatorsTemplate: string | Function;
@@ -165,6 +177,9 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * Accepts the template for play/pause button.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     playButtonTemplate: string | Function;
@@ -185,6 +200,9 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * Specifies the template option for carousel items.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     itemTemplate: string | Function;
@@ -317,6 +335,7 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     protected render(): void;
     onPropertyChanged(newProp: CarouselModel, oldProp: CarouselModel): void;
     private reRenderSlides;
+    private reRenderIndicators;
     private initialize;
     private renderSlides;
     private getTranslateX;

package/src/carousel/carousel.js

@@ -252,7 +252,13 @@ var Carousel = /** @class */ (function (_super) {
                     break;
                 case 'items':
                 case 'dataSource':
+                    var selectedData = prop === 'dataSource' ? this.dataSource : this.items;
+                    if (selectedData.length > 0 && this.selectedIndex >= selectedData.length) {
+                        this.setActiveSlide(selectedData.length - 1, 'Previous');
+                        this.autoSlide();
+                    }
                     this.reRenderSlides();
+                    this.reRenderIndicators();
                     break;
                 case 'partialVisible':
                     if (this.partialVisible) {
@@ -281,6 +287,14 @@ var Carousel = /** @class */ (function (_super) {
         }
         this.renderSlides();
     };
+    Carousel.prototype.reRenderIndicators = function () {
+        var target = this.element.querySelector("." + CLS_INDICATORS);
+        if (target) {
+            this.resetTemplates(['indicatorsTemplate']);
+            remove(target);
+        }
+        this.renderIndicators();
+    };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
         if (this.cssClass) {

package/src/common/menu-base.js

@@ -302,10 +302,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
                 }
             }
         }
@@ -1207,7 +1207,13 @@ var MenuBase = /** @class */ (function (_super) {
                 if (isNullOrUndefined(args.curData.htmlAttributes)) {
                     args.curData.htmlAttributes = {};
                 }
-                Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });
+                if (Browser.isIE) {
+                    args.curData.htmlAttributes.role = 'menuitem';
+                    args.curData.htmlAttributes.tabindex = '-1';
+                }
+                else {
+                    Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });
+                }
                 if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {
                     args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
                         args.curData[args.fields.text] : args.curData[args.fields.id];
@@ -1485,6 +1491,9 @@ var MenuBase = /** @class */ (function (_super) {
         }
     };
     MenuBase.prototype.afterCloseMenu = function (e) {
+        if (isNullOrUndefined(e)) {
+            return;
+        }
         var isHeader;
         if (this.showSubMenu) {
             if (this.showItemOnClick && this.navIdx.length === 0) {
@@ -1822,10 +1831,10 @@ var MenuBase = /** @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
                 }
             }
         }

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

@@ -101,6 +101,9 @@ export interface TabItemModel {
      * Specifies the header text of Tab item.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     headerTemplate?: string | Function;
@@ -109,6 +112,10 @@ export interface TabItemModel {
      * Specifies the content of Tab item, that is displayed when concern item header is selected.
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
      */
     content?: string | HTMLElement | Function;
 

package/src/tab/tab.d.ts

@@ -182,6 +182,9 @@ export declare class TabItem extends ChildProperty<TabItem> {
      * Specifies the header text of Tab item.
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     headerTemplate: string | Function;
@@ -189,6 +192,10 @@ export declare class TabItem extends ChildProperty<TabItem> {
      * Specifies the content of Tab item, that is displayed when concern item header is selected.
      *
      * @default ''
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
      */
     content: string | HTMLElement | Function;
     /**

package/src/tab/tab.js

@@ -455,7 +455,7 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.parseObject = function (items, index) {
         var _this = this;
-        var tbItems = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element);
+        var tbItems = Array.prototype.slice.call(selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element));
         var maxId = this.lastIndex;
         if (!this.isReplace && tbItems.length > 0) {
             var idList_1 = [];
@@ -1186,7 +1186,7 @@ var Tab = /** @class */ (function (_super) {
         if (this.allowDragAndDrop) {
             var tabHeader = this.element.querySelector('.' + CLS_HEADER);
             if (tabHeader) {
-                var items = tabHeader.querySelectorAll('.' + CLS_TB_ITEM);
+                var items = Array.prototype.slice.call(tabHeader.querySelectorAll('.' + CLS_TB_ITEM));
                 items.forEach(function (element) {
                     _this.initializeDrag(element);
                 });
@@ -1968,7 +1968,9 @@ var Tab = /** @class */ (function (_super) {
             }
         }
         this.setActiveBorder();
-        item.setAttribute('aria-hidden', '' + value);
+        if (!isNullOrUndefined(item.firstElementChild)) {
+            item.firstElementChild.setAttribute('aria-hidden', '' + value);
+        }
         if (this.overflowMode === 'Popup' && this.tbObj) {
             this.tbObj.refreshOverflow();
         }

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

@@ -91,6 +91,9 @@ export interface ItemModel {
      * ```
      *
      * @default ""
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     template?: string | Object | Function;

package/src/toolbar/toolbar.d.ts

@@ -143,6 +143,9 @@ export declare class Item extends ChildProperty<Item> {
      * ```
      *
      * @default ""
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      * @aspType string
      */
     template: string | Object | Function;

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

@@ -1,4 +1,4 @@
-import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper  } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ExpandOnSettings,SortOrder,FailureEventArgs,DataBoundEventArgs,DataSourceChangedEventArgs,DrawNodeEventArgs,NodeKeyPressEventArgs,NodeCheckEventArgs,NodeClickEventArgs,NodeExpandEventArgs,DragAndDropEventArgs,NodeEditEventArgs,NodeSelectEventArgs} from "./treeview";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/treeview/treeview.d.ts

@@ -482,7 +482,6 @@ export declare class NodeAnimationSettings extends ChildProperty<NodeAnimationSe
  * ```
  */
 export declare class TreeView extends Component<HTMLElement> implements INotifyPropertyChanged {
-    private cloneElement;
     private initialRender;
     private treeData;
     private rootData;
@@ -516,12 +515,10 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private touchExpandObj;
     private inputObj;
     private isAnimate;
-    private spinnerElement;
     private touchClass;
     private editData;
     private editFields;
     private refreshData;
-    private refreshFields;
     private isRefreshed;
     private keyConfigs;
     private isInitalExpand;

package/src/treeview/treeview.js

@@ -17,7 +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;
 };
-import { Component, isUndefined, Browser, compile, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Component, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
 import { rippleEffect, Animation, remove } from '@syncfusion/ej2-base';
@@ -1887,14 +1887,14 @@ var TreeView = /** @class */ (function (_super) {
         }
         else {
             if (typeof this.fields.child === 'string') {
-                var index = obj.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === parentId; });
+                var index = obj.findIndex(function (data) { return getValue(_this.fields.id, data) && getValue(_this.fields.id, data).toString() === parentId; });
                 if (index !== -1) {
                     return getValue(this.fields.child, obj[index]);
                 }
                 if (index === -1) {
                     for (var i = 0, objlen = obj.length; i < objlen; i++) {
                         var tempArray = getValue(this.fields.child, obj[i]);
-                        var childIndex = !isNOU(tempArray) ? tempArray.findIndex(function (data) { return data[_this.fields.id] && data[_this.fields.id].toString() === parentId; }) : -1;
+                        var childIndex = !isNOU(tempArray) ? tempArray.findIndex(function (data) { return getValue(_this.fields.id, data) && getValue(_this.fields.id, data).toString() === parentId; }) : -1;
                         if (childIndex !== -1) {
                             return getValue(this.fields.child, tempArray[childIndex]);
                         }
@@ -2860,7 +2860,7 @@ var TreeView = /** @class */ (function (_super) {
             this.renderReactTemplates();
         }
         else {
-            this.enableHtmlSanitizer ? txtEle.innerText = newText : txtEle.innerHTML = newText;
+            this.enableHtmlSanitizer ? txtEle.innerText = SanitizeHtmlHelper.sanitize(newText) : txtEle.innerHTML = newText;
         }
         if (isInput) {
             removeClass([liEle], EDITING);
@@ -4670,6 +4670,20 @@ var TreeView = /** @class */ (function (_super) {
         if (this.ulElement && this.ulElement.parentElement) {
             this.ulElement.parentElement.removeChild(this.ulElement);
         }
+        this.ulElement = null;
+        this.liList = null;
+        this.startNode = null;
+        this.firstTap = null;
+        this.expandArgs = null;
+        this.dragLi = null;
+        this.dragTarget = null;
+        this.dragParent = null;
+        this.dragObj = null;
+        this.dropObj = null;
+        this.inputObj = null;
+        this.touchEditObj = null;
+        this.touchExpandObj = null;
+        this.touchClickObj = null;
         _super.prototype.destroy.call(this);
     };
     /**

package/styles/accordion/_theme.scss

@@ -189,7 +189,11 @@
           color: $acrdn-icon-color;
         }
       }
-
+      &.e-select.e-selected > .e-acrdn-header {
+        &:focus {
+          border: $acrdn-item-exp-not-selected-hdr-focus-border;
+        }
+      }
       &.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header {
 
         &:focus {

package/styles/accordion/bootstrap-dark.css

@@ -398,6 +398,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #3e98ff;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: transparent;
   border: 0;

package/styles/accordion/bootstrap.css

@@ -399,6 +399,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #333;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: transparent;
   border: 0;

package/styles/accordion/bootstrap4.css

@@ -398,6 +398,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #007bff;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #f8f9fa;
   border: 0;

package/styles/accordion/bootstrap5-dark.css

@@ -400,6 +400,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #adb5bd;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: none;
   border: 0;

package/styles/accordion/bootstrap5.css

@@ -400,6 +400,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #6c757d;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: none;
   border: 0;

package/styles/accordion/fabric-dark.css

@@ -398,6 +398,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #dadada;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 1px solid #dadada;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #514f4f;
   border: 1px solid #dadada;

package/styles/accordion/fabric.css

@@ -399,6 +399,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #333;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 1px solid #666;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #d1ebff;
   border: 1px solid #666;

package/styles/accordion/fluent-dark.css

@@ -399,6 +399,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #a19f9d;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 1px solid #f3f2f1;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #252423;
   border: 1px solid #f3f2f1;

package/styles/accordion/fluent.css

@@ -399,6 +399,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #605e5c;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 1px solid #201f1e;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #f3f2f1;
   border: 1px solid #201f1e;

package/styles/accordion/highcontrast-light.css

@@ -398,6 +398,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #000;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 2px dashed #000;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #400074;
   border: 2px dashed #000;

package/styles/accordion/highcontrast.css

@@ -399,6 +399,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #fff;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 2px dashed #fff;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #ffd939;
   border: 2px dashed #fff;

package/styles/accordion/material-dark.css

@@ -399,6 +399,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: rgba(255, 255, 255, 0.7);
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: rgba(255, 255, 255, 0.05);
   border: 0;

package/styles/accordion/material.css

@@ -400,6 +400,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: rgba(0, 0, 0, 0.54);
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #eee;
   border: 0;