@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/src/common/menu-scroll.d.ts

@@ -0,0 +1,29 @@
+import { VScroll } from './v-scroll';
+import { HScroll } from './h-scroll';
+/**
+ * Used to add scroll in menu.
+ *
+ * @param {createElementType} createElement - Specifies the create element model
+ * @param {HTMLElement} container - Specifies the element container
+ * @param {HTMLElement} content - Specifies the content element
+ * @param {string} scrollType - Specifies the scroll type
+ * @param {boolean} enableRtl - Specifies the enable RTL property
+ * @param {boolean} offset - Specifies the offset value
+ * @returns {HTMLElement} - Element
+ * @hidden
+ */
+export declare function addScrolling(createElement: createElementType, container: HTMLElement, content: HTMLElement, scrollType: string, enableRtl: boolean, offset?: number): HTMLElement;
+/**
+ * Used to destroy the scroll option.
+ *
+ * @param {VScroll | HScroll} scrollObj - Specifies the scroller object
+ * @param {Element} element - Specifies the element
+ * @param {HTMLElement} skipEle - Specifies the skip  element
+ * @returns {void}
+ * @hidden
+ */
+export declare function destroyScroll(scrollObj: VScroll | HScroll, element: Element, skipEle?: HTMLElement): void;
+declare type createElementType = (tag: string, prop?: {
+    className?: string;
+}) => HTMLElement;
+export {};

package/src/common/menu-scroll.js

@@ -0,0 +1,103 @@
+import { select, detach } from '@syncfusion/ej2-base';
+import { VScroll } from './v-scroll';
+import { HScroll } from './h-scroll';
+/**
+ * Used to add scroll in menu.
+ *
+ * @param {createElementType} createElement - Specifies the create element model
+ * @param {HTMLElement} container - Specifies the element container
+ * @param {HTMLElement} content - Specifies the content element
+ * @param {string} scrollType - Specifies the scroll type
+ * @param {boolean} enableRtl - Specifies the enable RTL property
+ * @param {boolean} offset - Specifies the offset value
+ * @returns {HTMLElement} - Element
+ * @hidden
+ */
+export function addScrolling(createElement, container, content, scrollType, enableRtl, offset) {
+    var containerOffset;
+    var contentOffset;
+    var parentElem = container.parentElement;
+    if (scrollType === 'vscroll') {
+        containerOffset = offset || container.getBoundingClientRect().height;
+        contentOffset = content.getBoundingClientRect().height;
+    }
+    else {
+        containerOffset = container.getBoundingClientRect().width;
+        contentOffset = content.getBoundingClientRect().width;
+    }
+    if (containerOffset < contentOffset) {
+        return createScrollbar(createElement, container, content, scrollType, enableRtl, offset);
+    }
+    else if (parentElem) {
+        var width = parentElem.getBoundingClientRect().width;
+        if (width < containerOffset && scrollType === 'hscroll') {
+            contentOffset = width;
+            container.style.maxWidth = width + 'px';
+            return createScrollbar(createElement, container, content, scrollType, enableRtl, offset);
+        }
+        return content;
+    }
+    else {
+        return content;
+    }
+}
+/**
+ * Used to create scroll bar in menu.
+ *
+ * @param {createElementType} createElement - Specifies the create element model
+ * @param {HTMLElement} container - Specifies the element container
+ * @param {HTMLElement} content - Specifies the content element
+ * @param {string} scrollType - Specifies the scroll type
+ * @param {boolean} enableRtl - Specifies the enable RTL property
+ * @param {boolean} offset - Specifies the offset value
+ * @returns {HTMLElement} - Element
+ * @hidden
+ */
+function createScrollbar(createElement, container, content, scrollType, enableRtl, offset) {
+    var scrollEle = createElement('div', { className: 'e-menu-' + scrollType });
+    container.appendChild(scrollEle);
+    scrollEle.appendChild(content);
+    if (offset) {
+        scrollEle.style.overflow = 'hidden';
+        scrollEle.style.height = offset + 'px';
+    }
+    else {
+        scrollEle.style.maxHeight = container.style.maxHeight;
+        container.style.overflow = 'hidden';
+    }
+    var scrollObj;
+    if (scrollType === 'vscroll') {
+        scrollObj = new VScroll({ enableRtl: enableRtl }, scrollEle);
+        scrollObj.scrollStep = select('.e-' + scrollType + '-bar', container).offsetHeight / 2;
+    }
+    else {
+        scrollObj = new HScroll({ enableRtl: enableRtl }, scrollEle);
+        scrollObj.scrollStep = select('.e-' + scrollType + '-bar', container).offsetWidth;
+    }
+    return scrollEle;
+}
+/**
+ * Used to destroy the scroll option.
+ *
+ * @param {VScroll | HScroll} scrollObj - Specifies the scroller object
+ * @param {Element} element - Specifies the element
+ * @param {HTMLElement} skipEle - Specifies the skip  element
+ * @returns {void}
+ * @hidden
+ */
+export function destroyScroll(scrollObj, element, skipEle) {
+    if (scrollObj) {
+        var menu = select('.e-menu-parent', element);
+        if (menu) {
+            if (!skipEle || skipEle === menu) {
+                scrollObj.destroy();
+                element.parentElement.appendChild(menu);
+                detach(element);
+            }
+        }
+        else {
+            scrollObj.destroy();
+            detach(element);
+        }
+    }
+}

