@syncfusion/ej2-navigations 22.2.11 → 23.1.39

package/dist/es6/ej2-navigations.es5.js

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, animationMode, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getElement, getInstance, getRandomId, getUniqueID, getValue, initializeCSPTemplate, isBlazor, isNullOrUndefined, isRippleEnabled, isUndefined, isVisible, matches, merge, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup, calculatePosition, createSpinner, fit, getScrollableParent, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
@@ -1359,10 +1359,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 }
             }
         }
@@ -1540,7 +1540,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             var popups_1 = [];
             var allPopup = selectAll('.' + POPUP);
             allPopup.forEach(function (elem) {
-                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + "-" + elem.id.split('-')[3]) {
+                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
                     popups_1.push(elem);
                 }
             });
@@ -1908,7 +1908,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             if (isNullOrUndefined(e)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var ev = document.createEvent('MouseEvents');
-                ev.initEvent("click", true, false);
+                ev.initEvent('click', true, false);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var targetEvent = this.copyObject(ev, {});
                 targetEvent.target = targetEvent.srcElement = target;
@@ -1921,6 +1921,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MenuBase.prototype.copyObject = function (source, destination) {
         for (var prop in source) {
             destination["" + prop] = source["" + prop];
@@ -2888,10 +2889,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 }
             }
         }
@@ -3167,7 +3168,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                 if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
                 }
-                else {
+                else if (!ishide && validUl === items[i]) {
                     ul.children[index].classList.remove(HIDE);
                 }
             }
