@syncfusion/ej2-navigations 20.2.50 → 20.3.48

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

@@ -2202,7 +2202,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
                     tabindex: '-1'
                 };
                 if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {
-                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text];
+                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
+                        args.curData[args.fields.text] : args.curData[args.fields.id];
                 }
                 if (args.curData[args.fields[fields.iconCss]] === '') {
                     args.curData[args.fields[fields.iconCss]] = null;
@@ -6824,8 +6825,12 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
                                 this.updateItem(item, index);
                             }
                             if (property === 'cssClass' && !isNullOrUndefined(item)) {
-                                item.classList.remove(oldVal);
-                                item.classList.add(newVal);
+                                if (oldVal) {
+                                    removeClass([item], oldVal.split(' '));
+                                }
+                                if (newVal) {
+                                    addClass([item], newVal.split(' '));
+                                }
                             }
                             if (property === 'visible' && !isNullOrUndefined(item)) {
                                 if (Object(newProp.items[index])[property] === false) {
@@ -8066,7 +8071,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        if (this.initRender || value === false || this.animation === {} || isNullOrUndefined(this.animation)) {
+        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) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE$1);
             }
@@ -8719,19 +8727,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
                 break;
         }
     };
-    /**
-     * Refresh the active tab border
-     *
-     * @returns {void}
-     * @private
-     */
-    Tab.prototype.refreshActiveTabBorder = function () {
-        var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE$1, this.element);
-        if (!isNullOrUndefined(activeEle) && this.reorderActiveTab) {
-            this.select(this.getEleIndex(activeEle));
-        }
-        this.refreshActiveBorder();
-    };
     Tab.prototype.refreshItemVisibility = function (target) {
         var scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNullOrUndefined(scrCnt)) {
@@ -9554,6 +9549,11 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    /**
+     * To refresh the active tab contents.
+     *
+     * @returns {void}
+     */
     Tab.prototype.refreshActiveTab = function () {
         if (this.isReact) {
             this.clearTemplate();
@@ -9672,6 +9672,18 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
             this.renderReactTemplates();
         }
     };
+    /**
+     * To refresh the active tab indicator.
+     *
+     * @returns {void}
+     */
+    Tab.prototype.refreshActiveTabBorder = function () {
+        var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE$1, this.element);
+        if (!isNullOrUndefined(activeEle) && this.reorderActiveTab) {
+            this.select(this.getEleIndex(activeEle));
+        }
+        this.refreshActiveBorder();
+    };
     __decorate$7([
         Collection([], TabItem)
     ], Tab.prototype, "items", void 0);
@@ -9962,6 +9974,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         _this.changeDataSource = false;
         _this.hasTemplate = false;
         _this.isFirstRender = false;
+        // Specifies whether the node is dropped or not 
+        _this.isNodeDropped = false;
         _this.mouseDownStatus = false;
         return _this;
     }
@@ -11174,11 +11188,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.updateCheckedProp();
         this.isAnimate = true;
         this.isInitalExpand = false;
