@syncfusion/ej2-navigations 28.1.41 → 28.2.3-1479479

package/blazorGlobalSrc/context-menu/context-menu.js

@@ -0,0 +1,143 @@
+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;
+};
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path='../common/menu-base-model.d.ts'/>
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { getZindexPartial } from '@syncfusion/ej2-popups';
+import { MenuBase, MenuItem } from '../common/menu-base';
+/**
+ * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.
+ * ```html
+ * <div id = 'target'></div>
+ * <ul id = 'contextmenu'></ul>
+ * ```
+ * ```typescript
+ * <script>
+ * var contextMenuObj = new ContextMenu({items: [{ text: 'Cut' }, { text: 'Copy' },{ text: 'Paste' }], target: '#target'});
+ * </script>
+ * ```
+ */
+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 () {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
+        _super.prototype.initialize.call(this);
+        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 {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.
+     *
+     * @private
+     * @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);
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'filter':
+                    this.close();
+                    this.filter = newProp.filter;
+                    break;
+                case 'target':
+                    this.unWireEvents(oldProp.target);
+                    this.wireEvents();
+                    break;
+                case 'itemTemplate':
+                    this.itemTemplate = newProp.itemTemplate;
+                    this.refresh();
+            }
+        }
+    };
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    ContextMenu.prototype.getModuleName = function () {
+        return 'contextmenu';
+    };
+    __decorate([
+        Property('')
+    ], ContextMenu.prototype, "target", void 0);
+    __decorate([
+        Property('')
+    ], ContextMenu.prototype, "filter", void 0);
+    __decorate([
+        Collection([], MenuItem)
+    ], ContextMenu.prototype, "items", void 0);
+    __decorate([
+        Property(null)
+    ], ContextMenu.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], ContextMenu.prototype, "enableScrolling", void 0);
+    ContextMenu = __decorate([
+        NotifyPropertyChanges
+    ], ContextMenu);
+    return ContextMenu;
+}(MenuBase));
+export { ContextMenu };

package/blazorGlobalSrc/context-menu/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * ContextMenu modules
+ */
+export * from './context-menu';
+export * from './context-menu-model';

package/blazorGlobalSrc/context-menu/index.js

@@ -0,0 +1,4 @@
+/**
+ * ContextMenu modules
+ */
+export * from './context-menu';

package/blazorGlobalSrc/global.js

@@ -0,0 +1 @@
+export * from './index';

package/blazorGlobalSrc/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Navigation all modules
+ */
+export * from './common/index';
+export * from './toolbar/index';
+export * from './accordion/index';
+export * from './context-menu/index';
+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';
+export * from './stepper-base/index';
+export * from './stepper/index';

package/blazorGlobalSrc/index.js

@@ -0,0 +1,16 @@
+/**
+ * Navigation all modules
+ */
+export * from './common/index';
+export * from './toolbar/index';
+export * from './accordion/index';
+export * from './context-menu/index';
+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';
+export * from './stepper-base/index';
+export * from './stepper/index';

package/blazorGlobalSrc/menu/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Menu modules
+ */
+export * from './menu';
+export * from './menu-model';

package/blazorGlobalSrc/menu/index.js

@@ -0,0 +1,4 @@
+/**
+ * Menu modules
+ */
+export * from './menu';

package/blazorGlobalSrc/menu/menu-model.d.ts

@@ -0,0 +1,70 @@
+import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';
+import {Orientation} from "./menu";
+import {MenuBaseModel} from "../common/menu-base-model";
+
+/**
+ * Interface for a class Menu
+ */
+export interface MenuModel extends MenuBaseModel{
+
+    /**
+     * Specified the orientation of Menu whether it can be horizontal or vertical.
+     *
+     * @default 'Horizontal'
+     */
+    orientation?: Orientation;
+
+    /**
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     *
+     * @default ''
+     */
+    target?: string;
+
+    /**
+     * Specifies the template for Menu item.
+     *
+     * @default null
+     * @aspType string
+     */
+    template?: string | Function;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in Menu.
+     *
+     * @default false
+     */
+    enableScrolling?: boolean;
+
+    /**
+     * Specifies whether to enable / disable the hamburger mode in Menu.
+     *
+     * @default false
+     */
+    hamburgerMode?: boolean;
+
+    /**
+     * Specifies the title text for hamburger mode in Menu.
+     *
+     * @default 'Menu'
+     */
+    title?: string;
+
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
+     * Specifies mapping fields from the dataSource.
+     *
+     * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
+     * children: "items" }
+     */
+    // eslint:disable-next-line
+    fields?: FieldSettingsModel;
+
+}