@@ -4060,10 +4061,16 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Toolbar.prototype.render = function () {
+        var _this = this;
         this.initialize();
         this.renderControl();
         this.wireEvents();
         this.renderComplete();
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                _this.refreshOverflow();
+            });
+        }
     };
     Toolbar.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -5240,7 +5247,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
             var tempArray = void 0;
             if (!isNullOrUndefined(templateFn)) {
                 var toolbarTemplateID = this.element.id + index + '_template';
-                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);
+                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate, undefined, undefined, this.root);
             }
             if (!isNullOrUndefined(tempArray) && tempArray.length > 0) {
                 [].slice.call(tempArray).forEach(function (ele) {
@@ -5896,7 +5903,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
         var ele = this.element;
         _super.prototype.destroy.call(this);
-        this.unwireEvents();
+        this.unWireEvents();
         this.isDestroy = true;
         this.restoreContent(null);
         [].slice.call(ele.children).forEach(function (el) {
@@ -5984,7 +5991,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    Accordion.prototype.unwireEvents = function () {
+    Accordion.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNullOrUndefined(this.keyModule)) {
             this.keyModule.destroy();
@@ -6303,7 +6310,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
-            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));
+            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index));
             innerEle.appendChild(ctnEle);
         }
         var hdr = select('.' + CLS_HEADER, innerEle);
@@ -6365,8 +6372,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             return true;
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
+    Accordion.prototype.fetchElement = function (ele, value, index) {
         var templateFn;
         var temString;
         try {
@@ -6450,7 +6456,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 this.items[parseInt(index.toString(), 10)].content =
                     SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
         }
         return itemcnt;
     };
@@ -6484,7 +6490,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                     expandState.classList.remove(CLS_EXPANDSTATE);
                 }
                 trgtItemEle.classList.add(CLS_EXPANDSTATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     _this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     _this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -6496,6 +6502,10 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {
         var _this = this;
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideDown';
+            animate.name = 'SlideDown';
+        }
         var height;
         this.lastActiveItemId = trgtItemEle.id;
         if (ef === 'SlideDown') {
@@ -6590,7 +6600,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 _this.expandedItemsPop(trgtItemEle);
                 trgtItemEle.classList.remove(CLS_EXPANDSTATE);
                 icon.classList.add(CLS_TOGANIMATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     _this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -6602,6 +6612,10 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
     };
     Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {
         var _this = this;
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideUp';
+            animate.name = 'SlideUp';
+        }
         var height;
         var trgtHeight;
         var itemHeight;
@@ -6702,7 +6716,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 _this.expandedIndices = [];
-                _this.expandedItemRefresh(ele);
+                _this.expandedItemRefresh();
                 if (addItem && addItem.expanded) {
                     _this.expandItem(true, itemIndex);
                 }
@@ -6712,8 +6726,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
             this.renderReactTemplates();
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Accordion.prototype.expandedItemRefresh = function (ele) {
+    Accordion.prototype.expandedItemRefresh = function () {
         var _this = this;
         var itemEle = this.getItemElements();
         [].slice.call(itemEle).forEach(function (el) {
@@ -6729,8 +6742,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     Accordion.prototype.removeItem = function (index) {
-        if (this.isReact) {
-            this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
+        if (this.isReact || this.isAngular) {
+            var item = selectAll('.' + CLS_ITEM$1, this.element)[parseInt(index.toString(), 10)];
+            var header = select('.' + CLS_HEADERCTN, item);
+            var content = select('.' + CLS_CTENT, item);
+            this.clearAccordionTemplate(header, this.dataSource.length > 0 ? 'headerTemplate' : 'header', CLS_HEADERCTN);
+            this.clearAccordionTemplate(content, this.dataSource.length > 0 ? 'itemTemplate' : 'content', CLS_CTENT);
         }
         var itemEle = this.getItemElements();
         var ele = itemEle[parseInt(index.toString(), 10)];
@@ -6742,7 +6759,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         detach(ele);
         items.splice(index, 1);
         this.expandedIndices = [];
-        this.expandedItemRefresh(this.element);
+        this.expandedItemRefresh();
     };
     /**
      * Sets focus to the specified index item header in Accordion.
@@ -6919,28 +6936,18 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Accordion.prototype.setTemplate = function (template, toElement, index) {
-        toElement.innerHTML = '';
-        this.templateCompile(toElement, template, index);
+        this.fetchElement(toElement, template, index);
         if (this.isReact) {
             this.renderReactTemplates();
         }
     };
-    Accordion.prototype.templateCompile = function (ele, cnt, index) {
-        var tempEle = this.createElement('div');
-        this.fetchElement(tempEle, cnt, index, false);
-        if (tempEle.childNodes.length !== 0) {
-            [].slice.call(tempEle.childNodes).forEach(function (childEle) {
-                ele.appendChild(childEle);
-            });
-        }
-    };
     Accordion.prototype.clearAccordionTemplate = function (templateEle, templateName, className) {
         if (this.registeredTemplate && this.registeredTemplate["" + templateName]) {
             var registeredTemplates = this.registeredTemplate;
             for (var index = 0; index < registeredTemplates["" + templateName].length; index++) {
                 var registeredItem = registeredTemplates["" + templateName][parseInt(index.toString(), 10)].rootNodes[0];
-                var closestItem = closest(registeredItem.containerInfo, '.' + className);
-                if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
+                var closestItem = closest(registeredItem, '.' + className);
+                if (!isNullOrUndefined(closestItem) && closestItem === templateEle || isNullOrUndefined(registeredItem.parentNode)) {
                     this.clearTemplate([templateName], [registeredTemplates["" + templateName][parseInt(index.toString(), 10)]]);
                     break;
                 }
@@ -7010,7 +7017,8 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                                 if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNullOrUndefined(item)) {
                                     this.enableItem(index, !newVal);
                                 }
-                                if (property[parseInt(k.toString(), 10)] === 'content' && !isNullOrUndefined(item) && item.children.length === 2) {
+                                if (property.indexOf('header') < 0 && property[parseInt(k.toString(), 10)] === 'content'
+                                    && !isNullOrUndefined(item) && item.children.length === 2) {
                                     if (typeof newVal === 'function') {
                                         if (this.isAngular || this.isReact) {
                                             this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);
@@ -7855,6 +7863,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Tab.prototype.render = function () {
+        var _this = this;
         this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });
         this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();
         this.renderContainer();
@@ -7862,7 +7871,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         this.initRender = false;
         if (this.isReact && this.portals && this.portals.length > 0) {
             this.renderReactTemplates(function () {
-                this.refreshActiveBorder();
+                if (!isNullOrUndefined(_this.tbObj)) {
+                    _this.tbObj.refreshOverflow();
+                }
+                _this.refreshActiveBorder();
             });
         }
     };
@@ -8077,10 +8089,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
-            if (_this.itemIndexArray === []) {
-                _this.itemIndexArray.push(CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex);
-            }
-            else {
+            if (_this.itemIndexArray instanceof Array) {
                 _this.itemIndexArray.splice((index + i), 0, CLS_ITEM$2 + _this.tabId + '_' + _this.lastIndex);
             }
             var attrObj = {
@@ -8238,10 +8247,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        var isPrevent = isNullOrUndefined(this.animation) || this.animation.next === {} || this.animation.previous === {}
-            || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(this.animation.previous.effect)
-            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
-        if (this.initRender || value === false || this.animation === {} || isPrevent) {
+        var isPrevent = isNullOrUndefined(this.animation) || isNullOrUndefined(this.animation.next.effect) || isNullOrUndefined(this.animation.previous.effect)
+            || this.animation.previous.effect === 'None' || this.animation.next.effect === 'None';
+        if (this.initRender || value === false || isPrevent) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE$1);
             }
@@ -8253,7 +8261,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var openEff = this.animation.previous.effect;
             animateObj = {
                 name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),
-                duration: this.animation.previous.duration,
+                duration: (this.animation.previous.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.previous.duration,
                 timingFunction: this.animation.previous.easing
             };
         }
@@ -8261,7 +8269,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var clsEff = this.animation.next.effect;
             animateObj = {
                 name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),
-                duration: this.animation.next.duration,
+                duration: (this.animation.next.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.next.duration,
                 timingFunction: this.animation.next.easing
             };
         }
@@ -8371,7 +8379,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     };
     Tab.prototype.getContent = function (ele, cnt, callType, index) {
         var eleStr;
-        cnt = isNullOrUndefined(cnt) ? "" : cnt;
+        cnt = isNullOrUndefined(cnt) ? '' : cnt;
         if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {
             if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
                 cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -8722,7 +8730,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
     };
     Tab.prototype.showPopup = function (config) {
         var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
-        if (tbPop.classList.contains('e-popup-close')) {
+        if (tbPop && tbPop.classList.contains('e-popup-close')) {
             var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
             tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
             tbPopObj.dataBind();
@@ -9173,8 +9181,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             clonedElement: this.cloneElement,
             cancel: false
         };
-        this.trigger('onDragStart', dragArgs, function (tabitemDragArgs) {
-            if (tabitemDragArgs.cancel) {
+        this.trigger('onDragStart', dragArgs, function (tabItemDragArgs) {
+            if (tabItemDragArgs.cancel) {
                 var dragObj = e.element.ej2_instances[0];
                 if (!isNullOrUndefined(dragObj)) {
                     dragObj.intDestroy(e.event);
@@ -10850,7 +10858,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             }
         }
         var eNodes = selectAll('.' + EXPANDED, element);
-        if (!this.loadOnDemand) {
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
             this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
         }
         if (!this.isInitalExpand) {
@@ -11359,7 +11367,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
     TreeView.prototype.doExpandAction = function () {
         var _this = this;
         var eUids = this.expandedNodes;
-        if (!this.loadOnDemand) {
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
             this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
         }
         if (this.isInitalExpand && eUids.length > 0) {
@@ -11554,7 +11562,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
                 if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul_1, {
                         name: this.animation.expand.effect,
-                        duration: this.animation.expand.duration,
+                        duration: (this.animation.expand.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.expand.duration,
                         timingFunction: this.animation.expand.easing,
                         begin: function (args) {
                             liEle_1.style.overflow = 'hidden';
@@ -11656,7 +11664,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         if (this.isAnimate) {
             this.aniObj.animate(ul, {
                 name: this.animation.collapse.effect,
-                duration: this.animation.collapse.duration,
+                duration: (this.animation.collapse.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.collapse.duration,
                 timingFunction: this.animation.collapse.easing,
                 begin: function (args) {
                     liEle.style.overflow = 'hidden';
@@ -15374,7 +15382,8 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
             this.show();
         }
         else if (!this.isOpen) {
-            addClass([this.element], CLOSE);
+            addClass([this.element], [CLOSE, DISABLEANIMATION]);
+            removeClass([this.element], DISABLEANIMATION);
         }
     };
     Sidebar.prototype.checkType = function (val) {
@@ -16232,6 +16241,7 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
                     // list item
                     listBaseOptions.itemClass = '';
                     if (this.itemTemplate) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         listBaseOptions.template = this.itemTemplate;
                         isSingleLevel = false;
                     }
@@ -17015,6 +17025,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
+        carouselClasses.push(CLS_CAROUSEL);
         if (this.cssClass) {
             carouselClasses.push(this.cssClass);
         }
@@ -17029,7 +17040,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
         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') });
+        attributes(this.element, { 'tabindex': '0', 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
         if (!isNullOrUndefined(this.htmlAttributes)) {
             this.setHtmlAttributes(this.htmlAttributes, this.element);
         }
@@ -17103,7 +17114,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             className: CLS_ITEM$3 + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index && !isClone ? CLS_ACTIVE$2 : ''),
             attrs: {
                 'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),
-                'aria-role': 'group', 'aria-roledescription': 'slide'
+                'role': 'group', 'aria-roledescription': 'slide'
             }
         });
         if (isClone) {
@@ -18104,6 +18115,7 @@ var AppBar = /** @__PURE__ @class */ (function (_super) {
         // pre render code
     };
     AppBar.prototype.render = function () {
+        this.element.classList.add(CLS_APPBAR);
         if (this.element.tagName !== 'HEADER') {
             this.element.setAttribute('role', 'header');
         }