Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-navigations

Package Overview
Dependencies
Maintainers
2
Versions
269
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-navigations - npm Package Compare versions

Comparing version 1.0.8 to 1.0.10

80

dist/es6/common/h-scroll.js

@@ -21,15 +21,13 @@ var __extends = (this && this.__extends) || (function () {

import { NotifyPropertyChanges, Property } from '@syncfusion/ej2-base/notify-property-change';
import { createElement, detach } from '@syncfusion/ej2-base/dom';
import { createElement, detach, classList } from '@syncfusion/ej2-base/dom';
import { getUniqueID } from '@syncfusion/ej2-base/util';
import { Browser } from '@syncfusion/ej2-base/browser';
var CLASSNAMES = {
ROOT: 'e-hscroll',
RTL: 'e-rtl',
HSCROLLBAR: 'e-hscroll-bar',
HSCROLLCON: 'e-hscroll-content',
NAVARROW: 'e-nav-arrow',
NAVRIGHTARROW: 'e-nav-right-arrow',
NAVLEFTARROW: 'e-nav-left-arrow',
HSCROLLNAV: 'e-hor-nav'
};
var CLASS_ROOT = 'e-hscroll';
var CLASS_RTL = 'e-rtl';
var CLASS_HSCROLLBAR = 'e-hscroll-bar';
var CLASS_HSCROLLCON = 'e-hscroll-content';
var CLASS_NAVARROW = 'e-nav-arrow';
var CLASS_NAVRIGHTARROW = 'e-nav-right-arrow';
var CLASS_NAVLEFTARROW = 'e-nav-left-arrow';
var CLASS_HSCROLLNAV = 'e-hor-nav';
var HScroll = (function (_super) {

@@ -41,2 +39,4 @@ __extends(HScroll, _super);

HScroll.prototype.preRender = function () {
this.browser = Browser.info.name;
this.browserCheck = this.browser === 'mozilla';
this.initialize();

@@ -49,11 +49,11 @@ if (this.element.id === '') {

if (this.enableRtl) {
this.element.classList.add(CLASSNAMES.RTL);
this.element.classList.add(CLASS_RTL);
}
};
HScroll.prototype.render = function () {
this.createNavigationIcon(this.element, CLASSNAMES.NAVRIGHTARROW + ' ' + CLASSNAMES.NAVARROW);
this.createNavigationIcon(this.element, CLASS_NAVRIGHTARROW + ' ' + CLASS_NAVARROW);
};
HScroll.prototype.initialize = function () {
var scrollEle = createElement('div', { className: CLASSNAMES.HSCROLLCON });
var scrollDiv = createElement('div', { className: CLASSNAMES.HSCROLLBAR });
var scrollEle = createElement('div', { className: CLASS_HSCROLLCON });
var scrollDiv = createElement('div', { className: CLASS_HSCROLLBAR });
var ele = this.element;

@@ -81,3 +81,3 @@ var innerEle = [].slice.call(ele.children);

ele.style.display = '';
ele.classList.remove(CLASSNAMES.ROOT);
ele.classList.remove(CLASS_ROOT);
var nav = ele.querySelector('#' + ele.id + '_nav.e-' + ele.id + '_nav');

@@ -101,3 +101,3 @@ EventHandler.remove(nav, 'click', this.clickEventHandler);

var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASSNAMES.HSCROLLNAV);
var className = 'e-' + element.id.concat('_nav ' + CLASS_HSCROLLNAV);
var nav = createElement('div', { id: id, className: className });

@@ -109,3 +109,3 @@ var navItem = createElement('div', { className: classList + ' e-icons' });

EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);
var tchObj = new Touch(nav, { taphold: this.tabHoldHandler.bind(this) });
new Touch(nav, { taphold: this.tabHoldHandler.bind(this) });
if (Browser.info.name === 'msie') {

@@ -128,5 +128,4 @@ nav.classList.add('e-ie-align');

var trgt = e.originalEvent.target;
trgt = trgt.classList.contains(CLASSNAMES.HSCROLLNAV) ? trgt.firstElementChild : trgt;
trgt = trgt.classList.contains(CLASS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
var timeoutFun = function () {
var element = _this.scrollEle;
var scrollDis = 10;

@@ -142,10 +141,10 @@ _this.contentScrolling(scrollDis, trgt);

var classList = trgt.classList;
if (classList.contains(CLASSNAMES.HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLASSNAMES.NAVARROW).classList;
if (classList.contains(CLASS_HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLASS_NAVARROW).classList;
}
if (this.element.classList.contains(CLASSNAMES.RTL) && Browser.info.name === 'mozilla') {
if (this.element.classList.contains(CLASS_RTL) && this.browserCheck) {
scrollDis = -scrollDis;
}
if (!this.element.classList.contains(CLASSNAMES.RTL) || Browser.info.name === 'mozilla') {
if (classList.contains(CLASSNAMES.NAVRIGHTARROW)) {
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
if (classList.contains(CLASS_NAVRIGHTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;

@@ -158,3 +157,3 @@ }

else {
if (classList.contains(CLASSNAMES.NAVLEFTARROW)) {
if (classList.contains(CLASS_NAVLEFTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;

@@ -174,6 +173,9 @@ }

distance = e.distanceX;
if (this.browser === 'edge') {
distance = -distance;
}
if (e.scrollDirection === 'Left') {
ele.scrollLeft = ele.scrollLeft + distance;
}
else {
else if (e.scrollDirection === 'Right') {
ele.scrollLeft = ele.scrollLeft - distance;

@@ -185,6 +187,4 @@ }

var width = target.offsetWidth;
var navElement = this.element.firstChild;
var scrollVal = (this.element.clientWidth + this.element.scrollLeft - navElement.offsetWidth);
if (navElement.firstChild) {
var navClassList = navElement.firstChild.classList;
var navElement = this.element.firstChild.firstChild;
if (navElement) {
var scrollLeft = target.scrollLeft;

@@ -195,19 +195,15 @@ if (scrollLeft <= 0) {

if (scrollLeft === 0) {
if (!this.element.classList.contains(CLASSNAMES.RTL) || Browser.info.name === 'mozilla') {
navClassList.add(CLASSNAMES.NAVRIGHTARROW);
navClassList.remove(CLASSNAMES.NAVLEFTARROW);
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
}
else {
navClassList.add(CLASSNAMES.NAVLEFTARROW);
navClassList.remove(CLASSNAMES.NAVRIGHTARROW);
classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
}
}
else if (Math.ceil(width + scrollLeft) >= target.scrollWidth) {
if (!this.element.classList.contains(CLASSNAMES.RTL) || Browser.info.name === 'mozilla') {
navClassList.add(CLASSNAMES.NAVLEFTARROW);
navClassList.remove(CLASSNAMES.NAVRIGHTARROW);
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
}
else {
navClassList.add(CLASSNAMES.NAVRIGHTARROW);
navClassList.remove(CLASSNAMES.NAVLEFTARROW);
classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
}

@@ -231,3 +227,3 @@ }

case 'enableRtl':
newProp.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);
newProp.enableRtl ? this.element.classList.add(CLASS_RTL) : this.element.classList.remove(CLASS_RTL);
break;

@@ -234,0 +230,0 @@ }

705

dist/es6/toolbar/toolbar.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {

import { addClass, removeClass, isVisible, setStyleAttribute, closest, attributes, detach } from '@syncfusion/ej2-base/dom';
import { createElement as buildTag } from '@syncfusion/ej2-base/dom';
import { createElement as buildTag, selectAll, classList } from '@syncfusion/ej2-base/dom';
import { isNullOrUndefined as isNOU, getUniqueID, formatUnit } from '@syncfusion/ej2-base/util';

@@ -28,23 +28,26 @@ import { NotifyPropertyChanges, CreateBuilder, ChildProperty } from '@syncfusion/ej2-base';

import { HScroll } from '../common/h-scroll';
var CLASSNAMES = {
ITEMS: 'e-toolbar-items',
ITEM: 'e-toolbar-item',
RTL: 'e-rtl',
SEPARATOR: 'e-separator',
POPUPICON: 'e-popup-up-icon',
POPUPDOWN: 'e-popup-down-icon',
POPUP: 'e-toolbar-popup',
POPUPCLASS: 'e-toolbar-pop',
TEMPLATE: 'e-template',
DISABLE: 'e-overlay',
POPUPTEXT: 'e-toolbar-text',
TBARTEXT: 'e-popup-text',
TBAROVERFLOW: 'e-overflow-show',
POPOVERFLOW: 'e-overflow-hide',
TBARBTNTEXT: 'e-tbar-btn-text',
TBARBTN: 'e-tbar-btn',
TBARNAV: 'e-hor-nav',
TBARNAVACT: 'e-nav-active',
POPUPNAV: 'e-hor-nav'
};
var CLASS_ITEMS = 'e-toolbar-items';
var CLASS_ITEM = 'e-toolbar-item';
var CLASS_RTL = 'e-rtl';
var CLASS_SEPARATOR = 'e-separator';
var CLASS_POPUPICON = 'e-popup-up-icon';
var CLASS_POPUPDOWN = 'e-popup-down-icon';
var CLASS_POPUP = 'e-toolbar-popup';
var CLASS_POPUPCLASS = 'e-toolbar-pop';
var CLASS_TEMPLATE = 'e-template';
var CLASS_DISABLE = 'e-overlay';
var CLASS_POPUPTEXT = 'e-toolbar-text';
var CLASS_TBARTEXT = 'e-popup-text';
var CLASS_TBAROVERFLOW = 'e-overflow-show';
var CLASS_POPOVERFLOW = 'e-overflow-hide';
var CLASS_TBARBTNTEXT = 'e-tbar-btn-text';
var CLASS_TBARBTN = 'e-tbar-btn';
var CLASS_TBARNAV = 'e-hor-nav';
var CLASS_TBARNAVACT = 'e-nav-active';
var CLASS_POPUPNAV = 'e-hor-nav';
var CLASS_TBARRIGHT = 'e-toolbar-right';
var CLASS_TBARLEFT = 'e-toolbar-left';
var CLASS_TBARCENTER = 'e-toolbar-center';
var CLASS_TBARPOS = 'e-tbar-pos';
var CLASS_TBARSCROLL = 'e-hscroll-content';
var Item = (function (_super) {

@@ -94,2 +97,5 @@ __extends(Item, _super);

], Item.prototype, "tooltipText", void 0);
__decorate([
Property('left')
], Item.prototype, "align", void 0);
var Toolbar = (function (_super) {

@@ -136,6 +142,3 @@ __extends(Toolbar, _super);

EventHandler.remove(this.element, 'click', this.clickEventHandler);
if (this.scrollModule) {
this.scrollModule.destroy();
this.scrollModule = null;
}
this.destroyHScroll();
this.keyModule.destroy();

@@ -147,2 +150,11 @@ if (this.popupObj) {

};
Toolbar.prototype.destroyHScroll = function () {
if (this.scrollModule) {
if (this.tbarAlign) {
this.scrollModule.element.classList.add(CLASS_TBARPOS);
}
this.scrollModule.destroy();
this.scrollModule = null;
}
};
Toolbar.prototype.keyActionHandler = function (e) {

@@ -154,10 +166,10 @@ e.preventDefault();

var popupObj = this.popupObj;
if (trgt.classList.contains(CLASSNAMES.TBARNAV) && popupObj && isVisible(popupObj.element)) {
clst = popupObj.element.querySelector('.' + CLASSNAMES.ITEM);
if (trgt.classList.contains(CLASS_TBARNAV) && popupObj && isVisible(popupObj.element)) {
clst = popupObj.element.querySelector('.' + CLASS_ITEM);
}
else if (rootEle === trgt || trgt.classList.contains(CLASSNAMES.TBARNAV)) {
clst = rootEle.querySelector('.' + CLASSNAMES.ITEM);
else if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
clst = rootEle.querySelector('.' + CLASS_ITEM);
}
else {
clst = closest(trgt, '.' + CLASSNAMES.ITEM);
clst = closest(trgt, '.' + CLASS_ITEM);
}

@@ -167,18 +179,25 @@ if (clst) {

case 'moveRight':
if (rootEle === trgt || trgt.classList.contains(CLASSNAMES.TBARNAV)) {
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
clst.firstChild.focus();
}
else {
this.nextEleFocus(clst);
this.eleFocus(clst, 'next');
}
break;
case 'moveLeft':
if (popupObj && trgt.classList.contains(CLASSNAMES.TBARNAV)) {
clst = clst.parentElement.lastElementChild;
if (popupObj && trgt.classList.contains(CLASS_TBARNAV)) {
if (this.tbarAlign) {
clst = closest(clst, '.' + CLASS_ITEMS);
var innerItems = selectAll('.' + CLASS_ITEM, clst);
clst = innerItems[innerItems.length - 1];
}
else {
clst = clst.parentElement.lastElementChild;
}
}
if (trgt.classList.contains(CLASSNAMES.TBARNAV) && !clst.classList.contains(CLASSNAMES.SEPARATOR)) {
if (trgt.classList.contains(CLASS_TBARNAV) && !clst.classList.contains(CLASS_SEPARATOR)) {
clst.firstChild.focus();
}
else {
this.prevEleFocus(clst);
this.eleFocus(clst, 'previous');
}

@@ -189,15 +208,12 @@ break;

if (popupObj.element.firstElementChild === clst) {
rootEle.querySelector('.' + CLASSNAMES.TBARNAV).focus();
rootEle.querySelector('.' + CLASS_TBARNAV).focus();
}
else {
this.prevEleFocus(clst);
this.eleFocus(clst, 'previous');
}
}
else {
return;
}
break;
case 'moveDown':
if (popupObj && closest(trgt, '.e-popup')) {
this.nextEleFocus(clst);
this.eleFocus(clst, 'next');
}

@@ -207,9 +223,6 @@ else if (popupObj && isVisible(popupObj.element)) {

}
else {
return;
}
break;
case 'tab':
var ele = clst.firstChild;
if (rootEle === trgt || trgt.classList.contains(CLASSNAMES.TBARNAV)) {
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
if (this.activeEle) {

@@ -225,3 +238,3 @@ this.activeEle.focus();

case 'popupClose':
if (popupObj && isVisible(popupObj.element)) {
if (popupObj) {
popupObj.hide({ name: 'SlideUp', duration: 100 });

@@ -231,3 +244,3 @@ }

case 'popupOpen':
if (!trgt.classList.contains(CLASSNAMES.TBARNAV)) {
if (!trgt.classList.contains(CLASS_TBARNAV)) {
return;

@@ -246,51 +259,37 @@ }

};
Toolbar.prototype.prevEleFocus = function (closest) {
var prevSib = closest.previousElementSibling;
if (prevSib) {
if (prevSib.classList.contains(CLASSNAMES.SEPARATOR)) {
if (prevSib.previousSibling) {
prevSib = prevSib.previousSibling;
if (prevSib.classList.contains(CLASSNAMES.SEPARATOR)) {
this.prevEleFocus(prevSib);
Toolbar.prototype.eleFocus = function (closest, pos) {
var sib = Object(closest)[pos + 'ElementSibling'];
if (sib) {
if (sib.classList.contains(CLASS_SEPARATOR)) {
if (Object(sib)[pos + 'Sibling']) {
sib = Object(sib)[pos + 'Sibling'];
if (sib.classList.contains(CLASS_SEPARATOR)) {
this.eleFocus(sib, pos);
}
}
else {
return;
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
}
}
if (!isNOU(prevSib.firstChild)) {
prevSib.firstChild.focus();
if (!isNOU(sib.firstChild)) {
sib.firstChild.focus();
}
}
else {
return;
}
};
Toolbar.prototype.nextEleFocus = function (closest) {
var nextSib = closest.nextElementSibling;
if (nextSib) {
if (nextSib.classList.contains(CLASSNAMES.SEPARATOR)) {
if (nextSib.nextSibling) {
nextSib = nextSib.nextSibling;
if (nextSib.classList.contains(CLASSNAMES.SEPARATOR)) {
this.nextEleFocus(nextSib);
}
else if (this.tbarAlign) {
var elem = Object(closest.parentElement)[pos + 'ElementSibling'];
if (!isNOU(elem) && elem.children.length > 0) {
if (pos === 'next') {
elem.querySelector('.' + CLASS_ITEM).firstChild.focus();
}
else if (this.popupObj) {
this.element.querySelector('.' + CLASSNAMES.TBARNAV).focus();
}
else {
return;
elem.lastElementChild.firstChild.focus();
}
}
if (!isNOU(nextSib.firstChild)) {
nextSib.firstChild.focus();
else if (this.popupObj) {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
}
}
else if (this.popupObj) {
this.element.querySelector('.' + CLASSNAMES.TBARNAV).focus();
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
}
else {
return;
}
};

@@ -302,20 +301,20 @@ Toolbar.prototype.clickEventHandler = function (e) {

var popObj = this.popupObj;
var popupNav = closest(trgt, ('.' + CLASSNAMES.TBARNAV));
var popupNav = closest(trgt, ('.' + CLASS_TBARNAV));
if (!popupNav) {
popupNav = trgt;
}
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLASSNAMES.TBARNAV))) {
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLASS_TBARNAV))) {
clsList = trgt.querySelector('.e-icons').classList;
}
if (clsList.contains(CLASSNAMES.POPUPICON) || clsList.contains(CLASSNAMES.POPUPDOWN)) {
if (clsList.contains(CLASS_POPUPICON) || clsList.contains(CLASS_POPUPDOWN)) {
if (isVisible(popObj.element)) {
popupNav.classList.remove(CLASSNAMES.TBARNAVACT);
popupNav.classList.remove(CLASS_TBARNAVACT);
popObj.hide({ name: 'SlideUp', duration: 100 });
}
else {
if (ele.classList.contains(CLASSNAMES.RTL)) {
if (ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLASSNAMES.RTL)) {
if (popObj.offsetX === 0 && !ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = false;

@@ -326,7 +325,13 @@ popObj.position = { X: 'right', Y: 'top' };

popObj.element.style.top = this.element.offsetHeight + 'px';
popupNav.classList.add(CLASSNAMES.TBARNAVACT);
popupNav.classList.add(CLASS_TBARNAVACT);
popObj.show({ name: 'SlideDown', duration: 100 });
}
}
this.trigger('clicked', e);
var itemObj;
var clst = closest(e.target, '.' + CLASS_ITEM);
if (clst) {
itemObj = this.items[this.sliceFn.call(clst.parentElement.children).indexOf(clst)];
}
var eventArgs = { eventName: 'clicked', originalEvent: e, item: itemObj };
this.trigger('clicked', eventArgs);
};

@@ -350,11 +355,27 @@ ;

this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;
this.tbarAlgEle = { left: [], center: [], right: [] };
this.sliceFn = [].slice;
this.renderItems();
this.renderOverflowMode();
if (this.tbarAlign) {
this.itemPositioning();
}
};
Toolbar.prototype.initHScroll = function (element, innerItems) {
if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {
if (this.tbarAlign) {
this.element.querySelector('.' + CLASS_ITEMS + ' .' + CLASS_TBARCENTER).removeAttribute('style');
}
this.scrollModule = new HScroll({ scrollStep: 50, enableRtl: this.enableRtl }, innerItems[0]);
this.element.style.overflow = 'hidden';
this.scrollModule.element.classList.remove(CLASS_TBARPOS);
setStyleAttribute(this.element, { overflow: 'hidden' });
}
};
Toolbar.prototype.itemWidthCal = function (innerItem) {
var width = 0;
this.sliceFn.call(innerItem.children).forEach(function (el) {
width += el.offsetWidth;
});
return width;
};
Toolbar.prototype.checkOverflow = function (element, innerItem) {

@@ -365,4 +386,10 @@ if (isNOU(element) || isNOU(innerItem)) {

var eleWidth = element.offsetWidth;
var itemWidth = innerItem.offsetWidth;
var popNav = element.querySelector('.' + CLASSNAMES.TBARNAV);
var itemWidth;
if (this.tbarAlign) {
itemWidth = this.itemWidthCal(innerItem);
}
else {
itemWidth = innerItem.offsetWidth;
}
var popNav = element.querySelector('.' + CLASS_TBARNAV);
if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : 0)) {

@@ -377,21 +404,23 @@ return true;

var ele = this.element;
var innerItems = ele.querySelector('.' + CLASS_ITEMS);
if (ele && ele.children.length > 0) {
this.offsetWid = ele.offsetWidth;
switch (this.overflowMode.toString()) {
switch (this.overflowMode) {
case 'Scrollable':
if (this.scrollModule) {
this.scrollModule.destroy();
this.scrollModule = null;
}
this.initHScroll(ele, ele.getElementsByClassName(CLASSNAMES.ITEMS));
this.destroyHScroll();
this.initHScroll(ele, ele.getElementsByClassName(CLASS_ITEMS));
break;
case 'Popup':
this.element.classList.add('e-toolpop');
if (this.checkOverflow(ele, ele.querySelector('.' + CLASSNAMES.ITEMS))) {
this.createOverflowIcon(ele, [].slice.call(ele.querySelectorAll('.' + CLASSNAMES.ITEMS + ' .' + CLASSNAMES.ITEM)));
this.element.querySelector('.' + CLASSNAMES.TBARNAV).setAttribute('tabIndex', '0');
if (this.tbarAlign) {
this.removePositioning();
}
else if (isNOU(this.popupObj)) {
this.element.classList.remove('e-toolpop');
if (this.checkOverflow(ele, innerItems)) {
this.createOverflowIcon(ele, this.sliceFn.call(selectAll('.' + CLASS_ITEMS + ' .' + CLASS_ITEM, ele)));
this.element.querySelector('.' + CLASS_TBARNAV).setAttribute('tabIndex', '0');
}
if (this.tbarAlign) {
innerItems.classList.add(CLASS_TBARPOS);
this.itemPositioning();
}
break;

@@ -409,8 +438,12 @@ }

var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);
if ((inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn * 2) > eleWidth) {
if (inEle[i].classList.contains(CLASSNAMES.SEPARATOR)) {
mrgn += parseFloat((window.getComputedStyle(inEle[i])).marginLeft);
if (inEle[i] === this.tbarEle[0]) {
this.tbarEleMrgn = mrgn;
}
if ((inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth) {
if (inEle[i].classList.contains(CLASS_SEPARATOR)) {
if (sepCheck > 0 && itemCount === itemPopCount) {
var sepEle = inEle[i + itemCount + (sepCheck - 1)];
if (sepEle.classList.contains(CLASSNAMES.SEPARATOR)) {
sepEle.style.display = 'none';
if (sepEle.classList.contains(CLASS_SEPARATOR)) {
setStyleAttribute(sepEle, { display: 'none' });
}

@@ -425,36 +458,26 @@ }

}
if (inEle[i].classList.contains(CLASSNAMES.TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn * 2));
if (inEle[i].classList.contains(CLASS_TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
else if (!inEle[i].classList.contains(CLASSNAMES.SEPARATOR)) {
inEle[i].classList.add(CLASSNAMES.POPUP);
inEle[i].style.display = 'none';
else if (!inEle[i].classList.contains(CLASS_SEPARATOR)) {
inEle[i].classList.add(CLASS_POPUP);
setStyleAttribute(inEle[i], { display: 'none' });
itemPopCount++;
}
else {
eleWidth -= (inEle[i].offsetWidth);
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
}
if (inEle[i].classList.contains(CLASSNAMES.POPOVERFLOW)) {
var elem = ele.querySelector('.' + CLASSNAMES.ITEMS + ' .' + CLASSNAMES.POPUP);
if (elem && elem.classList.contains(CLASSNAMES.POPOVERFLOW)) {
elem.style.display = '';
elem.classList.remove(CLASSNAMES.POPUP);
inEle[i].classList.add(CLASSNAMES.POPUP);
inEle[i].style.display = 'none';
}
}
}
if (pre) {
var popedEle = this.element.querySelectorAll('.' + CLASSNAMES.ITEM + ':not(.' + CLASSNAMES.POPUP + ')');
var inEl = [].slice.call(popedEle);
this.checkPriority(ele, inEl, eleWid, false);
var popedEle = selectAll('.' + CLASS_ITEM + ':not(.' + CLASS_POPUP + ')', this.element);
this.checkPriority(ele, popedEle, eleWid, false);
}
};
Toolbar.prototype.createOverflowIcon = function (ele, innerEle) {
var innerNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
var innerNav = ele.querySelector('.' + CLASS_TBARNAV);
if (!innerNav) {
this.createPopupIcon(ele);
}
innerNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
innerNav = ele.querySelector('.' + CLASS_TBARNAV);
var eleWidth = (ele.offsetWidth - (innerNav.offsetWidth));

@@ -472,3 +495,3 @@ if (this.enableRtl) {

var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASSNAMES.POPUPNAV);
var className = 'e-' + element.id.concat('_nav ' + CLASS_POPUPNAV);
var nav = buildTag('div', { id: id, className: className });

@@ -478,3 +501,3 @@ if (Browser.info.name === 'msie') {

}
var navItem = buildTag('div', { className: CLASSNAMES.POPUPDOWN + ' e-icons' });
var navItem = buildTag('div', { className: CLASS_POPUPDOWN + ' e-icons' });
nav.appendChild(navItem);

@@ -489,3 +512,3 @@ nav.setAttribute('tabindex', '0');

var eleItem;
eleItem = element.querySelector('.' + CLASSNAMES.ITEM + ':not(.' + CLASSNAMES.SEPARATOR + ' ):not(.' + CLASSNAMES.POPUP + ' )');
eleItem = element.querySelector('.' + CLASS_ITEM + ':not(.' + CLASS_SEPARATOR + ' ):not(.' + CLASS_POPUP + ' )');
eleHeight = element.style.height === 'auto' ? null : eleItem.offsetHeight;

@@ -495,16 +518,15 @@ var ele;

var popupPri = [];
if (element.querySelector('#' + element.id + '_popup.' + CLASSNAMES.POPUPCLASS)) {
ele = element.querySelector('#' + element.id + '_popup.' + CLASSNAMES.POPUPCLASS);
if (element.querySelector('#' + element.id + '_popup.' + CLASS_POPUPCLASS)) {
ele = element.querySelector('#' + element.id + '_popup.' + CLASS_POPUPCLASS);
}
else {
ele = buildTag('div', { id: element.id + '_popup', className: CLASSNAMES.POPUPCLASS });
ele = buildTag('div', { id: element.id + '_popup', className: CLASS_POPUPCLASS });
}
var poppedEle = element.querySelector('.' + CLASSNAMES.ITEMS).querySelectorAll('.' + CLASSNAMES.POPUP);
var popupEle = [].slice.call(poppedEle);
nodes = ele.querySelectorAll('.' + CLASSNAMES.TBAROVERFLOW);
var poppedEle = this.sliceFn.call(selectAll('.' + CLASS_POPUP, element.querySelector('.' + CLASS_ITEMS)));
nodes = selectAll('.' + CLASS_TBAROVERFLOW, ele);
var nodeIndex = 0;
var nodePri = 0;
popupEle.forEach(function (el, index) {
nodes = ele.querySelectorAll('.' + CLASSNAMES.TBAROVERFLOW);
if (el.classList.contains(CLASSNAMES.TBAROVERFLOW) && nodes.length > 0) {
poppedEle.forEach(function (el, index) {
nodes = selectAll('.' + CLASS_TBAROVERFLOW, ele);
if (el.classList.contains(CLASS_TBAROVERFLOW) && nodes.length > 0) {
if (_this.tbResize && nodes.length > index) {

@@ -519,7 +541,11 @@ ele.insertBefore(el, nodes[index]);

}
else if (el.classList.contains(CLASSNAMES.TBAROVERFLOW)) {
else if (el.classList.contains(CLASS_TBAROVERFLOW)) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLASSNAMES.POPOVERFLOW)) {
else if (_this.tbResize && el.classList.contains(CLASS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLASS_POPOVERFLOW)) {
popupPri.push(el);

@@ -534,4 +560,3 @@ }

}
el.style.display = '';
el.style.height = eleHeight + 'px';
setStyleAttribute(el, { display: '', height: eleHeight + 'px' });
});

@@ -541,7 +566,7 @@ popupPri.forEach(function (el) {

});
var tbarEle = element.querySelector('.' + CLASSNAMES.ITEMS).querySelectorAll('.' + CLASSNAMES.ITEM);
var tbarEle = selectAll('.' + CLASS_ITEM, element.querySelector('.' + CLASS_ITEMS));
for (var i = tbarEle.length - 1; i >= 0; i--) {
var tbarElement = tbarEle[i];
if (tbarElement.classList.contains(CLASSNAMES.SEPARATOR)) {
tbarElement.style.display = 'none';
if (tbarElement.classList.contains(CLASS_SEPARATOR)) {
setStyleAttribute(tbarElement, { display: 'none' });
}

@@ -552,5 +577,8 @@ else {

}
this.initPopup(element, ele);
};
Toolbar.prototype.initPopup = function (element, ele) {
if (!this.popupObj) {
element.appendChild(ele);
this.element.style.overflow = '';
setStyleAttribute(this.element, { overflow: '' });
var popup = new Popup(ele, {

@@ -572,7 +600,5 @@ relateTo: element,

else {
var popupEle_1 = this.popupObj.element;
popupEle_1.style.maxHeight = '';
popupEle_1.style.display = 'block';
popupEle_1.style.maxHeight = popupEle_1.offsetHeight + 'px';
popupEle_1.style.display = 'none';
var popupEle = this.popupObj.element;
setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
}

@@ -590,3 +616,4 @@ };

var toolEle = this.element;
var popupNav = toolEle.querySelector('.' + CLASSNAMES.TBARNAV);
var popupNav = toolEle.querySelector('.' + CLASS_TBARNAV);
setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.height = 'auto';

@@ -597,6 +624,5 @@ popObj.element.style.maxHeight = '';

if (!isNOU(popupNav)) {
var popIcon = popupNav.firstElementChild.classList;
popupNav.classList.add(CLASSNAMES.TBARNAVACT);
popIcon.remove(CLASSNAMES.POPUPDOWN);
popIcon.add(CLASSNAMES.POPUPICON);
var popIcon = popupNav.firstElementChild;
popupNav.classList.add(CLASS_TBARNAVACT);
classList(popIcon, [CLASS_POPUPICON], [CLASS_POPUPDOWN]);
}

@@ -606,3 +632,3 @@ if ((window.innerHeight + window.scrollY) < popupElePos) {

popObj.height = overflowHeight + 'px';
popObj.element.style.maxHeight = overflowHeight + 'px';
setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
}

@@ -612,26 +638,91 @@ };

var element = this.element.parentElement;
var popupNav = element.querySelector('.' + CLASSNAMES.TBARNAV);
var popupNav = element.querySelector('.' + CLASS_TBARNAV);
if (popupNav) {
var popIcon = popupNav.firstElementChild.classList;
popupNav.classList.remove(CLASSNAMES.TBARNAVACT);
popIcon.remove(CLASSNAMES.POPUPICON);
popIcon.add(CLASSNAMES.POPUPDOWN);
var popIcon = popupNav.firstElementChild;
popupNav.classList.remove(CLASS_TBARNAVACT);
classList(popIcon, [CLASS_POPUPDOWN], [CLASS_POPUPICON]);
}
};
Toolbar.prototype.removePositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
if (isNOU(item) || !item.classList.contains(CLASS_TBARPOS)) {
return;
}
item.classList.remove(CLASS_TBARPOS);
var innerItem = this.sliceFn.call(item.childNodes);
innerItem[1].removeAttribute('style');
innerItem[2].removeAttribute('style');
};
Toolbar.prototype.refreshPositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
item.classList.add(CLASS_TBARPOS);
this.itemPositioning();
};
Toolbar.prototype.itemPositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
if (isNOU(item) || !item.classList.contains(CLASS_TBARPOS)) {
return;
}
var popupNav = this.element.querySelector('.' + CLASS_TBARNAV);
var innerItem;
if (this.scrollModule) {
innerItem = this.sliceFn.call(item.querySelector('.' + CLASS_TBARSCROLL).children);
}
else {
innerItem = this.sliceFn.call(item.childNodes);
}
var margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;
var tbarWid = this.element.offsetWidth;
if (popupNav) {
tbarWid -= popupNav.offsetWidth;
innerItem[2].style.right = popupNav.offsetWidth + 'px';
}
if (tbarWid <= margin) {
return;
}
var value = (((tbarWid - margin)) - innerItem[1].offsetWidth) / 2;
innerItem[1].style.marginLeft = (innerItem[0].offsetWidth + value) + 'px';
};
Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
var _this = this;
if (pos === 0 && item.align !== 'left') {
itemEle.appendChild(buildTag('div', { className: CLASS_TBARLEFT }));
itemEle.appendChild(buildTag('div', { className: CLASS_TBARCENTER }));
itemEle.appendChild(buildTag('div', { className: CLASS_TBARRIGHT }));
this.tbarAlign = true;
itemEle.classList.add(CLASS_TBARPOS);
}
else if (item.align !== 'left') {
var alignEle = itemEle.childNodes;
var leftAlign_1 = buildTag('div', { className: CLASS_TBARLEFT });
this.sliceFn.call(alignEle).forEach(function (el) {
_this.tbarAlgEle.left.push(el);
leftAlign_1.appendChild(el);
});
itemEle.appendChild(leftAlign_1);
itemEle.appendChild(buildTag('div', { className: CLASS_TBARCENTER }));
itemEle.appendChild(buildTag('div', { className: CLASS_TBARRIGHT }));
this.tbarAlign = true;
itemEle.classList.add(CLASS_TBARPOS);
}
};
Toolbar.prototype.renderItems = function () {
var _this = this;
var ele = this.element;
var itemEleDom;
var innerItem;
var popupNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
var innerPos;
var items = this.items;
if (ele && ele.children.length > 0) {
var navEle = ele.querySelectorAll('.' + CLASSNAMES.TBARNAV);
var navEle = selectAll('.' + CLASS_TBARNAV, ele);
itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
}
if (this.trgtEle != null) {
this.trgtEle.classList.add(CLASSNAMES.ITEMS);
var innerEle = [].slice.call(this.trgtEle.children);
this.trgtEle.classList.add(CLASS_ITEMS);
this.tbarEle = [];
var innerEle = this.sliceFn.call(this.trgtEle.children);
innerEle.forEach(function (ele) {
if (ele.tagName === 'DIV') {
ele.classList.add(CLASSNAMES.ITEM);
_this.tbarEle.push(ele);
ele.classList.add(CLASS_ITEM);
}

@@ -642,3 +733,3 @@ });

if (!itemEleDom) {
itemEleDom = buildTag('div', { className: CLASSNAMES.ITEMS });
itemEleDom = buildTag('div', { className: CLASS_ITEMS });
}

@@ -648,3 +739,13 @@ for (var i = 0; i < items.length; i++) {

this.tbarEle.push(innerItem);
itemEleDom.appendChild(innerItem);
if (!this.tbarAlign) {
this.tbarItemAlign(items[i], itemEleDom, i);
}
innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());
if (innerPos) {
this.tbarAlgEle[items[i].align].push(innerItem);
innerPos.appendChild(innerItem);
}
else {
itemEleDom.appendChild(innerItem);
}
}

@@ -669,25 +770,17 @@ ele.appendChild(itemEleDom);

};
Toolbar.prototype.popupRefresh = function (popupEle, destroy) {
var ele = this.element;
var popNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
var innerEle = ele.querySelector('.' + CLASSNAMES.ITEMS);
Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {
var eleSplice = this.tbarEle;
var priEleCnt;
var index;
if (isNOU(popNav)) {
return;
}
innerEle.removeAttribute('style');
popupEle.style.display = 'block';
var width = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);
var innerEle = this.element.querySelector('.' + CLASS_ITEMS);
var _loop_1 = function (el) {
el.style.position = 'absolute';
var elWidth = el.offsetWidth;
var btnText = el.querySelector('.' + CLASSNAMES.TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLASSNAMES.TBARTEXT)) {
var btnText = el.querySelector('.' + CLASS_TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLASS_TBARTEXT)) {
var btn = el.children[0];
if (!isNOU(btnText) && el.classList.contains(CLASSNAMES.TBARTEXT)) {
if (!isNOU(btnText) && el.classList.contains(CLASS_TBARTEXT)) {
btnText.style.display = 'none';
}
else if (!isNOU(btnText) && el.classList.contains(CLASSNAMES.POPUPTEXT)) {
else if (!isNOU(btnText) && el.classList.contains(CLASS_POPUPTEXT)) {
btnText.style.display = 'block';

@@ -702,12 +795,21 @@ }

}
if (el === this_1.tbarEle[0]) {
elWidth += this_1.tbarEleMrgn;
}
el.style.position = '';
if (elWidth < width || destroy) {
if (!el.classList.contains(CLASSNAMES.POPOVERFLOW)) {
el.classList.remove(CLASSNAMES.POPUP);
if (!el.classList.contains(CLASS_POPOVERFLOW)) {
el.classList.remove(CLASS_POPUP);
}
index = this_1.tbarEle.indexOf(el);
if (this_1.tbarAlign) {
var pos = this_1.items[index].align;
index = this_1.tbarAlgEle[pos].indexOf(el);
eleSplice = this_1.tbarAlgEle[pos];
innerEle = this_1.element.querySelector('.' + CLASS_ITEMS + ' .' + 'e-toolbar-' + pos);
}
var sepBeforePri_1 = 0;
eleSplice.slice(0, index).forEach(function (el) {
if (el.classList.contains(CLASSNAMES.TBAROVERFLOW) || el.classList.contains(CLASSNAMES.SEPARATOR)) {
if (el.classList.contains(CLASSNAMES.SEPARATOR)) {
if (el.classList.contains(CLASS_TBAROVERFLOW) || el.classList.contains(CLASS_SEPARATOR)) {
if (el.classList.contains(CLASS_SEPARATOR)) {
el.style.display = '';

@@ -719,9 +821,9 @@ width -= el.offsetWidth;

});
if (el.classList.contains(CLASSNAMES.TBAROVERFLOW)) {
if (el.classList.contains(CLASS_TBAROVERFLOW)) {
var popEle = this_1.popupObj.element;
var query = '.' + CLASSNAMES.ITEM + ':not(.' + CLASSNAMES.SEPARATOR + '):not(.' + CLASSNAMES.TBAROVERFLOW + ')';
priEleCnt = popEle.querySelectorAll('.' + CLASSNAMES.POPUP + ':not(.' + CLASSNAMES.TBAROVERFLOW + ')').length;
if (innerEle.querySelectorAll(query).length === 0) {
var query = '.' + CLASS_ITEM + ':not(.' + CLASS_SEPARATOR + '):not(.' + CLASS_TBAROVERFLOW + ')';
priEleCnt = selectAll('.' + CLASS_POPUP + ':not(.' + CLASS_TBAROVERFLOW + ')', popEle).length;
if (selectAll(query, innerEle).length === 0) {
var eleSep = innerEle.children[index - (index - sepBeforePri_1) - 1];
if (!isNOU(eleSep) && eleSep.classList.contains(CLASSNAMES.SEPARATOR) && !isVisible(eleSep)) {
if (!isNOU(eleSep) && eleSep.classList.contains(CLASS_SEPARATOR) && !isVisible(eleSep)) {
var sepDisplay = 'none';

@@ -738,3 +840,5 @@ eleSep.style.display = 'inherit';

else {
prevSep.style.display = sepDisplay;
if (prevSep.classList.contains(CLASS_SEPARATOR)) {
prevSep.style.display = sepDisplay;
}
}

@@ -757,3 +861,3 @@ eleSep.style.display = '';

else {
priEleCnt = this_1.popupObj.element.querySelectorAll(CLASSNAMES.TBAROVERFLOW).length;
priEleCnt = selectAll('.' + CLASS_TBAROVERFLOW, this_1.popupObj.element).length;
innerEle.insertBefore(el, innerEle.children[index - priEleCnt]);

@@ -769,3 +873,3 @@ width -= el.offsetWidth;

var this_1 = this;
for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {
for (var _i = 0, _a = this.sliceFn.call(popupEle.children); _i < _a.length; _i++) {
var el = _a[_i];

@@ -776,3 +880,15 @@ var state_1 = _loop_1(el);

}
popupEle.style.display = 'none';
};
Toolbar.prototype.popupRefresh = function (popupEle, destroy) {
var ele = this.element;
var popNav = ele.querySelector('.' + CLASS_TBARNAV);
var innerEle = ele.querySelector('.' + CLASS_ITEMS);
if (isNOU(popNav)) {
return;
}
innerEle.removeAttribute('style');
popupEle.style.display = 'block';
var width = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);
this.popupEleRefresh(width, popupEle, destroy);
popupEle.style.display = '';
if (popupEle.children.length === 0) {

@@ -794,3 +910,3 @@ detach(popNav);

if (len && len > 1) {
isEnable ? removeClass(elements, CLASSNAMES.DISABLE) : addClass(elements, CLASSNAMES.DISABLE);
isEnable ? removeClass(elements, CLASS_DISABLE) : addClass(elements, CLASS_DISABLE);
}

@@ -800,3 +916,3 @@ else {

ele = (len && len === 1) ? elements[0] : items;
isEnable ? ele.classList.remove(CLASSNAMES.DISABLE) : ele.classList.add(CLASSNAMES.DISABLE);
isEnable ? ele.classList.remove(CLASS_DISABLE) : ele.classList.add(CLASS_DISABLE);
}

@@ -806,13 +922,35 @@ };

var innerItems;
var itemsDiv = this.element.querySelector('.' + CLASSNAMES.ITEMS);
var itemsDiv = this.element.querySelector('.' + CLASS_ITEMS);
var innerEle;
var itemAgn = 'left';
if (isNOU(index)) {
index = 0;
}
items.forEach(function (e) {
if (!isNOU(e.align) && e.align !== 'left' && itemAgn === 'left') {
itemAgn = e.align;
}
});
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var item = items_1[_i];
innerItems = this.element.querySelectorAll('.' + CLASSNAMES.ITEM);
innerItems = selectAll('.' + CLASS_ITEM, this.element);
item.align = itemAgn;
innerEle = this.renderSubComponent(item);
if (this.tbarEle.length > index && innerItems.length > 0) {
innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
if (this.tbarAlign) {
var algIndex = item.align[0] === 'l' ? 0 : item.align[0] === 'c' ? 1 : 2;
var ele = void 0;
if (this.scrollModule) {
ele = closest(innerItems[0], '.' + CLASS_ITEMS + ' .' + CLASS_TBARSCROLL).children[algIndex];
}
else {
ele = closest(innerItems[0], '.' + CLASS_ITEMS).children[algIndex];
}
ele.insertBefore(innerEle, ele.children[index]);
this.tbarAlgEle[item.align].splice(index, 0, innerEle);
this.refreshPositioning();
}
else {
innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
}
this.items.splice(index, 0, item);

@@ -828,5 +966,6 @@ this.tbarEle.splice(index, 0, innerEle);

Toolbar.prototype.removeItems = function (args) {
var elements = args;
var index;
var innerItems = [].slice.call(this.element.querySelectorAll('.' + CLASSNAMES.ITEM));
if (typeof (args) === 'number') {
var innerItems = this.sliceFn.call(selectAll('.' + CLASS_ITEM, this.element));
if (typeof (elements) === 'number') {
index = parseInt(args.toString(), 10);

@@ -836,5 +975,13 @@ this.removeItemByIndex(index, innerItems);

else {
for (var _i = 0, _a = [].slice.call(args); _i < _a.length; _i++) {
var ele = _a[_i];
index = this.tbarEle.indexOf(ele);
if (elements && elements.length > 1) {
for (var _i = 0, _a = this.sliceFn.call(elements); _i < _a.length; _i++) {
var ele = _a[_i];
index = this.tbarEle.indexOf(ele);
this.removeItemByIndex(index, innerItems);
innerItems = selectAll('.' + CLASS_ITEM, this.element);
}
}
else {
var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;
index = innerItems.indexOf(ele);
this.removeItemByIndex(index, innerItems);

@@ -847,10 +994,14 @@ }

if (this.tbarEle[index] && innerItems[index]) {
var eleIdx = innerItems.indexOf(this.tbarEle[index]);
detach(innerItems[eleIdx]);
this.items.splice(index, 1);
this.tbarEle.splice(index, 1);
var eleIdx = this.tbarEle.indexOf(innerItems[index]);
if (this.tbarAlign) {
var indexAgn = this.tbarAlgEle[this.items[eleIdx].align].indexOf(this.tbarEle[eleIdx]);
this.tbarAlgEle[this.items[eleIdx].align].splice(indexAgn, 1);
}
detach(innerItems[index]);
this.items.splice(eleIdx, 1);
this.tbarEle.splice(eleIdx, 1);
}
};
Toolbar.prototype.templateRender = function (templateProp, innerEle, item) {
var itemType = item.type.toString();
var itemType = item.type;
if (typeof (templateProp) === 'string') {

@@ -864,4 +1015,2 @@ innerEle.innerHTML = templateProp;

}
innerEle.classList.add(CLASSNAMES.TEMPLATE);
this.tbarEle.push(innerEle);
}

@@ -872,7 +1021,7 @@ else if (itemType === 'Input' || itemType === '2') {

item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));
innerEle.appendChild(ele);
templateProperty.appendTo(ele);
innerEle.appendChild(ele);
innerEle.classList.add(CLASSNAMES.TEMPLATE);
this.tbarEle.push(innerEle);
}
innerEle.classList.add(CLASS_TEMPLATE);
this.tbarEle.push(innerEle);
};

@@ -882,9 +1031,6 @@ Toolbar.prototype.renderSubComponent = function (item) {

var dom;
innerEle = buildTag('div', { className: CLASSNAMES.ITEM });
innerEle = buildTag('div', { className: CLASS_ITEM });
if (!this.tbarEle) {
this.tbarEle = [];
}
if (item.cssClass) {
innerEle.className = innerEle.className + ' ' + item.cssClass;
}
if (item.htmlAttributes) {

@@ -896,2 +1042,5 @@ this.setAttr(item.htmlAttributes, innerEle);

}
if (item.cssClass) {
innerEle.className = innerEle.className + ' ' + item.cssClass;
}
if (item.template) {

@@ -901,10 +1050,10 @@ this.templateRender(item.template, innerEle, item);

else {
switch (item.type.toString()) {
switch (item.type) {
case 'Button':
var textStr = item.text;
dom = buildTag('button', { className: 'e-tbar-btn' });
dom = buildTag('button', { className: CLASS_TBARBTN });
item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');
var btnTxt = buildTag('div', { className: 'e-tbar-btn-text' });
if (item.text) {
btnTxt.innerHTML = item.text;
if (textStr) {
btnTxt.innerHTML = textStr;
dom.appendChild(btnTxt);

@@ -916,14 +1065,12 @@ }

var btnObj = new Button({}, dom);
if (item.prefixIcon && item.suffixIcon) {
btnObj.iconCss = item.prefixIcon + ' e-icons';
btnObj.iconPosition = 'left';
if (item.prefixIcon || item.suffixIcon) {
if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {
btnObj.iconCss = item.prefixIcon + ' e-icons';
btnObj.iconPosition = 'left';
}
else {
btnObj.iconCss = item.suffixIcon + ' e-icons';
btnObj.iconPosition = 'right';
}
}
else if (item.prefixIcon) {
btnObj.iconCss = item.prefixIcon + ' e-icons';
btnObj.iconPosition = 'left';
}
else if (item.suffixIcon) {
btnObj.iconCss = item.suffixIcon + ' e-icons';
btnObj.iconPosition = 'right';
}
btnObj.dataBind();

@@ -938,3 +1085,3 @@ if (item.width) {

case 'Separator':
innerEle.classList.add(CLASSNAMES.SEPARATOR);
innerEle.classList.add(CLASS_SEPARATOR);
break;

@@ -944,19 +1091,19 @@ }

if (item.showTextOn) {
var sTxt = item.showTextOn.toString();
if (sTxt === 'Toolbar' || sTxt === '2') {
innerEle.classList.add(CLASSNAMES.POPUPTEXT);
var sTxt = item.showTextOn;
if (sTxt === 'Toolbar') {
innerEle.classList.add(CLASS_POPUPTEXT);
innerEle.classList.add('e-tbtn-align');
}
else if (sTxt === 'Overflow' || sTxt === '1') {
innerEle.classList.add(CLASSNAMES.TBARTEXT);
else if (sTxt === 'Overflow') {
innerEle.classList.add(CLASS_TBARTEXT);
}
}
if (item.overflow) {
var overflow = item.overflow.toString();
if (overflow === 'Show' || overflow === '1') {
innerEle.classList.add(CLASSNAMES.TBAROVERFLOW);
var overflow = item.overflow;
if (overflow === 'Show') {
innerEle.classList.add(CLASS_TBAROVERFLOW);
}
else if (overflow === 'Hide' || overflow === '2') {
if (!innerEle.classList.contains(CLASSNAMES.SEPARATOR)) {
innerEle.classList.add(CLASSNAMES.POPOVERFLOW);
else if (overflow === 'Hide') {
if (!innerEle.classList.contains(CLASS_SEPARATOR)) {
innerEle.classList.add(CLASS_POPOVERFLOW);
}

@@ -968,15 +1115,10 @@ }

Toolbar.prototype.itemClick = function (e) {
var target = e.currentTarget;
var ele = target.firstChild;
this.activeEleRemove(ele);
this.activeEleRemove(e.currentTarget.firstChild);
this.activeEle.focus();
};
Toolbar.prototype.activeEleRemove = function (curEle) {
if (isNOU(this.activeEle)) {
this.activeEle = curEle;
}
else {
if (!isNOU(this.activeEle)) {
this.activeEle.setAttribute('tabindex', '-1');
this.activeEle = curEle;
}
this.activeEle = curEle;
curEle.removeAttribute('tabindex');

@@ -993,11 +1135,23 @@ };

this.tbResize = true;
if (this.popupObj && isVisible(this.popupObj.element)) {
if (this.tbarAlign) {
this.itemPositioning();
}
if (this.popupObj) {
this.popupObj.hide();
}
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLASSNAMES.ITEMS)[0]);
if (this.offsetWid > ele.offsetWidth || this.scrollModule || checkOverflow) {
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLASS_ITEMS)[0]);
if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {
return;
}
if (this.offsetWid > ele.offsetWidth || checkOverflow) {
this.renderOverflowMode();
}
if (this.popupObj) {
if (this.tbarAlign) {
this.removePositioning();
}
this.popupRefresh(this.popupObj.element, false);
if (this.tbarAlign) {
this.refreshPositioning();
}
}

@@ -1012,6 +1166,3 @@ this.offsetWid = ele.offsetWidth;

case 'items':
if (this.scrollModule) {
this.scrollModule.destroy();
this.scrollModule = null;
}
this.destroyHScroll();
this.renderItems();

@@ -1033,8 +1184,6 @@ this.renderOverflowMode();

if (this.scrollModule) {
this.scrollModule.element.classList.remove(CLASSNAMES.RTL);
this.scrollModule.destroy();
this.scrollModule = null;
this.scrollModule.element.classList.remove(CLASS_RTL);
this.destroyHScroll();
}
if (this.popupObj) {
var popNav = this.element.querySelector('.' + CLASSNAMES.TBARNAV);
this.popupRefresh(this.popupObj.element, true);

@@ -1044,3 +1193,3 @@ }

if (this.enableRtl) {
this.element.classList.add(CLASSNAMES.RTL);
this.element.classList.add(CLASS_RTL);
}

@@ -1050,17 +1199,17 @@ break;

if (newProp.enableRtl) {
this.element.classList.add(CLASSNAMES.RTL);
this.element.classList.add(CLASS_RTL);
if (!isNOU(this.scrollModule)) {
this.scrollModule.element.classList.add(CLASSNAMES.RTL);
this.scrollModule.element.classList.add(CLASS_RTL);
}
if (!isNOU(this.popupObj)) {
this.popupObj.element.classList.add(CLASSNAMES.RTL);
this.popupObj.element.classList.add(CLASS_RTL);
}
}
else {
this.element.classList.remove(CLASSNAMES.RTL);
this.element.classList.remove(CLASS_RTL);
if (!isNOU(this.scrollModule)) {
this.scrollModule.element.classList.remove(CLASSNAMES.RTL);
this.scrollModule.element.classList.remove(CLASS_RTL);
}
if (!isNOU(this.popupObj)) {
this.popupObj.element.classList.remove(CLASSNAMES.RTL);
this.popupObj.element.classList.remove(CLASS_RTL);
}

@@ -1067,0 +1216,0 @@ }

88

package.json

@@ -13,29 +13,13 @@ {

},
"D:\\release\\packages\\node_modules\\@syncfusion\\ej2"
],
[
{
"raw": "@syncfusion/ej2-navigations@^1.0.0",
"scope": "@syncfusion",
"escapedName": "@syncfusion%2fej2-navigations",
"name": "@syncfusion/ej2-navigations",
"rawSpec": "^1.0.0",
"spec": ">=1.0.0 <2.0.0",
"type": "range"
},
"C:\\Users\\ajithr\\Desktop\\npm\\node_modules\\@syncfusion\\ej2"
"C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2"
]
],
"_from": "@syncfusion/ej2-navigations@^1.0.0",
"_id": "@syncfusion/ej2-navigations@1.0.5",
"_from": "@syncfusion/ej2-navigations@*",
"_id": "@syncfusion/ej2-navigations@1.0.10",
"_inCache": true,
"_location": "/@syncfusion/ej2-navigations",
"_nodeVersion": "6.10.2",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/ej2-navigations-1.0.5.tgz_1494508077959_0.31865248642861843"
},
"_nodeVersion": "6.11.0",
"_npmUser": {
"name": "ajithr11",
"email": "ajithr@syncfusion.com"
"name": "ej2",
"email": "pipeline@syncfusion.com"
},

@@ -45,8 +29,8 @@ "_npmVersion": "3.10.10",

"_requested": {
"raw": "@syncfusion/ej2-navigations@^1.0.0",
"raw": "@syncfusion/ej2-navigations@*",
"scope": "@syncfusion",
"escapedName": "@syncfusion%2fej2-navigations",
"name": "@syncfusion/ej2-navigations",
"rawSpec": "^1.0.0",
"spec": ">=1.0.0 <2.0.0",
"rawSpec": "*",
"spec": "*",
"type": "range"

@@ -58,7 +42,7 @@ },

],
"_resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-1.0.5.tgz",
"_shasum": "3208ad33ebf876b65543d13eb5789f6226eee551",
"_resolved": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-navigations/-/ej2-navigations-1.0.10.tgz",
"_shasum": "c513f0691c4441b3d11ea57ed81615679569c4ac",
"_shrinkwrap": null,
"_spec": "@syncfusion/ej2-navigations@^1.0.0",
"_where": "C:\\Users\\ajithr\\Desktop\\npm\\node_modules\\@syncfusion\\ej2",
"_spec": "@syncfusion/ej2-navigations@*",
"_where": "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2",
"author": {

@@ -70,18 +54,10 @@ "name": "Syncfusion Inc."

},
"config": {
"ghooks": {
"pre-commit": "gulp pre-commit",
"pre-push": "gulp pre-push",
"commit-msg": "gulp commit-msg"
}
},
"dependencies": {
"@syncfusion/ej2-base": "^1.0.0",
"@syncfusion/ej2-buttons": "^1.0.0",
"@syncfusion/ej2-popups": "^1.0.0"
"@syncfusion/ej2-base": "^1.0.10",
"@syncfusion/ej2-buttons": "^1.0.10",
"@syncfusion/ej2-popups": "^1.0.10"
},
"description": "Syncfusion TypeScript Navigation Components",
"description": "Essential JS 2 Navigation Components",
"devDependencies": {
"@types/chai": "^3.4.28",
"@types/es6-promise": "0.0.28",
"@types/jasmine": "^2.2.29",

@@ -91,8 +67,7 @@ "@types/jasmine-ajax": "^3.1.27",

},
"directories": {},
"dist": {
"shasum": "3208ad33ebf876b65543d13eb5789f6226eee551",
"tarball": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-1.0.5.tgz"
"shasum": "c513f0691c4441b3d11ea57ed81615679569c4ac",
"tarball": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-navigations/-/ej2-navigations-1.0.10.tgz"
},
"gitHead": "4d2b5cacf2f3b815b2b3c55111785edd6ffa2b49",
"gitHead": "1f13dd5dc58ad2e96e8120bc8127bc94a3788f90",
"homepage": "https://github.com/syncfusion/ej2-navigations#readme",

@@ -104,4 +79,8 @@ "keywords": [

"toolbar",
"navigation",
"tools"
"horizontal-scroll",
"ribbon",
"navbar",
"navigation-bar",
"toolbar-customization",
"command-buttons"
],

@@ -111,8 +90,4 @@ "license": "SEE LICENSE IN license",

{
"name": "ajithr11",
"email": "ajithr@syncfusion.com"
},
{
"name": "syncfusionorg",
"email": "npmjs@syncfusion.com"
"name": "ej2",
"email": "pipeline@syncfusion.com"
}

@@ -123,3 +98,4 @@ ],

"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"readme": "# Overview\r\n\r\nDisplays a group of command buttons arranged horizontally.It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.\r\n\r\n## Resources\r\n\r\n* [Demos](http://ej2.syncfusion.com/demos/#/toolbar/default.html)\n\n# 1.0.10\r\n\r\n## Toolbar\r\n\r\n### New Features\r\n\r\n- Toolbar Item Alignment\r\n\r\n 1. Toolbar commands can be aligned in `left`, `right`, and `center` positions. By default, all the commands are aligned in left position.",
"readmeFilename": "README.md",
"repository": {

@@ -134,3 +110,3 @@ "type": "git",

},
"version": "1.0.8"
}
"version": "1.0.10"
}

14

README.md
# Overview
Displays a group of command buttons arranged horizontally.
Displays a group of command buttons arranged horizontally.It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.
## Resources
* [Demos](http://ej2.syncfusion.com/demos/#/toolbar/default.html)
* [Demos](http://ej2.syncfusion.com/demos/#/toolbar/default.html)
# 1.0.10
## Toolbar
### New Features
- Toolbar Item Alignment
1. Toolbar commands can be aligned in `left`, `right`, and `center` positions. By default, all the commands are aligned in left position.

2

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

@@ -1,2 +0,2 @@

import { Component } from '@syncfusion/ej2-base/component'; import { Touch, ScrollEventArgs, TouchEventArgs } from '@syncfusion/ej2-base/touch'; import { EventHandler } from '@syncfusion/ej2-base/event-handler'; import { NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base/notify-property-change'; import { createElement, detach } from '@syncfusion/ej2-base/dom'; import { getUniqueID } from '@syncfusion/ej2-base/util'; import { Browser } from '@syncfusion/ej2-base/browser';
import { Component } from '@syncfusion/ej2-base/component'; import { Touch, ScrollEventArgs, TouchEventArgs } from '@syncfusion/ej2-base/touch'; import { EventHandler } from '@syncfusion/ej2-base/event-handler'; import { NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base/notify-property-change'; import { createElement, detach, classList } from '@syncfusion/ej2-base/dom'; import { getUniqueID } from '@syncfusion/ej2-base/util'; import { Browser } from '@syncfusion/ej2-base/browser';
import {ComponentModel} from '@syncfusion/ej2-base';

@@ -3,0 +3,0 @@

5

src/common/h-scroll.d.ts

@@ -17,3 +17,2 @@ import { Component } from '@syncfusion/ej2-base/component';

export declare class HScroll extends Component<HTMLElement> implements INotifyPropertyChanged {
private innerEle;
private touchModule;

@@ -24,2 +23,4 @@ private scrollEle;

private timeout;
private browser;
private browserCheck;
/**

@@ -55,3 +56,3 @@ * Specifies the left or right scrolling distance of the horizontal scrollbar moving.

/**
* Removes the widget safely from DOM and also detaches all its related event handlers.
* Removes the control from the DOM and also removes all its related events.
* @returns void

@@ -58,0 +59,0 @@ */

78

src/common/h-scroll.js

@@ -20,12 +20,10 @@ var __extends = (this && this.__extends) || (function () {

Object.defineProperty(exports, "__esModule", { value: true });
var CLASSNAMES = {
ROOT: 'e-hscroll',
RTL: 'e-rtl',
HSCROLLBAR: 'e-hscroll-bar',
HSCROLLCON: 'e-hscroll-content',
NAVARROW: 'e-nav-arrow',
NAVRIGHTARROW: 'e-nav-right-arrow',
NAVLEFTARROW: 'e-nav-left-arrow',
HSCROLLNAV: 'e-hor-nav'
};
var CLASS_ROOT = 'e-hscroll';
var CLASS_RTL = 'e-rtl';
var CLASS_HSCROLLBAR = 'e-hscroll-bar';
var CLASS_HSCROLLCON = 'e-hscroll-content';
var CLASS_NAVARROW = 'e-nav-arrow';
var CLASS_NAVRIGHTARROW = 'e-nav-right-arrow';
var CLASS_NAVLEFTARROW = 'e-nav-left-arrow';
var CLASS_HSCROLLNAV = 'e-hor-nav';
var HScroll = (function (_super) {

@@ -37,2 +35,4 @@ __extends(HScroll, _super);

HScroll.prototype.preRender = function () {
this.browser = browser_1.Browser.info.name;
this.browserCheck = this.browser === 'mozilla';
this.initialize();

@@ -45,11 +45,11 @@ if (this.element.id === '') {

if (this.enableRtl) {
this.element.classList.add(CLASSNAMES.RTL);
this.element.classList.add(CLASS_RTL);
}
};
HScroll.prototype.render = function () {
this.createNavigationIcon(this.element, CLASSNAMES.NAVRIGHTARROW + ' ' + CLASSNAMES.NAVARROW);
this.createNavigationIcon(this.element, CLASS_NAVRIGHTARROW + ' ' + CLASS_NAVARROW);
};
HScroll.prototype.initialize = function () {
var scrollEle = dom_1.createElement('div', { className: CLASSNAMES.HSCROLLCON });
var scrollDiv = dom_1.createElement('div', { className: CLASSNAMES.HSCROLLBAR });
var scrollEle = dom_1.createElement('div', { className: CLASS_HSCROLLCON });
var scrollDiv = dom_1.createElement('div', { className: CLASS_HSCROLLBAR });
var ele = this.element;

@@ -77,3 +77,3 @@ var innerEle = [].slice.call(ele.children);

ele.style.display = '';
ele.classList.remove(CLASSNAMES.ROOT);
ele.classList.remove(CLASS_ROOT);
var nav = ele.querySelector('#' + ele.id + '_nav.e-' + ele.id + '_nav');

@@ -97,3 +97,3 @@ event_handler_1.EventHandler.remove(nav, 'click', this.clickEventHandler);

var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASSNAMES.HSCROLLNAV);
var className = 'e-' + element.id.concat('_nav ' + CLASS_HSCROLLNAV);
var nav = dom_1.createElement('div', { id: id, className: className });

@@ -105,3 +105,3 @@ var navItem = dom_1.createElement('div', { className: classList + ' e-icons' });

event_handler_1.EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);
var tchObj = new touch_1.Touch(nav, { taphold: this.tabHoldHandler.bind(this) });
new touch_1.Touch(nav, { taphold: this.tabHoldHandler.bind(this) });
if (browser_1.Browser.info.name === 'msie') {

@@ -124,5 +124,4 @@ nav.classList.add('e-ie-align');

var trgt = e.originalEvent.target;
trgt = trgt.classList.contains(CLASSNAMES.HSCROLLNAV) ? trgt.firstElementChild : trgt;
trgt = trgt.classList.contains(CLASS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
var timeoutFun = function () {
var element = _this.scrollEle;
var scrollDis = 10;

@@ -138,10 +137,10 @@ _this.contentScrolling(scrollDis, trgt);

var classList = trgt.classList;
if (classList.contains(CLASSNAMES.HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLASSNAMES.NAVARROW).classList;
if (classList.contains(CLASS_HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLASS_NAVARROW).classList;
}
if (this.element.classList.contains(CLASSNAMES.RTL) && browser_1.Browser.info.name === 'mozilla') {
if (this.element.classList.contains(CLASS_RTL) && this.browserCheck) {
scrollDis = -scrollDis;
}
if (!this.element.classList.contains(CLASSNAMES.RTL) || browser_1.Browser.info.name === 'mozilla') {
if (classList.contains(CLASSNAMES.NAVRIGHTARROW)) {
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
if (classList.contains(CLASS_NAVRIGHTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;

@@ -154,3 +153,3 @@ }

else {
if (classList.contains(CLASSNAMES.NAVLEFTARROW)) {
if (classList.contains(CLASS_NAVLEFTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;

@@ -170,6 +169,9 @@ }

distance = e.distanceX;
if (this.browser === 'edge') {
distance = -distance;
}
if (e.scrollDirection === 'Left') {
ele.scrollLeft = ele.scrollLeft + distance;
}
else {
else if (e.scrollDirection === 'Right') {
ele.scrollLeft = ele.scrollLeft - distance;

@@ -181,6 +183,4 @@ }

var width = target.offsetWidth;
var navElement = this.element.firstChild;
var scrollVal = (this.element.clientWidth + this.element.scrollLeft - navElement.offsetWidth);
if (navElement.firstChild) {
var navClassList = navElement.firstChild.classList;
var navElement = this.element.firstChild.firstChild;
if (navElement) {
var scrollLeft = target.scrollLeft;

@@ -191,19 +191,15 @@ if (scrollLeft <= 0) {

if (scrollLeft === 0) {
if (!this.element.classList.contains(CLASSNAMES.RTL) || browser_1.Browser.info.name === 'mozilla') {
navClassList.add(CLASSNAMES.NAVRIGHTARROW);
navClassList.remove(CLASSNAMES.NAVLEFTARROW);
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
dom_1.classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
}
else {
navClassList.add(CLASSNAMES.NAVLEFTARROW);
navClassList.remove(CLASSNAMES.NAVRIGHTARROW);
dom_1.classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
}
}
else if (Math.ceil(width + scrollLeft) >= target.scrollWidth) {
if (!this.element.classList.contains(CLASSNAMES.RTL) || browser_1.Browser.info.name === 'mozilla') {
navClassList.add(CLASSNAMES.NAVLEFTARROW);
navClassList.remove(CLASSNAMES.NAVRIGHTARROW);
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
dom_1.classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
}
else {
navClassList.add(CLASSNAMES.NAVRIGHTARROW);
navClassList.remove(CLASSNAMES.NAVLEFTARROW);
dom_1.classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
}

@@ -227,3 +223,3 @@ }

case 'enableRtl':
newProp.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);
newProp.enableRtl ? this.element.classList.add(CLASS_RTL) : this.element.classList.remove(CLASS_RTL);
break;

@@ -230,0 +226,0 @@ }

86

src/toolbar/toolbar-builder.d.ts
import{Toolbar} from "./toolbar";
import{ ItemType, DisplayMode, OverflowOption, OverflowMode} from "./toolbar";
import{ OverflowMode} from "./toolbar";

@@ -13,3 +13,3 @@ export interface ToolbarHelper {

/**
* The event will be fired before the widget renders on a page.
* The event will be fired before the control rendered on a page.
*/

@@ -22,7 +22,7 @@ beforeCreate(value:Function): BuilderProperties;

/**
* The event will be fired once the widget rendering is completed.
* The event will be fired once the control rendering is completed.
*/
created(value:Function): BuilderProperties;
/**
* The event will be fired when the widget gets destroyed.
* The event will be fired when the control gets destroyed.
*/

@@ -35,3 +35,3 @@ destroyed(value:Function): BuilderProperties;

/**
* Specifies the direction of the toolbar items. For the cultures like Arabic, direction can be switched as right to left.
* Specifies the direction of the toolbar commands. For the cultures like Arabic, direction can be switched as right to left.
*/

@@ -45,8 +45,4 @@ enableRtl(value:boolean): BuilderProperties;

/**
* An array of item that is used to configure toolbar commands.
* Overrides the global culture and localization value for this component. Default Global culture is 'en-US'
*/
items(value: (val:ItemModel) => void | Object): BuilderProperties;
/**
* Overrides the global culture and localization value for this component.
*/
locale(value:string): BuilderProperties;

@@ -65,72 +61,2 @@ /**

width(value:string|number): BuilderProperties;
}
export interface ItemModel {
/**
* Defines single / multiple classes separated by space which can be used for toolbar command customization.
*/
cssClass(value:string): ItemModel;
/**
* Defines a htmlAttributes which can be used for adding custom attributes to toolbar command.
Supports HTML attributes such as style, class, etc.
*/
htmlAttributes(value:Object): ItemModel;
/**
* Specifies the id of the toolbar item such as button, input elements.
*/
id(value:string): ItemModel;
/**
* Specifies the toolbar command display area when an element's content is large to fit in an available space.
Applicable to `popup` mode only. Possible values are:
- show - Always shows item in *toolbar* with primary priority.
- hide - Always shows item in *popup* with secondary priority.
- none - No priority considers to display and as per the normal order control moves to popup when content exceeds.
*/
overflow(value:OverflowOption): ItemModel;
/**
* Defines single / multiple classes separated by space which can be used to specify an icon for the button.
The icon will be positioned before the text content if text available, else icon alone button will be rendered.
*/
prefixIcon(value:string): ItemModel;
/**
* Specifies where the button text will be displayed in *popup mode* of the toolbar.
Possible values are:
- Toolbar - Text will be displayed in *toolbar* only.
- Overflow - Text will be displayed when content overflowed to *popup* only.
- Both - Text will be displayed in *popup* and *toolbar*.
*/
showTextOn(value:DisplayMode): ItemModel;
/**
* Defines single / multiple classes separated by space which can be used to specify an icon for the button.
The icon will be positioned after the text content if text available.
*/
suffixIcon(value:string): ItemModel;
/**
* Specifies the HTML element / element id as a string which can be added as toolbar command.
```
E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
```
*/
template(value:string|Object): ItemModel;
/**
* Specifies the text of the toolbar button.
*/
text(value:string): ItemModel;
/**
* Sets the text that appears as a tooltip in the toolbar command.
*/
tooltipText(value:string): ItemModel;
/**
* Specifies the type of command to be rendered in the toolbar.
Supported types are:
- Button - Creates the button control with its given properties like text, prefixIcon, etc.
- Separator - Adds a horizontal line that separates the toolbar commands.
- Input - Creates an input element and it's applicable to template rendering with Syncfusion controls like drop down list,
auto complete, etc.
*/
type(value:ItemType): ItemModel;
/**
* Specifies the width of the toolbar button.
*/
width(value:number|string): ItemModel;
add(): ItemModel;
}

29

src/toolbar/toolbar-model.d.ts

@@ -1,3 +0,3 @@

import { Component, enableRtl, EventHandler, Property, Event, EmitType, Browser } from '@syncfusion/ej2-base'; import { addClass, removeClass, isVisible, setStyleAttribute, closest, attributes, detach } from '@syncfusion/ej2-base/dom'; import { createElement as buildTag } from '@syncfusion/ej2-base/dom'; import { isNullOrUndefined as isNOU, getUniqueID, formatUnit } from '@syncfusion/ej2-base/util'; import { INotifyPropertyChanged, NotifyPropertyChanges, CreateBuilder, ChildProperty } from '@syncfusion/ej2-base'; import { KeyboardEvents, KeyboardEventArgs, Collection } from '@syncfusion/ej2-base'; import { calculatePosition } from '@syncfusion/ej2-popups/src/common/position'; import { Popup} from '@syncfusion/ej2-popups'; import { Button } from '@syncfusion/ej2-buttons'; import { HScroll } from '../common/h-scroll'; import { ToolbarHelper } from './toolbar-builder';
import {OverflowOption,ItemType,DisplayMode,OverflowMode} from "./toolbar";
import { Component, enableRtl, EventHandler, Property, Event, EmitType, Browser } from '@syncfusion/ej2-base'; import { addClass, removeClass, isVisible, setStyleAttribute, closest, attributes, detach } from '@syncfusion/ej2-base/dom'; import { createElement as buildTag, selectAll, classList } from '@syncfusion/ej2-base/dom'; import { isNullOrUndefined as isNOU, getUniqueID, formatUnit } from '@syncfusion/ej2-base/util'; import { INotifyPropertyChanged, NotifyPropertyChanges, CreateBuilder, ChildProperty } from '@syncfusion/ej2-base'; import { KeyboardEvents, KeyboardEventArgs, Collection } from '@syncfusion/ej2-base'; import { calculatePosition } from '@syncfusion/ej2-popups/src/common/position'; import { Popup} from '@syncfusion/ej2-popups'; import { Button } from '@syncfusion/ej2-buttons'; import { HScroll } from '../common/h-scroll'; import { ToolbarHelper } from './toolbar-builder';
import {OverflowOption,ItemType,DisplayMode,ItemAlign,OverflowMode,ClickEventArgs} from "./toolbar";
import {ComponentModel} from '@syncfusion/ej2-base';

@@ -11,12 +11,12 @@

/**
* Specifies the id of the toolbar item such as button, input elements. * @default "" */ id?: string;
* Specifies the unique id to be used with button or input element of toolbar items. * @default "" */ id?: string;
/**
* Specifies the text of the toolbar button. * @default "" */ text?: string;
* Specifies the text to be displayed on the toolbar button. * @default "" */ text?: string;
/**
* Specifies the width of the toolbar button. * @default 'auto' */ width?: number | string;
* Specifies the width of the toolbar button commands. * @default 'auto' */ width?: number | string;
/**
* Defines single / multiple classes separated by space which can be used for toolbar command customization. * @default "" */ cssClass?: string;
* Defines single / multiple classes (separated by space ) are to be used for commands customization. * @default "" */ cssClass?: string;

@@ -36,3 +36,3 @@ /**

/**
* Specifies the type of command to be rendered in the toolbar. * Supported types are: * - Button - Creates the button control with its given properties like text, prefixIcon, etc. * - Separator - Adds a horizontal line that separates the toolbar commands. * - Input - Creates an input element and it's applicable to template rendering with Syncfusion controls like drop down list, * auto complete, etc. * @default 'Button' */ type?: ItemType;
* Specifies the types of command to be rendered in the toolbar. * Supported types are: * - Button - Creates the button control with its given properties like text, prefixIcon, etc. * - Separator - Adds a horizontal line that separates the toolbar commands. * - Input - Creates an input element and it's applicable to template rendering with Syncfusion controls like drop down list, * auto complete, etc. * @default 'Button' */ type?: ItemType;

@@ -46,4 +46,7 @@ /**

/**
* Sets the text that appears as a tooltip in the toolbar command. * @default "" */ tooltipText?: string;
* Sets the text that appears as a html tooltip in the toolbar command. * @default "" */ tooltipText?: string;
/**
* Specifies the location for aligning items in the toolbar. Each command will be aligned according to the `align` property. * Possible values are: * - Left – Places the items to the `left` start of the toolbar. * - Center - Places the items to the `center` to the toolbar. * - Right - Places the items to the `right` end of the toolbar. * @default "left" */ align?: ItemAlign;
}

@@ -69,16 +72,16 @@

/**
* Specifies the direction of the toolbar items. For the cultures like Arabic, direction can be switched as right to left. * @default 'false' */ enableRtl?: boolean;
* Specifies the direction of the toolbar commands. For the cultures like Arabic, direction can be switched as right to left. * @default 'false' */ enableRtl?: boolean;
/**
* The event will be fired while clicking on the toolbar elements. * @event */ clicked?: EmitType<Event>;
* The event will be fired while clicking on the toolbar elements. * @event */ clicked?: EmitType<ClickEventArgs>;
/**
* The event will be fired once the widget rendering is completed. * @event */ created?: EmitType<Event>;
* The event will be fired once the control rendering is completed. * @event */ created?: EmitType<Event>;
/**
* The event will be fired when the widget gets destroyed. * @event */ destroyed?: EmitType<Event>;
* The event will be fired when the control gets destroyed. * @event */ destroyed?: EmitType<Event>;
/**
* The event will be fired before the widget renders on a page. * @event */ beforeCreate?: EmitType<Event>;
* The event will be fired before the control rendered on a page. * @event */ beforeCreate?: EmitType<Event>;
}

64

src/toolbar/toolbar.d.ts

@@ -21,2 +21,8 @@ import { Component, EmitType } from '@syncfusion/ej2-base';

export declare type OverflowMode = 'Scrollable' | 'Popup';
export declare type ItemAlign = 'left' | 'center' | 'right';
export interface ClickEventArgs {
item: ItemModel;
eventName: string;
originalEvent: Event;
}
/**

@@ -27,3 +33,3 @@ * An item object that is used to configure toolbar commands.

/**
* Specifies the id of the toolbar item such as button, input elements.
* Specifies the unique id to be used with button or input element of toolbar items.
* @default ""

@@ -33,3 +39,3 @@ */

/**
* Specifies the text of the toolbar button.
* Specifies the text to be displayed on the toolbar button.
* @default ""

@@ -39,3 +45,3 @@ */

/**
* Specifies the width of the toolbar button.
* Specifies the width of the toolbar button commands.
* @default 'auto'

@@ -45,3 +51,3 @@ */

/**
* Defines single / multiple classes separated by space which can be used for toolbar command customization.
* Defines single / multiple classes (separated by space ) are to be used for commands customization.
* @default ""

@@ -80,3 +86,3 @@ */

/**
* Specifies the type of command to be rendered in the toolbar.
* Specifies the types of command to be rendered in the toolbar.
* Supported types are:

@@ -108,9 +114,18 @@ * - Button - Creates the button control with its given properties like text, prefixIcon, etc.

/**
* Sets the text that appears as a tooltip in the toolbar command.
* Sets the text that appears as a html tooltip in the toolbar command.
* @default ""
*/
tooltipText: string;
/**
* Specifies the location for aligning items in the toolbar. Each command will be aligned according to the `align` property.
* Possible values are:
* - Left – Places the items to the `left` start of the toolbar.
* - Center - Places the items to the `center` to the toolbar.
* - Right - Places the items to the `right` end of the toolbar.
* @default "left"
*/
align: ItemAlign;
}
/**
* Toolbar control is a container for a group of commands or controls that are typically related in their function.
* Toolbar control is a contains group of commands that are aligned horizontally.
* ```html

@@ -128,2 +143,3 @@ * <div id="toolbar"/>

private tbarEle;
private tbarAlgEle;
private offsetWid;

@@ -134,2 +150,5 @@ private keyModule;

private tbResize;
private tbarAlign;
private tbarEleMrgn;
private sliceFn;
/**

@@ -164,3 +183,3 @@ * Contains the keyboard configuration of the toolbar.

/**
* Specifies the direction of the toolbar items. For the cultures like Arabic, direction can be switched as right to left.
* Specifies the direction of the toolbar commands. For the cultures like Arabic, direction can be switched as right to left.
* @default 'false'

@@ -173,5 +192,5 @@ */

*/
clicked: EmitType<Event>;
clicked: EmitType<ClickEventArgs>;
/**
* The event will be fired once the widget rendering is completed.
* The event will be fired once the control rendering is completed.
* @event

@@ -181,3 +200,3 @@ */

/**
* The event will be fired when the widget gets destroyed.
* The event will be fired when the control gets destroyed.
* @event

@@ -187,3 +206,3 @@ */

/**
* The event will be fired before the widget renders on a page.
* The event will be fired before the control rendered on a page.
* @event

@@ -193,3 +212,3 @@ */

/**
* Removes the widget safely from the DOM and also detaches all its related event handlers.
* Removes the control from the DOM and also removes all its related events
* @returns void

@@ -211,5 +230,5 @@ */

private unwireEvents();
private destroyHScroll();
private keyActionHandler(e);
private prevEleFocus(closest);
private nextEleFocus(closest);
private eleFocus(closest, pos);
private clickEventHandler(e);

@@ -224,2 +243,3 @@ /**

private initHScroll(element, innerItems);
private itemWidthCal(innerItem);
private checkOverflow(element, innerItem);

@@ -231,11 +251,17 @@ private renderOverflowMode();

private createPopup();
private initPopup(element, ele);
private docEvent(e);
private popupOpen(e);
private popupClose(e);
private removePositioning();
private refreshPositioning();
private itemPositioning();
private tbarItemAlign(item, itemEle, pos);
private renderItems();
private setAttr(attr, element);
private popupEleRefresh(width, popupEle, destroy);
private popupRefresh(popupEle, destroy);
/**
* Enables or disables the specified toolbar item.
* @param {HTMLElement|NodeList} items - DOM element or an Array of item which to be enabled or disabled.
* @param {HTMLElement|NodeList} items - DOM element or an array of item which is to be enabled or disabled.
* @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.

@@ -247,3 +273,3 @@ * By default `isEnable` is true.

/**
* Adds new items to the Toolbar widget. Accepts an array as toolbar items.
* Adds new items to the Toolbar which accepts an array as toolbar items.
* @param {ItemsModel[]} items - DOM element or an Array of item which to be added to the toolbar.

@@ -255,7 +281,7 @@ * @param {number} index - Number value that determines where the command to be added. By default index is 0.

/**
* Removes the items from the toolbar. Acceptable arguments are indexed of item / HTMLElement / Node list.
* Removes the items from the toolbar. Acceptable arguments are index of item / HTMLElement / Node list.
* @param {number|HTMLElement|NodeList} args - Index or DOM element or an Array of item which is to be removed from the toolbar.
* @returns void
*/
removeItems(args: number | HTMLElement | NodeList): void;
removeItems(args: number | HTMLElement | NodeList | Element): void;
private removeItemByIndex(index, innerItems);

@@ -262,0 +288,0 @@ private templateRender(templateProp, innerEle, item);

703

src/toolbar/toolbar.js

@@ -20,23 +20,26 @@ var __extends = (this && this.__extends) || (function () {

Object.defineProperty(exports, "__esModule", { value: true });
var CLASSNAMES = {
ITEMS: 'e-toolbar-items',
ITEM: 'e-toolbar-item',
RTL: 'e-rtl',
SEPARATOR: 'e-separator',
POPUPICON: 'e-popup-up-icon',
POPUPDOWN: 'e-popup-down-icon',
POPUP: 'e-toolbar-popup',
POPUPCLASS: 'e-toolbar-pop',
TEMPLATE: 'e-template',
DISABLE: 'e-overlay',
POPUPTEXT: 'e-toolbar-text',
TBARTEXT: 'e-popup-text',
TBAROVERFLOW: 'e-overflow-show',
POPOVERFLOW: 'e-overflow-hide',
TBARBTNTEXT: 'e-tbar-btn-text',
TBARBTN: 'e-tbar-btn',
TBARNAV: 'e-hor-nav',
TBARNAVACT: 'e-nav-active',
POPUPNAV: 'e-hor-nav'
};
var CLASS_ITEMS = 'e-toolbar-items';
var CLASS_ITEM = 'e-toolbar-item';
var CLASS_RTL = 'e-rtl';
var CLASS_SEPARATOR = 'e-separator';
var CLASS_POPUPICON = 'e-popup-up-icon';
var CLASS_POPUPDOWN = 'e-popup-down-icon';
var CLASS_POPUP = 'e-toolbar-popup';
var CLASS_POPUPCLASS = 'e-toolbar-pop';
var CLASS_TEMPLATE = 'e-template';
var CLASS_DISABLE = 'e-overlay';
var CLASS_POPUPTEXT = 'e-toolbar-text';
var CLASS_TBARTEXT = 'e-popup-text';
var CLASS_TBAROVERFLOW = 'e-overflow-show';
var CLASS_POPOVERFLOW = 'e-overflow-hide';
var CLASS_TBARBTNTEXT = 'e-tbar-btn-text';
var CLASS_TBARBTN = 'e-tbar-btn';
var CLASS_TBARNAV = 'e-hor-nav';
var CLASS_TBARNAVACT = 'e-nav-active';
var CLASS_POPUPNAV = 'e-hor-nav';
var CLASS_TBARRIGHT = 'e-toolbar-right';
var CLASS_TBARLEFT = 'e-toolbar-left';
var CLASS_TBARCENTER = 'e-toolbar-center';
var CLASS_TBARPOS = 'e-tbar-pos';
var CLASS_TBARSCROLL = 'e-hscroll-content';
var Item = (function (_super) {

@@ -85,2 +88,5 @@ __extends(Item, _super);

], Item.prototype, "tooltipText", void 0);
__decorate([
ej2_base_1.Property('left')
], Item.prototype, "align", void 0);
exports.Item = Item;

@@ -128,6 +134,3 @@ var Toolbar = (function (_super) {

ej2_base_1.EventHandler.remove(this.element, 'click', this.clickEventHandler);
if (this.scrollModule) {
this.scrollModule.destroy();
this.scrollModule = null;
}
this.destroyHScroll();
this.keyModule.destroy();

@@ -139,2 +142,11 @@ if (this.popupObj) {

};
Toolbar.prototype.destroyHScroll = function () {
if (this.scrollModule) {
if (this.tbarAlign) {
this.scrollModule.element.classList.add(CLASS_TBARPOS);
}
this.scrollModule.destroy();
this.scrollModule = null;
}
};
Toolbar.prototype.keyActionHandler = function (e) {

@@ -146,10 +158,10 @@ e.preventDefault();

var popupObj = this.popupObj;
if (trgt.classList.contains(CLASSNAMES.TBARNAV) && popupObj && dom_1.isVisible(popupObj.element)) {
clst = popupObj.element.querySelector('.' + CLASSNAMES.ITEM);
if (trgt.classList.contains(CLASS_TBARNAV) && popupObj && dom_1.isVisible(popupObj.element)) {
clst = popupObj.element.querySelector('.' + CLASS_ITEM);
}
else if (rootEle === trgt || trgt.classList.contains(CLASSNAMES.TBARNAV)) {
clst = rootEle.querySelector('.' + CLASSNAMES.ITEM);
else if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
clst = rootEle.querySelector('.' + CLASS_ITEM);
}
else {
clst = dom_1.closest(trgt, '.' + CLASSNAMES.ITEM);
clst = dom_1.closest(trgt, '.' + CLASS_ITEM);
}

@@ -159,18 +171,25 @@ if (clst) {

case 'moveRight':
if (rootEle === trgt || trgt.classList.contains(CLASSNAMES.TBARNAV)) {
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
clst.firstChild.focus();
}
else {
this.nextEleFocus(clst);
this.eleFocus(clst, 'next');
}
break;
case 'moveLeft':
if (popupObj && trgt.classList.contains(CLASSNAMES.TBARNAV)) {
clst = clst.parentElement.lastElementChild;
if (popupObj && trgt.classList.contains(CLASS_TBARNAV)) {
if (this.tbarAlign) {
clst = dom_1.closest(clst, '.' + CLASS_ITEMS);
var innerItems = dom_2.selectAll('.' + CLASS_ITEM, clst);
clst = innerItems[innerItems.length - 1];
}
else {
clst = clst.parentElement.lastElementChild;
}
}
if (trgt.classList.contains(CLASSNAMES.TBARNAV) && !clst.classList.contains(CLASSNAMES.SEPARATOR)) {
if (trgt.classList.contains(CLASS_TBARNAV) && !clst.classList.contains(CLASS_SEPARATOR)) {
clst.firstChild.focus();
}
else {
this.prevEleFocus(clst);
this.eleFocus(clst, 'previous');
}

@@ -181,15 +200,12 @@ break;

if (popupObj.element.firstElementChild === clst) {
rootEle.querySelector('.' + CLASSNAMES.TBARNAV).focus();
rootEle.querySelector('.' + CLASS_TBARNAV).focus();
}
else {
this.prevEleFocus(clst);
this.eleFocus(clst, 'previous');
}
}
else {
return;
}
break;
case 'moveDown':
if (popupObj && dom_1.closest(trgt, '.e-popup')) {
this.nextEleFocus(clst);
this.eleFocus(clst, 'next');
}

@@ -199,9 +215,6 @@ else if (popupObj && dom_1.isVisible(popupObj.element)) {

}
else {
return;
}
break;
case 'tab':
var ele = clst.firstChild;
if (rootEle === trgt || trgt.classList.contains(CLASSNAMES.TBARNAV)) {
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
if (this.activeEle) {

@@ -217,3 +230,3 @@ this.activeEle.focus();

case 'popupClose':
if (popupObj && dom_1.isVisible(popupObj.element)) {
if (popupObj) {
popupObj.hide({ name: 'SlideUp', duration: 100 });

@@ -223,3 +236,3 @@ }

case 'popupOpen':
if (!trgt.classList.contains(CLASSNAMES.TBARNAV)) {
if (!trgt.classList.contains(CLASS_TBARNAV)) {
return;

@@ -238,51 +251,37 @@ }

};
Toolbar.prototype.prevEleFocus = function (closest) {
var prevSib = closest.previousElementSibling;
if (prevSib) {
if (prevSib.classList.contains(CLASSNAMES.SEPARATOR)) {
if (prevSib.previousSibling) {
prevSib = prevSib.previousSibling;
if (prevSib.classList.contains(CLASSNAMES.SEPARATOR)) {
this.prevEleFocus(prevSib);
Toolbar.prototype.eleFocus = function (closest, pos) {
var sib = Object(closest)[pos + 'ElementSibling'];
if (sib) {
if (sib.classList.contains(CLASS_SEPARATOR)) {
if (Object(sib)[pos + 'Sibling']) {
sib = Object(sib)[pos + 'Sibling'];
if (sib.classList.contains(CLASS_SEPARATOR)) {
this.eleFocus(sib, pos);
}
}
else {
return;
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
}
}
if (!util_1.isNullOrUndefined(prevSib.firstChild)) {
prevSib.firstChild.focus();
if (!util_1.isNullOrUndefined(sib.firstChild)) {
sib.firstChild.focus();
}
}
else {
return;
}
};
Toolbar.prototype.nextEleFocus = function (closest) {
var nextSib = closest.nextElementSibling;
if (nextSib) {
if (nextSib.classList.contains(CLASSNAMES.SEPARATOR)) {
if (nextSib.nextSibling) {
nextSib = nextSib.nextSibling;
if (nextSib.classList.contains(CLASSNAMES.SEPARATOR)) {
this.nextEleFocus(nextSib);
}
else if (this.tbarAlign) {
var elem = Object(closest.parentElement)[pos + 'ElementSibling'];
if (!util_1.isNullOrUndefined(elem) && elem.children.length > 0) {
if (pos === 'next') {
elem.querySelector('.' + CLASS_ITEM).firstChild.focus();
}
else if (this.popupObj) {
this.element.querySelector('.' + CLASSNAMES.TBARNAV).focus();
}
else {
return;
elem.lastElementChild.firstChild.focus();
}
}
if (!util_1.isNullOrUndefined(nextSib.firstChild)) {
nextSib.firstChild.focus();
else if (this.popupObj) {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
}
}
else if (this.popupObj) {
this.element.querySelector('.' + CLASSNAMES.TBARNAV).focus();
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
}
else {
return;
}
};

@@ -294,20 +293,20 @@ Toolbar.prototype.clickEventHandler = function (e) {

var popObj = this.popupObj;
var popupNav = dom_1.closest(trgt, ('.' + CLASSNAMES.TBARNAV));
var popupNav = dom_1.closest(trgt, ('.' + CLASS_TBARNAV));
if (!popupNav) {
popupNav = trgt;
}
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLASSNAMES.TBARNAV))) {
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLASS_TBARNAV))) {
clsList = trgt.querySelector('.e-icons').classList;
}
if (clsList.contains(CLASSNAMES.POPUPICON) || clsList.contains(CLASSNAMES.POPUPDOWN)) {
if (clsList.contains(CLASS_POPUPICON) || clsList.contains(CLASS_POPUPDOWN)) {
if (dom_1.isVisible(popObj.element)) {
popupNav.classList.remove(CLASSNAMES.TBARNAVACT);
popupNav.classList.remove(CLASS_TBARNAVACT);
popObj.hide({ name: 'SlideUp', duration: 100 });
}
else {
if (ele.classList.contains(CLASSNAMES.RTL)) {
if (ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLASSNAMES.RTL)) {
if (popObj.offsetX === 0 && !ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = false;

@@ -318,7 +317,13 @@ popObj.position = { X: 'right', Y: 'top' };

popObj.element.style.top = this.element.offsetHeight + 'px';
popupNav.classList.add(CLASSNAMES.TBARNAVACT);
popupNav.classList.add(CLASS_TBARNAVACT);
popObj.show({ name: 'SlideDown', duration: 100 });
}
}
this.trigger('clicked', e);
var itemObj;
var clst = dom_1.closest(e.target, '.' + CLASS_ITEM);
if (clst) {
itemObj = this.items[this.sliceFn.call(clst.parentElement.children).indexOf(clst)];
}
var eventArgs = { eventName: 'clicked', originalEvent: e, item: itemObj };
this.trigger('clicked', eventArgs);
};

@@ -342,11 +347,27 @@ ;

this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;
this.tbarAlgEle = { left: [], center: [], right: [] };
this.sliceFn = [].slice;
this.renderItems();
this.renderOverflowMode();
if (this.tbarAlign) {
this.itemPositioning();
}
};
Toolbar.prototype.initHScroll = function (element, innerItems) {
if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {
if (this.tbarAlign) {
this.element.querySelector('.' + CLASS_ITEMS + ' .' + CLASS_TBARCENTER).removeAttribute('style');
}
this.scrollModule = new h_scroll_1.HScroll({ scrollStep: 50, enableRtl: this.enableRtl }, innerItems[0]);
this.element.style.overflow = 'hidden';
this.scrollModule.element.classList.remove(CLASS_TBARPOS);
dom_1.setStyleAttribute(this.element, { overflow: 'hidden' });
}
};
Toolbar.prototype.itemWidthCal = function (innerItem) {
var width = 0;
this.sliceFn.call(innerItem.children).forEach(function (el) {
width += el.offsetWidth;
});
return width;
};
Toolbar.prototype.checkOverflow = function (element, innerItem) {

@@ -357,4 +378,10 @@ if (util_1.isNullOrUndefined(element) || util_1.isNullOrUndefined(innerItem)) {

var eleWidth = element.offsetWidth;
var itemWidth = innerItem.offsetWidth;
var popNav = element.querySelector('.' + CLASSNAMES.TBARNAV);
var itemWidth;
if (this.tbarAlign) {
itemWidth = this.itemWidthCal(innerItem);
}
else {
itemWidth = innerItem.offsetWidth;
}
var popNav = element.querySelector('.' + CLASS_TBARNAV);
if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : 0)) {

@@ -369,21 +396,23 @@ return true;

var ele = this.element;
var innerItems = ele.querySelector('.' + CLASS_ITEMS);
if (ele && ele.children.length > 0) {
this.offsetWid = ele.offsetWidth;
switch (this.overflowMode.toString()) {
switch (this.overflowMode) {
case 'Scrollable':
if (this.scrollModule) {
this.scrollModule.destroy();
this.scrollModule = null;
}
this.initHScroll(ele, ele.getElementsByClassName(CLASSNAMES.ITEMS));
this.destroyHScroll();
this.initHScroll(ele, ele.getElementsByClassName(CLASS_ITEMS));
break;
case 'Popup':
this.element.classList.add('e-toolpop');
if (this.checkOverflow(ele, ele.querySelector('.' + CLASSNAMES.ITEMS))) {
this.createOverflowIcon(ele, [].slice.call(ele.querySelectorAll('.' + CLASSNAMES.ITEMS + ' .' + CLASSNAMES.ITEM)));
this.element.querySelector('.' + CLASSNAMES.TBARNAV).setAttribute('tabIndex', '0');
if (this.tbarAlign) {
this.removePositioning();
}
else if (util_1.isNullOrUndefined(this.popupObj)) {
this.element.classList.remove('e-toolpop');
if (this.checkOverflow(ele, innerItems)) {
this.createOverflowIcon(ele, this.sliceFn.call(dom_2.selectAll('.' + CLASS_ITEMS + ' .' + CLASS_ITEM, ele)));
this.element.querySelector('.' + CLASS_TBARNAV).setAttribute('tabIndex', '0');
}
if (this.tbarAlign) {
innerItems.classList.add(CLASS_TBARPOS);
this.itemPositioning();
}
break;

@@ -401,8 +430,12 @@ }

var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);
if ((inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn * 2) > eleWidth) {
if (inEle[i].classList.contains(CLASSNAMES.SEPARATOR)) {
mrgn += parseFloat((window.getComputedStyle(inEle[i])).marginLeft);
if (inEle[i] === this.tbarEle[0]) {
this.tbarEleMrgn = mrgn;
}
if ((inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth) {
if (inEle[i].classList.contains(CLASS_SEPARATOR)) {
if (sepCheck > 0 && itemCount === itemPopCount) {
var sepEle = inEle[i + itemCount + (sepCheck - 1)];
if (sepEle.classList.contains(CLASSNAMES.SEPARATOR)) {
sepEle.style.display = 'none';
if (sepEle.classList.contains(CLASS_SEPARATOR)) {
dom_1.setStyleAttribute(sepEle, { display: 'none' });
}

@@ -417,36 +450,26 @@ }

}
if (inEle[i].classList.contains(CLASSNAMES.TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn * 2));
if (inEle[i].classList.contains(CLASS_TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
else if (!inEle[i].classList.contains(CLASSNAMES.SEPARATOR)) {
inEle[i].classList.add(CLASSNAMES.POPUP);
inEle[i].style.display = 'none';
else if (!inEle[i].classList.contains(CLASS_SEPARATOR)) {
inEle[i].classList.add(CLASS_POPUP);
dom_1.setStyleAttribute(inEle[i], { display: 'none' });
itemPopCount++;
}
else {
eleWidth -= (inEle[i].offsetWidth);
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
}
if (inEle[i].classList.contains(CLASSNAMES.POPOVERFLOW)) {
var elem = ele.querySelector('.' + CLASSNAMES.ITEMS + ' .' + CLASSNAMES.POPUP);
if (elem && elem.classList.contains(CLASSNAMES.POPOVERFLOW)) {
elem.style.display = '';
elem.classList.remove(CLASSNAMES.POPUP);
inEle[i].classList.add(CLASSNAMES.POPUP);
inEle[i].style.display = 'none';
}
}
}
if (pre) {
var popedEle = this.element.querySelectorAll('.' + CLASSNAMES.ITEM + ':not(.' + CLASSNAMES.POPUP + ')');
var inEl = [].slice.call(popedEle);
this.checkPriority(ele, inEl, eleWid, false);
var popedEle = dom_2.selectAll('.' + CLASS_ITEM + ':not(.' + CLASS_POPUP + ')', this.element);
this.checkPriority(ele, popedEle, eleWid, false);
}
};
Toolbar.prototype.createOverflowIcon = function (ele, innerEle) {
var innerNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
var innerNav = ele.querySelector('.' + CLASS_TBARNAV);
if (!innerNav) {
this.createPopupIcon(ele);
}
innerNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
innerNav = ele.querySelector('.' + CLASS_TBARNAV);
var eleWidth = (ele.offsetWidth - (innerNav.offsetWidth));

@@ -464,3 +487,3 @@ if (this.enableRtl) {

var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASSNAMES.POPUPNAV);
var className = 'e-' + element.id.concat('_nav ' + CLASS_POPUPNAV);
var nav = dom_2.createElement('div', { id: id, className: className });

@@ -470,3 +493,3 @@ if (ej2_base_1.Browser.info.name === 'msie') {

}
var navItem = dom_2.createElement('div', { className: CLASSNAMES.POPUPDOWN + ' e-icons' });
var navItem = dom_2.createElement('div', { className: CLASS_POPUPDOWN + ' e-icons' });
nav.appendChild(navItem);

@@ -481,3 +504,3 @@ nav.setAttribute('tabindex', '0');

var eleItem;
eleItem = element.querySelector('.' + CLASSNAMES.ITEM + ':not(.' + CLASSNAMES.SEPARATOR + ' ):not(.' + CLASSNAMES.POPUP + ' )');
eleItem = element.querySelector('.' + CLASS_ITEM + ':not(.' + CLASS_SEPARATOR + ' ):not(.' + CLASS_POPUP + ' )');
eleHeight = element.style.height === 'auto' ? null : eleItem.offsetHeight;

@@ -487,16 +510,15 @@ var ele;

var popupPri = [];
if (element.querySelector('#' + element.id + '_popup.' + CLASSNAMES.POPUPCLASS)) {
ele = element.querySelector('#' + element.id + '_popup.' + CLASSNAMES.POPUPCLASS);
if (element.querySelector('#' + element.id + '_popup.' + CLASS_POPUPCLASS)) {
ele = element.querySelector('#' + element.id + '_popup.' + CLASS_POPUPCLASS);
}
else {
ele = dom_2.createElement('div', { id: element.id + '_popup', className: CLASSNAMES.POPUPCLASS });
ele = dom_2.createElement('div', { id: element.id + '_popup', className: CLASS_POPUPCLASS });
}
var poppedEle = element.querySelector('.' + CLASSNAMES.ITEMS).querySelectorAll('.' + CLASSNAMES.POPUP);
var popupEle = [].slice.call(poppedEle);
nodes = ele.querySelectorAll('.' + CLASSNAMES.TBAROVERFLOW);
var poppedEle = this.sliceFn.call(dom_2.selectAll('.' + CLASS_POPUP, element.querySelector('.' + CLASS_ITEMS)));
nodes = dom_2.selectAll('.' + CLASS_TBAROVERFLOW, ele);
var nodeIndex = 0;
var nodePri = 0;
popupEle.forEach(function (el, index) {
nodes = ele.querySelectorAll('.' + CLASSNAMES.TBAROVERFLOW);
if (el.classList.contains(CLASSNAMES.TBAROVERFLOW) && nodes.length > 0) {
poppedEle.forEach(function (el, index) {
nodes = dom_2.selectAll('.' + CLASS_TBAROVERFLOW, ele);
if (el.classList.contains(CLASS_TBAROVERFLOW) && nodes.length > 0) {
if (_this.tbResize && nodes.length > index) {

@@ -511,7 +533,11 @@ ele.insertBefore(el, nodes[index]);

}
else if (el.classList.contains(CLASSNAMES.TBAROVERFLOW)) {
else if (el.classList.contains(CLASS_TBAROVERFLOW)) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLASSNAMES.POPOVERFLOW)) {
else if (_this.tbResize && el.classList.contains(CLASS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLASS_POPOVERFLOW)) {
popupPri.push(el);

@@ -526,4 +552,3 @@ }

}
el.style.display = '';
el.style.height = eleHeight + 'px';
dom_1.setStyleAttribute(el, { display: '', height: eleHeight + 'px' });
});

@@ -533,7 +558,7 @@ popupPri.forEach(function (el) {

});
var tbarEle = element.querySelector('.' + CLASSNAMES.ITEMS).querySelectorAll('.' + CLASSNAMES.ITEM);
var tbarEle = dom_2.selectAll('.' + CLASS_ITEM, element.querySelector('.' + CLASS_ITEMS));
for (var i = tbarEle.length - 1; i >= 0; i--) {
var tbarElement = tbarEle[i];
if (tbarElement.classList.contains(CLASSNAMES.SEPARATOR)) {
tbarElement.style.display = 'none';
if (tbarElement.classList.contains(CLASS_SEPARATOR)) {
dom_1.setStyleAttribute(tbarElement, { display: 'none' });
}

@@ -544,5 +569,8 @@ else {

}
this.initPopup(element, ele);
};
Toolbar.prototype.initPopup = function (element, ele) {
if (!this.popupObj) {
element.appendChild(ele);
this.element.style.overflow = '';
dom_1.setStyleAttribute(this.element, { overflow: '' });
var popup = new ej2_popups_1.Popup(ele, {

@@ -564,7 +592,5 @@ relateTo: element,

else {
var popupEle_1 = this.popupObj.element;
popupEle_1.style.maxHeight = '';
popupEle_1.style.display = 'block';
popupEle_1.style.maxHeight = popupEle_1.offsetHeight + 'px';
popupEle_1.style.display = 'none';
var popupEle = this.popupObj.element;
dom_1.setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
dom_1.setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
}

@@ -582,3 +608,4 @@ };

var toolEle = this.element;
var popupNav = toolEle.querySelector('.' + CLASSNAMES.TBARNAV);
var popupNav = toolEle.querySelector('.' + CLASS_TBARNAV);
dom_1.setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.height = 'auto';

@@ -589,6 +616,5 @@ popObj.element.style.maxHeight = '';

if (!util_1.isNullOrUndefined(popupNav)) {
var popIcon = popupNav.firstElementChild.classList;
popupNav.classList.add(CLASSNAMES.TBARNAVACT);
popIcon.remove(CLASSNAMES.POPUPDOWN);
popIcon.add(CLASSNAMES.POPUPICON);
var popIcon = popupNav.firstElementChild;
popupNav.classList.add(CLASS_TBARNAVACT);
dom_2.classList(popIcon, [CLASS_POPUPICON], [CLASS_POPUPDOWN]);
}

@@ -598,3 +624,3 @@ if ((window.innerHeight + window.scrollY) < popupElePos) {

popObj.height = overflowHeight + 'px';
popObj.element.style.maxHeight = overflowHeight + 'px';
dom_1.setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
}

@@ -604,26 +630,91 @@ };

var element = this.element.parentElement;
var popupNav = element.querySelector('.' + CLASSNAMES.TBARNAV);
var popupNav = element.querySelector('.' + CLASS_TBARNAV);
if (popupNav) {
var popIcon = popupNav.firstElementChild.classList;
popupNav.classList.remove(CLASSNAMES.TBARNAVACT);
popIcon.remove(CLASSNAMES.POPUPICON);
popIcon.add(CLASSNAMES.POPUPDOWN);
var popIcon = popupNav.firstElementChild;
popupNav.classList.remove(CLASS_TBARNAVACT);
dom_2.classList(popIcon, [CLASS_POPUPDOWN], [CLASS_POPUPICON]);
}
};
Toolbar.prototype.removePositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLASS_TBARPOS)) {
return;
}
item.classList.remove(CLASS_TBARPOS);
var innerItem = this.sliceFn.call(item.childNodes);
innerItem[1].removeAttribute('style');
innerItem[2].removeAttribute('style');
};
Toolbar.prototype.refreshPositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
item.classList.add(CLASS_TBARPOS);
this.itemPositioning();
};
Toolbar.prototype.itemPositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLASS_TBARPOS)) {
return;
}
var popupNav = this.element.querySelector('.' + CLASS_TBARNAV);
var innerItem;
if (this.scrollModule) {
innerItem = this.sliceFn.call(item.querySelector('.' + CLASS_TBARSCROLL).children);
}
else {
innerItem = this.sliceFn.call(item.childNodes);
}
var margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;
var tbarWid = this.element.offsetWidth;
if (popupNav) {
tbarWid -= popupNav.offsetWidth;
innerItem[2].style.right = popupNav.offsetWidth + 'px';
}
if (tbarWid <= margin) {
return;
}
var value = (((tbarWid - margin)) - innerItem[1].offsetWidth) / 2;
innerItem[1].style.marginLeft = (innerItem[0].offsetWidth + value) + 'px';
};
Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {
var _this = this;
if (pos === 0 && item.align !== 'left') {
itemEle.appendChild(dom_2.createElement('div', { className: CLASS_TBARLEFT }));
itemEle.appendChild(dom_2.createElement('div', { className: CLASS_TBARCENTER }));
itemEle.appendChild(dom_2.createElement('div', { className: CLASS_TBARRIGHT }));
this.tbarAlign = true;
itemEle.classList.add(CLASS_TBARPOS);
}
else if (item.align !== 'left') {
var alignEle = itemEle.childNodes;
var leftAlign_1 = dom_2.createElement('div', { className: CLASS_TBARLEFT });
this.sliceFn.call(alignEle).forEach(function (el) {
_this.tbarAlgEle.left.push(el);
leftAlign_1.appendChild(el);
});
itemEle.appendChild(leftAlign_1);
itemEle.appendChild(dom_2.createElement('div', { className: CLASS_TBARCENTER }));
itemEle.appendChild(dom_2.createElement('div', { className: CLASS_TBARRIGHT }));
this.tbarAlign = true;
itemEle.classList.add(CLASS_TBARPOS);
}
};
Toolbar.prototype.renderItems = function () {
var _this = this;
var ele = this.element;
var itemEleDom;
var innerItem;
var popupNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
var innerPos;
var items = this.items;
if (ele && ele.children.length > 0) {
var navEle = ele.querySelectorAll('.' + CLASSNAMES.TBARNAV);
var navEle = dom_2.selectAll('.' + CLASS_TBARNAV, ele);
itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
}
if (this.trgtEle != null) {
this.trgtEle.classList.add(CLASSNAMES.ITEMS);
var innerEle = [].slice.call(this.trgtEle.children);
this.trgtEle.classList.add(CLASS_ITEMS);
this.tbarEle = [];
var innerEle = this.sliceFn.call(this.trgtEle.children);
innerEle.forEach(function (ele) {
if (ele.tagName === 'DIV') {
ele.classList.add(CLASSNAMES.ITEM);
_this.tbarEle.push(ele);
ele.classList.add(CLASS_ITEM);
}

@@ -634,3 +725,3 @@ });

if (!itemEleDom) {
itemEleDom = dom_2.createElement('div', { className: CLASSNAMES.ITEMS });
itemEleDom = dom_2.createElement('div', { className: CLASS_ITEMS });
}

@@ -640,3 +731,13 @@ for (var i = 0; i < items.length; i++) {

this.tbarEle.push(innerItem);
itemEleDom.appendChild(innerItem);
if (!this.tbarAlign) {
this.tbarItemAlign(items[i], itemEleDom, i);
}
innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());
if (innerPos) {
this.tbarAlgEle[items[i].align].push(innerItem);
innerPos.appendChild(innerItem);
}
else {
itemEleDom.appendChild(innerItem);
}
}

@@ -661,25 +762,17 @@ ele.appendChild(itemEleDom);

};
Toolbar.prototype.popupRefresh = function (popupEle, destroy) {
var ele = this.element;
var popNav = ele.querySelector('.' + CLASSNAMES.TBARNAV);
var innerEle = ele.querySelector('.' + CLASSNAMES.ITEMS);
Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {
var eleSplice = this.tbarEle;
var priEleCnt;
var index;
if (util_1.isNullOrUndefined(popNav)) {
return;
}
innerEle.removeAttribute('style');
popupEle.style.display = 'block';
var width = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);
var innerEle = this.element.querySelector('.' + CLASS_ITEMS);
var _loop_1 = function (el) {
el.style.position = 'absolute';
var elWidth = el.offsetWidth;
var btnText = el.querySelector('.' + CLASSNAMES.TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLASSNAMES.TBARTEXT)) {
var btnText = el.querySelector('.' + CLASS_TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLASS_TBARTEXT)) {
var btn = el.children[0];
if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLASSNAMES.TBARTEXT)) {
if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLASS_TBARTEXT)) {
btnText.style.display = 'none';
}
else if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLASSNAMES.POPUPTEXT)) {
else if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLASS_POPUPTEXT)) {
btnText.style.display = 'block';

@@ -694,12 +787,21 @@ }

}
if (el === this_1.tbarEle[0]) {
elWidth += this_1.tbarEleMrgn;
}
el.style.position = '';
if (elWidth < width || destroy) {
if (!el.classList.contains(CLASSNAMES.POPOVERFLOW)) {
el.classList.remove(CLASSNAMES.POPUP);
if (!el.classList.contains(CLASS_POPOVERFLOW)) {
el.classList.remove(CLASS_POPUP);
}
index = this_1.tbarEle.indexOf(el);
if (this_1.tbarAlign) {
var pos = this_1.items[index].align;
index = this_1.tbarAlgEle[pos].indexOf(el);
eleSplice = this_1.tbarAlgEle[pos];
innerEle = this_1.element.querySelector('.' + CLASS_ITEMS + ' .' + 'e-toolbar-' + pos);
}
var sepBeforePri_1 = 0;
eleSplice.slice(0, index).forEach(function (el) {
if (el.classList.contains(CLASSNAMES.TBAROVERFLOW) || el.classList.contains(CLASSNAMES.SEPARATOR)) {
if (el.classList.contains(CLASSNAMES.SEPARATOR)) {
if (el.classList.contains(CLASS_TBAROVERFLOW) || el.classList.contains(CLASS_SEPARATOR)) {
if (el.classList.contains(CLASS_SEPARATOR)) {
el.style.display = '';

@@ -711,9 +813,9 @@ width -= el.offsetWidth;

});
if (el.classList.contains(CLASSNAMES.TBAROVERFLOW)) {
if (el.classList.contains(CLASS_TBAROVERFLOW)) {
var popEle = this_1.popupObj.element;
var query = '.' + CLASSNAMES.ITEM + ':not(.' + CLASSNAMES.SEPARATOR + '):not(.' + CLASSNAMES.TBAROVERFLOW + ')';
priEleCnt = popEle.querySelectorAll('.' + CLASSNAMES.POPUP + ':not(.' + CLASSNAMES.TBAROVERFLOW + ')').length;
if (innerEle.querySelectorAll(query).length === 0) {
var query = '.' + CLASS_ITEM + ':not(.' + CLASS_SEPARATOR + '):not(.' + CLASS_TBAROVERFLOW + ')';
priEleCnt = dom_2.selectAll('.' + CLASS_POPUP + ':not(.' + CLASS_TBAROVERFLOW + ')', popEle).length;
if (dom_2.selectAll(query, innerEle).length === 0) {
var eleSep = innerEle.children[index - (index - sepBeforePri_1) - 1];
if (!util_1.isNullOrUndefined(eleSep) && eleSep.classList.contains(CLASSNAMES.SEPARATOR) && !dom_1.isVisible(eleSep)) {
if (!util_1.isNullOrUndefined(eleSep) && eleSep.classList.contains(CLASS_SEPARATOR) && !dom_1.isVisible(eleSep)) {
var sepDisplay = 'none';

@@ -730,3 +832,5 @@ eleSep.style.display = 'inherit';

else {
prevSep.style.display = sepDisplay;
if (prevSep.classList.contains(CLASS_SEPARATOR)) {
prevSep.style.display = sepDisplay;
}
}

@@ -749,3 +853,3 @@ eleSep.style.display = '';

else {
priEleCnt = this_1.popupObj.element.querySelectorAll(CLASSNAMES.TBAROVERFLOW).length;
priEleCnt = dom_2.selectAll('.' + CLASS_TBAROVERFLOW, this_1.popupObj.element).length;
innerEle.insertBefore(el, innerEle.children[index - priEleCnt]);

@@ -761,3 +865,3 @@ width -= el.offsetWidth;

var this_1 = this;
for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {
for (var _i = 0, _a = this.sliceFn.call(popupEle.children); _i < _a.length; _i++) {
var el = _a[_i];

@@ -768,3 +872,15 @@ var state_1 = _loop_1(el);

}
popupEle.style.display = 'none';
};
Toolbar.prototype.popupRefresh = function (popupEle, destroy) {
var ele = this.element;
var popNav = ele.querySelector('.' + CLASS_TBARNAV);
var innerEle = ele.querySelector('.' + CLASS_ITEMS);
if (util_1.isNullOrUndefined(popNav)) {
return;
}
innerEle.removeAttribute('style');
popupEle.style.display = 'block';
var width = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);
this.popupEleRefresh(width, popupEle, destroy);
popupEle.style.display = '';
if (popupEle.children.length === 0) {

@@ -786,3 +902,3 @@ dom_1.detach(popNav);

if (len && len > 1) {
isEnable ? dom_1.removeClass(elements, CLASSNAMES.DISABLE) : dom_1.addClass(elements, CLASSNAMES.DISABLE);
isEnable ? dom_1.removeClass(elements, CLASS_DISABLE) : dom_1.addClass(elements, CLASS_DISABLE);
}

@@ -792,3 +908,3 @@ else {

ele = (len && len === 1) ? elements[0] : items;
isEnable ? ele.classList.remove(CLASSNAMES.DISABLE) : ele.classList.add(CLASSNAMES.DISABLE);
isEnable ? ele.classList.remove(CLASS_DISABLE) : ele.classList.add(CLASS_DISABLE);
}

@@ -798,13 +914,35 @@ };

var innerItems;
var itemsDiv = this.element.querySelector('.' + CLASSNAMES.ITEMS);
var itemsDiv = this.element.querySelector('.' + CLASS_ITEMS);
var innerEle;
var itemAgn = 'left';
if (util_1.isNullOrUndefined(index)) {
index = 0;
}
items.forEach(function (e) {
if (!util_1.isNullOrUndefined(e.align) && e.align !== 'left' && itemAgn === 'left') {
itemAgn = e.align;
}
});
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var item = items_1[_i];
innerItems = this.element.querySelectorAll('.' + CLASSNAMES.ITEM);
innerItems = dom_2.selectAll('.' + CLASS_ITEM, this.element);
item.align = itemAgn;
innerEle = this.renderSubComponent(item);
if (this.tbarEle.length > index && innerItems.length > 0) {
innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
if (this.tbarAlign) {
var algIndex = item.align[0] === 'l' ? 0 : item.align[0] === 'c' ? 1 : 2;
var ele = void 0;
if (this.scrollModule) {
ele = dom_1.closest(innerItems[0], '.' + CLASS_ITEMS + ' .' + CLASS_TBARSCROLL).children[algIndex];
}
else {
ele = dom_1.closest(innerItems[0], '.' + CLASS_ITEMS).children[algIndex];
}
ele.insertBefore(innerEle, ele.children[index]);
this.tbarAlgEle[item.align].splice(index, 0, innerEle);
this.refreshPositioning();
}
else {
innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
}
this.items.splice(index, 0, item);

@@ -820,5 +958,6 @@ this.tbarEle.splice(index, 0, innerEle);

Toolbar.prototype.removeItems = function (args) {
var elements = args;
var index;
var innerItems = [].slice.call(this.element.querySelectorAll('.' + CLASSNAMES.ITEM));
if (typeof (args) === 'number') {
var innerItems = this.sliceFn.call(dom_2.selectAll('.' + CLASS_ITEM, this.element));
if (typeof (elements) === 'number') {
index = parseInt(args.toString(), 10);

@@ -828,5 +967,13 @@ this.removeItemByIndex(index, innerItems);

else {
for (var _i = 0, _a = [].slice.call(args); _i < _a.length; _i++) {
var ele = _a[_i];
index = this.tbarEle.indexOf(ele);
if (elements && elements.length > 1) {
for (var _i = 0, _a = this.sliceFn.call(elements); _i < _a.length; _i++) {
var ele = _a[_i];
index = this.tbarEle.indexOf(ele);
this.removeItemByIndex(index, innerItems);
innerItems = dom_2.selectAll('.' + CLASS_ITEM, this.element);
}
}
else {
var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;
index = innerItems.indexOf(ele);
this.removeItemByIndex(index, innerItems);

@@ -839,10 +986,14 @@ }

if (this.tbarEle[index] && innerItems[index]) {
var eleIdx = innerItems.indexOf(this.tbarEle[index]);
dom_1.detach(innerItems[eleIdx]);
this.items.splice(index, 1);
this.tbarEle.splice(index, 1);
var eleIdx = this.tbarEle.indexOf(innerItems[index]);
if (this.tbarAlign) {
var indexAgn = this.tbarAlgEle[this.items[eleIdx].align].indexOf(this.tbarEle[eleIdx]);
this.tbarAlgEle[this.items[eleIdx].align].splice(indexAgn, 1);
}
dom_1.detach(innerItems[index]);
this.items.splice(eleIdx, 1);
this.tbarEle.splice(eleIdx, 1);
}
};
Toolbar.prototype.templateRender = function (templateProp, innerEle, item) {
var itemType = item.type.toString();
var itemType = item.type;
if (typeof (templateProp) === 'string') {

@@ -856,4 +1007,2 @@ innerEle.innerHTML = templateProp;

}
innerEle.classList.add(CLASSNAMES.TEMPLATE);
this.tbarEle.push(innerEle);
}

@@ -864,7 +1013,7 @@ else if (itemType === 'Input' || itemType === '2') {

item.id ? (ele.id = item.id) : (ele.id = util_1.getUniqueID('tbr-ipt'));
innerEle.appendChild(ele);
templateProperty.appendTo(ele);
innerEle.appendChild(ele);
innerEle.classList.add(CLASSNAMES.TEMPLATE);
this.tbarEle.push(innerEle);
}
innerEle.classList.add(CLASS_TEMPLATE);
this.tbarEle.push(innerEle);
};

@@ -874,9 +1023,6 @@ Toolbar.prototype.renderSubComponent = function (item) {

var dom;
innerEle = dom_2.createElement('div', { className: CLASSNAMES.ITEM });
innerEle = dom_2.createElement('div', { className: CLASS_ITEM });
if (!this.tbarEle) {
this.tbarEle = [];
}
if (item.cssClass) {
innerEle.className = innerEle.className + ' ' + item.cssClass;
}
if (item.htmlAttributes) {

@@ -888,2 +1034,5 @@ this.setAttr(item.htmlAttributes, innerEle);

}
if (item.cssClass) {
innerEle.className = innerEle.className + ' ' + item.cssClass;
}
if (item.template) {

@@ -893,10 +1042,10 @@ this.templateRender(item.template, innerEle, item);

else {
switch (item.type.toString()) {
switch (item.type) {
case 'Button':
var textStr = item.text;
dom = dom_2.createElement('button', { className: 'e-tbar-btn' });
dom = dom_2.createElement('button', { className: CLASS_TBARBTN });
item.id ? (dom.id = item.id) : dom.id = util_1.getUniqueID('e-tbr-btn');
var btnTxt = dom_2.createElement('div', { className: 'e-tbar-btn-text' });
if (item.text) {
btnTxt.innerHTML = item.text;
if (textStr) {
btnTxt.innerHTML = textStr;
dom.appendChild(btnTxt);

@@ -908,14 +1057,12 @@ }

var btnObj = new ej2_buttons_1.Button({}, dom);
if (item.prefixIcon && item.suffixIcon) {
btnObj.iconCss = item.prefixIcon + ' e-icons';
btnObj.iconPosition = 'left';
if (item.prefixIcon || item.suffixIcon) {
if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {
btnObj.iconCss = item.prefixIcon + ' e-icons';
btnObj.iconPosition = 'left';
}
else {
btnObj.iconCss = item.suffixIcon + ' e-icons';
btnObj.iconPosition = 'right';
}
}
else if (item.prefixIcon) {
btnObj.iconCss = item.prefixIcon + ' e-icons';
btnObj.iconPosition = 'left';
}
else if (item.suffixIcon) {
btnObj.iconCss = item.suffixIcon + ' e-icons';
btnObj.iconPosition = 'right';
}
btnObj.dataBind();

@@ -930,3 +1077,3 @@ if (item.width) {

case 'Separator':
innerEle.classList.add(CLASSNAMES.SEPARATOR);
innerEle.classList.add(CLASS_SEPARATOR);
break;

@@ -936,19 +1083,19 @@ }

if (item.showTextOn) {
var sTxt = item.showTextOn.toString();
if (sTxt === 'Toolbar' || sTxt === '2') {
innerEle.classList.add(CLASSNAMES.POPUPTEXT);
var sTxt = item.showTextOn;
if (sTxt === 'Toolbar') {
innerEle.classList.add(CLASS_POPUPTEXT);
innerEle.classList.add('e-tbtn-align');
}
else if (sTxt === 'Overflow' || sTxt === '1') {
innerEle.classList.add(CLASSNAMES.TBARTEXT);
else if (sTxt === 'Overflow') {
innerEle.classList.add(CLASS_TBARTEXT);
}
}
if (item.overflow) {
var overflow = item.overflow.toString();
if (overflow === 'Show' || overflow === '1') {
innerEle.classList.add(CLASSNAMES.TBAROVERFLOW);
var overflow = item.overflow;
if (overflow === 'Show') {
innerEle.classList.add(CLASS_TBAROVERFLOW);
}
else if (overflow === 'Hide' || overflow === '2') {
if (!innerEle.classList.contains(CLASSNAMES.SEPARATOR)) {
innerEle.classList.add(CLASSNAMES.POPOVERFLOW);
else if (overflow === 'Hide') {
if (!innerEle.classList.contains(CLASS_SEPARATOR)) {
innerEle.classList.add(CLASS_POPOVERFLOW);
}

@@ -960,15 +1107,10 @@ }

Toolbar.prototype.itemClick = function (e) {
var target = e.currentTarget;
var ele = target.firstChild;
this.activeEleRemove(ele);
this.activeEleRemove(e.currentTarget.firstChild);
this.activeEle.focus();
};
Toolbar.prototype.activeEleRemove = function (curEle) {
if (util_1.isNullOrUndefined(this.activeEle)) {
this.activeEle = curEle;
}
else {
if (!util_1.isNullOrUndefined(this.activeEle)) {
this.activeEle.setAttribute('tabindex', '-1');
this.activeEle = curEle;
}
this.activeEle = curEle;
curEle.removeAttribute('tabindex');

@@ -985,11 +1127,23 @@ };

this.tbResize = true;
if (this.popupObj && dom_1.isVisible(this.popupObj.element)) {
if (this.tbarAlign) {
this.itemPositioning();
}
if (this.popupObj) {
this.popupObj.hide();
}
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLASSNAMES.ITEMS)[0]);
if (this.offsetWid > ele.offsetWidth || this.scrollModule || checkOverflow) {
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLASS_ITEMS)[0]);
if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {
return;
}
if (this.offsetWid > ele.offsetWidth || checkOverflow) {
this.renderOverflowMode();
}
if (this.popupObj) {
if (this.tbarAlign) {
this.removePositioning();
}
this.popupRefresh(this.popupObj.element, false);
if (this.tbarAlign) {
this.refreshPositioning();
}
}

@@ -1004,6 +1158,3 @@ this.offsetWid = ele.offsetWidth;

case 'items':
if (this.scrollModule) {
this.scrollModule.destroy();
this.scrollModule = null;
}
this.destroyHScroll();
this.renderItems();

@@ -1025,8 +1176,6 @@ this.renderOverflowMode();

if (this.scrollModule) {
this.scrollModule.element.classList.remove(CLASSNAMES.RTL);
this.scrollModule.destroy();
this.scrollModule = null;
this.scrollModule.element.classList.remove(CLASS_RTL);
this.destroyHScroll();
}
if (this.popupObj) {
var popNav = this.element.querySelector('.' + CLASSNAMES.TBARNAV);
this.popupRefresh(this.popupObj.element, true);

@@ -1036,3 +1185,3 @@ }

if (this.enableRtl) {
this.element.classList.add(CLASSNAMES.RTL);
this.element.classList.add(CLASS_RTL);
}

@@ -1042,17 +1191,17 @@ break;

if (newProp.enableRtl) {
this.element.classList.add(CLASSNAMES.RTL);
this.element.classList.add(CLASS_RTL);
if (!util_1.isNullOrUndefined(this.scrollModule)) {
this.scrollModule.element.classList.add(CLASSNAMES.RTL);
this.scrollModule.element.classList.add(CLASS_RTL);
}
if (!util_1.isNullOrUndefined(this.popupObj)) {
this.popupObj.element.classList.add(CLASSNAMES.RTL);
this.popupObj.element.classList.add(CLASS_RTL);
}
}
else {
this.element.classList.remove(CLASSNAMES.RTL);
this.element.classList.remove(CLASS_RTL);
if (!util_1.isNullOrUndefined(this.scrollModule)) {
this.scrollModule.element.classList.remove(CLASSNAMES.RTL);
this.scrollModule.element.classList.remove(CLASS_RTL);
}
if (!util_1.isNullOrUndefined(this.popupObj)) {
this.popupObj.element.classList.remove(CLASSNAMES.RTL);
this.popupObj.element.classList.remove(CLASS_RTL);
}

@@ -1059,0 +1208,0 @@ }

dist/ej2-navigations.umd.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-navigations.js

Sorry, the diff of this file is too big to display

dist/global/ej2-navigations.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-navigations.min.js.map

Sorry, the diff of this file is not supported yet

styles/h-scroll/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/h-scroll/material.css

Sorry, the diff of this file is not supported yet

styles/material.css

Sorry, the diff of this file is not supported yet

styles/toolbar/_definition.scss

Sorry, the diff of this file is not supported yet

styles/toolbar/_layout.scss

Sorry, the diff of this file is not supported yet

styles/toolbar/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/toolbar/_theme.scss

Sorry, the diff of this file is not supported yet

styles/toolbar/material.css

Sorry, the diff of this file is not supported yet

styles/toolbar/material.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc