@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/src/carousel/index.d.ts

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

package/src/carousel/index.js

@@ -0,0 +1,2 @@
+/** Carousel export modules */
+export * from './carousel';

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

@@ -8,6 +8,7 @@ export interface HScrollModel extends ComponentModel{
 
     /**
      * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
+     *
      * @default null
      */
     scrollStep?: number;

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

@@ -14,6 +14,7 @@ import { HScrollModel } from './h-scroll-model';
  * ```
  */
 export declare class HScroll extends Component<HTMLElement> implements INotifyPropertyChanged {
+    private isDevice;
     private touchModule;
     private scrollEle;
     private scrollItems;
@@ -24,47 +25,56 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private browser;
     private browserCheck;
     private ieCheck;
-    private isDevice;
     private customStep;
     /**
      * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
+     *
      * @default null
      */
     scrollStep: number;
     /**
      * Initialize the event handler
+     *
      * @private
+     * @returns {void}
      */
     protected preRender(): void;
     /**
      * To Initialize the horizontal scroll  rendering
+     *
      * @private
+     * @returns {void}
      */
     protected render(): void;
+    private setScrollState;
     /**
      * Initializes a new instance of the HScroll class.
-     * @param options  - Specifies HScroll model properties as options.
-     * @param element  - Specifies the element for which horizontal scrolling applies.
+     *
+     * @param {HScrollModel} options  - Specifies HScroll model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element for which horizontal scrolling applies.
      */
     constructor(options?: HScrollModel, 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 HScroll 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, HScroll will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     disable(value: boolean): void;
     private createOverlay;
@@ -85,9 +95,10 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private scrollHandler;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of property that changed.
-     * @param  {HScrollModel} newProp
-     * @param  {HScrollModel} oldProp
-     * @returns void
+     *
+     * @param  {HScrollModel} newProp - It contains the new value of data.
+     * @param  {HScrollModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     onPropertyChanged(newProp: HScrollModel, oldProp: HScrollModel): void;

package/src/common/h-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 HScroll = /** @class */ (function (_super) {
     __extends(HScroll, _super);
     /**
      * Initializes a new instance of the HScroll class.
-     * @param options  - Specifies HScroll model properties as options.
-     * @param element  - Specifies the element for which horizontal scrolling applies.
+     *
+     * @param {HScrollModel} options  - Specifies HScroll model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element for which horizontal scrolling applies.
      */
     function HScroll(options, element) {
         return _super.call(this, options, element) || this;
     }
     /**
      * Initialize the event handler
+     *
      * @private
+     * @returns {void}
      */
     HScroll.prototype.preRender = function () {
         this.browser = Browser.info.name;
@@ -81,7 +84,9 @@ var HScroll = /** @class */ (function (_super) {
     };
     /**
      * To Initialize the horizontal scroll  rendering
+     *
      * @private
+     * @returns {void}
      */
     HScroll.prototype.render = function () {
         this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });
@@ -93,10 +98,16 @@ var HScroll = /** @class */ (function (_super) {
             this.element.classList.add(CLS_DEVICE);
             this.createOverlay(this.element);
         }
+        this.setScrollState();
+    };
+    HScroll.prototype.setScrollState = function () {
         if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {
             this.scrollStep = this.scrollEle.offsetWidth;
             this.customStep = false;
         }
+        else {
+            this.customStep = true;
+        }
     };
     HScroll.prototype.initialize = function () {
         var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });
@@ -120,7 +131,8 @@ var HScroll = /** @class */ (function (_super) {
     };
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - It returns the current module name.
      * @private
      */
     HScroll.prototype.getModuleName = function () {
@@ -128,7 +140,8 @@ var HScroll = /** @class */ (function (_super) {
     };
     /**
      * Removes the control from the DOM and also removes all its related events.
-     * @returns void
+     *
+     * @returns {void}
      */
     HScroll.prototype.destroy = function () {
         var ele = this.element;
@@ -161,13 +174,19 @@ var HScroll = /** @class */ (function (_super) {
     };
     /**
      * Specifies the value to disable/enable the HScroll 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, HScroll will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     HScroll.prototype.disable = function (value) {
         var navEles = 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(navEles).forEach(function (el) {
             el.setAttribute('tabindex', !value ? '0' : '-1');
         });
@@ -191,16 +210,17 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.createNavIcon = function (element) {
         var id = element.id.concat('_nav');
         var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);
-        var nav = this.createElement('div', { id: id.concat('_right'), className: clsRight });
+        var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };
+        var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });
         nav.setAttribute('aria-disabled', 'false');
         var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);
-        var navEle = this.createElement('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });
+        var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };
+        var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });
         navEle.setAttribute('aria-disabled', 'true');
         var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         navEle.appendChild(navLeftItem);
         nav.appendChild(navItem);
-        nav.setAttribute('tabindex', '0');
         element.appendChild(nav);
         element.insertBefore(navEle, element.firstChild);
         if (this.ieCheck) {
@@ -266,7 +286,6 @@ var HScroll = /** @class */ (function (_super) {
         return ele.classList.contains(className);
     };
     HScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {
-        var element = this.scrollEle;
         var rootEle = this.element;
         var classList = trgt.classList;
         if (classList.contains(CLS_HSCROLLNAV)) {
@@ -275,7 +294,6 @@ var HScroll = /** @class */ (function (_super) {
         if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {
             scrollDis = -scrollDis;
         }
-        var scrlLeft = element.scrollLeft;
         if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
             if (classList.contains(CLS_NAVRIGHTARROW)) {
                 this.frameScrollRequest(scrollDis, 'add', isContinuous);
@@ -318,7 +336,7 @@ var HScroll = /** @class */ (function (_super) {
                 else if (e.swipeDirection === 'Right') {
                     swipeEle.scrollLeft -= distance * step;
                 }
-                start -= 0.02;
+                start -= 0.5;
                 window.requestAnimationFrame(animate);
             }
         };
@@ -331,6 +349,9 @@ var HScroll = /** @class */ (function (_super) {
         else {
             this.scrollEle.scrollLeft -= scrollVal;
         }
+        if (this.enableRtl && this.scrollEle.scrollLeft > 0) {
+            this.scrollEle.scrollLeft = 0;
+        }
     };
     HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {
         var _this = this;
@@ -345,12 +366,22 @@ var HScroll = /** @class */ (function (_super) {
             });
         }
         var animate = function () {
-            if (scrollVal < step) {
-                window.cancelAnimationFrame(step);
+            var scrollValue;
+            var scrollStep;
+            if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {
+                scrollValue = -scrollVal;
+                scrollStep = -step;
             }
             else {
-                _this.scrollUpdating(step, action);
-                scrollVal -= step;
+                scrollValue = scrollVal;
+                scrollStep = step;
+            }
+            if (scrollValue < step) {
+                window.cancelAnimationFrame(scrollStep);
+            }
+            else {
+                _this.scrollUpdating(scrollStep, action);
+                scrollVal -= scrollStep;
                 window.requestAnimationFrame(animate);
             }
         };
@@ -358,8 +389,7 @@ var HScroll = /** @class */ (function (_super) {
     };
     HScroll.prototype.touchHandler = function (e) {
         var ele = this.scrollEle;
-        var distance;
-        distance = e.distanceX;
+        var distance = e.distanceX;
         if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {
             distance = -distance;
         }
@@ -381,7 +411,7 @@ var HScroll = /** @class */ (function (_super) {
                 classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
             }
         }
-        else {
+        else if (addDisable && removeDisable) {
             addDisable.classList.add(CLS_DISABLE);
             addDisable.setAttribute('aria-disabled', 'true');
             addDisable.removeAttribute('tabindex');
@@ -422,20 +452,10 @@ var HScroll = /** @class */ (function (_super) {
             }
         }
         if (scrollLeft === 0) {
-            if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
-                this.arrowDisabling(navLeftEle, navRightEle);
-            }
-            else {
-                this.arrowDisabling(navRightEle, navLeftEle);
-            }
+            this.arrowDisabling(navLeftEle, navRightEle);
         }
         else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {
-            if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
-                this.arrowDisabling(navRightEle, navLeftEle);
-            }
-            else {
-                this.arrowDisabling(navLeftEle, navRightEle);
-            }
+            this.arrowDisabling(navRightEle, navLeftEle);
         }
         else {
             var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);
@@ -448,9 +468,10 @@ var HScroll = /** @class */ (function (_super) {
     };
     /**
      * Gets called when the model property changes.The data that describes the old and new values of property that changed.
-     * @param  {HScrollModel} newProp
-     * @param  {HScrollModel} oldProp
-     * @returns void
+     *
+     * @param  {HScrollModel} newProp - It contains the new value of data.
+     * @param  {HScrollModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {
@@ -458,6 +479,7 @@ var HScroll = /** @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);

package/src/common/index.d.ts

@@ -3,5 +3,7 @@
  */
 export * from './h-scroll';
 export * from './v-scroll';
+export * from './menu-scroll';
 export { MenuEventArgs, OpenCloseMenuEventArgs, BeforeOpenCloseMenuEventArgs, MenuAnimationSettings, MenuEffect } from './menu-base';
+export { MenuItem, FieldSettings } from './menu-base';
 export { MenuItemModel, FieldSettingsModel, MenuAnimationSettingsModel } from './menu-base-model';

package/src/common/index.js

@@ -3,4 +3,6 @@
  */
 export * from './h-scroll';
 export * from './v-scroll';
+export * from './menu-scroll';
 export { MenuAnimationSettings } from './menu-base';
+export { MenuItem, FieldSettings } from './menu-base';

package/src/common/menu-base-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, Property, ChildProperty, NotifyPropertyChanges, INotifyPropertyChanged, AnimationModel } from '@syncfusion/ej2-base';import { Event, EventHandler, EmitType, BaseEventArgs, KeyboardEvents, KeyboardEventArgs, Touch, TapEventArgs } from '@syncfusion/ej2-base';import { attributes, Animation, AnimationOptions, TouchEventArgs, MouseEventArgs } from '@syncfusion/ej2-base';import { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';import { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { getZindexPartial, calculatePosition, OffsetPosition, isCollide, flip, fit, Popup } from '@syncfusion/ej2-popups';import { getScrollableParent } from '@syncfusion/ej2-popups';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
+import { Component, Property, ChildProperty, NotifyPropertyChanges, INotifyPropertyChanged, AnimationModel, isBlazor } from '@syncfusion/ej2-base';import { Event, EventHandler, EmitType, BaseEventArgs, KeyboardEvents, KeyboardEventArgs, Touch, TapEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationOptions, TouchEventArgs, MouseEventArgs } from '@syncfusion/ej2-base';import { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';import { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { getZindexPartial, calculatePosition, OffsetPosition, isCollide, fit, Popup } from '@syncfusion/ej2-popups';import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';import { addScrolling, destroyScroll } from '../common/menu-scroll';
 import {MenuEffect,MenuEventArgs,BeforeOpenCloseMenuEventArgs,OpenCloseMenuEventArgs} from "./menu-base";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -9,42 +9,49 @@ export interface FieldSettingsModel {
 
     /**
      * Specifies the itemId field for Menu item.
+     *
      * @default 'id'
      */
     itemId?: string | string[];
 
     /**
      * Specifies the parentId field for Menu item.
+     *
      * @default 'parentId'
      */
     parentId?: string | string[];
 
     /**
      * Specifies the text field for Menu item.
+     *
      * @default 'text'
      */
     text?: string | string[];
 
     /**
      * Specifies the css icon field for Menu item.
+     *
      * @default 'iconCss'
      */
     iconCss?: string | string[];
 
     /**
      * Specifies the Url field for Menu item.
+     *
      * @default 'url'
      */
     url?: string | string[];
 
     /**
      * Specifies the separator field for Menu item.
+     *
      * @default 'separator'
      */
     separator?: string | string[];
 
     /**
-     * Specifies the children field for Menu item. 
+     * Specifies the children field for Menu item.
+     *
      * @default 'items'
      */
     children?: string | string[];
@@ -59,36 +66,42 @@ export interface MenuItemModel {
     /**
      * Defines class/multiple classes separated by a space for the menu Item that is used to include an icon.
      * Menu Item can include font icon and sprite image.
+     *
      * @default null
      */
     iconCss?: string;
 
     /**
      * Specifies the id for menu item.
+     *
      * @default ''
      */
     id?: string;
 
     /**
      * Specifies separator between the menu items. Separator are either horizontal or vertical lines used to group menu items.
+     *
      * @default false
      */
     separator?: boolean;
 
     /**
      * Specifies the sub menu items that is the array of MenuItem model.
+     *
      * @default []
      */
     items?: MenuItemModel[];
 
     /**
      * Specifies text for menu item.
+     *
      * @default ''
      */
     text?: string;
 
     /**
      * Specifies url for menu item that creates the anchor link to navigate to the url provided.
+     *
      * @default ''
      */
     url?: string;
@@ -107,20 +120,24 @@ export interface MenuAnimationSettingsModel {
      * * SlideDown: Specifies the sub menu transform with slide down effect.
      * * ZoomIn: Specifies the sub menu transform with zoom in effect.
      * * FadeIn: Specifies the sub menu transform with fade in effect.
+     *
      * @default 'SlideDown'
      * @aspType Syncfusion.EJ2.Navigations.MenuEffect
+     * @blazorType Syncfusion.EJ2.Navigations.MenuEffect
      * @isEnumeration true
      */
     effect?: MenuEffect;
 
     /**
      * Specifies the time duration to transform object.
+     *
      * @default 400
      */
     duration?: number;
 
     /**
      * Specifies the easing effect applied while transform.
+     *
      * @default 'ease'
      */
     easing?: string;
@@ -134,63 +151,87 @@ export interface MenuAnimationSettingsModel {
 export interface MenuBaseModel extends ComponentModel{
 
     /**
-     * Triggers while rendering each menu item.
-     * @event
-     */
+     * Triggers while rendering each menu item.
+     *
+     * @event beforeItemRender
+     * @blazorProperty 'OnItemRender'
+     */
     beforeItemRender?: EmitType<MenuEventArgs>;
 
     /**
-     * Triggers before opening the menu item.
-     * @event
-     */
+     * Triggers before opening the menu item.
+     *
+     * @event beforeOpen
+     * @blazorProperty 'OnOpen'
+     */
     beforeOpen?: EmitType<BeforeOpenCloseMenuEventArgs>;
 
     /**
-     * Triggers while opening the menu item.
-     * @event
-     */
+     * Triggers while opening the menu item.
+     *
+     * @event onOpen
+     * @blazorProperty 'Opened'
+     */
     onOpen?: EmitType<OpenCloseMenuEventArgs>;
 
     /**
-     * Triggers before closing the menu.
-     * @event
-     */
+     * Triggers before closing the menu.
+     *
+     * @event beforeClose
+     * @blazorProperty 'OnClose'
+     */
     beforeClose?: EmitType<BeforeOpenCloseMenuEventArgs>;
 
     /**
-     * Triggers while closing the menu.
-     * @event
-     */
+     * Triggers while closing the menu.
+     *
+     * @event onClose
+     * @blazorProperty 'Closed'
+     */
     onClose?: EmitType<OpenCloseMenuEventArgs>;
 
     /**
-     * Triggers while selecting menu item.
-     * @event
-     */
+     * Triggers while selecting menu item.
+     *
+     * @event select
+     * @blazorProperty 'ItemSelected'
+     */
     select?: EmitType<MenuEventArgs>;
 
     /**
      * Triggers once the component rendering is completed.
-     * @event
+     *
+     * @event created
+     * @blazorProperty 'Created'
      */
     created?: EmitType<Event>;
 
     /**
      * Defines class/multiple classes separated by a space in the Menu wrapper.
+     *
      * @default ''
      */
     cssClass?: string;
 
+    /**
+     * If hoverDelay is set by particular number, the menu will open after that period.
+     *
+     * @default 0
+     */
+    hoverDelay?: number;
+
     /**
      * Specifies whether to show the sub menu or not on click.
      * When set to true, the sub menu will open only on mouse click.
+     *
      * @default false
      */
     showItemOnClick?: boolean;
 
     /**
      * Specifies target element selector in which the ContextMenu should be opened.
-     * Not applicable to Menu component.
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     *
      * @default ''
      * @private
      */
@@ -199,6 +240,7 @@ export interface MenuBaseModel extends ComponentModel{
     /**
      * Specifies the filter selector for elements inside the target in that the context menu will be opened.
      * Not applicable to Menu component.
+     *
      * @default ''
      * @private
      */
@@ -207,6 +249,7 @@ export interface MenuBaseModel extends ComponentModel{
     /**
      * Specifies the template for Menu item.
      * Not applicable to ContextMenu component.
+     *
      * @default null
      * @private
      */
@@ -215,28 +258,40 @@ export interface MenuBaseModel extends ComponentModel{
     /**
      * Specifies whether to enable / disable the scrollable option in Menu.
      * Not applicable to ContextMenu component.
+     *
      * @default false
      * @private
      */
     enableScrolling?: boolean;
 
+    /**
+     * Defines whether to allow the cross-scripting site or not.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
     /**
      * Specifies mapping fields from the dataSource.
      * Not applicable to ContextMenu component.
+     *
      * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
      * children: "items" }
      * @private
      */
+    // eslint:disable-next-line
     fields?: FieldSettingsModel;
 
     /**
      * Specifies menu items with its properties which will be rendered as Menu.
+     *
      * @default []
      */
     items?: MenuItemModel[] | { [key: string]: Object }[];
 
     /**
      * Specifies the animation settings for the sub menu open.
+     *
      * @default { duration: 400, easing: 'ease', effect: 'SlideDown' }
      */
     animationSettings?: MenuAnimationSettingsModel;