@syncfusion/ej2-navigations 17.2.55-1205479 → 17.3.14-96615

package/src/accordion/accordion.js

@@ -1,25 +1,25 @@
-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 } from '@syncfusion/ej2-base';
+import { isVisible, closest, attributes, detach, select, isBlazor, addClass, append } from '@syncfusion/ej2-base';
 import { 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';
@@ -193,12 +193,12 @@ var Accordion = /** @class */ (function (_super) {
      * @private
      */
     Accordion.prototype.render = function () {
+        this.initializeheaderTemplate();
+        this.initializeItemTemplate();
         this.initialize();
         this.renderControl();
         this.wireEvents();
-        if (isBlazor()) {
-            this.renderComplete();
-        }
+        this.renderComplete();
     };
     Accordion.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -239,6 +239,51 @@ var Accordion = /** @class */ (function (_super) {
             });
         }
     };
+    Accordion.prototype.templateParser = function (template) {
+        if (template) {
+            try {
+                if (document.querySelectorAll(template).length) {
+                    return templateCompiler(document.querySelector(template).innerHTML.trim());
+                }
+            }
+            catch (error) {
+                return templateCompiler(template);
+            }
+        }
+        return undefined;
+    };
+    Accordion.prototype.initializeheaderTemplate = function () {
+        if (this.headerTemplate) {
+            this.headerTemplateFn = this.templateParser(this.headerTemplate);
+        }
+    };
+    Accordion.prototype.initializeItemTemplate = function () {
+        if (this.itemTemplate) {
+            this.itemTemplateFn = this.templateParser(this.itemTemplate);
+        }
+    };
+    Accordion.prototype.getheaderTemplate = function () {
+        return this.headerTemplateFn;
+    };
+    Accordion.prototype.getItemTemplate = function () {
+        return this.itemTemplateFn;
+    };
+    Accordion.prototype.updateContentBlazorTemplate = function (item, index) {
+        if (this.itemTemplate && isBlazor() && !this.isStringTemplate) {
+            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);
     };
@@ -256,13 +301,15 @@ var Accordion = /** @class */ (function (_super) {
             innerEles = this.element.children;
         }
         var items = [];
+        /* tslint:disable */
         [].slice.call(innerEles).forEach(function (el) {
             items.push({
-                header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]).innerHTML : '',
-                content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]).innerHTML : ''
+                header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',
+                content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]) : ''
             });
             el.parentNode.removeChild(el);
         });
+        /* tslint:enable */
         if (rootEle) {
             this.element.removeChild(rootEle);
         }