package/src/common/v-scroll-model.d.ts

@@ -8,6 +8,7 @@ export interface VScrollModel extends ComponentModel{
 
     /**
      * Specifies the up or down scrolling distance of the vertical scrollbar moving.
+     *
      * @default null
      */
     scrollStep?: number;

package/src/common/v-scroll.d.ts

@@ -28,43 +28,53 @@ export declare class VScroll extends Component<HTMLElement> implements INotifyPr
     private customStep;
     /**
      * Specifies the up or down scrolling distance of the vertical scrollbar moving.
+     *
      * @default null
      */
     scrollStep: number;
     /**
      * Initialize the event handler
+     *
      * @private
+     * @returns {void}
      */
     protected preRender(): void;
     /**
      * To Initialize the vertical scroll rendering
+     *
      * @private
+     * @returns {void}
      */
     protected render(): void;
+    private setScrollState;
     /**
      * Initializes a new instance of the VScroll class.
-     * @param options  - Specifies VScroll model properties as options.
-     * @param element  - Specifies the element for which vertical scrolling applies.
+     *
+     * @param {VScrollModel} options  - Specifies VScroll model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element for which vertical scrolling applies.
      */
     constructor(options?: VScrollModel, element?: string | HTMLElement);
     private initialize;
     protected getPersistData(): string;
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - It returns the current module name.
      * @private
      */
     protected getModuleName(): string;
     /**
      * Removes the control from the DOM and also removes all its related events.
-     * @returns void
+     *
+     * @returns {void}
      */
     destroy(): void;
     /**
      * Specifies the value to disable/enable the VScroll component.
-     * When set to `true`, the component will be disabled.
+     * When set to `true` , the component will be disabled.
+     *
      * @param  {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     disable(value: boolean): void;
     private createOverlayElement;
@@ -86,9 +96,10 @@ export declare class VScroll extends Component<HTMLElement> implements INotifyPr
     private scrollEventHandler;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of property that changed.
-     * @param  {VScrollModel} newProp
-     * @param  {VScrollModel} oldProp
-     * @returns void
+     *
+     * @param  {VScrollModel} newProp - It contains the new value of data.
+     * @param  {VScrollModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     onPropertyChanged(newProp: VScrollModel, oldProp: VScrollModel): void;

package/src/common/v-scroll.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __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; }
@@ -52,15 +52,18 @@ var VScroll = /** @class */ (function (_super) {
     __extends(VScroll, _super);
     /**
      * Initializes a new instance of the VScroll class.
-     * @param options  - Specifies VScroll model properties as options.
-     * @param element  - Specifies the element for which vertical scrolling applies.
+     *
+     * @param {VScrollModel} options  - Specifies VScroll model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element for which vertical scrolling applies.
      */
     function VScroll(options, element) {
         return _super.call(this, options, element) || this;
     }
     /**
      * Initialize the event handler
+     *
      * @private
+     * @returns {void}
      */
     VScroll.prototype.preRender = function () {
         this.browser = Browser.info.name;
@@ -81,7 +84,9 @@ var VScroll = /** @class */ (function (_super) {
     };
     /**
      * To Initialize the vertical scroll rendering
+     *
      * @private
+     * @returns {void}
      */
     VScroll.prototype.render = function () {
         this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });
@@ -93,11 +98,17 @@ var VScroll = /** @class */ (function (_super) {
             this.element.classList.add(CLS_DEVICE);
             this.createOverlayElement(this.element);
         }
+        this.setScrollState();
+        EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);
+    };
+    VScroll.prototype.setScrollState = function () {
         if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {
             this.scrollStep = this.scrollEle.offsetHeight;
             this.customStep = false;
         }
-        EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);
+        else {
+            this.customStep = true;
+        }
     };
     VScroll.prototype.initialize = function () {
         var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });
@@ -111,7 +122,7 @@ var VScroll = /** @class */ (function (_super) {
         }
         scrollBar.appendChild(scrollCnt);
         ele.appendChild(scrollBar);
-        scrollBar.style.overflowY = 'hidden';
+        scrollBar.style.overflow = 'hidden';
         this.scrollEle = scrollBar;
         this.scrollItems = scrollCnt;
     };
@@ -121,7 +132,8 @@ var VScroll = /** @class */ (function (_super) {
     };
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - It returns the current module name.
      * @private
      */
     VScroll.prototype.getModuleName = function () {
@@ -129,7 +141,8 @@ var VScroll = /** @class */ (function (_super) {
     };
     /**
      * Removes the control from the DOM and also removes all its related events.
-     * @returns void
+     *
+     * @returns {void}
      */
     VScroll.prototype.destroy = function () {
         var el = this.element;
@@ -161,13 +174,19 @@ var VScroll = /** @class */ (function (_super) {
     };
     /**
      * Specifies the value to disable/enable the VScroll component.
-     * When set to `true`, the component will be disabled.
+     * When set to `true` , the component will be disabled.
+     *
      * @param  {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     VScroll.prototype.disable = function (value) {
         var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);
-        value ? this.element.classList.add(CLS_DISABLE) : this.element.classList.remove(CLS_DISABLE);
+        if (value) {
+            this.element.classList.add(CLS_DISABLE);
+        }
+        else {
+            this.element.classList.remove(CLS_DISABLE);
+        }
         [].slice.call(navEle).forEach(function (el) {
             el.setAttribute('tabindex', !value ? '0' : '-1');
         });
@@ -216,7 +235,9 @@ var VScroll = /** @class */ (function (_super) {
                 _this.keyTimeout = true;
                 _this.eleScrolling(10, ev.target, true);
             };
-            this.keyTimer = window.setTimeout(function () { timeoutFun_1(); }, 100);
+            this.keyTimer = window.setTimeout(function () {
+                timeoutFun_1();
+            }, 100);
         }
     };
     VScroll.prototype.onKeyUp = function (ev) {
@@ -256,13 +277,14 @@ var VScroll = /** @class */ (function (_super) {
         var timeoutFun = function () {
             _this.eleScrolling(scrollDistance, trgt, true);
         };
-        this.timeout = window.setInterval(function () { timeoutFun(); }, 50);
+        this.timeout = window.setInterval(function () {
+            timeoutFun();
+        }, 50);
     };
     VScroll.prototype.contains = function (element, className) {
         return element.classList.contains(className);
     };
     VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {
-        var rootElement = this.element;
         var classList = trgt.classList;
         if (classList.contains(CLS_VSCROLLNAV)) {
             classList = trgt.querySelector('.' + CLS_NAVARROW).classList;
@@ -343,8 +365,7 @@ var VScroll = /** @class */ (function (_super) {
     };
     VScroll.prototype.touchHandler = function (e) {
         var el = this.scrollEle;
-        var distance;
-        distance = e.distanceY;
+        var distance = e.distanceY;
         if (e.scrollDirection === 'Up') {
             el.scrollTop = el.scrollTop + distance;
         }
@@ -376,7 +397,6 @@ var VScroll = /** @class */ (function (_super) {
     VScroll.prototype.scrollEventHandler = function (e) {
         var target = e.target;
         var height = target.offsetHeight;
-        var rootEle = this.element;
         var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);
         var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);
         var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);
@@ -416,9 +436,10 @@ var VScroll = /** @class */ (function (_super) {
     };
     /**
      * Gets called when the model property changes.The data that describes the old and new values of property that changed.
-     * @param  {VScrollModel} newProp
-     * @param  {VScrollModel} oldProp
-     * @returns void
+     *
+     * @param  {VScrollModel} newProp - It contains the new value of data.
+     * @param  {VScrollModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     VScroll.prototype.onPropertyChanged = function (newProp, oldProp) {
@@ -426,9 +447,15 @@ var VScroll = /** @class */ (function (_super) {
             var prop = _a[_i];
             switch (prop) {
                 case 'scrollStep':
+                    this.setScrollState();
                     break;
                 case 'enableRtl':
-                    newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);
+                    if (newProp.enableRtl) {
+                        this.element.classList.add(CLS_RTL);
+                    }
+                    else {
+                        this.element.classList.remove(CLS_RTL);
+                    }
                     break;
             }
         }

package/src/context-menu/context-menu-model.d.ts

@@ -1,4 +1,4 @@
-import { attributes, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { getZindexPartial } from '@syncfusion/ej2-popups';import { MenuBase, MenuItem } from '../common/menu-base';import { MenuItemModel } from './../common/menu-base-model';
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { getZindexPartial } from '@syncfusion/ej2-popups';import { MenuBase, MenuItem } from '../common/menu-base';import { MenuItemModel } from './../common/menu-base-model';
 import {MenuBaseModel} from "../common/menu-base-model";
 
 /**
@@ -8,20 +8,24 @@ export interface ContextMenuModel extends MenuBaseModel{
 
     /**
      * Specifies target element selector in which the ContextMenu should be opened.
-     * @default ''  
+     *
+     * @default ''
      */
     target?: string;
 
     /**
      * Specifies the filter selector for elements inside the target in that the context menu will be opened.
-     * @default ''    
+     *
+     * @default ''
      */
     filter?: string;
 
     /**
      * Specifies menu items with its properties which will be rendered as ContextMenu.
+     *
      * @default []
      * @aspType object
+     * @blazorType object
      */
     items?: MenuItemModel[];
 

package/src/context-menu/context-menu.d.ts

@@ -18,55 +18,70 @@ import { MenuItemModel } from './../common/menu-base-model';
 export declare class ContextMenu extends MenuBase implements INotifyPropertyChanged {
     /**
      * Constructor for creating the widget.
+     *
      * @private
+     * @param {ContextMenuModel} options - Specifies the context menu model
+     * @param {string} element - Specifies the element
      */
     constructor(options?: ContextMenuModel, element?: string | HTMLUListElement);
     /**
      * Specifies target element selector in which the ContextMenu should be opened.
+     *
      * @default ''
      */
     target: string;
     /**
      * Specifies the filter selector for elements inside the target in that the context menu will be opened.
+     *
      * @default ''
      */
     filter: string;
     /**
      * Specifies menu items with its properties which will be rendered as ContextMenu.
+     *
      * @default []
      * @aspType object
+     * @blazorType object
      */
     items: MenuItemModel[];
     /**
      * For internal use only - prerender processing.
+     *
      * @private
+     * @returns {void}
      */
     protected preRender(): void;
     protected initialize(): void;
     /**
      * This method is used to open the ContextMenu in specified position.
-     * @param top - To specify ContextMenu vertical positioning.
-     * @param left - To specify ContextMenu horizontal positioning.
-     * @param target - To calculate z-index for ContextMenu based upon the specified target.
-     * @method open
-     * @returns void
+     *
+     * @param {number} top - To specify ContextMenu vertical positioning.
+     * @param {number} left - To specify ContextMenu horizontal positioning.
+     * @param {HTMLElement} target - To calculate z-index for ContextMenu based upon the specified target.
+     * @function open
+     * @returns {void}
      */
     open(top: number, left: number, target?: HTMLElement): void;
     /**
      * Closes the ContextMenu if it is opened.
+     *
+     * @function close
+     * @returns {void}
      */
     close(): void;
     /**
-     * Called internally if any of the property value changed
+     * Called internally if any of the property value changed.
+     *
      * @private
-     * @param {ContextMenuModel} newProp
-     * @param {ContextMenuModel} oldProp
-     * @returns void
+     * @param {ContextMenuModel} newProp - Specifies new properties
+     * @param {ContextMenuModel} oldProp - Specifies old properties
+     * @returns {void}
      */
     onPropertyChanged(newProp: ContextMenuModel, oldProp: ContextMenuModel): void;
     /**
      * Get module name.
-     * @returns string
+     *
+     * @returns {string} - Module Name
      * @private
      */
     protected getModuleName(): string;

package/src/context-menu/context-menu.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __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; }
@@ -17,8 +17,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
+/* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path='../common/menu-base-model.d.ts'/>
-import { attributes, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
 import { getZindexPartial } from '@syncfusion/ej2-popups';
 import { MenuBase, MenuItem } from '../common/menu-base';
 /**
@@ -37,47 +38,58 @@ var ContextMenu = /** @class */ (function (_super) {
     __extends(ContextMenu, _super);
     /**
      * Constructor for creating the widget.
+     *
      * @private
+     * @param {ContextMenuModel} options - Specifies the context menu model
+     * @param {string} element - Specifies the element
      */
     function ContextMenu(options, element) {
         return _super.call(this, options, element) || this;
     }
     /**
      * For internal use only - prerender processing.
+     *
      * @private
+     * @returns {void}
      */
     ContextMenu.prototype.preRender = function () {
         this.isMenu = false;
+        this.element.id = this.element.id || getUniqueID('ej2-contextmenu');
         _super.prototype.preRender.call(this);
     };
     ContextMenu.prototype.initialize = function () {
         _super.prototype.initialize.call(this);
-        attributes(this.element, { 'role': 'menu', 'tabindex': '0' });
+        attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
     };
     /**
      * This method is used to open the ContextMenu in specified position.
-     * @param top - To specify ContextMenu vertical positioning.
-     * @param left - To specify ContextMenu horizontal positioning.
-     * @param target - To calculate z-index for ContextMenu based upon the specified target.
-     * @method open
-     * @returns void
+     *
+     * @param {number} top - To specify ContextMenu vertical positioning.
+     * @param {number} left - To specify ContextMenu horizontal positioning.
+     * @param {HTMLElement} target - To calculate z-index for ContextMenu based upon the specified target.
+     * @function open
+     * @returns {void}
      */
     ContextMenu.prototype.open = function (top, left, target) {
         _super.prototype.openMenu.call(this, null, null, top, left, null, target);
     };
     /**
      * Closes the ContextMenu if it is opened.
+     *
+     * @function close
+     * @returns {void}
      */
     ContextMenu.prototype.close = function () {
         _super.prototype.closeMenu.call(this);
     };
     /**
-     * Called internally if any of the property value changed
+     * Called internally if any of the property value changed.
+     *
      * @private
-     * @param {ContextMenuModel} newProp
-     * @param {ContextMenuModel} oldProp
-     * @returns void
+     * @param {ContextMenuModel} newProp - Specifies new properties
+     * @param {ContextMenuModel} oldProp - Specifies old properties
+     * @returns {void}
      */
     ContextMenu.prototype.onPropertyChanged = function (newProp, oldProp) {
         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
@@ -89,8 +101,7 @@ var ContextMenu = /** @class */ (function (_super) {
                     this.filter = newProp.filter;
                     break;
                 case 'target':
-                    this.unWireEvents();
-                    this.target = newProp.target;
+                    this.unWireEvents(oldProp.target);
                     this.wireEvents();
                     break;
             }
@@ -98,7 +109,8 @@ var ContextMenu = /** @class */ (function (_super) {
     };
     /**
      * Get module name.
-     * @returns string
+     *
+     * @returns {string} - Module Name
      * @private
      */
     ContextMenu.prototype.getModuleName = function () {

package/src/index.d.ts

@@ -9,3 +9,6 @@ export * from './menu/index';
 export * from './tab/index';
 export * from './treeview/index';
 export * from './sidebar/index';
+export * from './breadcrumb/index';
+export * from './carousel/index';
+export * from './appbar/index';

package/src/index.js

@@ -9,3 +9,6 @@ export * from './menu/index';
 export * from './tab/index';
 export * from './treeview/index';
 export * from './sidebar/index';
+export * from './breadcrumb/index';
+export * from './carousel/index';
+export * from './appbar/index';