@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/src/breadcrumb/breadcrumb.js

@@ -0,0 +1,497 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass } from '@syncfusion/ej2-base';
+import { ListBase } from '@syncfusion/ej2-lists';
+var ICONRIGHT = 'e-icon-right';
+var ITEMTEXTCLASS = 'e-breadcrumb-text';
+var ICONCLASS = 'e-breadcrumb-icon';
+var BreadcrumbItem = /** @class */ (function (_super) {
+    __extends(BreadcrumbItem, _super);
+    function BreadcrumbItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], BreadcrumbItem.prototype, "text", void 0);
+    __decorate([
+        Property('')
+    ], BreadcrumbItem.prototype, "url", void 0);
+    __decorate([
+        Property(null)
+    ], BreadcrumbItem.prototype, "iconCss", void 0);
+    return BreadcrumbItem;
+}(ChildProperty));
+export { BreadcrumbItem };
+/**
+ * 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>
+ * ```
+ */
+var Breadcrumb = /** @class */ (function (_super) {
+    __extends(Breadcrumb, _super);
+    /**
+     * Constructor for creating the widget.
+     *
+     * @private
+     * @param {BreadcrumbModel} options - Specifies the Breadcrumb model.
+     * @param {string | HTMLElement} element - Specifies the element.
+     */
+    function Breadcrumb(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * @private
+     * @returns {void}
+     */
+    Breadcrumb.prototype.preRender = function () {
+        // pre render code
+    };
+    /**
+     * Initialize the control rendering.
+     *
+     * @private
+     * @returns {void}
+     */
+    Breadcrumb.prototype.render = function () {
+        this.initialize();
+        this.renderItems(this.items);
+        this.wireEvents();
+    };
+    Breadcrumb.prototype.initialize = function () {
+        this._maxItems = this.maxItems;
+        this.element.setAttribute('aria-label', 'breadcrumb');
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
+        }
+        this.setWidth();
+        this.initItems();
+        this.initPvtProps();
+    };
+    Breadcrumb.prototype.initPvtProps = function () {
+        if (this.overflowMode === 'Default' && this._maxItems > 0) {
+            this.startIndex = this.items.length - (this._maxItems - 1);
+            this.endIndex = this.items.length - 1;
+        }
+    };
+    Breadcrumb.prototype.setWidth = function () {
+        if (this.width) {
+            this.element.style.width = this.width;
+        }
+    };
+    Breadcrumb.prototype.initItems = function () {
+        if (!this.items.length) {
+            var baseUri = void 0;
+            var uri = void 0;
+            var items = [];
+            if (this.url) {
+                var url = new URL(this.url);
+                baseUri = url.origin + '/';
+                uri = url.href.split(baseUri)[1].split('/');
+            }
+            else {
+                baseUri = window.location.origin + '/';
+                uri = window.location.href.split(baseUri)[1].split('/');
+            }
+            items.push({ iconCss: 'e-icons e-home', url: baseUri });
+            for (var i = 0; i < uri.length; i++) {
+                items.push({ text: uri[i], url: baseUri + uri[i] });
+                baseUri += uri[i] + '/';
+            }
+            this.setProperties({ items: items }, true);
+        }
+    };
+    Breadcrumb.prototype.renderItems = function (items) {
+        var _this = this;
+        var item;
+        var isSingleLevel;
+        var isIconRight = this.element.classList.contains(ICONRIGHT);
+        var itemsLength = items.length;
+        if (itemsLength) {
+            var isActiveItem = void 0;
+            var isLastItem = void 0;
+            var j_1 = 0;
+            var len = (itemsLength * 2) - 1;
+            var ol = this.createElement('ol');
+            var showIcon = this.hasField(items, 'iconCss');
+            var isDisabled_1 = this.element.classList.contains('e-disabled');
+            var isCollasped = (this.overflowMode === 'Collapsed' && this._maxItems > 0 && itemsLength > this.maxItems && !this.isExpanded);
+            var isDefaultOverflowMode_1 = (this.overflowMode === 'Default' && this._maxItems > 0);
+            var listBaseOptions = {
+                moduleName: this.getModuleName(),
+                showIcon: showIcon,
+                itemNavigable: true,
+                itemCreated: function (args) {
+                    var isLastItem = args.curData.isLastItem;
+                    if (args.curData.isEmptyUrl) {
+                        args.item.children[0].removeAttribute('href');
+                        if (!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) {
+                            args.item.children[0].setAttribute('tabindex', '0');
+                            EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
+                        }
+                    }
+                    if (isLastItem && args.item.children.length && !_this.itemTemplate) {
+                        delete args.curData.isLastItem;
+                        args.item.innerHTML = _this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
+                    }
+                    if (args.curData.iconCss && !args.curData.text && !_this.itemTemplate) {
+                        args.item.classList.add('e-icon-item');
+                    }
+                    if (isDefaultOverflowMode_1) {
+                        args.item.setAttribute('item-index', j_1.toString());
+                    }
+                    if (args.item.querySelector('.' + ITEMTEXTCLASS)) {
+                        EventHandler.add(args.item.querySelector('.' + ITEMTEXTCLASS), 'focus', function () {
+                            args.item.classList.add('e-focus');
+                        }, _this);
+                        EventHandler.add(args.item.querySelector('.' + ITEMTEXTCLASS), 'focusout', function () {
+                            args.item.classList.remove('e-focus');
+                        }, _this);
+                    }
+                    var eventArgs = {
+                        item: extend({}, args.curData.properties ?
+                            args.curData.properties : args.curData), element: args.item
+                    };
+                    _this.trigger('beforeItemRender', eventArgs);
+                    var containsRightIcon = (isIconRight || eventArgs.element.classList.contains(ICONRIGHT));
+                    if (containsRightIcon && args.curData.iconCss && !_this.itemTemplate) {
+                        args.item.querySelector('.e-anchor-wrap').append(args.item.querySelector('.' + ICONCLASS));
+                    }
+                    if (isDisabled_1 || eventArgs.element.classList.contains('e-disabled')) {
+                        args.item.setAttribute('aria-disabled', 'true');
+                    }
+                    if (!_this.itemTemplate) {
+                        _this.beforeItemRenderChanges(args.curData, eventArgs.item, args.item, containsRightIcon);
+                    }
+                }
+            };
+            for (var i = 0; i < len; (i % 2 && j_1++), i++) {
+                isActiveItem = (this.activeItem && this.activeItem === items[j_1].url);
+                if (isCollasped && i > 1 && i < len - 2) {
+                    continue;
+                }
+                else if (isDefaultOverflowMode_1 && ((j_1 < this.startIndex || j_1 > this.endIndex)
+                    && (i % 2 ? j_1 !== this.startIndex - 1 : true)) && j_1 !== 0) {
+                    continue;
+                }
+                if (i % 2) {
+                    // separator item
+                    listBaseOptions.template = this.separatorTemplate ? this.separatorTemplate : '/';
+                    listBaseOptions.itemClass = 'e-breadcrumb-separator';
+                    isSingleLevel = false;
+                    item = [{ previousItem: item.pop(), nextItem: items[j_1] }];
+                }
+                else {
+                    // list item
+                    listBaseOptions.itemClass = '';
+                    if (this.itemTemplate) {
+                        listBaseOptions.template = this.itemTemplate;
+                        isSingleLevel = false;
+                    }
+                    else {
+                        isSingleLevel = true;
+                    }
+                    item = [extend({}, items[j_1].properties ? items[j_1].properties
+                            : items[j_1])];
+                    if (!item[0].url && !this.itemTemplate) {
+                        item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];
+                    }
+                    isLastItem = isDefaultOverflowMode_1 && (j_1 === this.endIndex);
+                    if ((((i === len - 1 || isLastItem) && !this.itemTemplate) || isActiveItem) && !this.enableActiveItemNavigation) {
+                        item[0].isLastItem = true;
+                    }
+                }
+                append(ListBase.createList(this.createElement, item, listBaseOptions, isSingleLevel, this)
+                    .childNodes, ol);
+                if (isCollasped && i === 1) {
+                    var li = this.createElement('li', { className: 'e-icons e-breadcrumb-collapsed', attrs: { 'tabindex': '0' } });
+                    EventHandler.add(li, 'keyup', this.expandHandler, this);
+                    ol.append(li);
+                }
+                if (isActiveItem || isLastItem) {
+                    break;
+                }
+            }
+            if (this.isReact) {
+                this.renderReactTemplates();
+            }
+            this.element.append(ol);
+            this.calculateMaxItems();
+        }
+    };
+    Breadcrumb.prototype.calculateMaxItems = function () {
+        if (!this._maxItems) {
+            if (this.overflowMode === 'Default' || this.overflowMode === 'Collapsed') {
+                var width = this.element.offsetWidth;
+                var liWidth = this.element.children[0].children[0].offsetWidth;
+                var liElems = [].slice.call(this.element.children[0].children).reverse();
+                for (var i = 0; i < liElems.length; i++) {
+                    if (liWidth > width) {
+                        this._maxItems = Math.ceil((i - 1) / 2) + 1;
+                        this.initPvtProps();
+                        return this.reRenderItems();
+                    }
+                    else {
+                        liWidth += liElems[i].offsetWidth;
+                    }
+                }
+            }
+        }
+    };
+    Breadcrumb.prototype.hasField = function (items, field) {
+        for (var i = 0, len = items.length; i < len; i++) {
+            if (items[i][field]) {
+                return true;
+            }
+        }
+        return false;
+    };
+    Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
+        var wrapElem = elem.querySelector('.e-anchor-wrap');
+        if (currItem.text !== prevItem.text) {
+            wrapElem.childNodes.forEach(function (child) {
+                if (child.nodeType === Node.TEXT_NODE) {
+                    child.textContent = currItem.text;
+                }
+            });
+        }
+        if (currItem.iconCss !== prevItem.iconCss) {
+            var iconElem = elem.querySelector('.' + ICONCLASS);
+            if (iconElem) {
+                if (currItem.iconCss) {
+                    removeClass([iconElem], prevItem.iconCss.split(' '));
+                    addClass([iconElem], currItem.iconCss.split(' '));
+                }
+                else {
+                    iconElem.remove();
+                }
+            }
+            else if (currItem.iconCss) {
+                var iconElem_1 = this.createElement('span', { className: ICONCLASS + ' ' + currItem.iconCss });
+                if (isRightIcon) {
+                    append([iconElem_1], wrapElem);
+                }
+                else {
+                    wrapElem.insertBefore(iconElem_1, wrapElem.childNodes[0]);
+                }
+            }
+        }
+        if (currItem.url !== prevItem.url && this.enableNavigation) {
+            var anchor = elem.querySelector('a.' + ITEMTEXTCLASS);
+            if (anchor) {
+                if (currItem.url) {
+                    anchor.setAttribute('href', currItem.url);
+                }
+                else {
+                    anchor.removeAttribute('href');
+                }
+            }
+        }
+    };
+    Breadcrumb.prototype.reRenderItems = function () {
+        this.element.innerHTML = '';
+        this.renderItems(this.items);
+    };
+    Breadcrumb.prototype.clickHandler = function (e) {
+        var li = closest(e.target, '.e-breadcrumb-item');
+        if (li && (closest(e.target, '.' + ITEMTEXTCLASS) || this.itemTemplate)) {
+            var idx = [].slice.call(li.parentElement.children).indexOf(li);
+            idx = Math.floor(idx / 2);
+            if (this.overflowMode === 'Default' && this._maxItems > 0 && this.endIndex !== 0) {
+                idx = parseInt(li.getAttribute('item-index'), 10);
+                if (this.startIndex > 1) {
+                    this.startIndex -= (this.endIndex - idx);
+                }
+                this.endIndex = idx;
+                this.reRenderItems();
+            }
+            this.trigger('itemClick', { element: li, item: this.items[idx], event: e });
+            if (this.items[idx].url) {
+                this.activeItem = this.items[idx].url;
+                this.dataBind();
+            }
+        }
+        if (!this.enableNavigation) {
+            e.preventDefault();
+        }
+        if (e.target.classList.contains('e-breadcrumb-collapsed')) {
+            this.isExpanded = true;
+            this.reRenderItems();
+        }
+    };
+    Breadcrumb.prototype.resize = function () {
+        this._maxItems = this.maxItems;
+        this.initPvtProps();
+        this.reRenderItems();
+    };
+    Breadcrumb.prototype.expandHandler = function (e) {
+        if (e.key === 'Enter') {
+            this.isExpanded = true;
+            this.reRenderItems();
+        }
+    };
+    Breadcrumb.prototype.keyDownHandler = function (e) {
+        if (e.key === 'Enter') {
+            this.clickHandler(e);
+        }
+    };
+    /**
+     * 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}
+     */
+    Breadcrumb.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'activeItem':
+                case 'items':
+                case 'enableActiveItemNavigation':
+                    this.reRenderItems();
+                    break;
+                case 'overflowMode':
+                case 'maxItems':
+                    this.initPvtProps();
+                    this.reRenderItems();
+                    break;
+                case 'url':
+                    this.initItems();
+                    this.reRenderItems();
+                    break;
+                case 'width':
+                    this.setWidth();
+                    this._maxItems = this.maxItems;
+                    this.initPvtProps();
+                    this.reRenderItems();
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([this.element], oldProp.cssClass.split(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.element], newProp.cssClass.split(' '));
+                    }
+                    if ((oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) && !(newProp.cssClass &&
+                        newProp.cssClass.indexOf(ICONRIGHT) > -1) || !(oldProp.cssClass && oldProp.cssClass.indexOf(ICONRIGHT) > -1) &&
+                        (newProp.cssClass && newProp.cssClass.indexOf(ICONRIGHT) > -1)) {
+                        this.reRenderItems();
+                    }
+                    break;
+            }
+        }
+    };
+    Breadcrumb.prototype.wireEvents = function () {
+        EventHandler.add(this.element, 'click', this.clickHandler, this);
+        window.addEventListener('resize', this.resize.bind(this));
+    };
+    Breadcrumb.prototype.unWireEvents = function () {
+        EventHandler.remove(this.element, 'click', this.clickHandler);
+        window.removeEventListener('resize', this.resize.bind(this));
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    Breadcrumb.prototype.getPersistData = function () {
+        return this.addOnPersist(['activeItem']);
+    };
+    /**
+     * Get module name.
+     *
+     * @private
+     * @returns {string} - Module Name
+     */
+    Breadcrumb.prototype.getModuleName = function () {
+        return 'breadcrumb';
+    };
+    /**
+     * Destroys the widget.
+     *
+     * @returns {void}
+     */
+    Breadcrumb.prototype.destroy = function () {
+        this.unWireEvents();
+        this.element.innerHTML = '';
+        if (this.cssClass) {
+            removeClass([this.element], this.cssClass.split(' '));
+        }
+    };
+    __decorate([
+        Property('')
+    ], Breadcrumb.prototype, "url", void 0);
+    __decorate([
+        Collection([], BreadcrumbItem)
+    ], Breadcrumb.prototype, "items", void 0);
+    __decorate([
+        Property('')
+    ], Breadcrumb.prototype, "activeItem", void 0);
+    __decorate([
+        Property(0)
+    ], Breadcrumb.prototype, "maxItems", void 0);
+    __decorate([
+        Property('Default')
+    ], Breadcrumb.prototype, "overflowMode", void 0);
+    __decorate([
+        Property('')
+    ], Breadcrumb.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], Breadcrumb.prototype, "width", void 0);
+    __decorate([
+        Property(null)
+    ], Breadcrumb.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property('/')
+    ], Breadcrumb.prototype, "separatorTemplate", void 0);
+    __decorate([
+        Property(true)
+    ], Breadcrumb.prototype, "enableNavigation", void 0);
+    __decorate([
+        Property(false)
+    ], Breadcrumb.prototype, "enableActiveItemNavigation", void 0);
+    __decorate([
+        Property('')
+    ], Breadcrumb.prototype, "locale", void 0);
+    __decorate([
+        Event()
+    ], Breadcrumb.prototype, "beforeItemRender", void 0);
+    __decorate([
+        Event()
+    ], Breadcrumb.prototype, "itemClick", void 0);
+    __decorate([
+        Event()
+    ], Breadcrumb.prototype, "created", void 0);
+    Breadcrumb = __decorate([
+        NotifyPropertyChanges
+    ], Breadcrumb);
+    return Breadcrumb;
+}(Component));
+export { Breadcrumb };

