@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.2.59
+*  version : 19.3.44
 *  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.2.56",
+  "_id": "@syncfusion/ej2-navigations@19.24.0",
   "_inBundle": false,
-  "_integrity": "sha512-MNYV2rqGz0CtXPBcAz+ugN7le1jBipH4crNBvzMuzR5uVWSiAfGbpK0A2YXuDRPNw74rRG3HGPBkg5q4SVaavA==",
+  "_integrity": "sha512-GwkICjKbKkoanHn3QCyjoIu0/I8D187aan8GD1ucXEPK817+aPCpe6o36AwejZxdpfctgix/3/j13Cvu+V4ktg==",
   "_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/@syncfusion/ej2-navigations/-/ej2-navigations-19.2.56.tgz",
-  "_shasum": "c776f0640b438254f00c386d25d370338aa11f07",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-navigations/-/ej2-navigations-19.24.0.tgz",
+  "_shasum": "bdfa57ad56d525886446c2aaf30473d2e4218621",
   "_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.2.57",
-    "@syncfusion/ej2-buttons": "~19.2.55",
-    "@syncfusion/ej2-data": "~19.2.55",
-    "@syncfusion/ej2-inputs": "~19.2.59",
-    "@syncfusion/ej2-lists": "~19.2.55",
-    "@syncfusion/ej2-popups": "~19.2.59"
+    "@syncfusion/ej2-base": "~19.3.43",
+    "@syncfusion/ej2-buttons": "~19.3.44",
+    "@syncfusion/ej2-data": "~19.3.44",
+    "@syncfusion/ej2-inputs": "~19.3.44",
+    "@syncfusion/ej2-lists": "~19.3.44",
+    "@syncfusion/ej2-popups": "~19.3.43"
   },
   "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",
@@ -136,7 +136,8 @@
     "slide-panel",
     "multiple-sidebar",
     "slide-navigation",
-    "navigation-drawer"
+    "navigation-drawer",
+    "breadcrumb"
   ],
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-navigations.umd.min.js",
@@ -147,6 +148,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.2.59",
+  "version": "19.3.44",
   "sideEffects": false
 }

package/src/accordion/accordion.d.ts

@@ -331,9 +331,9 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private unwireEvents;
     private wireEvents;
     private templateParser;
-    private initializeheaderTemplate;
+    private initializeHeaderTemplate;
     private initializeItemTemplate;
-    private getheaderTemplate;
+    private getHeaderTemplate;
     private getItemTemplate;
     private focusIn;
     private focusOut;
@@ -412,12 +412,6 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
      * @returns {void}.
      */
     enableItem(index: number, isEnable: boolean): void;
