@syncfusion/ej2-navigations 20.2.50 → 20.3.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.50
+*  version : 20.3.47
 *  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@20.2.49",
+  "_id": "@syncfusion/ej2-navigations@19.60.1",
   "_inBundle": false,
-  "_integrity": "sha512-QWo23LdhTxEC1sDeDUts4kHXsOA+rvN1AIB0FwOAovw9qIlIeZj50rGMMqqEvhkgPX+QeCNfx8I7Jhp8TNgPWA==",
+  "_integrity": "sha512-mnO+XJ2JF8kvnesSRv932kfHNge3XVO4kjdbgSyez+ipbe4yCjoghRDv0/+okKmmdQjArN9yLMZkyqdT5pZV3w==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -27,6 +27,7 @@
     "/@syncfusion/ej2-filemanager",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
+    "/@syncfusion/ej2-image-editor",
     "/@syncfusion/ej2-inplace-editor",
     "/@syncfusion/ej2-kanban",
     "/@syncfusion/ej2-pdfviewer",
@@ -37,8 +38,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.2.49.tgz",
-  "_shasum": "71b865bacc3b00a97d00c51c0c6d23925d887c21",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-19.60.1.tgz",
+  "_shasum": "b484d37710ff0871e9082d7ef103487ec7fcc99c",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -49,17 +50,17 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.48",
-    "@syncfusion/ej2-buttons": "~20.2.46",
-    "@syncfusion/ej2-data": "~20.2.45",
-    "@syncfusion/ej2-inputs": "~20.2.48",
-    "@syncfusion/ej2-lists": "~20.2.46",
-    "@syncfusion/ej2-popups": "~20.2.49"
+    "@syncfusion/ej2-base": "~20.3.47",
+    "@syncfusion/ej2-buttons": "~20.3.47",
+    "@syncfusion/ej2-data": "~20.3.47",
+    "@syncfusion/ej2-inputs": "~20.3.47",
+    "@syncfusion/ej2-lists": "~20.3.47",
+    "@syncfusion/ej2-popups": "~20.3.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",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-navigations.es2015.js",
+  "es2015": "./dist/es6/ej2-navigations.es5.js",
   "homepage": "https://github.com/syncfusion/ej2-javascript-ui-controls#readme",
   "keywords": [
     "ej2",
@@ -159,6 +160,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.2.50",
+  "version": "20.3.47",
   "sideEffects": false
 }

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