package/src/breadcrumb/index.d.ts

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

package/src/breadcrumb/index.js

@@ -0,0 +1,4 @@
+/**
+ * Breadcrumb modules
+ */
+export * from './breadcrumb';

package/src/index.d.ts

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

package/src/index.js

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

package/src/sidebar/sidebar.js

@@ -439,10 +439,10 @@ var Sidebar = /** @class */ (function (_super) {
     };
     Sidebar.prototype.wireEvents = function () {
         this.setEnableGestures();
-        window.addEventListener('resize', this.resize.bind(this));
+        EventHandler.add(window, 'resize', this.resize, this);
     };
     Sidebar.prototype.unWireEvents = function () {
-        window.removeEventListener('resize', this.resize.bind(this));
+        EventHandler.remove(window, 'resize', this.resize);
         EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);
         if (this.mainContentEle) {
             this.mainContentEle.destroy();

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';import { ToolbarModel } from '../toolbar';
+import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';import { ToolbarModel } from '../toolbar';
 import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/tab/tab.d.ts

@@ -250,6 +250,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private droppedIndex;
     private draggingItems;
     private draggableItems;
+    private tbId;
     private resizeContext;
     /**
      * Contains the keyboard configuration of the Tab.
@@ -520,7 +521,6 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private updatePopAnimationConfig;
     private changeOrientation;
     private focusItem;
-    private serverChangeOrientation;
     private changeToolbarOrientation;
     private setOrientation;
     private setCssClass;