-        if (!this.isLoaded || this.isFieldChange) {
+        if ((!this.isLoaded || this.isFieldChange) && !this.isNodeDropped) {
             var eventArgs = { data: this.treeData };
             this.trigger('dataBound', eventArgs);
         }
         this.isLoaded = true;
+        this.isNodeDropped = false;
     };
     TreeView.prototype.doSelectionAction = function () {
         var sNodes = selectAll('.' + SELECTED$1, this.element);
@@ -12402,8 +12417,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
             var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;
             var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;
             var checked = null;
-            if (this.showCheckBox) {
-                checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');
+            var checkboxElement = select('.' + CHECKBOXWRAP, currLi);
+            if (this.showCheckBox && checkboxElement) {
+                checked = checkboxElement.getAttribute('aria-checked');
             }
             return {
                 id: id, text: text, parentID: pid, selected: selected, expanded: expanded,
@@ -12914,6 +12930,8 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
         if (dragObj.element.id !== this.element.id) {
             dragObj.triggerEvent();
+            this.isNodeDropped = true;
+            this.fields.dataSource = this.treeData;
         }
         this.triggerEvent();
     };
@@ -16303,7 +16321,10 @@ var __decorate$11 = (undefined && undefined.__decorate) || function (decorators,
 var CLS_CAROUSEL = 'e-carousel';
 var CLS_ACTIVE$2 = 'e-active';
 var CLS_RTL$5 = 'e-rtl';
+var CLS_PARTIAL = 'e-partial';
+var CLS_SLIDE_CONTAINER = 'e-carousel-slide-container';
 var CLS_ITEMS$2 = 'e-carousel-items';
+var CLS_CLONED = 'e-cloned';
 var CLS_ITEM$3 = 'e-carousel-item';
 var CLS_PREVIOUS = 'e-previous';
 var CLS_NEXT = 'e-next';
@@ -16434,6 +16455,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                         this.applySlideInterval();
                     }
                     this.handleNavigatorsActions(this.selectedIndex);
+                    if (this.partialVisible) {
+                        this.reRenderSlides();
+                    }
                     break;
                 case 'enableRtl':
                     if (this.enableRtl) {
@@ -16497,16 +16521,28 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'items':
                 case 'dataSource':
-                    target = this.element.querySelector("." + CLS_ITEMS$2);
-                    if (target) {
-                        this.resetTemplates(['itemTemplate']);
-                        remove(target);
+                    this.reRenderSlides();
+                    break;
+                case 'partialVisible':
+                    if (this.partialVisible) {
+                        addClass([this.element], CLS_PARTIAL);
                     }
-                    this.renderSlides();
+                    else {
+                        removeClass([this.element], CLS_PARTIAL);
+                    }
+                    this.reRenderSlides();
                     break;
             }
         }
     };
+    Carousel.prototype.reRenderSlides = function () {
+        var target = this.element.querySelector("." + CLS_ITEMS$2);
+        if (target) {
+            this.resetTemplates(['itemTemplate']);
+            remove(target);
+        }
+        this.renderSlides();
+    };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
         if (this.cssClass) {
@@ -16515,6 +16551,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         if (this.enableRtl) {
             carouselClasses.push(CLS_RTL$5);
         }
+        if (this.partialVisible) {
+            carouselClasses.push(CLS_PARTIAL);
+        }
         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') });
@@ -16524,8 +16563,25 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     };
     Carousel.prototype.renderSlides = function () {
         var _this = this;
+        var slideContainer = this.element.querySelector('.' + CLS_SLIDE_CONTAINER);
+        if (!slideContainer) {
+            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
+            this.element.appendChild(slideContainer);
+        }
         var itemsContainer = this.createElement('div', { className: CLS_ITEMS$2, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
-        this.element.appendChild(itemsContainer);
+        slideContainer.appendChild(itemsContainer);
+        if (this.partialVisible && this.loop) {
+            if (this.items.length > 0) {
+                this.items.slice(-2).forEach(function (item, index) {
+                    _this.renderSlide(item, item.template, index, itemsContainer, true);
+                });
+            }
+            else if (this.dataSource.length > 0) {
+                this.dataSource.slice(-2).forEach(function (item, index) {
+                    _this.renderSlide(item, _this.itemTemplate, index, itemsContainer, true);
+                });
+            }
+        }
         if (this.items.length > 0) {
             this.slideItems = this.items;
             this.items.forEach(function (item, index) {
@@ -16538,20 +16594,43 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 _this.renderSlide(item, _this.itemTemplate, index, itemsContainer);
             });
         }
+        if (this.partialVisible && this.loop) {
+            if (this.items.length > 0) {
+                this.items.slice(0, 2).forEach(function (item, index) {
+                    _this.renderSlide(item, item.template, index, itemsContainer, true);
+                });
+            }
+            else if (this.dataSource.length > 0) {
+                this.dataSource.slice(0, 2).forEach(function (item, index) {
+                    _this.renderSlide(item, _this.itemTemplate, index, itemsContainer, true);
+                });
+            }
+        }
         this.renderTemplates();
+        if (this.partialVisible) {
+            itemsContainer.style.setProperty('--carousel-items-count', "" + itemsContainer.children.length);
+            var slideWidth = itemsContainer.firstElementChild.clientWidth;
+            var cloneCount = this.loop ? 2 : 0;
+            itemsContainer.style.transitionProperty = 'none';
+            itemsContainer.style.transform = "translateX(" + -(slideWidth) * (this.selectedIndex + cloneCount) + "px)";
+        }
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
     };
-    Carousel.prototype.renderSlide = function (item, itemTemplate, index, container) {
+    Carousel.prototype.renderSlide = function (item, itemTemplate, index, container, isClone) {
+        if (isClone === void 0) { isClone = false; }
         var itemEle = this.createElement('div', {
             id: getUniqueID('carousel_item'),
-            className: CLS_ITEM$3 + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index ? CLS_ACTIVE$2 : ''),
+            className: CLS_ITEM$3 + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index && !isClone ? CLS_ACTIVE$2 : ''),
             attrs: {
-                'aria-hidden': this.selectedIndex === index ? 'false' : 'true', 'data-index': index.toString(),
+                'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),
                 'aria-role': 'group', 'aria-roledescription': 'slide'
             }
         });
+        if (isClone) {
+            itemEle.classList.add(CLS_CLONED);
+        }
         if (!isNullOrUndefined(item.htmlAttributes)) {
             this.setHtmlAttributes(item.htmlAttributes, itemEle);
         }
@@ -16565,7 +16644,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         var navigators = this.createElement('div', { className: CLS_NAVIGATORS });
-        var itemsContainer = this.element.querySelector("." + CLS_ITEMS$2);
+        var itemsContainer = this.element.querySelector("." + CLS_SLIDE_CONTAINER);
         itemsContainer.insertAdjacentElement('afterend', navigators);
         this.renderNavigatorButton('Previous');
         this.renderNavigatorButton('Next');
@@ -16573,8 +16652,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     };
     Carousel.prototype.renderNavigatorButton = function (direction) {
         var buttonContainer = this.createElement('div', {
-            className: (direction === 'Previous' ? CLS_PREVIOUS : CLS_NEXT) + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : ''),
-            attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+            className: (direction === 'Previous' ? CLS_PREVIOUS : CLS_NEXT) + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : '')
         });
         if (direction === 'Previous' && this.previousButtonTemplate) {
             addClass([buttonContainer], CLS_TEMPLATE$2);
@@ -16589,7 +16667,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
             append(template, buttonContainer);
         }
         else {
-            var button = this.createElement('button');
+            var button = this.createElement('button', {
+                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+            });
             var buttonObj = new Button({
                 cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),
                 iconCss: CLS_ICON$1 + ' ' + (direction === 'Previous' ? CLS_PREV_ICON : CLS_NEXT_ICON),
@@ -16761,7 +16841,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         if (this.element.querySelectorAll("." + CLS_ITEM$3 + "." + CLS_PREV_SLIDE + ",." + CLS_ITEM$3 + "." + CLS_NEXT_SLIDE).length > 0) {
             return;
         }
-        var allSlides = [].slice.call(this.element.querySelectorAll("." + CLS_ITEM$3));
+        var allSlides = [].slice.call(this.element.querySelectorAll("." + CLS_ITEM$3 + ":not(.e-cloned)"));
         var activeSlide = this.element.querySelector("." + CLS_ITEM$3 + "." + CLS_ACTIVE$2);
         if (isNullOrUndefined(activeSlide) && this.showIndicators) {
             var activeIndicator = this.element.querySelector("." + CLS_INDICATOR_BAR + "." + CLS_ACTIVE$2);
@@ -16806,6 +16886,25 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 slideDirection: direction,
                 isSwiped: isSwiped
             };
+            if (_this.partialVisible) {
+                var container = _this.element.querySelector('.' + CLS_ITEMS$2);
+                var slideWidth = allSlides[currentIndex].clientWidth;
+                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)";
+                    }
+                    else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {
+                        container.style.transform = "translateX(" + -(slideWidth) + "px)";
+                    }
+                    else {
+                        container.style.transform = "translateX(" + -(slideWidth) * (currentIndex + 2) + "px)";
+                    }
+                }
+                else {
+                    container.style.transform = "translateX(" + -(slideWidth) * (currentIndex) + "px)";
+                }
+            }
             var slideHeight;
             if (_this.animationEffect === 'Slide') {
                 if (direction === 'Previous') {
@@ -16843,6 +16942,13 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     Carousel.prototype.onTransitionEnd = function () {
         var _this = this;
         if (this.slideChangedEventArgs) {
+            if (this.partialVisible && this.loop && (this.slideChangedEventArgs.currentIndex === 0 && this.slideChangedEventArgs.slideDirection === 'Next' ||
+                this.slideChangedEventArgs.currentIndex === this.slideItems.length - 1 && this.slideChangedEventArgs.slideDirection === 'Previous')) {
+                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)";
+            }
             addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE$2);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE$2);
             this.trigger('slideChanged', this.slideChangedEventArgs, function () {
@@ -17251,6 +17357,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     __decorate$11([
         Property('Visible')
     ], Carousel.prototype, "buttonsVisibility", void 0);
+    __decorate$11([
+        Property(false)
+    ], Carousel.prototype, "partialVisible", void 0);
     __decorate$11([
         Property()
     ], Carousel.prototype, "htmlAttributes", void 0);
@@ -17268,9 +17377,229 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
 
 /** Carousel export modules */
 
+var __extends$12 = (undefined && undefined.__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$12 = (undefined && undefined.__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;
+};
+// Constant variables
+var CLS_APPBAR = 'e-appbar';
+var CLS_HORIZONTAL_BOTTOM = 'e-horizontal-bottom';
+var CLS_STICKY = 'e-sticky';
+var CLS_PROMINENT = 'e-prominent';
+var CLS_DENSE = 'e-dense';
+var CLS_RTL$6 = 'e-rtl';
+var CLS_LIGHT = 'e-light';
+var CLS_DARK = 'e-dark';
+var CLS_PRIMARY = 'e-primary';
+var CLS_INHERIT = 'e-inherit';
+/**
+ * The AppBar displays the information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.
+ * Support to inherit colors from AppBar provided to <c>Button</c>, <c>DropDownButton</c>, <c>Menu</c> and <c>TextBox</c>.
+ * Set <c>CssClass</c> property with <code>e-inherit</code> CSS class to inherit the background and color from AppBar.
+ */
+var AppBar = /** @__PURE__ @class */ (function (_super) {
+    __extends$12(AppBar, _super);
+    /**
+     * Constructor for creating the AppBar widget
+     *
+     * @param {AppBarModel} options Accepts the AppBar model properties to initiate the rendering
+     * @param {string | HTMLElement} element Accepts the DOM element reference
+     */
+    function AppBar(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * Removes the control from the DOM and also removes all its related events.
+     *
+     * @returns {void}
+     */
+    AppBar.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.element.classList.remove(CLS_APPBAR);
+        this.element.removeAttribute('style');
+        this.element.removeAttribute('role');
+    };
+    AppBar.prototype.getModuleName = function () {
+        return 'appbar';
+    };
+    AppBar.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    AppBar.prototype.preRender = function () {
+        // pre render code
+    };
+    AppBar.prototype.render = function () {
+        if (this.element.tagName !== 'HEADER') {
+            this.element.setAttribute('role', 'header');
+        }
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
+        }
+        if (this.position === 'Bottom') {
+            this.element.classList.add(CLS_HORIZONTAL_BOTTOM);
+        }
+        if (this.isSticky) {
+            this.element.classList.add(CLS_STICKY);
+        }
+        if (this.enableRtl) {
+            this.element.classList.add(CLS_RTL$6);
+        }
+        this.setHeightMode();
+        this.setColorMode();
+        if (!isNullOrUndefined(this.htmlAttributes)) {
+            this.setHtmlAttributes(this.htmlAttributes, this.element);
+        }
+    };
+    AppBar.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'mode':
+                    removeClass([this.element], [CLS_DENSE, CLS_PROMINENT]);
+                    this.setHeightMode();
+                    break;
+                case 'position':
+                    if (this.position === 'Bottom') {
+                        addClass([this.element], CLS_HORIZONTAL_BOTTOM);
+                    }
+                    else {
+                        removeClass([this.element], CLS_HORIZONTAL_BOTTOM);
+                    }
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([this.element], oldProp.cssClass.split(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.element], newProp.cssClass.split(' '));
+                    }
+                    break;
+                case 'isSticky':
+                    if (this.isSticky) {
+                        addClass([this.element], CLS_STICKY);
+                    }
+                    else {
+                        removeClass([this.element], CLS_STICKY);
+                    }
+                    break;
+                case 'htmlAttributes':
+                    if (!isNullOrUndefined(this.htmlAttributes)) {
+                        if (!isNullOrUndefined(oldProp.htmlAttributes)) {
+                            var keys = Object.keys(oldProp.htmlAttributes);
+                            for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {
+                                var key = keys_1[_b];
+                                if (key === 'class') {
+                                    removeClass([this.element], oldProp.htmlAttributes[key]);
+                                }
+                                else {
+                                    this.element.removeAttribute(key);
+                                }
+                            }
+                        }
+                        this.setHtmlAttributes(newProp.htmlAttributes, this.element);
+                    }
+                    break;
+                case 'colorMode':
+                    removeClass([this.element], [CLS_DARK, CLS_PRIMARY, CLS_INHERIT, CLS_LIGHT]);
+                    this.setColorMode();
+                    break;
+                case 'enableRtl':
+                    if (this.enableRtl) {
+                        addClass([this.element], CLS_RTL$6);
+                    }
+                    else {
+                        removeClass([this.element], CLS_RTL$6);
+                    }
+                    break;
+            }
+        }
+    };
+    AppBar.prototype.setHtmlAttributes = function (attribute, element) {
+        var keys = Object.keys(attribute);
+        for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
+            var key = keys_2[_i];
+            if (key === 'class') {
+                addClass([element], attribute[key]);
+            }
+            else {
+                element.setAttribute(key, attribute[key]);
+            }
+        }
+    };
+    AppBar.prototype.setHeightMode = function () {
+        if (this.mode === 'Prominent') {
+            this.element.classList.add(CLS_PROMINENT);
+        }
+        else if (this.mode === 'Dense') {
+            this.element.classList.add(CLS_DENSE);
+        }
+    };
+    AppBar.prototype.setColorMode = function () {
+        switch (this.colorMode) {
+            case 'Light':
+                this.element.classList.add(CLS_LIGHT);
+                break;
+            case 'Dark':
+                this.element.classList.add(CLS_DARK);
+                break;
+            case 'Primary':
+                this.element.classList.add(CLS_PRIMARY);
+                break;
+            case 'Inherit':
+                this.element.classList.add(CLS_INHERIT);
+                break;
+        }
+    };
+    __decorate$12([
+        Property('Regular')
+    ], AppBar.prototype, "mode", void 0);
+    __decorate$12([
+        Property('Top')
+    ], AppBar.prototype, "position", void 0);
+    __decorate$12([
+        Property()
+    ], AppBar.prototype, "cssClass", void 0);
+    __decorate$12([
+        Property(false)
+    ], AppBar.prototype, "isSticky", void 0);
+    __decorate$12([
+        Property()
+    ], AppBar.prototype, "htmlAttributes", void 0);
+    __decorate$12([
+        Property('Light')
+    ], AppBar.prototype, "colorMode", void 0);
+    __decorate$12([
+        Event()
+    ], AppBar.prototype, "created", void 0);
+    __decorate$12([
+        Event()
+    ], AppBar.prototype, "destroyed", void 0);
+    AppBar = __decorate$12([
+        NotifyPropertyChanges
+    ], AppBar);
+    return AppBar;
+}(Component));
+
+/** AppBar export modules */
+
 /**
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, 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 };
+export { MenuAnimationSettings, MenuItem, 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 };
 //# sourceMappingURL=ej2-navigations.es5.js.map