@syncfusion/ej2-navigations 20.4.53 → 21.1.35

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

@@ -4892,7 +4892,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         innerEle.forEach(function (ele) {
             if (ele.tagName === 'DIV') {
                 _this.tbarEle.push(ele);
-                ele.setAttribute('aria-disabled', 'false');
+                if (!isNullOrUndefined(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'false');
+                }
                 _this.add(ele, CLS_ITEM);
             }
         });
@@ -4946,11 +4948,15 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
         var enable = function (isEnable, ele) {
             if (isEnable) {
                 ele.classList.remove(CLS_DISABLE$2);
-                ele.setAttribute('aria-disabled', 'false');
+                if (!isNullOrUndefined(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'false');
+                }
             }
             else {
                 ele.classList.add(CLS_DISABLE$2);
-                ele.setAttribute('aria-disabled', 'true');
+                if (!isNullOrUndefined(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'true');
+                }
             }
         };
         if (!isNullOrUndefined(len) && len >= 1) {
@@ -5227,7 +5233,6 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
     Toolbar.prototype.renderSubComponent = function (item, index) {
         var dom;
         var innerEle = this.createElement('div', { className: CLS_ITEM });
-        innerEle.setAttribute('aria-disabled', 'false');
         var tempDom = this.createElement('div', {
             innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
         });
@@ -5253,6 +5258,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
                     dom.setAttribute('tabindex', isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString());
                     dom.setAttribute('data-tabindex', isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString());
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
+                    dom.setAttribute('aria-disabled', 'false');
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
                     break;
@@ -7809,7 +7815,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     }).outerHTML;
                     var wrap = _this.createElement('div', {
                         className: CLS_WRAP, innerHTML: cont,
-                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT$1 + _this.tabId + '_' + index }
+                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT$1 + _this.tabId + '_' + index, 'aria-disabled': 'false' }
                     });
                     tabItems_1.appendChild(_this.createElement('div', attr));
                     selectAll('.' + CLS_ITEM$2, tabItems_1)[index].appendChild(wrap);
@@ -7938,7 +7944,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             var tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false' };
+            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -8758,6 +8764,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         var scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNullOrUndefined(scrCnt)) {
             var scrBar = select('.e-hscroll-bar', this.tbItems);
+            scrBar.removeAttribute('tabindex');
             var scrStart = scrBar.scrollLeft;
             var scrEnd = scrStart + scrBar.offsetWidth;
             var eleStart = target.offsetLeft;
@@ -9130,7 +9137,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.items[index].disabled = !value;
             this.dataBind();
         }
-        tbItems.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');
+        tbItems.firstElementChild.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');
     };
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
@@ -9252,13 +9259,14 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 var cntTrg = select('#' + CLS_CONTENT$1 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));
                 if (!isNullOrUndefined(cntTrg)) {
                     var registeredTemplate = _this.registeredTemplate;
+                    var portal = _this.portals;
                     if (registeredTemplate && registeredTemplate.content) {
                         var templateToClear = [];
-                        for (var i = 0; i < registeredTemplate.content.length; i++) {
-                            var registeredItem = registeredTemplate.content[i].rootNodes[0];
-                            var closestItem = closest(registeredItem, '.' + CLS_ITEM$2);
-                            if (!isNullOrUndefined(registeredItem) && closestItem === cntTrg) {
-                                templateToClear.push(registeredTemplate.content[i]);
+                        for (var i_2 = 0; i_2 < registeredTemplate.content.length; i_2++) {
+                            var registeredItem = registeredTemplate.content[i_2].rootNodes[0];
+                            var closestItem_1 = closest(registeredItem, '.' + CLS_ITEM$2);
+                            if (!isNullOrUndefined(registeredItem) && closestItem_1 === cntTrg) {
+                                templateToClear.push(registeredTemplate.content[i_2]);
                                 break;
                             }
                         }
@@ -9266,6 +9274,16 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                             _this.clearTemplate(['content'], templateToClear);
                         }
                     }
+                    else if (portal) {
+                        for (var i = 0; i < portal.length; i++) {
+                            var portalItem = portal[i];
+                            var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM$2);
+                            if (!isNullOrUndefined(portalItem) && closestItem === cntTrg) {
+                                _this.clearTemplate(['content'], i);
+                                break;
+                            }
+                        }
+                    }
                     detach(cntTrg);
                 }
                 _this.trigger('removed', tabRemovingArgs);