package/blazorGlobalSrc/menu/menu.d.ts

@@ -0,0 +1,127 @@
+/// <reference path="../common/menu-base-model.d.ts" />
+import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { MenuBase } from '../common/menu-base';
+import { FieldSettingsModel } from '../common/menu-base-model';
+import { MenuModel } from './menu-model';
+/**
+ * Defines the different types of orientation option available in the Menu.
+ * ```props
+ * Horizontal - It renders the menu in a horizontal orientation mode.
+ * Vertical - It renders the menu in a vertical orientation mode.
+ * ```
+ */
+export declare type Orientation = 'Horizontal' | 'Vertical';
+/**
+ * The Menu is a graphical user interface that serve as navigation headers for your application or site.
+ * ```html
+ * <ul id = 'menu'></ul>
+ * ```
+ * ```typescript
+ * <script>
+ * var menuObj = new Menu({ items: [{ text: 'Home' }, { text: 'Contact Us' },{ text: 'Login' }]});
+ * menuObj.appendTo("#menu");
+ * </script>
+ * ```
+ */
+export declare class Menu extends MenuBase implements INotifyPropertyChanged {
+    private tempItems;
+    /**
+     * Specified the orientation of Menu whether it can be horizontal or vertical.
+     *
+     * @default 'Horizontal'
+     */
+    orientation: Orientation;
+    /**
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     *
+     * @default ''
+     */
+    target: string;
+    /**
+     * Specifies the template for Menu item.
+     *
+     * @default null
+     * @aspType string
+     */
+    template: string | Function;
+    /**
+     * Specifies whether to enable / disable the scrollable option in Menu.
+     *
+     * @default false
+     */
+    enableScrolling: boolean;
+    /**
+     * Specifies whether to enable / disable the hamburger mode in Menu.
+     *
+     * @default false
+     */
+    hamburgerMode: boolean;
+    /**
+     * Specifies the title text for hamburger mode in Menu.
+     *
+     * @default 'Menu'
+     */
+    title: string;
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer: boolean;
+    /**
+     * Specifies mapping fields from the dataSource.
+     *
+     * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
+     * children: "items" }
+     */
+    fields: FieldSettingsModel;
+    /**
+     * Constructor for creating the component.
+     *
+     * @private
+     * @param {MenuModel} options - Specifies the menu model
+     * @param {string} element - Specifies the element
+     */
+    constructor(options?: MenuModel, element?: string | HTMLUListElement);
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    protected getModuleName(): string;
+    /**
+     * For internal use only - prerender processing.
+     *
+     * @private
+     * @returns {void}
+     */
+    protected preRender(): void;
+    protected initialize(): void;
+    private updateMenuItems;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @private
+     * @param {MenuModel} newProp - Specifies the new properties.
+     * @param {MenuModel} oldProp - Specifies the old properties.
+     * @returns {void}
+     */
+    onPropertyChanged(newProp: MenuModel, oldProp: MenuModel): void;
+    private createMenuItems;
+    /**
+     * This method is used to open the Menu in hamburger mode.
+     *
+     * @function open
+     * @returns {void}
+     */
+    open(): void;
+    /**
+     * Closes the Menu if it is opened in hamburger mode.
+     *
+     * @function close
+     * @returns {void}
+     */
+    close(): void;
+}

package/blazorGlobalSrc/menu/menu.js

