@syncfusion/ej2-navigations 20.4.53 → 21.1.35

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

@@ -4742,7 +4742,9 @@ let Toolbar = class Toolbar extends Component {
         innerEle.forEach((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);
             }
         });
@@ -4796,11 +4798,15 @@ let Toolbar = class Toolbar extends Component {
         const enable = (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) {
@@ -5075,7 +5081,6 @@ let Toolbar = class Toolbar extends Component {
     renderSubComponent(item, index) {
         let dom;
         const innerEle = this.createElement('div', { className: CLS_ITEM });
-        innerEle.setAttribute('aria-disabled', 'false');
         const tempDom = this.createElement('div', {
             innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
         });
@@ -5101,6 +5106,7 @@ let Toolbar = class Toolbar extends Component {
                     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;
@@ -5400,7 +5406,7 @@ let Toolbar = class Toolbar extends Component {
      */
     hideItem(index, value) {
         const isElement = (typeof (index) === 'object') ? true : false;
-        let eleIndex = index;
+        const eleIndex = index;
         let ele;
         if (!isElement && isNullOrUndefined(eleIndex)) {
             return;
@@ -7542,7 +7548,7 @@ let Tab = class Tab extends Component {
                     }).outerHTML;
                     const 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.appendChild(this.createElement('div', attr));
                     selectAll('.' + CLS_ITEM$2, tabItems)[index].appendChild(wrap);
@@ -7670,7 +7676,7 @@ let Tab = class Tab extends Component {
                 }
             }
             const tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
-            const wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false' };
+            const wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };
             tCont.appendChild(this.btnCls.cloneNode(true));
             const wrap = this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -8484,6 +8490,7 @@ let Tab = class Tab extends Component {
         const scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNullOrUndefined(scrCnt)) {
             const scrBar = select('.e-hscroll-bar', this.tbItems);
+            scrBar.removeAttribute('tabindex');
             const scrStart = scrBar.scrollLeft;
             const scrEnd = scrStart + scrBar.offsetWidth;
             const eleStart = target.offsetLeft;
@@ -8853,7 +8860,7 @@ let Tab = class Tab extends Component {
             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.
@@ -8972,6 +8979,7 @@ let Tab = class Tab extends Component {
                 const cntTrg = select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(trg.id), select('.' + CLS_CONTENT$1, this.element));
                 if (!isNullOrUndefined(cntTrg)) {
                     const registeredTemplate = this.registeredTemplate;
+                    const portal = this.portals;
                     if (registeredTemplate && registeredTemplate.content) {
                         var templateToClear = [];
                         for (let i = 0; i < registeredTemplate.content.length; i++) {
@@ -8986,6 +8994,16 @@ let Tab = class Tab extends Component {
                             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);
@@ -9357,7 +9375,7 @@ let Tab = class Tab extends Component {
                     }
                 }
                 const tabIndex = isNullOrUndefined(item.tabIndex) ? '-1' : item.tabIndex.toString();
-                const wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true' };
+                const wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true', 'aria-disabled': 'false' };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 const wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -9419,7 +9437,7 @@ let Tab = class Tab extends Component {
             const tabIndex = element.firstElementChild.getAttribute('data-tabindex');
             const 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);
@@ -11484,6 +11502,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.isLoaded) {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
+            this.isRightClick = false;
         }
         this.isRightClick = false;
     }
@@ -12329,7 +12348,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             this.renderReactTemplates();
         }
         else {
-            txtEle.innerText = newText;
+            this.enableHtmlSanitizer ? txtEle.innerText = newText : txtEle.innerHTML = newText;
         }
         if (isInput) {
             removeClass([liEle], EDITING);
@@ -14787,7 +14806,7 @@ let Sidebar = class Sidebar extends Component {
         setStyleAttribute(this.element, { 'z-index': '' + this.zIndex });
     }
     addClass() {
-        if (this.element.tagName === "EJS-SIDEBAR") {
+        if (this.element.tagName === 'EJS-SIDEBAR') {
             addClass([this.element], DISPLAY);
         }
         const classELement = document.querySelector('.e-main-content');
@@ -15376,6 +15395,38 @@ const TABINDEX = 'tabindex';
 const DISABLEDCLASS = 'e-disabled';
 const ARIADISABLED = 'aria-disabled';
 const 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 = {}));
 class BreadcrumbItem extends ChildProperty {
 }
 __decorate$10([
@@ -16197,6 +16248,7 @@ let Carousel = class Carousel extends Component {
     }
     onPropertyChanged(newProp, oldProp) {
         let target;
+        let rtlElement;
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
                 case 'animationEffect':
@@ -16232,11 +16284,20 @@ let Carousel = class Carousel extends Component {
                     }
                     break;
                 case 'enableRtl':
+                    rtlElement = [].slice.call(this.element.querySelectorAll(`.${CLS_PREV_BUTTON},
+                .${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) {
+                        const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+                        const cloneCount = this.loop ? 2 : 0;
+                        const slideWidth = itemsContainer.firstElementChild.clientWidth;
+                        itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
                     }
                     break;
                 case 'buttonsVisibility':
@@ -16383,12 +16444,16 @@ let Carousel = class Carousel extends Component {
             const slideWidth = itemsContainer.firstElementChild.clientWidth;
             const 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();
     }
+    getTranslateX(slideWidth, count = 1) {
+        return this.enableRtl ? `translateX(${(slideWidth) * (count)}px)` :
+            `translateX(${-(slideWidth) * (count)}px)`;
+    }
     renderSlide(item, itemTemplate, index, container, isClone = false) {
         const itemEle = this.createElement('div', {
             id: getUniqueID('carousel_item'),
@@ -16440,7 +16505,7 @@ let Carousel = class Carousel extends Component {
         }
         else {
             const 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' }
             });
             const buttonObj = new Button({
                 cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),
@@ -16469,7 +16534,7 @@ let Carousel = class Carousel extends Component {
         }
         else {
             const 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' }
             });
             const isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;
             const buttonObj = new Button({
@@ -16512,7 +16577,7 @@ let Carousel = class Carousel extends Component {
                     append(template, indicatorBar);
                 }
                 else {
-                    const indicator = this.createElement('button', { className: CLS_INDICATOR$1 });
+                    const indicator = this.createElement('button', { className: CLS_INDICATOR$1, attrs: { 'type': 'button' } });
                     indicatorBar.appendChild(indicator);
                     indicator.appendChild(this.createElement('div', {
                         attrs: {
@@ -16663,17 +16728,17 @@ let Carousel = class Carousel extends Component {
                 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') {
@@ -16715,7 +16780,7 @@ let Carousel = class Carousel extends Component {
                 const container = this.element.querySelector('.' + CLS_ITEMS$2);
                 const 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);
@@ -17345,5 +17410,5 @@ AppBar = __decorate$12([
  * 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.es2015.js.map