@syncfusion/ej2-navigations 20.2.50 → 20.3.47

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

@@ -2111,7 +2111,8 @@ let MenuBase = class MenuBase extends Component {
                     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;
@@ -7794,7 +7795,10 @@ let Tab = class Tab extends Component {
         if (!isNullOrUndefined(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        if (this.initRender || value === false || this.animation === {} || isNullOrUndefined(this.animation)) {
+        const 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);
             }
@@ -8443,19 +8447,6 @@ let Tab = class Tab extends Component {
                 break;
         }
     }
-    /**
-     * Refresh the active tab border
-     *
-     * @returns {void}
-     * @private
-     */
-    refreshActiveTabBorder() {
-        const 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();
-    }
     refreshItemVisibility(target) {
         const scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNullOrUndefined(scrCnt)) {
@@ -9267,6 +9258,11 @@ let Tab = class Tab extends Component {
             }
         }
     }
+    /**
+     * To refresh the active tab contents.
+     *
+     * @returns {void}
+     */
     refreshActiveTab() {
         if (this.isReact) {
             this.clearTemplate();
@@ -9385,6 +9381,18 @@ let Tab = class Tab extends Component {
             this.renderReactTemplates();
         }
     }
+    /**
+     * To refresh the active tab indicator.
+     *
+     * @returns {void}
+     */
+    refreshActiveTabBorder() {
+        const 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)
@@ -15900,7 +15908,10 @@ var __decorate$11 = (undefined && undefined.__decorate) || function (decorators,
 const CLS_CAROUSEL = 'e-carousel';
 const CLS_ACTIVE$2 = 'e-active';
 const CLS_RTL$5 = 'e-rtl';
+const CLS_PARTIAL = 'e-partial';
+const CLS_SLIDE_CONTAINER = 'e-carousel-slide-container';
 const CLS_ITEMS$2 = 'e-carousel-items';
+const CLS_CLONED = 'e-cloned';
 const CLS_ITEM$3 = 'e-carousel-item';
 const CLS_PREVIOUS = 'e-previous';
 const CLS_NEXT = 'e-next';
@@ -16024,6 +16035,9 @@ let Carousel = class Carousel extends Component {
                         this.applySlideInterval();
                     }
                     this.handleNavigatorsActions(this.selectedIndex);
+                    if (this.partialVisible) {
+                        this.reRenderSlides();
+                    }
                     break;
                 case 'enableRtl':
                     if (this.enableRtl) {
@@ -16087,16 +16101,28 @@ let Carousel = class Carousel extends Component {
                     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;
             }
         }
     }
+    reRenderSlides() {
+        const target = this.element.querySelector(`.${CLS_ITEMS$2}`);
+        if (target) {
+            this.resetTemplates(['itemTemplate']);
+            remove(target);
+        }
+        this.renderSlides();
+    }
     initialize() {
         const carouselClasses = [];
         if (this.cssClass) {
@@ -16105,6 +16131,9 @@ let Carousel = class Carousel extends Component {
         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') });
@@ -16113,8 +16142,25 @@ let Carousel = class Carousel extends Component {
         }
     }
     renderSlides() {
+        let slideContainer = this.element.querySelector('.' + CLS_SLIDE_CONTAINER);
+        if (!slideContainer) {
+            slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
+            this.element.appendChild(slideContainer);
+        }
         const 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((item, index) => {
+                    this.renderSlide(item, item.template, index, itemsContainer, true);
+                });
+            }
+            else if (this.dataSource.length > 0) {
+                this.dataSource.slice(-2).forEach((item, index) => {
+                    this.renderSlide(item, this.itemTemplate, index, itemsContainer, true);
+                });
+            }
+        }
         if (this.items.length > 0) {
             this.slideItems = this.items;
             this.items.forEach((item, index) => {
@@ -16127,20 +16173,42 @@ let Carousel = class Carousel extends Component {
                 this.renderSlide(item, this.itemTemplate, index, itemsContainer);
             });
         }
+        if (this.partialVisible && this.loop) {
+            if (this.items.length > 0) {
+                this.items.slice(0, 2).forEach((item, index) => {
+                    this.renderSlide(item, item.template, index, itemsContainer, true);
+                });
+            }
+            else if (this.dataSource.length > 0) {
+                this.dataSource.slice(0, 2).forEach((item, index) => {
+                    this.renderSlide(item, this.itemTemplate, index, itemsContainer, true);
+                });
+            }
+        }
         this.renderTemplates();
+        if (this.partialVisible) {
+            itemsContainer.style.setProperty('--carousel-items-count', `${itemsContainer.children.length}`);
+            const slideWidth = itemsContainer.firstElementChild.clientWidth;
+            const cloneCount = this.loop ? 2 : 0;
+            itemsContainer.style.transitionProperty = 'none';
+            itemsContainer.style.transform = `translateX(${-(slideWidth) * (this.selectedIndex + cloneCount)}px)`;
+        }
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
     }
-    renderSlide(item, itemTemplate, index, container) {
+    renderSlide(item, itemTemplate, index, container, isClone = false) {
         const 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);
         }
@@ -16154,7 +16222,7 @@ let Carousel = class Carousel extends Component {
             return;
         }
         const navigators = this.createElement('div', { className: CLS_NAVIGATORS });
-        const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+        const itemsContainer = this.element.querySelector(`.${CLS_SLIDE_CONTAINER}`);
         itemsContainer.insertAdjacentElement('afterend', navigators);
         this.renderNavigatorButton('Previous');
         this.renderNavigatorButton('Next');
@@ -16162,8 +16230,7 @@ let Carousel = class Carousel extends Component {
     }
     renderNavigatorButton(direction) {
         const 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);
@@ -16178,7 +16245,9 @@ let Carousel = class Carousel extends Component {
             append(template, buttonContainer);
         }
         else {
-            const button = this.createElement('button');
+            const button = this.createElement('button', {
+                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+            });
             const 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),
@@ -16346,7 +16415,7 @@ let Carousel = class Carousel extends Component {
         if (this.element.querySelectorAll(`.${CLS_ITEM$3}.${CLS_PREV_SLIDE},.${CLS_ITEM$3}.${CLS_NEXT_SLIDE}`).length > 0) {
             return;
         }
-        const allSlides = [].slice.call(this.element.querySelectorAll(`.${CLS_ITEM$3}`));
+        const allSlides = [].slice.call(this.element.querySelectorAll(`.${CLS_ITEM$3}:not(.e-cloned)`));
         const activeSlide = this.element.querySelector(`.${CLS_ITEM$3}.${CLS_ACTIVE$2}`);
         if (isNullOrUndefined(activeSlide) && this.showIndicators) {
             const activeIndicator = this.element.querySelector(`.${CLS_INDICATOR_BAR}.${CLS_ACTIVE$2}`);
@@ -16391,6 +16460,25 @@ let Carousel = class Carousel extends Component {
                 slideDirection: direction,
                 isSwiped: isSwiped
             };
+            if (this.partialVisible) {
+                const container = this.element.querySelector('.' + CLS_ITEMS$2);
+                const 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)`;
+                }
+            }
             let slideHeight;
             if (this.animationEffect === 'Slide') {
                 if (direction === 'Previous') {
@@ -16427,6 +16515,13 @@ let Carousel = class Carousel extends Component {
     }
     onTransitionEnd() {
         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')) {
+                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)`;
+            }
             addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE$2);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE$2);
             this.trigger('slideChanged', this.slideChangedEventArgs, () => {
@@ -16831,6 +16926,9 @@ __decorate$11([
 __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);
@@ -16846,9 +16944,211 @@ Carousel = __decorate$11([
 
 /** Carousel export modules */
 
+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
+const CLS_APPBAR = 'e-appbar';
+const CLS_HORIZONTAL_BOTTOM = 'e-horizontal-bottom';
+const CLS_STICKY = 'e-sticky';
+const CLS_PROMINENT = 'e-prominent';
+const CLS_DENSE = 'e-dense';
+const CLS_RTL$6 = 'e-rtl';
+const CLS_LIGHT = 'e-light';
+const CLS_DARK = 'e-dark';
+const CLS_PRIMARY = 'e-primary';
+const 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.
+ */
+let AppBar = class AppBar extends Component {
+    /**
+     * 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
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    /**
+     * Removes the control from the DOM and also removes all its related events.
+     *
+     * @returns {void}
+     */
+    destroy() {
+        super.destroy();
+        this.element.classList.remove(CLS_APPBAR);
+        this.element.removeAttribute('style');
+        this.element.removeAttribute('role');
+    }
+    getModuleName() {
+        return 'appbar';
+    }
+    getPersistData() {
+        return this.addOnPersist([]);
+    }
+    preRender() {
+        // pre render code
+    }
+    render() {
+        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);
+        }
+    }
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            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)) {
+                            const keys = Object.keys(oldProp.htmlAttributes);
+                            for (const key of keys) {
+                                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;
+            }
+        }
+    }
+    setHtmlAttributes(attribute, element) {
+        const keys = Object.keys(attribute);
+        for (const key of keys) {
+            if (key === 'class') {
+                addClass([element], attribute[key]);
+            }
+            else {
+                element.setAttribute(key, attribute[key]);
+            }
+        }
+    }
+    setHeightMode() {
+        if (this.mode === 'Prominent') {
+            this.element.classList.add(CLS_PROMINENT);
+        }
+        else if (this.mode === 'Dense') {
+            this.element.classList.add(CLS_DENSE);
+        }
+    }
+    setColorMode() {
+        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);
+
+/** 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.es2015.js.map