@@ -0,0 +1,288 @@
+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;
+};
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path='../common/menu-base-model.d.ts'/>
+import { attributes, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { Browser, Complex, getUniqueID, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { MenuBase, FieldSettings } from '../common/menu-base';
+var VMENU = 'e-vertical';
+var SCROLLABLE = 'e-scrollable';
+var HAMBURGER = 'e-hamburger';
+/**
+ * The Menu is a graphical user interface that serve as navigation headers for your application or site.
+ * ```html
+ * <ul id = 'menu'></ul>
+ * ```
+ * ```typescript
+ * <script>
+ * var menuObj = new Menu({ items: [{ text: 'Home' }, { text: 'Contact Us' },{ text: 'Login' }]});
+ * menuObj.appendTo("#menu");
+ * </script>
+ * ```
+ */
+var Menu = /** @class */ (function (_super) {
+    __extends(Menu, _super);
+    /**
+     * Constructor for creating the component.
+     *
+     * @private
+     * @param {MenuModel} options - Specifies the menu model
+     * @param {string} element - Specifies the element
+     */
+    function Menu(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.tempItems = [];
+        return _this;
+    }
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    Menu.prototype.getModuleName = function () {
+        return 'menu';
+    };
+    /**
+     * For internal use only - prerender processing.
+     *
+     * @private
+     * @returns {void}
+     */
+    Menu.prototype.preRender = function () {
+        this.isMenu = true;
+        this.element.id = this.element.id || getUniqueID('ej2-menu');
+        if (this.template) {
+            try {
+                if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
+                    this.template = document.querySelector(this.template).innerHTML.trim();
+                    this.clearChanges();
+                }
+            }
+            catch (e) {
+                /* action on catch */
+            }
+            this.updateMenuItems(this.items);
+        }
+        else {
+            this.updateMenuItems(this.items);
+        }
+        _super.prototype.preRender.call(this);
+    };
+    Menu.prototype.initialize = function () {
+        _super.prototype.initialize.call(this);
+        attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
+        if (this.orientation === 'Vertical') {
+            this.element.classList.add(VMENU);
+            if (this.hamburgerMode && !this.target) {
+                this.element.previousElementSibling.classList.add(VMENU);
+            }
+            this.element.setAttribute('aria-orientation', 'vertical');
+        }
+        else {
+            if (Browser.isDevice && !this.enableScrolling) {
+                this.element.parentElement.classList.add(SCROLLABLE);
+            }
+        }
+        if (this.hamburgerMode) {
+            this.element.parentElement.classList.add(HAMBURGER);
+            if (this.orientation === 'Horizontal') {
+                this.element.classList.add('e-hide-menu');
+            }
+        }
+    };
+    Menu.prototype.updateMenuItems = function (items) {
+        this.tempItems = items;
+        this.items = [];
+        this.tempItems.map(this.createMenuItems, this);
+        this.setProperties({ items: this.items }, true);
+        this.tempItems = [];
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @private
+     * @param {MenuModel} newProp - Specifies the new properties.
+     * @param {MenuModel} oldProp - Specifies the old properties.
+     * @returns {void}
+     */
+    Menu.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var _this = this;
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'orientation':
+                    if (newProp.orientation === 'Vertical') {
+                        this.element.classList.add(VMENU);
+                        if (this.hamburgerMode) {
+                            if (!this.target) {
+                                this.element.previousElementSibling.classList.add(VMENU);
+                            }
+                            this.element.classList.remove('e-hide-menu');
+                        }
+                        this.element.setAttribute('aria-orientation', 'vertical');
+                    }
+                    else {
+                        this.element.classList.remove(VMENU);
+                        if (this.hamburgerMode) {
+                            if (!this.target) {
+                                this.element.previousElementSibling.classList.remove(VMENU);
+                            }
+                            this.element.classList.add('e-hide-menu');
+                        }
+                        this.element.removeAttribute('aria-orientation');
+                    }
+                    break;
+                case 'items':
+                    if (!Object.keys(oldProp.items).length) {
+                        this.updateMenuItems(newProp.items);
+                    }
+                    break;
+                case 'hamburgerMode':
+                    if (!this.element.previousElementSibling) {
+                        _super.prototype.createHeaderContainer.call(this);
+                    }
+                    if (newProp.hamburgerMode) {
+                        this.element.parentElement.classList.add(HAMBURGER);
+                        [].slice.call(this.element.getElementsByClassName('e-blankicon')).forEach(function (li) {
+                            li.style[_this.enableRtl ? 'paddingRight' : 'paddingLeft'] = '';
+                        });
+                    }
+                    else {
+                        this.element.parentElement.classList.remove(HAMBURGER);
+                        if (this.orientation === 'Vertical') {
+                            this.setBlankIconStyle(this.element);
+                        }
+                    }
+                    if (this.orientation === 'Vertical') {
+                        if (!this.target) {
+                            this.element.previousElementSibling.classList.add(VMENU);
+                        }
+                        this.element.classList.remove('e-hide-menu');
+                    }
+                    else {
+                        if (this.target) {
+                            this.element.previousElementSibling.classList.add(VMENU);
+                        }
+                        else {
+                            this.element.previousElementSibling.classList.remove(VMENU);
+                        }
+                        this.element.classList[newProp.hamburgerMode ? 'add' : 'remove']('e-hide-menu');
+                    }
+                    break;
+                case 'title':
+                    if (this.hamburgerMode && this.element.previousElementSibling) {
+                        newProp.title = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(newProp.title) : newProp.title;
+                        this.element.previousElementSibling.querySelector('.e-menu-title').innerHTML = newProp.title;
+                    }
+                    break;
+                case 'target':
+                    if (this.hamburgerMode) {
+                        this.unWireEvents(oldProp.target);
+                        this.wireEvents();
+                        if (this.orientation === 'Horizontal') {
+                            if (!newProp.target) {
+                                if (!this.element.previousElementSibling) {
+                                    _super.prototype.createHeaderContainer.call(this);
+                                }
+                                this.element.previousElementSibling.classList.remove(VMENU);
+                            }
+                            else {
+                                this.element.previousElementSibling.classList.add(VMENU);
+                            }
+                            this.element.classList.add('e-hide-menu');
+                        }
+                    }
+                    break;
+                case 'template':
+                    this.template = newProp.template;
+                    this.refresh();
+                    break;
+            }
+        }
+        _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
+    };
+    Menu.prototype.createMenuItems = function (item) {
+        var idx;
+        var i;
+        var items = this.items;
+        var pIdField = this.getField('parentId');
+        if (item["" + pIdField]) {
+            idx = this.getIndex(item["" + pIdField].toString(), true);
+            for (i = 0; i < idx.length; i++) {
+                if (!items[idx[i]].items) {
+                    items[idx[i]].items = [];
+                }
+                items = items[idx[i]].items;
+            }
+            items.push(item);
+        }
+        else {
+            this.items.push(item);
+        }
+    };
+    /**
+     * This method is used to open the Menu in hamburger mode.
+     *
+     * @function open
+     * @returns {void}
+     */
+    Menu.prototype.open = function () {
+        _super.prototype.openHamburgerMenu.call(this);
+    };
+    /**
+     * Closes the Menu if it is opened in hamburger mode.
+     *
+     * @function close
+     * @returns {void}
+     */
+    Menu.prototype.close = function () {
+        _super.prototype.closeHamburgerMenu.call(this);
+    };
+    __decorate([
+        Property('Horizontal')
+    ], Menu.prototype, "orientation", void 0);
+    __decorate([
+        Property('')
+    ], Menu.prototype, "target", void 0);
+    __decorate([
+        Property(null)
+    ], Menu.prototype, "template", void 0);
+    __decorate([
+        Property(false)
+    ], Menu.prototype, "enableScrolling", void 0);
+    __decorate([
+        Property(false)
+    ], Menu.prototype, "hamburgerMode", void 0);
+    __decorate([
+        Property('Menu')
+    ], Menu.prototype, "title", void 0);
+    __decorate([
+        Property(true)
+    ], Menu.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
+    ], Menu.prototype, "fields", void 0);
+    Menu = __decorate([
+        NotifyPropertyChanges
+    ], Menu);
+    return Menu;
+}(MenuBase));
+export { Menu };