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

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';import { KeyboardEventArgs, BaseEventArgs, Effect, getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';import { isVisible, closest, attributes, detach, select, isBlazor, addClass, append } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, Complex, updateBlazorTemplate } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, selectAll } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';
 import {ExpandMode,AccordionClickArgs,ExpandEventArgs,ExpandedEventArgs} from "./accordion";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -8,24 +8,24 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface AccordionActionSettingsModel {
 
     /**
-   * Specifies the type of animation.
-   * @default 'SlideDown'
-   * @aspType string
-   * @blazorType string
-   */
-    effect?: 'None' | Effect;
+   * Specifies the type of animation.
+   * @default 'SlideDown'
+   * @aspType string
+   * @blazorType string
+   */
+    effect?: 'None' | Effect;
 
     /**
-   * Specifies the duration to animate.
-   * @default 400
-   */
-    duration?: number;
+   * Specifies the duration to animate.
+   * @default 400
+   */
+    duration?: number;
 
     /**
-   * Specifies the animation timing function.
-   * @default 'linear'
-   */
-    easing?: string;
+   * Specifies the animation timing function.
+   * @default 'linear'
+   */
+    easing?: string;
 
 }
 
@@ -35,16 +35,16 @@ export interface AccordionActionSettingsModel {
 export interface AccordionAnimationSettingsModel {
 
     /**
-   * Specifies the animation to appear while collapsing the Accordion item.
-   * @default { effect: 'SlideDown', duration: 400, easing: 'linear' }
-   */
-    collapse?: AccordionActionSettingsModel;
+   * Specifies the animation to appear while collapsing the Accordion item.
+   * @default { effect: 'SlideDown', duration: 400, easing: 'linear' }
+   */
+    collapse?: AccordionActionSettingsModel;
 
     /**
-   * Specifies the animation to appear while expanding the Accordion item.
-   * @default { effect: 'SlideDown', duration: 400, easing: 'linear' }
-   */
-    expand?: AccordionActionSettingsModel;
+   * Specifies the animation to appear while expanding the Accordion item.
+   * @default { effect: 'SlideDown', duration: 400, easing: 'linear' }
+   */
+    expand?: AccordionActionSettingsModel;
 
 }
 
@@ -54,70 +54,70 @@ export interface AccordionAnimationSettingsModel {
 export interface AccordionItemModel {
 
     /**
-     * Sets the text content to be displayed for the Accordion item.
-     * You can set the content of the Accordion item using `content` property.
-     * It also supports to include the title as `HTML element`, `string`, or `query selector`.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( { 
-     *        items: [ 
-     *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
-     *          { header: '#headerContent', content: '#panelContent' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     * @default null
-     */
-    content?: string;
-
-    /**
-     * Sets the header text to be displayed for the Accordion item.
-     * You can set the title of the Accordion item using `header` property.
-     * It also supports to include the title as `HTML element`, `string`, or `query selector`.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( { 
-     *        items: [ 
-     *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
-     *          { header: '#headerContent', content: '#panelContent' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     * @default null
-     */
-    header?: string;
-
-    /**
-     * Defines single/multiple classes (separated by a space) are to be used for Accordion item customization.
-     * @default null
-     */
-    cssClass?: string;
-
-    /**
-     * Defines an icon with the given custom CSS class that is to be rendered before the header text.
-     * Add the css classes to the `iconCss` property and write the css styles to the defined class to set images/icons.
-     * Adding icon is applicable only to the header.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( { 
-     *        items: [ 
-     *          { header: 'Accordion Header', iconCss: 'e-app-icon' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     * ```css
-     * .e-app-icon::before {
-     *   content: "\e710";
-     * }
-     * ```
-     * @default null
-     */
-    iconCss?: string;
-
-    /**
-     * Sets the expand (true) or collapse (false) state of the Accordion item. By default, all the items are in a collapsed state.
-     * @default false
-     */
-    expanded?: Boolean;
+     * Sets the text content to be displayed for the Accordion item.
+     * You can set the content of the Accordion item using `content` property.
+     * It also supports to include the title as `HTML element`, `string`, or `query selector`.
+     * ```typescript
+     *   let accordionObj: Accordion = new Accordion( { 
+     *        items: [ 
+     *          { header: 'Accordion Header', content: 'Accordion Content' },
+     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
+     *          { header: '#headerContent', content: '#panelContent' }]
+     *        });
+     *   accordionObj.appendTo('#accordion');
+     * ```
+     * @default null
+     */
+    content?: string;
+
+    /**
+     * Sets the header text to be displayed for the Accordion item.
+     * You can set the title of the Accordion item using `header` property.
+     * It also supports to include the title as `HTML element`, `string`, or `query selector`.
+     * ```typescript
+     *   let accordionObj: Accordion = new Accordion( { 
+     *        items: [ 
+     *          { header: 'Accordion Header', content: 'Accordion Content' },
+     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
+     *          { header: '#headerContent', content: '#panelContent' }]
+     *        });
+     *   accordionObj.appendTo('#accordion');
+     * ```
+     * @default null
+     */
+    header?: string;
+
+    /**
+     * Defines single/multiple classes (separated by a space) are to be used for Accordion item customization.
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Defines an icon with the given custom CSS class that is to be rendered before the header text.
+     * Add the css classes to the `iconCss` property and write the css styles to the defined class to set images/icons.
+     * Adding icon is applicable only to the header.
+     * ```typescript
+     *   let accordionObj: Accordion = new Accordion( { 
+     *        items: [ 
+     *          { header: 'Accordion Header', iconCss: 'e-app-icon' }]
+     *        });
+     *   accordionObj.appendTo('#accordion');
+     * ```
+     * ```css
+     * .e-app-icon::before {
+     *   content: "\e710";
+     * }
+     * ```
+     * @default null
+     */
+    iconCss?: string;
+
+    /**
+     * Sets the expand (true) or collapse (false) state of the Accordion item. By default, all the items are in a collapsed state.
+     * @default false
+     */
+    expanded?: Boolean;
 
 }
 
@@ -127,98 +127,98 @@ export interface AccordionItemModel {
 export interface AccordionModel extends ComponentModel{
 
     /**
-     * An array of item that is used to specify Accordion items.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( { 
-     *        items: [ 
-     *          { header: 'Accordion Header', content: 'Accordion Content' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     * @default []
-     */
-    items?: AccordionItemModel[];
+     * An array of item that is used to specify Accordion items.
+     * ```typescript
+     *   let accordionObj: Accordion = new Accordion( { 
+     *        items: [ 
+     *          { header: 'Accordion Header', content: 'Accordion Content' }]
+     *        });
+     *   accordionObj.appendTo('#accordion');
+     * ```
+     * @default []
+     */
+    items?: AccordionItemModel[];
 
     /**
-     * Specifies the datasource for the accordion items.
-     * @isdatamanager false
-     * @default []
-     */
-    dataSource?: Object[];
+     * Specifies the datasource for the accordion items.
+     * @isdatamanager false
+     * @default []
+     */
+    dataSource?: Object[];
 
     /**
-     * Specifies the template option for accordion items.
-     * @default null
-     */
-    itemTemplate?: string;
+     * Specifies the template option for accordion items.
+     * @default null
+     */
+    itemTemplate?: string;
 
     /**
-     * Specifies the header title template option for accordion items.
-     * @default null
-     */
-    headerTemplate?: string;
+     * Specifies the header title template option for accordion items.
+     * @default null
+     */
+    headerTemplate?: string;
 
     /**
-     * Specifies the width of the Accordion in pixels/number/percentage. Number value is considered as pixels.
-     * @default '100%'
-     */
-    width?: string | number;
+     * Specifies the width of the Accordion in pixels/number/percentage. Number value is considered as pixels.
+     * @default '100%'
+     */
+    width?: string | number;
 
     /**
-     * Specifies the height of the Accordion in pixels/number/percentage. Number value is considered as pixels.
-     * @default 'auto'
-     */
-    height?: string | number;
+     * Specifies the height of the Accordion in pixels/number/percentage. Number value is considered as pixels.
+     * @default 'auto'
+     */
+    height?: string | number;
 
     /**
-     * Specifies the options to expand single or multiple panel at a time.
-     * The possible values are:
-     * - Single: Sets to expand only one Accordion item at a time.
-     * - Multiple: Sets to expand more than one Accordion item at a time.
-     * @default 'Multiple'
-     */
-    expandMode?: ExpandMode;
+     * Specifies the options to expand single or multiple panel at a time.
+     * The possible values are:
+     * - Single: Sets to expand only one Accordion item at a time.
+     * - Multiple: Sets to expand more than one Accordion item at a time.
+     * @default 'Multiple'
+     */
+    expandMode?: ExpandMode;
 
     /**
-     * Specifies the animation configuration settings for expanding and collapsing the panel.
-     * @default { expand: { effect: 'SlideDown', duration: 400, easing: 'linear' },
-     * collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' }}
-     */
-    animation?: AccordionAnimationSettingsModel;
+     * Specifies the animation configuration settings for expanding and collapsing the panel.
+     * @default { expand: { effect: 'SlideDown', duration: 400, easing: 'linear' },
+     * collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' }}
+     */
+    animation?: AccordionAnimationSettingsModel;
 
     /**
-     * The event will be fired while clicking anywhere within the Accordion.
-     * @event
-     * @blazorProperty 'Clicked'
-     */
-    clicked?: EmitType<AccordionClickArgs>;
+     * The event will be fired while clicking anywhere within the Accordion.
+     * @event
+     * @blazorProperty 'Clicked'
+     */
+    clicked?: EmitType<AccordionClickArgs>;
 
     /**
-     * The event will be fired before the item gets collapsed/expanded.
-     * @event
-     * @blazorProperty 'Expanding'
-     */
-    expanding?: EmitType<ExpandEventArgs>;
+     * The event will be fired before the item gets collapsed/expanded.
+     * @event
+     * @blazorProperty 'Expanding'
+     */
+    expanding?: EmitType<ExpandEventArgs>;
 
     /**
-     * The event will be fired after the item gets collapsed/expanded.
-     * @event
-     * @blazorProperty 'Expanded'
-     */
-    expanded?: EmitType<ExpandedEventArgs>;
+     * The event will be fired after the item gets collapsed/expanded.
+     * @event
+     * @blazorProperty 'Expanded'
+     */
+    expanded?: EmitType<ExpandedEventArgs>;
 
     /**
-     * The event will be fired once the control rendering is completed.
-     * @event
-     * @blazorProperty 'Created'
-     */
-    created?: EmitType<Event>;
+     * The event will be fired once the control rendering is completed.
+     * @event
+     * @blazorProperty 'Created'
+     */
+    created?: EmitType<Event>;
 
     /**
-     * The event will be fired when the control gets destroyed.
-     * @event
-     * @blazorProperty 'Destroyed'
-     */
-    destroyed?: EmitType<Event>;
+     * The event will be fired when the control gets destroyed.
+     * @event
+     * @blazorProperty 'Destroyed'
+     */
+    destroyed?: EmitType<Event>;
 
 }

package/src/accordion/accordion.d.ts

@@ -276,6 +276,7 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private getheaderTemplate;
     private getItemTemplate;
     private updateContentBlazorTemplate;
+    private updateHeaderBlazorTemplate;
     private focusIn;
     private focusOut;
     private ctrlTemplate;

package/src/accordion/accordion.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, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';
 import { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';
 import { isVisible, closest, attributes, detach, select, isBlazor, addClass, append } from '@syncfusion/ej2-base';
@@ -270,12 +270,20 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.updateContentBlazorTemplate = function (item, index) {
         if (this.itemTemplate && isBlazor() && !this.isStringTemplate) {
-            updateBlazorTemplate(this.element.id + '_itemTemplate', 'ItemTemplate', this);
+            updateBlazorTemplate(this.element.id + '_itemTemplate', 'ItemTemplate', this, false);
         }
         if (item && item.content && isBlazor() && !this.isStringTemplate && item.content.indexOf('<div>Blazor') === 0) {
             updateBlazorTemplate(this.element.id + index + '_content', 'ContentTemplate', item);
         }
     };
+    Accordion.prototype.updateHeaderBlazorTemplate = function (item, index) {
+        if (this.headerTemplate && isBlazor() && !this.isStringTemplate) {
+            updateBlazorTemplate(this.element.id + '_headerTemplate', 'HeaderTemplate', this, false);
+        }
+        if (item && item.header && isBlazor() && !this.isStringTemplate && item.header.indexOf('<div>Blazor') === 0) {
+            updateBlazorTemplate(this.element.id + index + '_header', 'HeaderTemplate', item);
+        }
+    };
     Accordion.prototype.focusIn = function (e) {
         e.target.parentElement.classList.add(CLS_ITEMFOCUS);
     };
@@ -347,9 +355,7 @@ var Accordion = /** @class */ (function (_super) {
                     EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 }
             });
-            if (this.headerTemplate && isBlazor() && !this.isStringTemplate) {
-                updateBlazorTemplate(this.element.id + '_headerTemplate', 'headerTemplate', this);
-            }
+            this.updateHeaderBlazorTemplate();
         }
         else {
             var items = this.items;
@@ -357,9 +363,7 @@ var Accordion = /** @class */ (function (_super) {
                 items.forEach(function (item, index) {
                     innerItem = _this.renderInnerItem(item, index);
                     ele.appendChild(innerItem);
-                    if (item.header && isBlazor() && !_this.isStringTemplate && item.header.indexOf('<div>Blazor') === 0) {
-                        updateBlazorTemplate(_this.element.id + index + '_header', 'HeaderTemplate', item);
-                    }
+                    _this.updateHeaderBlazorTemplate(item, index);
                     if (innerItem.childElementCount > 0) {
                         EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
                         EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
@@ -405,18 +409,8 @@ var Accordion = /** @class */ (function (_super) {
         eventArgs.originalEvent = e;
         var ctnCheck = !isNOU(tglIcon) && acrdnItem.childElementCount <= 1;
         if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {
-            if (this.dataSource.length > 0) {
-                this.dataSource.forEach(function (item, index) {
-                    var itemEle = _this.getItemElements();
-                    var ele = itemEle[index];
-                    var ctn = _this.contentRendering(index);
-                    ele.appendChild(ctn);
-                });
-                this.updateContentBlazorTemplate(eventArgs.item, index);
-            }
-            else {
-                acrdnItem.appendChild(this.contentRendering(index));
-            }
+            acrdnItem.appendChild(this.contentRendering(index));
+            this.updateContentBlazorTemplate(eventArgs.item, index);
             this.ariaAttrUpdate(acrdnItem);
         }
         this.trigger('clicked', eventArgs);
@@ -525,7 +519,7 @@ var Accordion = /** @class */ (function (_super) {
         var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });
         var items = this.getItems();
         var ariaAttr = {
-            'tabindex': '0', 'role': 'heading', 'aria-expanded': 'false', 'aria-selected': 'false',
+            'tabindex': '0', 'role': 'heading', 'aria-selected': 'false',
             'aria-disabled': 'false', 'aria-level': items.length.toString()
         };
         attributes(header, ariaAttr);
@@ -535,6 +529,7 @@ var Accordion = /** @class */ (function (_super) {
         var innerEle;
         innerEle = this.createElement('div', { className: CLS_ITEM });
         innerEle.id = getUniqueID('acrdn_item');
+        attributes(innerEle, { 'aria-expanded': 'false' });
         if (this.headerTemplate) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
@@ -669,6 +664,7 @@ var Accordion = /** @class */ (function (_super) {
         var content = select('.' + CLS_CONTENT, itemEle);
         header.setAttribute('aria-controls', content.id);
         content.setAttribute('aria-labelledby', header.id);
+        content.setAttribute('role', 'definition');
     };
     Accordion.prototype.contentRendering = function (index) {
         var itemcnt = this.createElement('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });
@@ -763,7 +759,8 @@ var Accordion = /** @class */ (function (_super) {
         if (progress === 'end') {
             this.add(trgtItemEle, CLS_ACTIVE);
             trgt.setAttribute('aria-hidden', 'false');
-            attributes(trgt.previousElementSibling, { 'aria-selected': 'true', 'aria-expanded': 'true' });
+            attributes(trgtItemEle, { 'aria-expanded': 'true' });
+            attributes(trgt.previousElementSibling, { 'aria-selected': 'true' });
             icon.classList.remove(CLS_TOGANIMATE);
             this.trigger('expanded', eventArgs);
         }
@@ -875,7 +872,8 @@ var Accordion = /** @class */ (function (_super) {
             icon.classList.remove(CLS_TOGANIMATE);
             this.remove(trgtItemEle, CLS_ACTIVE);
             trgt.setAttribute('aria-hidden', 'true');
-            attributes(trgt.previousElementSibling, { 'aria-selected': 'false', 'aria-expanded': 'false' });
+            attributes(trgtItemEle, { 'aria-expanded': 'false' });
+            attributes(trgt.previousElementSibling, { 'aria-selected': 'false' });
             this.trigger('expanded', eventArgs);
         }
     };
@@ -928,6 +926,7 @@ var Accordion = /** @class */ (function (_super) {
             else {
                 ele.insertBefore(innerItemEle, itemEle[index]);
             }
+            this.updateHeaderBlazorTemplate();
             EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);
             EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);
             this.itemAttribUpdate();

package/src/common/h-scroll-model.d.ts

@@ -1,4 +1,4 @@
-import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser, detach } from '@syncfusion/ej2-base';import { classList, SwipeEventArgs, isNullOrUndefined} from '@syncfusion/ej2-base';
+import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -7,9 +7,9 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface HScrollModel extends ComponentModel{
 
     /**
-     * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
-     * @default null
-     */
-    scrollStep?: number;
+     * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
+     * @default null
+     */
+    scrollStep?: number;
 
 }

package/src/common/h-scroll.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 { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, Property, Browser, detach } from '@syncfusion/ej2-base';
 import { classList, isNullOrUndefined } from '@syncfusion/ej2-base';
@@ -206,7 +206,6 @@ var HScroll = /** @class */ (function (_super) {
         var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         navEle.appendChild(navLeftItem);
         nav.appendChild(navItem);
-        nav.setAttribute('tabindex', '0');
         element.appendChild(nav);
         element.insertBefore(navEle, element.firstChild);
         if (this.ieCheck) {