@@ -292,32 +339,43 @@ var Accordion = /** @class */ (function (_super) {
         var _this = this;
         var ele = this.element;
         var innerItem;
+        var innerDataSourceItem;
         if (isNOU(this.initExpand)) {
             this.initExpand = [];
         }
         if (!isNOU(this.trgtEle)) {
             this.ctrlTemplate();
         }
-        var items = this.items;
-        if (ele && items.length > 0) {
-            items.forEach(function (item, index) {
-                innerItem = _this.renderInnerItem(item, index);
-                ele.appendChild(innerItem);
-                var blazorContain = Object.keys(window);
-                if (item.header && blazorContain.indexOf('Blazor') > -1 && !_this.isStringTemplate
-                    && item.header.indexOf('<div>Blazor') === 0) {
-                    updateBlazorTemplate(_this.element.id + index + '_header', 'HeaderTemplate', item);
-                }
-                if (innerItem.childElementCount > 0) {
-                    EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
-                    EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
+        if (this.dataSource.length > 0) {
+            this.dataSource.forEach(function (item, index) {
+                innerDataSourceItem = _this.renderInnerItem(item, index);
+                ele.appendChild(innerDataSourceItem);
+                if (innerDataSourceItem.childElementCount > 0) {
+                    EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
+                    EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 }
             });
+            this.updateHeaderBlazorTemplate();
+        }
+        else {
+            var items = this.items;
+            if (ele && items.length > 0) {
+                items.forEach(function (item, index) {
+                    innerItem = _this.renderInnerItem(item, index);
+                    ele.appendChild(innerItem);
+                    _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);
+                    }
+                });
+            }
         }
     };
     Accordion.prototype.clickHandler = function (e) {
         var _this = this;
         var trgt = e.target;
+        var items = this.getItems();
         var eventArgs = {};
         var index;
         var tglIcon;
@@ -346,17 +404,13 @@ var Accordion = /** @class */ (function (_super) {
         var acrdActive = [];
         index = this.getIndexByItem(acrdnItem);
         if (acrdnCtnItem) {
-            eventArgs.item = this.items[this.getIndexByItem(acrdnCtnItem)];
+            eventArgs.item = items[this.getIndexByItem(acrdnCtnItem)];
         }
         eventArgs.originalEvent = e;
         var ctnCheck = !isNOU(tglIcon) && acrdnItem.childElementCount <= 1;
         if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {
             acrdnItem.appendChild(this.contentRendering(index));
-            var blazorContain = Object.keys(window);
-            if (eventArgs.item.content && blazorContain.indexOf('Blazor') > -1 && !this.isStringTemplate
-                && eventArgs.item.content.indexOf('<div>Blazor') === 0) {
-                updateBlazorTemplate(this.element.id + index + '_content', 'ContentTemplate', eventArgs.item);
-            }
+            this.updateContentBlazorTemplate(eventArgs.item, index);
             this.ariaAttrUpdate(acrdnItem);
         }
         this.trigger('clicked', eventArgs);
@@ -463,9 +517,10 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.headerEleGenerate = function () {
         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',
-            'aria-disabled': 'false', 'aria-level': this.items.length.toString()
+            'tabindex': '0', 'role': 'heading', 'aria-selected': 'false',
+            'aria-disabled': 'false', 'aria-level': items.length.toString()
         };
         attributes(header, ariaAttr);
         return header;
@@ -474,6 +529,17 @@ 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 });
+            ctnEle.appendChild(hdrEle);
+            append(this.getheaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
+            innerEle.appendChild(ctnEle);
+            ctnEle.appendChild(this.toggleIconGenerate());
+            this.add(innerEle, CLS_SLCT);
+            return innerEle;
+        }
         if (item.header && this.angularnativeCondiCheck(item, 'header')) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
@@ -488,7 +554,12 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
         if (item.cssClass) {
-            innerEle.classList.add(item.cssClass);
+            var acrdnClass = item.cssClass;
+            var arcdnClassList = [];
+            arcdnClassList = acrdnClass.split(' ');
+            arcdnClassList.forEach(function (el) {
+                addClass([innerEle], el);
+            });
         }
         if (item.iconCss) {
             var hdrIcnEle = this.createElement('div', { className: CLS_HEADERICN });
@@ -535,7 +606,6 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
-        var blazorContain = Object.keys(window);
         var templateFn;
         var temString;
         try {
@@ -547,8 +617,14 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
         catch (e) {
-            if (typeof (value) === 'string' && blazorContain.indexOf('Blazor') > -1 && value.indexOf('<div>Blazor') !== 0) {
+            if (typeof (value) === 'string' && isBlazor() && value.indexOf('<div>Blazor') !== 0) {
                 ele.innerHTML = value;
+                /* tslint:disable */
+            }
+            else if (!isNOU(this.trgtEle) && (value instanceof (HTMLElement))) {
+                ele.appendChild(value);
+                ele.firstElementChild.style.display = '';
+                /* tslint:enable */
             }
             else {
                 templateFn = templateCompiler(value);
@@ -588,18 +664,25 @@ 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 content = this.items[index].content;
         var itemcnt = this.createElement('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });
         attributes(itemcnt, { 'aria-hidden': 'true' });
         var ctn = this.createElement('div', { className: CLS_CTENT });
-        itemcnt.appendChild(this.fetchElement(ctn, content, index, false));
+        if (this.dataSource.length > 0) {
+            append(this.getItemTemplate()(this.dataSource[index], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+            itemcnt.appendChild(ctn);
+        }
+        else {
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[index].content, index, false));
+        }
         return itemcnt;
     };
     Accordion.prototype.expand = function (trgt) {
         var _this = this;
         var eventArgs;
+        var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM);
         if (isNOU(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE)) {
             return;
@@ -613,7 +696,7 @@ var Accordion = /** @class */ (function (_super) {
         };
         var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;
         eventArgs = { element: trgtItemEle,
-            item: this.items[this.getIndexByItem(trgtItemEle)],
+            item: items[this.getIndexByItem(trgtItemEle)],
             index: this.getIndexByItem(trgtItemEle),
             content: trgtItemEle.querySelector('.' + CLS_CONTENT),
             isExpanded: true };
@@ -676,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);
         }
@@ -708,6 +792,7 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.collapse = function (trgt) {
         var _this = this;
         var eventArgs;
+        var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM);
         if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {
             return;
@@ -719,7 +804,7 @@ var Accordion = /** @class */ (function (_super) {
         };
         var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;
         eventArgs = { element: trgtItemEle,
-            item: this.items[this.getIndexByItem(trgtItemEle)],
+            item: items[this.getIndexByItem(trgtItemEle)],
             index: this.getIndexByItem(trgtItemEle),
             content: trgtItemEle.querySelector('.' + CLS_CONTENT),
             isExpanded: false };
@@ -787,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);
         }
     };
@@ -800,15 +886,26 @@ var Accordion = /** @class */ (function (_super) {
         return 'accordion';
     };
     Accordion.prototype.itemAttribUpdate = function () {
+        var items = this.getItems();
         var itemEle = this.getItemElements();
-        var itemLen = this.items.length;
+        var itemLen = items.length;
         itemEle.forEach(function (ele) {
             select('.' + CLS_HEADER, ele).setAttribute('aria-level', '' + itemLen);
         });
     };
+    Accordion.prototype.getItems = function () {
+        var items;
+        if (this.itemTemplate && this.headerTemplate) {
+            items = this.dataSource;
+        }
+        else {
+            items = this.items;
+        }
+        return items;
+    };
     /**
      * Adds new item to the Accordion with the specified index of the Accordion.
-     * @param  {AccordionItemModel} item - Item array that is to be added to the Accordion.
+     * @param  {AccordionItemModel | Object} item - Item array that is to be added to the Accordion.
      * @param  {number} index - Number value that determines where the item should be added.
      * By default, item is added at the last index if the index is not specified.
      * @returns void
@@ -816,11 +913,12 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.addItem = function (item, index) {
         var ele = this.element;
         var itemEle = this.getItemElements();
+        var items = this.getItems();
         if (isNOU(index)) {
-            index = this.items.length;
+            index = items.length;
         }
         if (ele.childElementCount >= index) {
-            this.items.splice(index, 0, item);
+            items.splice(index, 0, item);
             var innerItemEle = this.renderInnerItem(item, index);
             if (ele.childElementCount === index) {
                 ele.appendChild(innerItemEle);
@@ -828,13 +926,14 @@ 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();
         }
         this.expandedItems = [];
         this.expandedItemRefresh(ele);
-        if (item.expanded) {
+        if (item && item.expanded) {
             this.expandItem(true, index);
         }
     };
@@ -855,12 +954,13 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.removeItem = function (index) {
         var itemEle = this.getItemElements();
         var ele = itemEle[index];
+        var items = this.getItems();
         if (isNOU(ele)) {
             return;
         }
         this.restoreContent(index);
         detach(ele);
-        this.items.splice(index, 1);
+        items.splice(index, 1);
         this.itemAttribUpdate();
         this.expandedItems = [];
         this.expandedItemRefresh(this.element);
@@ -971,17 +1071,14 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.itemExpand = function (isExpand, ele, index) {
         var ctn = ele.children[1];
+        var items = this.getItems();
         if (ele.classList.contains(CLS_DISABLE)) {
             return;
         }
         if (isNOU(ctn) && isExpand) {
             ctn = this.contentRendering(index);
             ele.appendChild(ctn);
-            var blazorContain = Object.keys(window);
-            var item = this.items[index];
-            if (item.content && blazorContain.indexOf('Blazor') > -1 && !this.isStringTemplate && item.content.indexOf('<div>Blazor') === 0) {
-                updateBlazorTemplate(this.element.id + index + '_content', 'ContentTemplate', item);
-            }
+            this.updateContentBlazorTemplate(items[index], index);
             this.ariaAttrUpdate(ele);
         }
         else if (isNOU(ctn)) {
@@ -1011,8 +1108,9 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.updateItem = function (item, index) {
         if (!isNOU(item)) {
-            var itemObj = this.items[index];
-            this.items.splice(index, 1);
+            var items = this.getItems();
+            var itemObj = items[index];
+            items.splice(index, 1);
             this.restoreContent(index);
             detach(item);
             this.addItem(itemObj, index);
@@ -1031,6 +1129,7 @@ var Accordion = /** @class */ (function (_super) {
      */
     Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {
         var acrdn = this.element;
+        var isRefresh = false;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -1060,11 +1159,20 @@ var Accordion = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        this.destroyItems();
-                        this.renderItems();
-                        this.initItemExpand();
+                        isRefresh = true;
                     }
                     break;
+                case 'dataSource':
+                    isRefresh = true;
+                    break;
+                case 'headerTemplate':
+                    this.initializeheaderTemplate();
+                    isRefresh = true;
+                    break;
+                case 'itemTemplate':
+                    this.initializeItemTemplate();
+                    isRefresh = true;
+                    break;
                 case 'enableRtl':
                     newProp.enableRtl ? this.add(acrdn, CLS_RTL) : this.remove(acrdn, CLS_RTL);
                     break;
@@ -1087,10 +1195,24 @@ var Accordion = /** @class */ (function (_super) {
                     break;
             }
         }
+        if (isRefresh) {
+            this.destroyItems();
+            this.renderItems();
+            this.initItemExpand();
+        }
     };
     __decorate([
         Collection([], AccordionItem)
     ], Accordion.prototype, "items", void 0);
+    __decorate([
+        Property([])
+    ], Accordion.prototype, "dataSource", void 0);
+    __decorate([
+        Property()
+    ], Accordion.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property()
+    ], Accordion.prototype, "headerTemplate", void 0);
     __decorate([
         Property('100%')
     ], Accordion.prototype, "width", void 0);

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) {

package/src/common/index.d.ts

@@ -4,4 +4,5 @@
 export * from './h-scroll';
 export * from './v-scroll';
 export { MenuEventArgs, OpenCloseMenuEventArgs, BeforeOpenCloseMenuEventArgs, MenuAnimationSettings, MenuEffect } from './menu-base';
+export { MenuItem } from './menu-base';
 export { MenuItemModel, FieldSettingsModel, MenuAnimationSettingsModel } from './menu-base-model';

package/src/common/index.js

@@ -4,3 +4,4 @@
 export * from './h-scroll';
 export * from './v-scroll';
 export { MenuAnimationSettings } from './menu-base';
+export { MenuItem } from './menu-base';