@@ -0,0 +1,76 @@
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { addClass, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';
+import {AppBarMode,AppBarPosition,AppBarColor} from "./appbar";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class AppBar
+ */
+export interface AppBarModel extends ComponentModel{
+
+    /**
+     *  Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
+     *  * Regular
+     *  * Prominent
+     *  * Dense
+     *
+     *  @default 'Regular'
+     */
+    mode?: AppBarMode;
+
+    /**
+     *  Specifies the position of the AppBar. The possible values for this property are as follows:
+     *  * Top
+     *  * Bottom
+     *
+     *  @default 'Top'
+     */
+    position?: AppBarPosition;
+
+    /**
+     * Accepts single/multiple CSS classes (separated by a space) to be used for AppBar customization.
+     *
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether the AppBar position is fixed or not while scrolling the page.
+     * When set to `true`, the AppBar will be sticky while scrolling.
+     *
+     * @default false
+     */
+    isSticky?: boolean;
+
+    /**
+     * Accepts HTML attributes/custom attributes that will be applied to the AppBar element.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
+
+    /**
+     *  Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
+     *  * Light
+     *  * Dark
+     *  * Primary
+     *  * Inherit
+     *
+     *  @default 'Light'
+     */
+    colorMode?: AppBarColor;
+
+    /**
+     * Triggers after the AppBar component is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Triggers when the AppBar component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed?: EmitType<Event>;
+
+}

package/src/appbar/appbar.d.ts

@@ -0,0 +1,112 @@
+import { Component, INotifyPropertyChanged, EmitType } from '@syncfusion/ej2-base';
+import { AppBarModel } from './appbar-model';
+/**
+ * Specifies the height mode of the AppBar component which defines the height of the AppBar.
+ *
+ * * `Regular` - Specifies default height for the AppBar.
+ * * `Prominent` - Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+ * * `Dense` - Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
+ */
+export declare type AppBarMode = 'Regular' | 'Prominent' | 'Dense';
+/**
+ * Specifies the position of the AppBar.
+ *
+ * * `Top` - Position the AppBar at the top.
+ * * `Bottom` - Position the AppBar at the bottom.
+ */
+export declare type AppBarPosition = 'Top' | 'Bottom';
+/**
+ * Specifies the color of the AppBar component.
+ *
+ * * `Light` - Specifies the AppBar in light color.
+ * * `Dark` - Specifies the AppBar in dark color.
+ * * `Primary` - Specifies the AppBar in a primary color.
+ * * `Inherit` - Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
+ */
+export declare type AppBarColor = 'Light' | 'Dark' | 'Primary' | '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.
+ */
+export declare class AppBar extends Component<HTMLElement> implements INotifyPropertyChanged {
+    /**
+     *  Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
+     *  * Regular
+     *  * Prominent
+     *  * Dense
+     *
+     *  @default 'Regular'
+     */
+    mode: AppBarMode;
+    /**
+     *  Specifies the position of the AppBar. The possible values for this property are as follows:
+     *  * Top
+     *  * Bottom
+     *
+     *  @default 'Top'
+     */
+    position: AppBarPosition;
+    /**
+     * Accepts single/multiple CSS classes (separated by a space) to be used for AppBar customization.
+     *
+     * @default null
+     */
+    cssClass: string;
+    /**
+     * Defines whether the AppBar position is fixed or not while scrolling the page.
+     * When set to `true`, the AppBar will be sticky while scrolling.
+     *
+     * @default false
+     */
+    isSticky: boolean;
+    /**
+     * Accepts HTML attributes/custom attributes that will be applied to the AppBar element.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
+    /**
+     *  Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
+     *  * Light
+     *  * Dark
+     *  * Primary
+     *  * Inherit
+     *
+     *  @default 'Light'
+     */
+    colorMode: AppBarColor;
+    /**
+     * Triggers after the AppBar component is created.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Triggers when the AppBar component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed: EmitType<Event>;
+    /**
+     * 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?: AppBarModel, element?: string | HTMLElement);
+    /**
+     * Removes the control from the DOM and also removes all its related events.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+    protected getModuleName(): string;
+    protected getPersistData(): string;
+    protected preRender(): void;
+    protected render(): void;
+    onPropertyChanged(newProp: AppBarModel, oldProp: AppBarModel): void;
+    private setHtmlAttributes;
+    private setHeightMode;
+    private setColorMode;
+}

package/src/appbar/appbar.js

@@ -0,0 +1,220 @@
+var __extends = (this && this.__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 = (this && this.__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;
+};
+import { Component, NotifyPropertyChanges, Property, Event } from '@syncfusion/ej2-base';
+import { addClass, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';
+// 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 = '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 = /** @class */ (function (_super) {
+    __extends(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);
+        }
+        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);
+                    }
+                    else {
+                        removeClass([this.element], CLS_RTL);
+                    }
+                    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([
+        Property('Regular')
+    ], AppBar.prototype, "mode", void 0);
+    __decorate([
+        Property('Top')
+    ], AppBar.prototype, "position", void 0);
+    __decorate([
+        Property()
+    ], AppBar.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], AppBar.prototype, "isSticky", void 0);
+    __decorate([
+        Property()
+    ], AppBar.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property('Light')
+    ], AppBar.prototype, "colorMode", void 0);
+    __decorate([
+        Event()
+    ], AppBar.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], AppBar.prototype, "destroyed", void 0);
+    AppBar = __decorate([
+        NotifyPropertyChanges
+    ], AppBar);
+    return AppBar;
+}(Component));
+export { AppBar };

package/src/appbar/index.d.ts

@@ -0,0 +1,3 @@
+/** AppBar export modules */
+export * from './appbar';
+export * from './appbar-model';

package/src/appbar/index.js

@@ -0,0 +1,2 @@
+/** AppBar export modules */
+export * from './appbar';

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

@@ -1,4 +1,4 @@
-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 { Component, EventHandler, Collection, Property, Event, EmitType, formatUnit, INotifyPropertyChanged, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, 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';
 
@@ -55,7 +55,7 @@ export interface CarouselModel extends ComponentModel{
      *  * Slide
      *  * Fade
      *  * Custom
-     * 
+     *
      *  @default 'Slide'
      */
     animationEffect?: CarouselAnimationEffect;
@@ -190,6 +190,15 @@ export interface CarouselModel extends ComponentModel{
      */
     buttonsVisibility?: CarouselButtonVisibility;
 
+    /**
+     * Enables active slide with partial previous/next slides.
+     *
+     * Slide animation only applicable if the partialVisible is enabled.
+     *
+     * @default false
+     */
+    partialVisible?: boolean;
+
     /**
      * Accepts HTML attributes/custom attributes to add in individual carousel item.
      *

package/src/carousel/carousel.d.ts

@@ -221,6 +221,14 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * @default 'Visible'
      */
     buttonsVisibility: CarouselButtonVisibility;
+    /**
+     * Enables active slide with partial previous/next slides.
+     *
+     * Slide animation only applicable if the partialVisible is enabled.
+     *
+     * @default false
+     */
+    partialVisible: boolean;
     /**
      * Accepts HTML attributes/custom attributes to add in individual carousel item.
      *
@@ -251,6 +259,7 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     protected preRender(): void;
     protected render(): void;
     onPropertyChanged(newProp: CarouselModel, oldProp: CarouselModel): void;
+    private reRenderSlides;
     private initialize;
     private renderSlides;
     private renderSlide;