@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.56
+*  version : 20.1.51
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@19.4.55",
+  "_id": "@syncfusion/ej2-navigations@20.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-OQu9sMOeqG7OdXte/hNLWUfeSjoNgMV7IEz3p1UZzUGtYylXYT+myET7Ukgc7bPGAhBr8Zy8sT5ItEba6iV20w==",
+  "_integrity": "sha512-H3R/hxCrlqznF1FsCc7FkePBLLvqh7Qlrjd4tIfByrnCmYM+VkkPYa4g7iaL2/LmkSP3j5OEHykqjxSr4FrulA==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -37,8 +37,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-19.4.55.tgz",
-  "_shasum": "7f8aefd3568612b94f47564dc6a642c088ee14c4",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.1.48.tgz",
+  "_shasum": "b1a3b45369f91ea03e1d727104e8c4a0e8d5cc44",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -49,12 +49,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-data": "~19.4.54",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-lists": "~19.4.55",
-    "@syncfusion/ej2-popups": "~19.4.53"
+    "@syncfusion/ej2-base": "~20.1.50",
+    "@syncfusion/ej2-buttons": "~20.1.50",
+    "@syncfusion/ej2-data": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.48",
+    "@syncfusion/ej2-lists": "~20.1.47",
+    "@syncfusion/ej2-popups": "~20.1.47"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -159,6 +159,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.56",
+  "version": "20.1.51",
   "sideEffects": false
 }

package/src/accordion/accordion.js