@@ -9642,7 +9660,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 var tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
-                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true' };
+                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true', 'aria-disabled': 'false' };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -9704,7 +9722,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             var tabIndex = element.firstElementChild.getAttribute('data-tabindex');
             var wrap = this.createElement('div', {
                 className: CLS_WRAP, innerHTML: conte,
-                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index, 'aria-selected': 'true' }
+                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + index, 'aria-selected': 'true', 'aria-disabled': 'false' }
             });
             tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
             this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE$1).appendChild(wrap);
@@ -11812,6 +11830,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         if (this.isLoaded) {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
+            this.isRightClick = false;
         }
         this.isRightClick = false;
     };
@@ -12664,7 +12683,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             this.renderReactTemplates();
         }
         else {
-            txtEle.innerText = newText;
+            this.enableHtmlSanitizer ? txtEle.innerText = newText : txtEle.innerHTML = newText;
         }
         if (isInput) {
             removeClass([liEle], EDITING);
@@ -15148,7 +15167,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
         setStyleAttribute(this.element, { 'z-index': '' + this.zIndex });
     };
     Sidebar.prototype.addClass = function () {
-        if (this.element.tagName === "EJS-SIDEBAR") {
+        if (this.element.tagName === 'EJS-SIDEBAR') {
             addClass([this.element], DISPLAY);
         }
         var classELement = document.querySelector('.e-main-content');
@@ -15754,6 +15773,38 @@ var TABINDEX = 'tabindex';
 var DISABLEDCLASS = 'e-disabled';
 var ARIADISABLED = 'aria-disabled';
 var DOT = '.';
+/**
+ * Defines the Breadcrumb overflow modes.
+ */
+var BreadcrumbOverflowMode;
+(function (BreadcrumbOverflowMode) {
+    /**
+     * Hidden mode shows the maximum number of items possible in the container space and hides the remaining items.
+     * Clicking on a previous item will make the hidden item visible.
+     */
+    BreadcrumbOverflowMode["Hidden"] = "Hidden";
+    /**
+     * Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon.
+     * When the collapsed icon is clicked, all items become visible and navigable.
+     */
+    BreadcrumbOverflowMode["Collapsed"] = "Collapsed";
+    /**
+     * Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
+     */
+    BreadcrumbOverflowMode["Menu"] = "Menu";
+    /**
+     * Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.
+     */
+    BreadcrumbOverflowMode["Wrap"] = "Wrap";
+    /**
+     * Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
+     */
+    BreadcrumbOverflowMode["Scroll"] = "Scroll";
+    /**
+     * None mode shows all the items in a single line.
+     */
+    BreadcrumbOverflowMode["None"] = "None";
+})(BreadcrumbOverflowMode || (BreadcrumbOverflowMode = {}));
 var BreadcrumbItem = /** @__PURE__ @class */ (function (_super) {
     __extends$10(BreadcrumbItem, _super);
     function BreadcrumbItem() {
@@ -16607,6 +16658,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     };
     Carousel.prototype.onPropertyChanged = function (newProp, oldProp) {
         var target;
+        var rtlElement;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -16643,11 +16695,19 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'enableRtl':
+                    rtlElement = [].slice.call(this.element.querySelectorAll("." + CLS_PREV_BUTTON + ",\n                ." + CLS_NEXT_BUTTON + ", ." + CLS_PLAY_BUTTON));
+                    rtlElement.push(this.element);
                     if (this.enableRtl) {
-                        addClass([this.element], CLS_RTL$5);
+                        addClass(rtlElement, CLS_RTL$5);
                     }
                     else {
-                        removeClass([this.element], CLS_RTL$5);
+                        removeClass(rtlElement, CLS_RTL$5);
+                    }
+                    if (this.partialVisible) {
+                        var itemsContainer = this.element.querySelector("." + CLS_ITEMS$2);
+                        var cloneCount = this.loop ? 2 : 0;
+                        var slideWidth = itemsContainer.firstElementChild.clientWidth;
+                        itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
                     }
                     break;
                 case 'buttonsVisibility':
@@ -16795,12 +16855,17 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             var slideWidth = itemsContainer.firstElementChild.clientWidth;
             var cloneCount = this.loop ? 2 : 0;
             itemsContainer.style.transitionProperty = 'none';
-            itemsContainer.style.transform = "translateX(" + -(slideWidth) * (this.selectedIndex + cloneCount) + "px)";
+            itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
         }
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
     };
+    Carousel.prototype.getTranslateX = function (slideWidth, count) {
+        if (count === void 0) { count = 1; }
+        return this.enableRtl ? "translateX(" + (slideWidth) * (count) + "px)" :
+            "translateX(" + -(slideWidth) * (count) + "px)";
+    };
     Carousel.prototype.renderSlide = function (item, itemTemplate, index, container, isClone) {
         if (isClone === void 0) { isClone = false; }
         var itemEle = this.createElement('div', {
@@ -16853,7 +16918,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             var button = this.createElement('button', {
-                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide'), 'type': 'button' }
             });
             var buttonObj = new Button({
                 cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),
@@ -16882,7 +16947,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             var playButton = this.createElement('button', {
-                attrs: { 'aria-label': this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition') }
+                attrs: { 'aria-label': this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'), 'type': 'button' }
             });
             var isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;
             var buttonObj = new Button({
@@ -16926,7 +16991,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                     append(template, indicatorBar);
                 }
                 else {
-                    var indicator = _this.createElement('button', { className: CLS_INDICATOR$1 });
+                    var indicator = _this.createElement('button', { className: CLS_INDICATOR$1, attrs: { 'type': 'button' } });
                     indicatorBar.appendChild(indicator);
                     indicator.appendChild(_this.createElement('div', {
                         attrs: {
@@ -17080,17 +17145,17 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 container.style.transitionProperty = 'transform';
                 if (_this.loop) {
                     if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
-                        container.style.transform = "translateX(" + -(slideWidth) * (allSlides.length + 2) + "px)";
+                        container.style.transform = _this.getTranslateX(slideWidth, allSlides.length + 2);
                     }
                     else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {
-                        container.style.transform = "translateX(" + -(slideWidth) + "px)";
+                        container.style.transform = _this.getTranslateX(slideWidth);
                     }
                     else {
-                        container.style.transform = "translateX(" + -(slideWidth) * (currentIndex + 2) + "px)";
+                        container.style.transform = _this.getTranslateX(slideWidth, currentIndex + 2);
                     }
                 }
                 else {
-                    container.style.transform = "translateX(" + -(slideWidth) * (currentIndex) + "px)";
+                    container.style.transform = _this.getTranslateX(slideWidth, currentIndex);
                 }
             }
             if (_this.animationEffect === 'Slide') {
@@ -17133,7 +17198,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 var container = this.element.querySelector('.' + CLS_ITEMS$2);
                 var slideWidth = this.slideChangedEventArgs.currentSlide.clientWidth;
                 container.style.transitionProperty = 'none';
-                container.style.transform = "translate(" + -(slideWidth) * (this.slideChangedEventArgs.currentIndex + 2) + "px)";
+                container.style.transform = this.getTranslateX(slideWidth, this.slideChangedEventArgs.currentIndex + 2);
             }
             addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE$2);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE$2);
@@ -17787,5 +17852,5 @@ var AppBar = /** @__PURE__ @class */ (function (_super) {
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
+export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbOverflowMode, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
 //# sourceMappingURL=ej2-navigations.es5.js.map