-    /**
-     * Refresh the Accordion component.
-     *
-     * @returns {void}.
-     */
-    refresh(): void;
     /**
      * Expands/Collapses the specified Accordion item.
      *

package/src/accordion/accordion.js

@@ -215,15 +215,10 @@ var Accordion = /** @class */ (function (_super) {
      * @returns {void}
      */
     Accordion.prototype.render = function () {
-        if (!this.isServerRendered) {
-            this.initializeheaderTemplate();
-            this.initializeItemTemplate();
-            this.initialize();
-            this.renderControl();
-        }
-        else {
-            this.wireFocusEvents();
-        }
+        this.initializeHeaderTemplate();
+        this.initializeItemTemplate();
+        this.initialize();
+        this.renderControl();
         this.wireEvents();
         this.renderComplete();
     };
@@ -294,7 +289,7 @@ var Accordion = /** @class */ (function (_super) {
         }
         return undefined;
     };
-    Accordion.prototype.initializeheaderTemplate = function () {
+    Accordion.prototype.initializeHeaderTemplate = function () {
         if (this.headerTemplate) {
             this.headerTemplateFn = this.templateParser(this.headerTemplate);
         }
@@ -305,7 +300,7 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     /* eslint-disable */
-    Accordion.prototype.getheaderTemplate = function () {
+    Accordion.prototype.getHeaderTemplate = function () {
         return this.headerTemplateFn;
     };
     /* eslint-disable */
@@ -404,7 +399,6 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     Accordion.prototype.clickHandler = function (e) {
-        var _this = this;
         var trgt = e.target;
         var items = this.getItems();
         var eventArgs = {};
@@ -438,32 +432,9 @@ var Accordion = /** @class */ (function (_super) {
         eventArgs.originalEvent = e;
         var ctnCheck = !isNOU(tglIcon) && acrdnItem.childElementCount <= 1;
         if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {
-            if (!this.isServerRendered) {
-                acrdnItem.appendChild(this.contentRendering(index));
-                this.ariaAttrUpdate(acrdnItem);
-                this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
-            }
-            else {
-                var id = acrdnItem.id;
-                if (this.items.length > 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        _this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
-                    });
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnDataClick', id).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        _this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
-                    });
-                }
-            }
+            acrdnItem.appendChild(this.contentRendering(index));
+            this.ariaAttrUpdate(acrdnItem);
+            this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
         }
         else {
             this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
@@ -599,7 +570,7 @@ var Accordion = /** @class */ (function (_super) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
-            append(this.getheaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
+            append(this.getHeaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
             innerEle.appendChild(ctnEle);
             ctnEle.appendChild(this.toggleIconGenerate());
             this.add(innerEle, CLS_SLCT);
@@ -1136,16 +1107,6 @@ var Accordion = /** @class */ (function (_super) {
             eleHeader.removeAttribute('tabindex');
         }
     };
-    /**
-     * Refresh the Accordion component.
-     *
-     * @returns {void}.
-     */
-    Accordion.prototype.refresh = function () {
-        if (!this.isServerRendered) {
-            _super.prototype.refresh.call(this);
-        }
-    };
     /**
      * Expands/Collapses the specified Accordion item.
      *
@@ -1191,41 +1152,15 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     Accordion.prototype.itemExpand = function (isExpand, ele, index) {
-        var _this = this;
         var ctn = ele.children[1];
         if (ele.classList.contains(CLS_DISABLE)) {
             return;
         }
         if (isNOU(ctn) && isExpand) {
-            if (!this.isServerRendered) {
-                ctn = this.contentRendering(index);
-                ele.appendChild(ctn);
-                this.ariaAttrUpdate(ele);
-                this.expand(ctn);
-            }
-            else {
-                var id = ele.id;
-                if (this.items.length > 0) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        ctn = ele.children[1];
-                        _this.expand(ctn);
-                    });
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnDataClick', id).then(function () {
-                        if (_this.isDestroyed) {
-                            return;
-                        }
-                        ctn = ele.children[1];
-                        _this.expand(ctn);
-                    });
-                }
-            }
+            ctn = this.contentRendering(index);
+            ele.appendChild(ctn);
+            this.ariaAttrUpdate(ele);
+            this.expand(ctn);
         }
         else if (!isNOU(ctn)) {
             if (isExpand) {
@@ -1311,10 +1246,6 @@ var Accordion = /** @class */ (function (_super) {
             var prop = _a[_i];
             switch (prop) {
                 case 'items':
-                    if (this.isServerRendered) {
-                        this.wireFocusEvents();
-                        break;
-                    }
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProp = Object.keys(newProp.items);
                         for (var j = 0; j < changedProp.length; j++) {
@@ -1369,7 +1300,7 @@ var Accordion = /** @class */ (function (_super) {
                     isRefresh = true;
                     break;
                 case 'headerTemplate':
-                    this.initializeheaderTemplate();
+                    this.initializeHeaderTemplate();
                     isRefresh = true;
                     break;
                 case 'itemTemplate':
@@ -1403,7 +1334,7 @@ var Accordion = /** @class */ (function (_super) {
                     break;
             }
         }
-        if (isRefresh && !this.isServerRendered) {
+        if (isRefresh) {
             this.initExpand = [];
             if (this.expandedIndices.length > 0) {
                 this.initExpand = this.expandedIndices;

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

@@ -0,0 +1,147 @@
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, Property, Collection, append, extend, Event, EmitType, BaseEventArgs, EventHandler, closest, addClass, removeClass } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';
+import {BreadcrumbOverflowMode,BreadcrumbBeforeItemRenderEventArgs,BreadcrumbClickEventArgs} from "./breadcrumb";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class BreadcrumbItem
+ */
+export interface BreadcrumbItemModel {
+
+    /**
+     * Specifies the text content of the Breadcrumb item.
+     *
+     * @default ''
+     */
+    text?: string;
+
+    /**
+     * Specifies the Url of the Breadcrumb item that will be activated when clicked.
+     *
+     * @default ''
+     */
+    url?: string;
+
+    /**
+     * Defines a class/multiple classes separated by a space for the item that is used to include an icon.
+     *
+     * @default null
+     */
+    iconCss?: string;
+
+}
+
+/**
+ * Interface for a class Breadcrumb
+ */
+export interface BreadcrumbModel extends ComponentModel{
+
+    /**
+     * Defines the Url based on which the Breadcrumb items are generated.
+     *
+     * @default ''
+     */
+    url?: string;
+
+    /**
+     * Defines the list of Breadcrumb items.
+     *
+     * @default []
+     */
+    items?: BreadcrumbItemModel[];
+
+    /**
+     * Specifies the Url of the active Breadcrumb item.
+     *
+     * @default ''
+     */
+    activeItem?: string;
+
+    /**
+     * Specifies an integer to enable overflow behavior when the Breadcrumb items count exceeds and it is based on the overflowMode property.
+     *
+     * @default 0
+     */
+    maxItems?: number;
+
+    /**
+     * Specifies the overflow mode of the Breadcrumb item when it exceeds maxItems count. The possible values are,
+     * - Default: Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.
+     * - Collapsed: Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.
+     *
+     * @default 'Default'
+     */
+    overflowMode?: BreadcrumbOverflowMode;
+
+    /**
+     * Defines class/multiple classes separated by a space in the Breadcrumb element.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Specifies the width for the Breadcrumb component container element. If the Breadcrumb items overflow, the browsers horizontal scroll will be activated based on the device.
+     *
+     * @default ''
+     */
+    width?: string;
+
+    /**
+     * Specifies the template for Breadcrumb item.
+     *
+     * @default null
+     */
+    itemTemplate?: string;
+
+    /**
+     * Specifies the separator template for Breadcrumb.
+     *
+     * @default '/'
+     */
+    separatorTemplate?: string;
+
+    /**
+     * Enable or disable the item's navigation, when set to false, each item navigation will be prevented.
+     *
+     * @default true
+     */
+    enableNavigation?: boolean;
+
+    /**
+     * Enable or disable the active item navigation, when set to true, active item will be navigable.
+     *
+     * @default false
+     */
+    enableActiveItemNavigation?: boolean;
+
+    /**
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
+     *
+     * @default ''
+     * @private
+     * @aspIgnore
+     */
+    locale?: string;
+
+    /**
+     * Triggers while rendering each breadcrumb item.
+     *
+     * @event beforeItemRender
+     */
+    beforeItemRender?: EmitType<BreadcrumbBeforeItemRenderEventArgs>;
+
+    /**
+     * Triggers while clicking the breadcrumb item.
+     *
+     * @event itemClick
+     */
+    itemClick?: EmitType<BreadcrumbClickEventArgs>;
+
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+}

package/src/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,232 @@
+import { Component, INotifyPropertyChanged, ChildProperty, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
+import { BreadcrumbModel, BreadcrumbItemModel } from './breadcrumb-model';
+/**
+ * Defines the Breadcrumb overflow modes.
+ */
+export declare type BreadcrumbOverflowMode = 'Default' | 'Collapsed';
+export declare class BreadcrumbItem extends ChildProperty<BreadcrumbItem> {
+    /**
+     * Specifies the text content of the Breadcrumb item.
+     *
+     * @default ''
+     */
+    text: string;
+    /**
+     * Specifies the Url of the Breadcrumb item that will be activated when clicked.
+     *
+     * @default ''
+     */
+    url: string;
+    /**
+     * Defines a class/multiple classes separated by a space for the item that is used to include an icon.
+     *
+     * @default null
+     */
+    iconCss: string;
+}
+/**
+ * Interface for item click event.
+ */
+export interface BreadcrumbClickEventArgs extends BaseEventArgs {
+    /**
+     * Specifies the item's element.
+     */
+    element: HTMLElement;
+    /**
+     * Specifies the Breadcrumb item.
+     */
+    item: BreadcrumbItemModel;
+    /**
+     * Specifies the item click event.
+     */
+    event: Event;
+}
+/**
+ * Interface for before item render event.
+ */
+export interface BreadcrumbBeforeItemRenderEventArgs extends BaseEventArgs {
+    /**
+     * Specifies the item's element.
+     */
+    element: HTMLElement;
+    /**
+     * Specifies the Breadcrumb item.
+     */
+    item: BreadcrumbItemModel;
+}
+/**
+ * Breadcrumb is a graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites.
+ * The aim is to make the user aware of their current position in a hierarchy of website links.
+ * ```html
+ * <nav id='breadcrumb'></nav>
+ * ```
+ * ```typescript
+ * <script>
+ * var breadcrumbObj = new Breadcrumb({ items: [{ text: 'Home', url: '/' }, { text: 'Index', url: './index.html }]});
+ * breadcrumbObj.appendTo("#breadcrumb");
+ * </script>
+ * ```
+ */
+export declare class Breadcrumb extends Component<HTMLElement> implements INotifyPropertyChanged {
+    private isExpanded;
+    private startIndex;
+    private endIndex;
+    private _maxItems;
+    /**
+     * Defines the Url based on which the Breadcrumb items are generated.
+     *
+     * @default ''
+     */
+    url: string;
+    /**
+     * Defines the list of Breadcrumb items.
+     *
+     * @default []
+     */
+    items: BreadcrumbItemModel[];
+    /**
+     * Specifies the Url of the active Breadcrumb item.
+     *
+     * @default ''
+     */
+    activeItem: string;
+    /**
+     * Specifies an integer to enable overflow behavior when the Breadcrumb items count exceeds and it is based on the overflowMode property.
+     *
+     * @default 0
+     */
+    maxItems: number;
+    /**
+     * Specifies the overflow mode of the Breadcrumb item when it exceeds maxItems count. The possible values are,
+     * - Default: Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.
+     * - Collapsed: Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.
+     *
+     * @default 'Default'
+     */
+    overflowMode: BreadcrumbOverflowMode;
+    /**
+     * Defines class/multiple classes separated by a space in the Breadcrumb element.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Specifies the width for the Breadcrumb component container element. If the Breadcrumb items overflow, the browsers horizontal scroll will be activated based on the device.
+     *
+     * @default ''
+     */
+    width: string;
+    /**
+     * Specifies the template for Breadcrumb item.
+     *
+     * @default null
+     */
+    itemTemplate: string;
+    /**
+     * Specifies the separator template for Breadcrumb.
+     *
+     * @default '/'
+     */
+    separatorTemplate: string;
+    /**
+     * Enable or disable the item's navigation, when set to false, each item navigation will be prevented.
+     *
+     * @default true
+     */
+    enableNavigation: boolean;
+    /**
+     * Enable or disable the active item navigation, when set to true, active item will be navigable.
+     *
+     * @default false
+     */
+    enableActiveItemNavigation: boolean;
+    /**
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
+     *
+     * @default ''
+     * @private
+     * @aspIgnore
+     */
+    locale: string;
+    /**
+     * Triggers while rendering each breadcrumb item.
+     *
+     * @event beforeItemRender
+     */
+    beforeItemRender: EmitType<BreadcrumbBeforeItemRenderEventArgs>;
+    /**
+     * Triggers while clicking the breadcrumb item.
+     *
+     * @event itemClick
+     */
+    itemClick: EmitType<BreadcrumbClickEventArgs>;
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Constructor for creating the widget.
+     *
+     * @private
+     * @param {BreadcrumbModel} options - Specifies the Breadcrumb model.
+     * @param {string | HTMLElement} element - Specifies the element.
+     */
+    constructor(options?: BreadcrumbModel, element?: string | HTMLElement);
+    /**
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void;
+    /**
+     * Initialize the control rendering.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected render(): void;
+    private initialize;
+    private initPvtProps;
+    private setWidth;
+    private initItems;
+    private renderItems;
+    private calculateMaxItems;
+    private hasField;
+    private beforeItemRenderChanges;
+    private reRenderItems;
+    private clickHandler;
+    private resize;
+    private expandHandler;
+    private keyDownHandler;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @private
+     * @param {BreadcrumbModel} newProp - Specifies the new properties.
+     * @param {BreadcrumbModel} oldProp - Specifies the old properties.
+     * @returns {void}
+     */
+    onPropertyChanged(newProp: BreadcrumbModel, oldProp: BreadcrumbModel): void;
+    private wireEvents;
+    private unWireEvents;
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    protected getPersistData(): string;
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    protected getModuleName(): string;
+    /**
+     * Destroys the widget.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+}