@@ -194,9 +194,11 @@ var Accordion = /** @class */ (function (_super) {
         if (!this.isDestroy) {
             this.isDestroy = false;
         }
-        if (!isNOU(nested)) {
-            nested.classList.add(CLS_NEST);
-            this.isNested = true;
+        if (nested && nested.firstElementChild && nested.firstElementChild.firstElementChild) {
+            if (nested.firstElementChild.firstElementChild.classList.contains(CLS_ROOT)) {
+                nested.classList.add(CLS_NEST);
+                this.isNested = true;
+            }
         }
         else {
             this.element.classList.add(CLS_ACRDN_ROOT);
@@ -285,6 +287,9 @@ var Accordion = /** @class */ (function (_super) {
                 if (document.querySelectorAll(template).length) {
                     return templateCompiler(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return templateCompiler(template);
+                }
             }
             catch (error) {
                 return templateCompiler(template);
@@ -652,6 +657,9 @@ var Accordion = /** @class */ (function (_super) {
                 ele.appendChild(eleVal);
                 eleVal.style.display = '';
             }
+            else {
+                templateFn = templateCompiler(value);
+            }
         }
         catch (e) {
             if (typeof (value) === 'string') {

package/src/breadcrumb/breadcrumb.js

@@ -379,6 +379,12 @@ var Breadcrumb = /** @class */ (function (_super) {
                     }
                     if (!(this.overflowMode === 'Menu' && liElems[i].classList.contains(MENUCLASS))) {
                         liWidth += liElems[i].offsetWidth;
+                        if (liWidth > width) {
+                            maxItems = Math.ceil((i) / 2) + (this.overflowMode === 'Menu' && i <= 2 ? 0 : 1);
+                            this._maxItems = maxItems;
+                            this.initPvtProps();
+                            return this.reRenderItems();
+                        }
                     }
                 }
             }

package/src/carousel/carousel-model.d.ts

@@ -0,0 +1,227 @@
+import { Component, EventHandler, Collection, Property, Event, EmitType, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, Complex, getInstance, L10n } from '@syncfusion/ej2-base';import { append, closest, isNullOrUndefined, remove, classList, Touch, SwipeEventArgs, KeyboardEvents, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';
+import {CarouselAnimationEffect,CarouselButtonVisibility,SlideChangingEventArgs,SlideChangedEventArgs} from "./carousel";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class CarouselItem
+ */
+export interface CarouselItemModel {
+
+    /**
+     * Accepts single/multiple classes (separated by a space) to be used for individual carousel item customization.
+     *
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Accepts the interval duration in milliseconds for individual carousel item transition.
+     *
+     * @default null
+     */
+    interval?: number;
+
+    /**
+     * Accepts the template for individual carousel item.
+     *
+     * @default null
+     */
+    template?: string;
+
+    /**
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
+
+}
+
+/**
+ * Interface for a class CarouselAnimationSettings
+ */
+export interface CarouselAnimationSettingsModel {
+
+    /**
+     * Specifies the type of animation. The possible values for this property as follows
+     * * None
+     * * Slide
+     * * Fade
+     *
+     * @default 'Slide'
+     */
+    effect?: CarouselAnimationEffect;
+
+    /**
+     * Specifies the custom animation effect.
+     *
+     * @default null
+     */
+    customEffect?: string;
+
+}
+
+/**
+ * Interface for a class Carousel
+ */
+export interface CarouselModel extends ComponentModel{
+
+    /**
+     * Allows defining the collection of carousel item to be displayed on the Carousel.
+     *
+     * @default []
+     */
+    items?: CarouselItemModel[];
+
+    /**
+     * Specifies the animation setting for the carousel component.
+     *
+     * @default { effect: 'Slide', customEffect: null }
+     */
+    animation?: CarouselAnimationSettingsModel;
+
+    /**
+     * Accepts the template for previous navigation button.
+     *
+     * @default null
+     */
+    previousButtonTemplate?: string;
+
+    /**
+     * Accepts the template for next navigation button.
+     *
+     * @default null
+     */
+    nextButtonTemplate?: string;
+
+    /**
+     * Accepts the template for indicator buttons.
+     *
+     * @default null
+     */
+    indicatorsTemplate?: string;
+
+    /**
+     * Accepts the template for play/pause button.
+     *
+     * @default null
+     */
+    playButtonTemplate?: string;
+
+    /**
+     * Accepts single/multiple classes (separated by a space) to be used for carousel customization.
+     *
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Specifies the datasource for the carousel items.
+     *
+     * @isdatamanager false
+     * @default []
+     */
+    dataSource?: Record<string, any>[];
+
+    /**
+     * Specifies the template option for carousel items.
+     *
+     * @default null
+     */
+    itemTemplate?: string;
+
+    /**
+     * Specifies index of the current carousel item.
+     *
+     * @default 0
+     */
+    selectedIndex?: number;
+
+    /**
+     * Specifies the width of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    width?: string | number;
+
+    /**
+     * Specifies the height of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    height?: string | number;
+
+    /**
+     * Specifies the interval duration in milliseconds for carousel item transition.
+     *
+     * @default 5000
+     */
+    interval?: number;
+
+    /**
+     * Defines whether the slide transition is automatic or manual.
+     *
+     * @default true
+     */
+    autoPlay?: boolean;
+
+    /**
+     * Defines whether the slide transitions loop end or not. When set to false, the transition stops at last slide.
+     *
+     * @default true
+     */
+    loop?: boolean;
+
+    /**
+     * Defines whether to show play button or not.
+     *
+     * @default false
+     */
+    showPlayButton?: boolean;
+
+    /**
+     * Defines whether to enable swipe action in touch devices or not.
+     *
+     * @default true
+     */
+    enableTouchSwipe?: boolean;
+
+    /**
+     * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
+     *
+     * @default true
+     */
+    showIndicators?: boolean;
+
+    /**
+     * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
+     * * Hidden
+     * * Visible
+     * * VisibleOnHover
+     *
+     * @default 'Visible'
+     */
+    buttonsVisibility?: CarouselButtonVisibility;
+
+    /**
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
+
+    /**
+     * The event will be fired before the slide change.
+     *
+     * @event slideChanging
+     */
+    slideChanging?: EmitType<SlideChangingEventArgs>;
+
+    /**
+     * The event will be fired after the slide changed.
+     *
+     * @event slideChanged
+     */
+    slideChanged?: EmitType<SlideChangedEventArgs>;
+
+}

package/src/carousel/carousel.d.ts

@@ -0,0 +1,338 @@
+import { Component, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { BaseEventArgs } from '@syncfusion/ej2-base';
+import { CarouselModel, CarouselItemModel, CarouselAnimationSettingsModel } from './carousel-model';
+/**
+ * Specifies the direction of previous/next button navigations in carousel.
+ *
+ * * `Previous` - To determine the previous direction of carousel item transition.
+ * * `Next` - To determine the next direction of carousel item transition.
+ */
+export declare type CarouselSlideDirection = 'Previous' | 'Next';
+/**
+ * Specifies the state of navigation buttons displayed in carousel.
+ *
+ * * `Hidden` - Navigation buttons are hidden.
+ * * `Visible` - Navigation buttons are visible.
+ * * `VisibleOnHover` - Navigation buttons are visible only when we hover the carousel.
+ */
+export declare type CarouselButtonVisibility = 'Hidden' | 'Visible' | 'VisibleOnHover';
+/**
+ * Specifies the animation effects of carousel slide.
+ *
+ * * `None` - The carousel item transition happens without animation.
+ * * `Slide` - The carousel item transition happens with slide animation.
+ * * `Fade` - The Carousel item transition happens with fade animation.
+ */
+export declare type CarouselAnimationEffect = 'None' | 'Fade' | 'Slide';
+/** An interface that holds details when changing the slide. */
+export interface SlideChangingEventArgs extends BaseEventArgs {
+    /** Specifies the index of current slide. */
+    currentIndex: number;
+    /** Specifies the element of current slide. */
+    currentSlide: HTMLElement;
+    /** Specifies the index of slide to be changed. */
+    nextIndex: number;
+    /** Specifies the element of slide to be changed. */
+    nextSlide: HTMLElement;
+    /** Specifies whether the slide transition occur through swiping or not. */
+    isSwiped: boolean;
+    /** Specifies the slide direction in which transition occurs. */
+    slideDirection: CarouselSlideDirection;
+    /** Specifies whether the slide transition should occur or not. */
+    cancel: boolean;
+}
+/** An interface that holds details once slide change done. */
+export interface SlideChangedEventArgs extends BaseEventArgs {
+    /** Specifies the index of current slide. */
+    currentIndex: number;
+    /** Specifies the element of current slide. */
+    currentSlide: HTMLElement;
+    /** Specifies the index of slide from which it changed. */
+    previousIndex: number;
+    /** Specifies the element of slide from which it changed. */
+    previousSlide: HTMLElement;
+    /** Specifies whether the slide transition done through swiping or not. */
+    isSwiped: boolean;
+    /** Specifies the slide direction in which transition occurred. */
+    slideDirection: CarouselSlideDirection;
+}
+/** Specifies the carousel individual item. */
+export declare class CarouselItem extends ChildProperty<CarouselItem> {
+    /**
+     * Accepts single/multiple classes (separated by a space) to be used for individual carousel item customization.
+     *
+     * @default null
+     */
+    cssClass: string;
+    /**
+     * Accepts the interval duration in milliseconds for individual carousel item transition.
+     *
+     * @default null
+     */
+    interval: number;
+    /**
+     * Accepts the template for individual carousel item.
+     *
+     * @default null
+     */
+    template: string;
+    /**
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
+}
+/** Specifies the animation configuration for carousel items. */
+export declare class CarouselAnimationSettings extends ChildProperty<CarouselAnimationSettings> {
+    /**
+     * Specifies the type of animation. The possible values for this property as follows
+     * * None
+     * * Slide
+     * * Fade
+     *
+     * @default 'Slide'
+     */
+    effect: CarouselAnimationEffect;
+    /**
+     * Specifies the custom animation effect.
+     *
+     * @default null
+     */
+    customEffect: string;
+}
+export declare class Carousel extends Component<HTMLElement> implements INotifyPropertyChanged {
+    private autoSlideInterval;
+    private slideItems;
+    private touchModule;
+    private keyModule;
+    private keyConfigs;
+    private slideChangedEventArgs;
+    private localeObj;
+    /**
+     * Allows defining the collection of carousel item to be displayed on the Carousel.
+     *
+     * @default []
+     */
+    items: CarouselItemModel[];
+    /**
+     * Specifies the animation setting for the carousel component.
+     *
+     * @default { effect: 'Slide', customEffect: null }
+     */
+    animation: CarouselAnimationSettingsModel;
+    /**
+     * Accepts the template for previous navigation button.
+     *
+     * @default null
+     */
+    previousButtonTemplate: string;
+    /**
+     * Accepts the template for next navigation button.
+     *
+     * @default null
+     */
+    nextButtonTemplate: string;
+    /**
+     * Accepts the template for indicator buttons.
+     *
+     * @default null
+     */
+    indicatorsTemplate: string;
+    /**
+     * Accepts the template for play/pause button.
+     *
+     * @default null
+     */
+    playButtonTemplate: string;
+    /**
+     * Accepts single/multiple classes (separated by a space) to be used for carousel customization.
+     *
+     * @default null
+     */
+    cssClass: string;
+    /**
+     * Specifies the datasource for the carousel items.
+     *
+     * @isdatamanager false
+     * @default []
+     */
+    dataSource: Record<string, any>[];
+    /**
+     * Specifies the template option for carousel items.
+     *
+     * @default null
+     */
+    itemTemplate: string;
+    /**
+     * Specifies index of the current carousel item.
+     *
+     * @default 0
+     */
+    selectedIndex: number;
+    /**
+     * Specifies the width of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    width: string | number;
+    /**
+     * Specifies the height of the Carousel in pixels/number/percentage. The number value is considered as pixels.
+     *
+     * @default '100%'
+     */
+    height: string | number;
+    /**
+     * Specifies the interval duration in milliseconds for carousel item transition.
+     *
+     * @default 5000
+     */
+    interval: number;
+    /**
+     * Defines whether the slide transition is automatic or manual.
+     *
+     * @default true
+     */
+    autoPlay: boolean;
+    /**
+     * Defines whether the slide transitions loop end or not. When set to false, the transition stops at last slide.
+     *
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * Defines whether to show play button or not.
+     *
+     * @default false
+     */
+    showPlayButton: boolean;
+    /**
+     * Defines whether to enable swipe action in touch devices or not.
+     *
+     * @default true
+     */
+    enableTouchSwipe: boolean;
+    /**
+     * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
+     *
+     * @default true
+     */
+    showIndicators: boolean;
+    /**
+     * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
+     * * Hidden
+     * * Visible
+     * * VisibleOnHover
+     *
+     * @default 'Visible'
+     */
+    buttonsVisibility: CarouselButtonVisibility;
+    /**
+     * Accepts HTML attributes/custom attributes to add in individual carousel item.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
+    /**
+     * The event will be fired before the slide change.
+     *
+     * @event slideChanging
+     */
+    slideChanging: EmitType<SlideChangingEventArgs>;
+    /**
+     * The event will be fired after the slide changed.
+     *
+     * @event slideChanged
+     */
+    slideChanged: EmitType<SlideChangedEventArgs>;
+    /**
+     * Constructor for creating the Carousel widget
+     *
+     * @param {CarouselModel} options Accepts the carousel model properties to initiate the rendering
+     * @param {string | HTMLElement} element Accepts the DOM element reference
+     */
+    constructor(options?: CarouselModel, element?: string | HTMLElement);
+    protected getModuleName(): string;
+    protected getPersistData(): string;
+    protected preRender(): void;
+    protected render(): void;
+    onPropertyChanged(newProp: CarouselModel, oldProp: CarouselModel): void;
+    private initialize;
+    private renderSlides;
+    private renderSlide;
+    private renderNavigators;
+    private renderNavigatorButton;
+    private renderPlayButton;
+    private renderIndicators;
+    private renderKeyboardActions;
+    private renderTouchActions;
+    private applyAnimation;
+    private autoSlide;
+    private autoSlideChange;
+    private applySlideInterval;
+    private resetSlideInterval;
+    private getSlideIndex;
+    private setActiveSlide;
+    private onTransitionEnd;
+    private setHtmlAttributes;
+    private templateParser;
+    private getNavigatorState;
+    private navigatorClickHandler;
+    private indicatorClickHandler;
+    private playButtonClickHandler;
+    private keyHandler;
+    private swipeHandler;
+    private isSuspendSlideTransition;
+    private handleNavigatorsActions;
+    private onHoverActions;
+    private onFocusActions;
+    private destroyButtons;
+    private wireEvents;
+    private unWireEvents;
+    /**
+     * Method to transit from the current slide to the previous slide.
+     *
+     * @returns {void}
+     */
+    prev(): void;
+    /**
+     * Method to transit from the current slide to the next slide.
+     *
+     * @returns {void}
+     */
+    next(): void;
+    /**
+     * Method to play the slides programmatically.
+     *
+     * @returns {void}
+     */
+    play(): void;
+    /**
+     * Method to pause the slides programmatically.
+     *
+     * @returns {void}
+     */
+    pause(): void;
+    /**
+     * Method to render react and angular templates
+     *
+     * @returns {void}
+     * @private
+     */
+    private renderTemplates;
+    /**
+     * Method to reset react and angular templates
+     *
+     * @param {string[]} templates Accepts the template ID
+     * @returns {void}
+     * @private
+     */
+    private resetTemplates;
+    /**
+     * Method for destroy the carousel component.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+}